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

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

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

Добавьте свои иконки или переопределите имеющиеся

Вы можете перезаписать любой из значков библиотеки UIkit или создать и добавить собственные. Для начала необходимо получить исходники UIkit из репозитория на Github. После этого появится возможность добавлять свои иконки в формате SVG и включать их в сборку.

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

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

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

yarn compile

В результате компилятор добавить ваши изображения в библиотеку в этих местах:

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

Как избежать конфликтов имен

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

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

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