Руководство

Свободно управляйте размером и цветом векторных иконок в любом месте вашего контента. Начало работы. Подключение. Изменение размера. Модификаторы «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>
Обратите внимание, чтобы избежать конфликта имен, например, если подключена библиотека иконок Uikit 3, к названию данных значков добавляется префикс m-.

Если icon это единственный параметр в значении атрибута, вы можете использовать укороченный вариант uk-icon="m-NAME"

Примеры с единственным параметром в значении атрибута.

<span uk-icon="m-favorite"></span>
<span class="uk-text-danger" uk-icon="m-favorite"></span>
<span class="uk-text-success uk-margin-small-right uk-margin-small-left" uk-icon="m-double-arrow"></span>
<a href="#" class="uk-text-primary" uk-icon="m-house"></a>

Иконочная библиотека

С полным списком доступных иконок колекции 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>

При использовании material-иконки внутри якоря вы можете сбросить стиль ссылки по умолчанию на более приглушенный цвет, для этого добавьте класс .uk-icon-link.

<a href="" class="uk-icon-link" uk-icon="m-folder"></a>

Если вам понадобилось создать вертикальное иконочное меню - навигацию состоящую из иконок, обратите внимание на компонент UIkit 3 - Иконочная навигация.

<div>
    <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="m-border-color"></a>
    <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="m-format-color-fill"></a>
    <a href="#" class="uk-icon-link" uk-icon="m-bubble-chart"></a>
</div>

Модификатор «Button»

Чтобы создать значок - кнопку, к примеру, которую можно использовать для иконок с уведомлениями, установите элементу <a> класс-модификатор .uk-icon-button.

<a href="" class="uk-icon-button" uk-icon="m-public"></a>
<div>
    <a href="" class="uk-icon-button uk-text-primary uk-margin-small-right" uk-icon="m-notifications"></a>
    <a href="" class="uk-icon-button uk-text-success uk-margin-small-right" uk-icon="m-thumb-up"></a>
    <a href="" class="uk-icon-button uk-text-danger" uk-icon="m-person"></a>
</div>

Для того чтобы использовать значки 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-спрайты с категориями можно здесь.

icon
<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.