Проблема с модулем иконок Django CMS: Отсутствие статического пути и дополнительного класса в генерируемой разметке
Я пытаюсь использовать модуль djangocms-icon для включения моих собственных SVG-иконок в мой проект Django CMS. Следуя документации, я успешно добавил иконки Material Design. Однако при добавлении своих собственных SVG-иконок я сталкиваюсь с проблемами.
В файле settings.py я добавил следующий код:
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'),
]
Я создал файл iconset.json в корне моего проекта:
{
"svg": true,
"spritePath": "sprites/icons.svg",
"iconClass": "svg-icon",
"iconClassFix": "svg-icon-",
"icons": [
"svg-icon-card",
"svg-icon-card-add"
]
}
Я также создал свой файл icons.svg в 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>
Дополнительно я создал 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>
Проблема возникает в сгенерированной разметке. При проверке виджета добавления иконок не хватает /static/ перед sprites/icons.svg#svg-icon-card. Кроме того, при рендеринге страницы после # в ссылке xlink появляется лишний класс svg-icon. Сгенерированная разметка выглядит следующим образом:
<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>
Перед sprites/icons.svg#svg-icon-card.
отсутствует /static/.На моей странице также возникла проблема с лишним "svg-icon " после # в 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>
Как я могу решить эти проблемы?
Я ожидал, что моя иконка будет отображаться как в пикере иконок, так и на странице, но поскольку xlink не находит путь, ничего не отображается.