Компонент Иконка 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
  • crosshairs
  • eye
  • eye-slash
  • future
  • git-branch
  • git-fork
  • grid
  • happy
  • hashtag
  • heart
  • history
  • home
  • image
  • info
  • lifesaver
  • link
  • link-external
  • 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-right
  • 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
  • android
  • android-robot
  • apple
  • behance
  • discord
  • dribbble
  • etsy
  • facebook
  • flickr
  • foursquare
  • github
  • github-alt
  • gitter
  • google
  • instagram
  • joomla
  • linkedin
  • mastodon
  • microsoft
  • pinterest
  • reddit
  • signal
  • soundcloud
  • telegram
  • threads
  • tiktok
  • tripadvisor
  • tumblr
  • twitch
  • uikit
  • vimeo
  • whatsapp
  • wordpress
  • x (twitter)
  • xing
  • yelp
  • yootheme
  • 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-margin-small-right" uk-icon="x"></a>
        <a href="" class="uk-icon-button uk-text-primary uk-margin-small-right" uk-icon="telegram"></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" type="button">
        	Печать <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="https://www.facebook.com/#" data-uk-icon="icon: facebook" title="Facebook"></a>
        </li>
        <li>
            <a class="as-icon-youtube uk-icon-button" href="https://www.youtube.com/#" data-uk-icon="icon: youtube" title="YouTube"></a>
        </li>
        <li>
            <a class="as-icon-instagram uk-icon-button" href="https://www.instagram.com/#" data-uk-icon="icon: instagram" title="Instagram"></a>
        </li>
        <li>
            <a class="as-icon-twitter uk-icon-button" href="https://www.twitter.com/#" data-uk-icon="icon: x" title="X (Twitter)"></a>
        </li>
        <li>
            <a class="as-icon-vk uk-icon uk-icon-button" href="https://www.vk.com/#" 
               rel="noopener noreferrer" 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="https://ok.ru/#" 
               rel="noopener noreferrer" 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 32 32" xmlns="http://www.w3.org/2000/svg" data-svg="viber">
               	   <path d="M15.198 0.005c-2.568 0.031-8.089 0.453-11.177 3.286-2.297 2.276-3.099 5.641-3.193 9.802-0.078 4.146-0.172 11.932 7.333 14.052v3.229c0 0-0.047 1.292 0.807 1.557 1.052 0.333 1.651-0.661 2.651-1.729l1.865-2.109c5.135 0.427 9.068-0.557 9.521-0.703 1.042-0.333 6.911-1.083 7.87-8.87 0.984-8.042-0.479-13.109-3.12-15.401h-0.016c-0.797-0.734-4-3.068-11.156-3.094 0 0-0.531-0.036-1.385-0.021zM15.286 2.266c0.729-0.005 1.172 0.026 1.172 0.026 6.057 0.016 8.948 1.839 9.63 2.453 2.224 1.906 3.37 6.474 2.531 13.188-0.797 6.51-5.557 6.922-6.438 7.203-0.375 0.12-3.839 0.974-8.203 0.693 0 0-3.25 3.922-4.266 4.932-0.161 0.177-0.349 0.229-0.469 0.203-0.172-0.042-0.224-0.255-0.214-0.547l0.031-5.359c-6.365-1.76-5.99-8.401-5.922-11.87 0.078-3.469 0.729-6.307 2.667-8.229 2.609-2.359 7.297-2.677 9.479-2.693zM15.766 5.734c-0.219-0.005-0.401 0.177-0.401 0.396 0 0.224 0.182 0.401 0.401 0.401 2.005-0.036 3.938 0.724 5.375 2.12 1.453 1.411 2.161 3.307 2.188 5.786 0 0.219 0.177 0.401 0.401 0.401v-0.016c0.219 0 0.401-0.177 0.401-0.396 0.099-2.359-0.776-4.651-2.417-6.349-1.583-1.547-3.589-2.344-5.948-2.344zM10.495 6.651c-0.281-0.042-0.573 0.016-0.818 0.161h-0.021c-0.542 0.318-1.047 0.719-1.526 1.255-0.365 0.422-0.563 0.849-0.615 1.26-0.031 0.245-0.010 0.49 0.063 0.724l0.026 0.016c0.411 1.208 0.948 2.37 1.604 3.464 0.844 1.536 1.885 2.958 3.094 4.229l0.036 0.052 0.057 0.042 0.036 0.042 0.042 0.036c1.276 1.214 2.698 2.255 4.24 3.109 1.76 0.958 2.828 1.411 3.469 1.599v0.010c0.188 0.057 0.359 0.083 0.531 0.083 0.547-0.042 1.063-0.26 1.469-0.63 0.521-0.469 0.932-0.984 1.24-1.531v-0.010c0.307-0.578 0.203-1.125-0.24-1.495-0.885-0.776-1.849-1.464-2.865-2.057-0.682-0.37-1.375-0.146-1.656 0.229l-0.599 0.755c-0.307 0.375-0.865 0.323-0.865 0.323l-0.016 0.010c-4.161-1.063-5.271-5.276-5.271-5.276s-0.052-0.573 0.333-0.865l0.75-0.604c0.359-0.292 0.609-0.984 0.224-1.667-0.589-1.021-1.276-1.979-2.052-2.865-0.167-0.208-0.406-0.349-0.672-0.401zM16.458 7.839c-0.531 0-0.531 0.802 0.005 0.802 1.333 0.021 2.604 0.573 3.531 1.531 0.844 0.932 1.281 2.172 1.198 3.427 0.005 0.219 0.182 0.396 0.401 0.396l0.016 0.021c0.219 0 0.401-0.182 0.401-0.401 0.036-1.589-0.458-2.922-1.427-3.99-0.974-1.068-2.333-1.667-4.068-1.786-0.021 0-0.036 0-0.057 0zM17.115 9.995c-0.547-0.016-0.568 0.802-0.026 0.818 1.318 0.068 1.958 0.734 2.042 2.104 0.005 0.219 0.182 0.391 0.396 0.391h0.016c0.224-0.010 0.401-0.203 0.385-0.427-0.094-1.786-1.068-2.792-2.797-2.885-0.005 0-0.010 0-0.016 0z"/>
               </svg>
           </a>
        </li>
        <li>
            <a class="as-icon-telegram uk-icon uk-icon-button" href="https://t.me/username" 
               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>
        <li>
            <a class="as-icon-telegram uk-icon uk-icon-button" href="https://t.me/username" data-uk-icon="icon: telegram" target="_blank" rel="nofollow" title="Telegram"></a>
        </li>
        <li>
            <a class="as-icon-skype uk-icon uk-icon-button" href="skype:username?chat" 
               target="_blank" rel="nofollow" title="Skype">
               <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="skype">
                   <path d="M10.113,2.699c0.033-0.006,0.067-0.013,0.1-0.02c0.033,0.017,0.066,0.033,0.098,0.051L10.113,2.699z M2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223z M21.275,13.771 c0.007-0.035,0.011-0.071,0.018-0.106c-0.018-0.031-0.033-0.064-0.052-0.095L21.275,13.771z M13.563,21.199 c0.032,0.019,0.065,0.035,0.096,0.053c0.036-0.006,0.071-0.011,0.105-0.017L13.563,21.199z M22,16.386 c0,1.494-0.581,2.898-1.637,3.953c-1.056,1.057-2.459,1.637-3.953,1.637c-0.967,0-1.914-0.251-2.75-0.725 c0.036-0.006,0.071-0.011,0.105-0.017l-0.202-0.035c0.032,0.019,0.065,0.035,0.096,0.053c-0.543,0.096-1.099,0.147-1.654,0.147 c-1.275,0-2.512-0.25-3.676-0.743c-1.125-0.474-2.135-1.156-3.002-2.023c-0.867-0.867-1.548-1.877-2.023-3.002 c-0.493-1.164-0.743-2.401-0.743-3.676c0-0.546,0.049-1.093,0.142-1.628c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103C2.244,9.5,2,8.566,2,7.615c0-1.493,0.582-2.898,1.637-3.953 c1.056-1.056,2.46-1.638,3.953-1.638c0.915,0,1.818,0.228,2.622,0.655c-0.033,0.007-0.067,0.013-0.1,0.02l0.199,0.031 c-0.032-0.018-0.066-0.034-0.098-0.051c0.002,0,0.003-0.001,0.004-0.001c0.586-0.112,1.187-0.169,1.788-0.169 c1.275,0,2.512,0.249,3.676,0.742c1.124,0.476,2.135,1.156,3.002,2.024c0.868,0.867,1.548,1.877,2.024,3.002 c0.493,1.164,0.743,2.401,0.743,3.676c0,0.575-0.054,1.15-0.157,1.712c-0.018-0.031-0.033-0.064-0.052-0.095l0.034,0.201 c0.007-0.035,0.011-0.071,0.018-0.106C21.754,14.494,22,15.432,22,16.386z M16.817,14.138c0-1.331-0.613-2.743-3.033-3.282 l-2.209-0.49c-0.84-0.192-1.807-0.444-1.807-1.237c0-0.794,0.679-1.348,1.903-1.348c2.468,0,2.243,1.696,3.468,1.696 c0.645,0,1.209-0.379,1.209-1.031c0-1.521-2.435-2.663-4.5-2.663c-2.242,0-4.63,0.952-4.63,3.488c0,1.221,0.436,2.521,2.839,3.123 l2.984,0.745c0.903,0.223,1.129,0.731,1.129,1.189c0,0.762-0.758,1.507-2.129,1.507c-2.679,0-2.307-2.062-3.743-2.062 c-0.645,0-1.113,0.444-1.113,1.078c0,1.236,1.501,2.886,4.856,2.886C15.236,17.737,16.817,16.199,16.817,14.138z"></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}
        .as-icon-telegram:hover{background-color:#0078CA}
        [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

JavaScript Promise, который будет разрешен с добавленным узлом SVG.

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

Доступность

Состояния и свойства WAI-ARIA. Специальные возможности

Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента Icon.
Если используется элемент <a>, то рекомендуется установить свойство aria-label для элемента <a>, чтобы описать его значение.

<a href="" uk-icon="icon: heart" aria-label="Иконка"></a>

W3C - Accessibility, Википедия - WAI-ARIA, MDN - aria-label.