Руководство

asUIkit MDI

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

  • <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>

Для того чтобы использовать значки Material в кнопке копонента Кнопка UIkit 3 достаточно указать всё по умолчанию, ничего лишнего не требуется. 

  • <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>
  • <div class="uk-background-secondary uk-light uk-padding">
    <button class="uk-button uk-button-default">Подписка <span class="uk-margin-small-left" uk-icon="m-subscriptions"></span></button>
</div>

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

При использовании фреймворка UIkit вы можете создавать иконки из изображения, масштабировать любое фоновое изображение до размера иконки. Просто добавьте класс .uk-icon-image и путь к фоновому изображению.

Иконка из фоновой картинки

  • <span class="uk-icon uk-icon-image" style="background-image: url(/demo/img/dark.jpg);"></span

SVG-спрайты

Вместе с колекцией asUIkit Material Icons 1000+ вы можете использовать SVG-спрайты.
Подробнее узнать как использовать SVG-спрайты вы можете здесь.
Бесплатно скачать SVG-спрайты с категориями можно здесь. 

  • <img src="/demo/icons/asuikit-sprite-symbol-m-action.svg#m-commute" width="80" height="80" uk-svg>

Опции компонента

Опция Значение По умолчанию Описание
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'; })