Иконки

Компонент Icon иконки Uikit 3

Вставляйте векторные иконки в любом месте вашего сайта.

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

Как использовать компонент Icon в UIkit 3. Пользуемся иконками.

Обязательно включите скрипт библиотеки иконок, как это сделать написано в разделе установка. Самый простой путь:

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

Добавьте атрибут uk-icon к элементам <span> или <a>. Для отображения какой-либо иконки добавьте параметр icon: NAME в этот атрибут. Иконки будут наследовать цвет вашего текста.

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

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

Если вы хотите просто вывести иконку без параметров, используйте сокращенный вариант: uk-icon="NAME"

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

  • <span class="uk-margin-small-right" uk-icon="check"></span>

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

Библиотека иконок UIkit 3

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

Общее

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

Устройства

  • 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
  • etsy
  • dribbble
  • 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: 2 к атрибуту uk-icon для ее увеличения в два раза или увеличивайте ее в любое количество раз.

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

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

Модификатор ссылок

С помощью класса .uk-icon-link можно установить приглушенный цвет ссылок при использовании иконки внутри.

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

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

Модификатор кнопок

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

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

  • <a href="" class="uk-icon-button uk-margin-small-right" uk-icon="twitter"></a>
<a href="" class="uk-icon-button  uk-margin-small-right" uk-icon="facebook"></a>
<a href="" class="uk-icon-button" uk-icon="google-plus"></a>

Модификатор изображений

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

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

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

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Опция Значение По умолчанию Описание
icon String '' Показать иконку.
ratio Number 1 Задать увеличение.

Напоминаем, что icon — Основная опция, поэтому она может быть пропущена, если другие опции не установлены. 

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

JavaScript

Подробнее о компонентах JavaScript.

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

UIkit.icon(element, options);

Свойства

svg

Промисы JavaScript, которые добавляют узел SVG.

UIkit.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })