Пользовательские иконки

Библиотека иконок UIkit 3 может быть увеличена и перезаписана с помощью ваших собственных файлов. Дополнить коллекцию можно своими новыми иконками SVG.

Библиотека иконок UIkit 3 содержит иконки SVG, которые расположены в файле JavaScript uikit-icons.min.js (или неминимизированная версия uikit-icons.js). Этот файл включает в себя все иконки, никаких дополнительных файлов SVG не требуется. Ниже, в этом документе описывается, как вы можете добавить свои собственные иконочные значки в библиотеку или перезаписать существующие.

Примечание Обратите внимание на компонент Иконки для рассмотрения всех иконок UIkit 3 по умолчанию. Также доступен набор масштабируемых иконок asUIkit Material Icons 1000+.

Добавить, перезаписать

Добавить новые, перезаписать иконки UIkit 3

Вы можете перезаписать любую из иконок UIkit 3 по умолчанию и / или создать дополнительные. Для начала, пожалуйста, подготовьте UIkit.

В результате структура должна получиться следующей:

...
/custom/..   <!-- созданный каталог пользовательской темы  -->
/dist/..
...
/src/..
...

Теперь вы можете добавлять свои собственные иконки SVG и включать их в процесс сборки UIkit.

Чтобы найти дополнительные файлы иконок пакетный менеджер будет проверять две директори:

Пользовательская папка: /custom/icons/*.svg
Папка с настраиваемой, пользовательской темой: /custom/mytheme/icons/*.svg

Скомпилируйте UIkit 3, чтобы дополнительные иконки были добавлены в сборку и / или перезаписаны. Используйте команду:

pnpm compile

Теперь ваши дополнительные иконки будут добавлены в библиотеку и расположены в одном из следующих мест:

dist/js/uikit-icons.js если вы добавили иконки в UIkit глобально
dist/js/uikit-icons-mytheme.js если иконки расположены внутри пользовательской темы

Результат

Имя новой иконки равно названию файла.

Конфликт имен

Избегайте конфликтов имен

Если будет добавлена иконка с существующим именем, то произойдёт перезапись иконки по умолчанию с тем же именем. Например, если будет добавлена иконка с именем close.svg по пути /custom/icons/close.svg, то она перезапишет значок закрытия по умолчанию.

Если добавляемая новая иконка использует имя которое раньше не использовалось, то такое имя будет добавлено в качестве новой иконки. Например, добавив иконку example.svg по пути /custom/icons/example.svg будет создана новая иконка, которую в дальнейшем можно будет использовать в проекте как . Если icon это единственный параметр в значении атрибута, то можно использовать короткую запись  (подробнее).

Чтобы проверить, какие имена уже используются, посмотрите в двух каталогах /src/images/components и /src/images/icons. При создании новой иконки убедитесь, что её имя не используется ни в одной из этих двух папок. В противном случае иконка будет перезаписана.

Подсказка Можно просто при создании / добавлении новых иконок использовать в названии файла префикс.

При добавлении пользовательского префикса (в названии файла) вопрос с случайной перезаписью иконки исчезает сам по себе. К примеру , если будет добавлена иконка с именем my_close.svg по пути /custom/icons/my_close.svg, то она не перезапишет значок закрытия по умолчанию, а создаст новую иконку с именем my_close, которую в дальнейшем можно будет использовать в проекте как .