Компонент Иконка : Icon

Размещайте масштабируемые векторные иконки в любом месте вашего контента. Масштабируем любое изображение до размера иконки. Модификаторы. Руководство.

Коллекция UIkit 3 поставляется с собственной системой иконок SVG и обширной библиотекой, в которую входит большое количество красивых контурных иконочных значков. Этот компонент внедряет на сайт SVG, так что они наследуют цвет и могут быть стилизованы с помощью CSS.

Применение. Размещение

Обязательно включите скрипт библиотеки иконок.
Для получения более подробной информации см. инструкции по установке.

<script src="/js/uikit-icons.min.js"></script>

Чтобы применить компонент иконочных значков, добавьте к элементу <span> или <a> атрибут uk-icon. Чтобы отобразить существующую иконку, вам нужно добавить к атрибуту опцию icon: NAME.
И вуаля, у вас есть значок вектора, который наследует цвет так же, как ваш текст!

<span uk-icon="icon: check"></span>

<a href="" uk-icon="icon: heart"></a>

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

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

<span uk-icon="heart"></span>

<span class="uk-text-danger uk-margin-small-right" uk-icon="heart"></span>
<span class="uk-margin-small-right" uk-icon="arrow-right"></span>
<a href="https://asuikit.com/v3" class="uk-text-primary" uk-icon="uikit"></a>

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

Здесь представлен обзор доступных в настоящее время иконок фреймворка UIkit 3. Со временем будут добавляться новые иконки в данный список.

App

ban
bell
bolt
bookmark
calendar
camera
cart
check
clock
close
code
cog
comment
commenting
comments
credit-card
future
git-branch
git-fork
grid
happy
hashtag
heart
history
home
image
info
lifesaver
link
location
lock
list
mail
menu
microphone
minus
minus-circle
more
more-vertical
move
nut
paint-bucket
pencil
play
play-circle
plus
plus-circle
print
question
receiver
refresh
rss
search
settings
sign-in
sign-out
social
star
table
tag
thumbnails
trash
unlock
user
users
video-camera
warning
world

Устройства. Девайсы

tv
desktop
laptop
tablet
phone
tablet-landscape
phone-landscape

Место хранения

file
file-text
file-pdf
copy
file-edit
folder
album
push
pull
server
database
cloud-upload
cloud-download
download
upload

Направления

reply
forward
expand
shrink
arrow-up
arrow-down
arrow-left
arrow-right
chevron-up
chevron-down
chevron-left
chevron-right
chevron-double-left
chevron-double-right
triangle-up
triangle-down
triangle-left
triangle-right

Редактор

bold
italic
strikethrough
quote-right

Бренды

500px
behance
dribbble
etsy
facebook
flickr
foursquare
github
github-alt
gitter
google
google-plus
instagram
joomla
linkedin
pagekit
pinterest
reddit
soundcloud
tripadvisor
tumblr
twitter
uikit
vimeo
whatsapp
wordpress
xing
yelp
youtube

Изменение размера иконки : Ratio

Изменить размер векторной иконки без потери качества очень просто. Добавьте к атрибуту uk-icon параметр ratio: 2, чтобы удвоить размер, или любое другое число, в зависимости от того, каким должен оказаться размер иконки. Ниже показаны примеры.

<span uk-icon="icon: check; ratio: 2"></span>

<span class="uk-margin-small-right" uk-icon="icon: happy; ratio: 2"></span>
<span uk-icon="icon: happy; ratio: 3.5"></span>

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

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

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

<div>
    <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="copy"></a>
    <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="file-edit"></a>
    <a href="#" class="uk-icon-link" uk-icon="trash"></a>
</div>

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

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

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

<a href="" class="uk-icon-button" uk-icon="twitter"></a>

<div>
    <a href="" class="uk-icon-button uk-text-primary uk-margin-small-right" uk-icon="twitter"></a>
    <a href="" class="uk-icon-button uk-text-success uk-margin-small-right" uk-icon="whatsapp"></a>
    <a href="" class="uk-icon-button uk-text-danger" uk-icon="youtube"></a>
</div>

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

<div class="uk-light uk-background-secondary uk-padding">
    <button class="uk-button uk-button-default">Печать <span class="uk-margin-small-left" uk-icon="print"></span></button>
</div>

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

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

Пример. Иконка из картинки.

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

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

При использовании компонента Icon к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция	Значение	По умолчанию	Описание
`icon`	String	`''`	Иконка для отображения.
`ratio`	Number	`1`	Размер иконки.

icon является Primary опцией. Если icon это единственный параметр в значении атрибута, то её ключ можно не использовать.

<span uk-icon="heart"></span>

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

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'; })