Руководство
Свободно управляйте размером и цветом векторных иконок в любом месте вашего контента. Начало работы. Подключение. Изменение размера. Модификаторы «Link», «Button», «Image». SVG-спрайты.
Коллекция высококачественных иконок asUIkit Material Icons 1000+ для фреймворка UIkit 3 содержит в себе более 1000 векторных иконок SVG, в которую входят дизайнерские иконки впечатляющие своим разнообразием. Компонент внедряет на сайт SVG потрясающим образом, так, что они свободно наследуют цвет и могут быть стилизованы с помощью CSS.
Библиотека содержит иконки SVG связанные в один JavaScript файл asuikit-icons-material-*.min.js.
Этот файл включает в себя все иконки, никаких дополнительных файлов SVG не требуется.
Ознакомиться с полным списком векторных иконок можно в разделе Все иконки.
Начало работы. Подключение
Убедитесь что UIkit 3 уже подключён, для получения более подробной информации см. Инструкции по установке.
После того как вы предварительно выбрали необходимую категорию иконок и загрузили, необходимо подключить скрипт библиотеки.
Подключение выбранной категории иконок
<script src="/js/asuikit-icons-material-*.min.js"></script>
<!-- где * - это необходимая категория -->
Также можно подключить иконки сразу всех категорий одним файлом.
Подключение полного набора со всеми доступными иконками
<script src="/js/asuikit-icons-material-all.min.js"></script>
<!-- сжатая, минимизированная версия -->
Чтобы применить компонент asUIkit Material Icons 1000+ добавьте к элементу
<span> или <a> атрибут uk-icon. Чтобы отобразить существующую иконку,
вам нужно добавить к атрибуту опцию со значением содержащим префикс m- и имя иконки - icon: m-NAME.
И вуаля! У вас есть значок вектора, который наследует цвет так же, как и ваш текст!
<span uk-icon="icon: m-chat"></span>
<a href="" uk-icon="icon: m-email"></a>
m-.
Если icon это единственный параметр в значении атрибута, вы можете использовать укороченный вариант uk-icon="m-NAME"
Примеры с единственным параметром в значении атрибута.
<span uk-icon="m-favorite"></span>
Иконочная библиотека
С полным списком доступных иконок колекции asUIkit Material Icons 1000+ состоящей из 1000+ иконочных значков созданных для фреймворка UIkit 3 можно ознакомиться в разделе Все иконки.
Размер иконки
Параметр «Ratio»
Изменить размер векторной Material иконки без потери качества очень просто.
Чтобы удвоить размер значка необходимо добавить к атрибуту uk-icon параметр ratio: 2,
или любое другое число, в зависимости от того, каким должен оказаться размер Material иконки.
<span class="uk-margin-small-right" uk-icon="icon: m-color-lens; ratio: 2"></span>
<span uk-icon="icon: m-train; ratio: 4.5"></span>
<span uk-icon="icon: m-beach-access; ratio: 7.5"></span>Модификатор «Link»
При использовании material-иконки внутри якоря
вы можете сбросить стиль ссылки по умолчанию на более приглушенный цвет,
для этого добавьте класс .uk-icon-link.
<a href="" class="uk-icon-link" uk-icon="m-folder"></a>
Если вам понадобилось создать вертикальное иконочное меню - навигацию состоящую из иконок, обратите внимание на компонент UIkit 3 - Иконочная навигация.
Модификатор «Button»
Чтобы создать значок - кнопку, к примеру,
которую можно использовать для иконок с уведомлениями,
установите элементу <a> класс-модификатор .uk-icon-button.
<a href="" class="uk-icon-button" uk-icon="m-public"></a>
Для того чтобы использовать значки Material в кнопке копонента Кнопка UIkit 3 достаточно указать всё по умолчанию, ничего лишнего не требуется.
<div class="uk-background-secondary uk-light uk-padding">
<button type="button" class="uk-button uk-button-default">
Подписка <span class="uk-margin-small-left" uk-icon="m-subscriptions"></span>
</button>
</div>Модификатор «Image»
При использовании фреймворка UIkit 3 вы можете создавать иконки из изображения,
масштабировать любое фоновое изображение до размера иконки. Просто добавьте класс .uk-icon-image и путь к фоновому изображению.
Иконка из фоновой картинки
<span class="uk-icon uk-icon-image" style="background-image: url(images/dark.webp);"></span>SVG-спрайты
Вместе с колекцией asUIkit Material Icons 1000+
вы можете использовать SVG-спрайты.
Подробнее узнать как использовать SVG-спрайты вы можете здесь.
Бесплатно скачать SVG-спрайты с категориями можно здесь.
<img src="images/asuikit-sprite-symbol-m-action.svg#m-commute" width="80" height="80" alt="icon" uk-svg>Параметры для атрибута
При использовании asUIkit Material Icons к атрибуту uk-icon можно применить любой из этих параметров.
Разделяйте несколько вариантов точкой с запятой.
Для получения дополнительной информации ознакомьтесь с главой
Конфигурация компонента.
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
icon |
String | '' |
Иконка для отображения. |
ratio |
Number | 1 |
Размер иконки. |
icon является Primary опцией.
Если icon это единственный параметр в значении атрибута, то её ключ можно не использовать.
<span uk-icon="m-radio"></span>
JavaScript
Инициализация
UIkit.icon(element, options);
Properties
svg
A JavaScript Promise that will resolve with the added SVG Node.
UIkit.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })
Доступность
Стандарт WAI-ARIA. Специальные возможности
Установите соответствующие роли, состояния и свойства WAI-ARIA.
Если используется элемент <a>, то рекомендуется установить свойство aria-label для элемента <a>,
чтобы описать его значение.
<a href="" uk-icon="icon: m-computer" aria-label="Иконка"></a>
W3C - Accessibility, Википедия - WAI-ARIA, MDN - aria-label.