Компонент Иконка 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="" class="uk-text-primary" uk-icon="uikit"></a>

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

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

App

  • bag
  • 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
  • discord
  • dribbble
  • etsy
  • facebook
  • flickr
  • foursquare
  • github
  • github-alt
  • gitter
  • google
  • instagram
  • joomla
  • linkedin
  • pagekit
  • pinterest
  • reddit
  • soundcloud
  • tiktok
  • tripadvisor
  • tumblr
  • twitch
  • 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>

Бонус

Иконки социальных сетей

Дополнительно иконки: vk, odnoklassniki, viber, telegram.

  • <ul class="as-social uk-grid-small uk-flex-middle" data-uk-grid>

    <li>
        <a class="as-icon-facebook uk-icon-button" href="#" data-uk-icon="icon: facebook" title="Facebook"></a>
    </li>
    <li>
        <a class="as-icon-youtube uk-icon-button" href="#" data-uk-icon="icon: youtube" title="YouTube"></a>
    </li>
    <li>
        <a class="as-icon-instagram uk-icon-button" href="#" data-uk-icon="icon: instagram" title="Instagram"></a>
    </li>
    <li>
        <a class="as-icon-twitter uk-icon-button" href="#" data-uk-icon="icon: twitter" title="Twitter"></a>
    </li>
    <li>
        <a class="as-icon-vk uk-icon uk-icon-button" href="#" title="ВКонтакте">
            <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="vk">
                <path d="M21.54736,7H18.25688a.74281.74281,0,0,0-.65452.39156s-1.31237,2.41693-1.73392,3.231C14.73438,12.8125,14,12.125,14,11.10863V7.60417A1.10417,1.10417,0,0,0,12.89583,6.5h-2.474a1.9818,1.9818,0,0,0-1.751.8125s1.25626-.20312,1.25626,1.48958c0,.41974.02162,1.62723.04132,2.64a.72943.72943,0,0,1-1.273.50431,21.54029,21.54029,0,0,1-2.4982-4.54359A.69314.69314,0,0,0,5.5668,7C4.8532,7,3.42522,7,2.57719,7a.508.508,0,0,0-.47969.68481C3.00529,10.17487,6.91576,18,11.37917,18h1.87865A.74219.74219,0,0,0,14,17.25781V16.12342a.7293.7293,0,0,1,1.22868-.5315l2.24861,2.1127A1.08911,1.08911,0,0,0,18.223,18h2.95281c1.42415,0,1.42415-.98824.64768-1.75294-.54645-.53817-2.51832-2.61663-2.51832-2.61663A1.01862,1.01862,0,0,1,19.2268,12.307c.63737-.83876,1.67988-2.21175,2.122-2.79993C21.95313,8.70313,23.04688,7,21.54736,7Z"></path>
            </svg>
        </a>
    </li>
    <li>
        <a class="as-icon-odnoklassniki uk-icon uk-icon-button" href="#" title="Одноклассники">
            <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="odnoklassniki">
                <path d="m12.030686,12.146098c2.617032,0 4.738255,-2.121548 4.738255,-4.738643c0,-2.61703 -2.121223,-4.738643 -4.738255,-4.738643c-2.61742,0 -4.738643,2.121613 -4.738643,4.738643c0,2.61703 2.121223,4.738643 4.738643,4.738643zm0,-7.069845c1.287235,0 2.331205,1.043574 2.331205,2.331202c0,1.287628 -1.04397,2.331203 -2.331205,2.331203c-1.287628,0 -2.331592,-1.043575 -2.331592,-2.331203c0,-1.287628 1.043964,-2.331202 2.331592,-2.331202z"></path>
                <path d="m15.49965,12.515539c-1.331227,1.048992 -3.468964,1.048992 -3.468964,1.048992c0,0 -2.138188,0 -3.469224,-1.048992c-0.984829,-0.775827 -1.725739,-0.328972 -1.993223,0.208807c-0.466369,0.936789 0.060443,1.389713 1.249836,2.153009c1.015895,0.652266 2.411484,0.895928 3.312705,0.986918l-0.752527,0.752394c-1.05976,1.05937 -2.082579,2.082449 -2.792156,2.792156c-0.424403,0.42414 -0.424403,1.112567 0,1.536642l0.128,0.127934c0.42453,0.424401 1.112435,0.424401 1.536572,0l2.79255,-2.792091c1.05976,1.059697 2.082579,2.082515 2.792156,2.792091c0.424403,0.424401 1.112308,0.424401 1.536839,0l0.128,-0.127934c0.424137,-0.424727 0.424137,-1.112502 0,-1.536642l-2.792746,-2.792548l-0.754611,-0.754614c0.902066,-0.092686 2.2829,-0.337458 3.289985,-0.984372c1.189202,-0.763295 1.716338,-1.21622 1.249836,-2.153009c-0.267351,-0.537648 -1.008718,-0.984569 -1.993026,-0.208741z"></path>
            </svg>
        </a>
    </li>
    <li>
        <a class="as-icon-whatsapp uk-icon-button" 
           href="https://wa.me/0123456789" 
           target="_blank" rel="nofollow" data-uk-icon="icon: whatsapp" title="WhatsApp"></a>
    </li>
    <li>
        <a class="as-icon-viber uk-icon uk-icon-button" 
           href="viber://chat?number=%2B90123456789" 
           target="_blank" rel="nofollow" title="Viber">
           <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="viber">
               <path d="m14.110407,7.291783c0.574696,0.122457 1.015173,0.340851 1.391539,0.693232c0.484294,0.457313 0.749734,1.010792 0.866425,1.805957c0.078871,0.518425 0.046585,0.72229 -0.137216,0.891332c-0.17204,0.15728 -0.49006,0.163046 -0.682625,0.014529c-0.139984,-0.104931 -0.183801,-0.215626 -0.215857,-0.515658c-0.037821,-0.399197 -0.107928,-0.678704 -0.227618,-0.937917c-0.256676,-0.550481 -0.708914,-0.835984 -1.473177,-0.929153c-0.358839,-0.043817 -0.466767,-0.084406 -0.583459,-0.221392c-0.21309,-0.253447 -0.131221,-0.664175 0.163276,-0.81569c0.110927,-0.055348 0.157511,-0.061113 0.402656,-0.046584c0.151976,0.008763 0.376597,0.035053 0.496056,0.061344zm-0.621281,-2.199388c1.770903,0.259212 3.141917,1.080668 4.040629,2.414783c0.504819,0.751579 0.819841,1.634148 0.92777,2.580828c0.037821,0.346616 0.037821,0.978735 -0.002998,1.083666c-0.038052,0.098934 -0.160509,0.232922 -0.26544,0.28827c-0.113694,0.058346 -0.355841,0.05235 -0.490059,-0.017527c-0.224621,-0.113693 -0.29173,-0.294266 -0.29173,-0.783634c0,-0.754346 -0.195563,-1.549742 -0.533877,-2.167332c-0.385129,-0.704994 -0.945296,-1.287531 -1.627921,-1.692493c-0.586457,-0.349615 -1.452882,-0.608828 -2.243435,-0.672939c-0.285964,-0.023292 -0.443475,-0.081638 -0.551404,-0.206863c-0.166274,-0.189336 -0.183801,-0.445781 -0.043817,-0.658409c0.151515,-0.235229 0.384899,-0.273281 1.082282,-0.16835zm-6.870521,-1.797193c0.102163,0.035053 0.259674,0.116461 0.350075,0.174807c0.554171,0.367141 2.097456,2.339141 2.602275,3.323642c0.288732,0.562243 0.385129,0.978736 0.294728,1.287531c-0.0934,0.332088 -0.247913,0.506895 -0.939531,1.063142c-0.277201,0.224159 -0.536875,0.454314 -0.577694,0.515658c-0.104931,0.151515 -0.189567,0.448549 -0.189567,0.658409c0.002998,0.48637 0.31802,1.36917 0.732207,2.047873c0.320787,0.527189 0.895483,1.202895 1.464414,1.721551c0.668095,0.611825 1.25732,1.028319 1.922648,1.357408c0.854895,0.425257 1.37701,0.532954 1.759142,0.35538c0.096167,-0.043817 0.19833,-0.101933 0.230385,-0.128223c0.029058,-0.02629 0.253909,-0.300032 0.498823,-0.603062c0.472533,-0.594298 0.580462,-0.690465 0.904478,-0.801161c0.411419,-0.139753 0.831371,-0.101932 1.254552,0.113694c0.321018,0.166044 1.02117,0.600064 1.473178,0.914625c0.59522,0.416493 1.867069,1.453574 2.03934,1.660437c0.30326,0.372907 0.355841,0.850513 0.151745,1.377933c-0.215857,0.556246 -1.055992,1.599093 -1.642449,2.044875c-0.530879,0.401964 -0.907245,0.556246 -1.403301,0.579539c-0.408421,0.020294 -0.577693,-0.014529 -1.099809,-0.230156c-4.095746,-1.686497 -6.968389,-3.464577 -9.564898,-6.922438c-1.356485,-1.805956 -2.787143,-4.417658 -3.49306,-6.360601c-0.411419,-1.133018 -0.431714,-1.625384 -0.093399,-2.205153c0.14598,-0.244684 0.76726,-0.850513 1.219499,-1.188366c0.752732,-0.559245 1.099809,-0.766108 1.37701,-0.824454c0.189567,-0.040819 0.519348,-0.008763 0.729209,0.06711zm6.669193,-0.314561c1.003643,0.125225 1.81449,0.366911 2.704438,0.801161c0.875189,0.428255 1.435356,0.833217 2.176326,1.570036c0.694386,0.696231 1.079516,1.22342 1.487937,2.041877c0.568931,1.141782 0.892716,2.49942 0.948064,3.993583c0.020525,0.509662 0.005765,0.623356 -0.110927,0.769106c-0.221622,0.282505 -0.708914,0.23592 -0.875189,-0.081639c-0.05258,-0.10493 -0.067109,-0.195101 -0.084636,-0.603061c-0.029288,-0.626354 -0.072875,-1.031086 -0.160509,-1.514688c-0.34431,-1.896359 -1.254553,-3.411047 -2.707436,-4.497711c-1.210735,-0.908859 -2.46229,-1.351642 -4.101742,-1.447809c-0.554401,-0.032056 -0.650568,-0.05235 -0.776024,-0.148517c-0.233383,-0.183571 -0.245145,-0.614592 -0.020524,-0.81569c0.137216,-0.125225 0.233383,-0.142751 0.708914,-0.128223c0.248374,0.008994 0.612978,0.038283 0.811308,0.061575z"></path>
           </svg>
       </a>
    </li>
    <li>
        <a class="as-icon-telegram uk-icon uk-icon-button" 
           href="#" 
           target="_blank" rel="nofollow" title="Telegram">
           <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="telegram">
               <path d="m21.005697,5.550602l-2.74611,12.950637c-0.207176,0.914021 -0.74748,1.141452 -1.515294,0.710964l-4.184146,-3.083356l-2.018885,1.941824c-0.223392,0.223392 -0.775524,0.536686 -0.751124,-0.033221l0.21082,-3.817906l7.754913,-7.007478c0.337166,-0.300579 -0.073103,-0.467156 -0.524051,-0.16655l-9.586957,6.036571l-4.127295,-1.291786c-0.897769,-0.280315 -0.913985,-0.897805 0.186841,-1.328373l16.143532,-6.219364c0.747399,-0.280279 1.401485,0.166506 1.157757,1.308038z"></path>
           </svg>
        </a>
    </li>

</ul>
<style>
    .as-social [class*=as-icon-]{color:#fff;background-color:#1e87f0;border-radius:50%;transition-property:border-radius,background-color;}
    .as-icon-facebook:hover{background-color:#3B5999}
    .as-icon-youtube:hover{background-color:#FF0000}
    .as-icon-instagram:hover{background-color:#DB307F}
    .as-icon-twitter:hover{background-color:#3FACE2}
    .as-icon-vk:hover{background-color:#5181B8}
    .as-icon-odnoklassniki:hover{background-color:#F58220}
    .as-icon-whatsapp:hover{background-color:#3EE25B}
    .as-icon-viber:hover{background-color:#7B519D}
    .as-icon-telegram:hover{background-color:#24A1DE}
    [class*=as-icon-]:hover{color:#fff;border-radius:6px}
</style>

Параметры для атрибута

При использовании компонента 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'; })