Issue with Django CMS Icon Module: Missing Static Path and Extra Class in Generated Markup

[Enkil11]

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?

[Enkil11]

I've found a workaround. I replaced "spritePath": "sprites/icons.svg" with "spritePath": "/static/sprites/icons.svg" in the json file. I created a custom filter:

@register.filter(name='patch_icon') 
def patch_icon(value, arg):
    spaced_prefix = '{} '.format(arg) 
    text = value.replace(spaced_prefix, '') 
    return text

which I used in my template:

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

I hope this helps!