django-cms / djangocms-icon Goto Github PK

I am attempting to utilize the djangocms-icon module to incorporate my own SVG icons into my Django CMS project. Following the documentation, I have successfully added Material Design icons. However, I encounter issues when adding my custom SVG icons.

In my settings.py, I added the following code:

with open('iconset.json') as fh:
    ICONSET = fh.read()

DJANGOCMS_ICON_SETS = [
    ('fontawesome5regular', 'far', 'Font Awesome 5 Regular', 'latest'),
    ('fontawesome5solid', 'fas', 'Font Awesome 5 Solid', 'latest'),
    ('fontawesome5brands', 'fab', 'Font Awesome 5 Brands', 'latest'),
    ('materialdesign', 'zmdi', 'Material Design'),
    (ICONSET, 'svg-icon', 'My Icons'),
]

DJANGOCMS_ICON_TEMPLATES = [
    ('svg', 'SVG template'),
]

I have created an iconset.json file at the root of my project:

{
    "svg": true,
    "spritePath": "sprites/icons.svg",
    "iconClass": "svg-icon",
    "iconClassFix": "svg-icon-",
    "icons": [
        "svg-icon-card",
        "svg-icon-card-add"
    ]
}

I have also created my icons.svg file in static/sprites/icons.svg:

<svg width="0" height="0" class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="svg-icon-card">
    <!-- path data -->
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="svg-icon-card-add">
    <!-- path data -->
  </symbol>
</svg>

Additionally, I created templates/djangocms_icon/svg/icon.html:

{% load cms_tags static %}
<span class="icon {{ instance.attributes.class }}">
    <svg role="presentation">
        <use xlink:href="{% static 'sprites/icons.svg' %}#{{ instance.icon }}"></use>
    </svg>
</span>

The issue arises in the generated markup. In the icon addition widget inspection, there is a missing /static/ before sprites/icons.svg#svg-icon-card. Additionally, in the page render, there is an extra svg-icon class after the # in the xlink. The generated markup looks like this:

<span class="djangocms-svg-icon svg-icon svg-icon-card">
    <svg role="presentation">
        <use xlink:href="sprites/icons.svg#svg-icon-card"></use>
    </svg>
</span>

There is a missing /static/ before sprites/icons.svg#svg-icon-card.

There also an issue in my rendered page with an extra "svg-icon " after the # in the xlink.

<span class="icon  cms-plugin cms-plugin-3730">
    <svg role="presentation">
        <use xlink:href="/static/sprites/icons.svg#svg-icon svg-icon-card"></use>
    </svg>
</span>

How can I resolve these issues?

I would like to use Font Awesome 5 Pro.
I saw that in Bootstrap-Iconpicker it is possible to specify the version of the iconset to be used e.g
data-iconset-version="5.3.1_pro"
I could not find a way to set the version in this plugin. Could you add this possibility?

If I ran python manage.py makemigrations after updating to Django 4.2/DjangoCMS 3.11, new migrations will be generated.

After update Django 2.1.8 and Djangocms 3.6.0 I can't see de icons to chooose

There is a problem with the icon selector widget using multiple icon sets.

Example:

DJANGOCMS_ICON_SETS = [
    (ICONSET, 'icon', 'SVG icons'),
    (ICONSET2, 'icon2', 'SVG icons 2'),
]

If one does select an icon from "SVG icons 2" and saves the plugin, opens it again, the wrong icon will be preselected (first of "SVG icons").
Steps to reproduce:

1. Use following configuration:

DJANGOCMS_ICON_SETS = [
    ('fontawesome', 'fa', 'Font Awesome'),
    (ICONSET, 'icon', 'SVG icons'),
]

2. Insert an icon plugin with an icon from "SVG Icons" into a placeholder.
3. Open the plugin again - wrong icon will be selected.

Can you please give a sample of how the assets.html file should look like

icon class is not rendered correctly.

<i class="" aria-hidden="true"></i>

Based on my investigation, the problem is caused when passing a parameter instance.icon_left or instance.icon_right from templates/djangocms_bootstrap4/link/default/link.html to templates/djangocms_icon/includes/icon.html

{% with icon_class=instance.icon_left instance=instance.icon_left %}{% include "djangocms_icon/includes/icon.html" %}{% endwith %}

<i class="{{ instance.icon }}...</i>

• Instance.icon_left or instance.icon_right is String type
• instance in icon.html is Icon Instance
• The String type does not have icon property, so it will render empty string by errors

The easy is to create a custom template for templates/djangocms_icon/includes/icon.html, as follows

{% load cms_tags %}<i class="{% if icon_class %}{{ icon_class }}{% else %}{{ instance.icon }}{% endif %}{% if instance.attributes.class %} {{ instance.attributes.class }}{% endif %}" aria-hidden="true"{% for key, value in instance.attributes.items %}{% if key != 'class' %}{{ key }}="{{ value }}" {% endif %}{% endfor %}></i>

Hello developers,
font awesome released its icon set in version 6 a time ago. Is it planned to update this app and the icon set to the latest version?
Thx mavo

When installing Django Icon - it doesn't mean that Font Awesome will be installed also
Maybe it's a good idea to stress on it, and to add some step for installing it

This is still targeted to work with old Font Aweseome 4.7.0. Would be great if this could be updated to be compatible with the current version of Font Awesome (5.0). Alternatively, a slightly more elaborate documentation would be helpful, e.g. with some hints on how to configure Font Awesome 5.0 as ones "own" SVG icon set.

Should I find the time to figure it out, I will follow up here.

Keep up the excellent work, team divio!

Hi,

in the documentation (readme) you have that Font Awesome 4 is used by default, but at the same time Font Awesome 5 is already used as default in the code.

Could you, please, fix this typo?

Thank you for this and for your work!
Daniel

The new changes to enable FA5 support break compatibility with Bootstrap 4 links from the djangocms-bootstrap4 library, because that library stores the Icon as a charfield and it has not been updated to follow the conventions of the updated djangocms-icon. The result has a few effects, including icons on existing links being lost in the update, and editing being broken due to an indexing error resulting from the charfield in the Bootstrap library not storing the icon in the form "fa fa-". This may be an issue that needs to be fixed in the Bootstrap 4 library itself, but until the point in which that library is updated it creates a number of issues for anyone attempting to use both.