Компонент Иконка : 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>

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

Параметры компонента

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

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