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

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

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

Обратите внимание на компонент Иконки UIkit 3 для рассмотрения всех иконок по умолчанию.


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

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

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

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

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

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

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

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

yarn compile

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

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

Результат

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

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

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

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

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

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

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

Документация
Компоненты