アイコン
スケーラブルなベクターアイコンをコンテンツの好きな場所に配置できます。
UIkitには独自のSVGアイコンシステムと、増え続けるエレガントなアウトラインアイコンで構成される包括的なライブラリが付属しています。このコンポーネントはSVGをサイトに注入するため、SVGは色を採用し、CSSでスタイルを設定できます。
使い方
アイコンライブラリのスクリプトを必ず含めてください。詳細については、インストール手順を参照してください。
<script src="uikit/dist/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>
ライブラリ
現在利用可能なすべてのアイコンの概要を以下に示します。今後、新しいアイコンをリストに追加していきます。
アプリ
- home
- sign-in
- sign-out
- user
- users
- lock
- unlock
- settings
- cog
- nut
- comment
- commenting
- comments
- hashtag
- tag
- cart
- bag
- credit-card
- receiver
- 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
- crosshairs
- pencil
- trash
- move
- link
- link-external
- eye
- eye-slash
- 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-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
- bluesky
- discord
- dribbble
- etsy
- flickr
- foursquare
- github
- github-alt
- gitter
- joomla
- mastodon
- microsoft
- signal
- soundcloud
- telegram
- threads
- tiktok
- tripadvisor
- tumblr
- twitch
- uikit
- vimeo
- wordpress
- x
- yelp
- yootheme
- youtube
比率
アイコンのサイズを2倍にするには、uk-icon属性にratio: 2パラメーターを追加します。アイコンをどれくらい大きくしたいかに応じて、他の数値も指定できます。
<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><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>
ボタン修飾子
ソーシャルアイコンなどに使用できるアイコンボタンを作成するには、<a>要素に修飾子.uk-icon-buttonクラスを使用します。
<a href="" class="uk-icon-button" uk-icon="instagram"></a><div> <a href="" class="uk-icon-button uk-margin-small-right" uk-icon="instagram"></a> <a href="" class="uk-icon-button uk-margin-small-right" uk-icon="facebook"></a> <a href="" class="uk-icon-button" uk-icon="youtube"></a> </div>
画像修飾子
背景画像をアイコンのサイズに合わせて拡大縮小することもできます。.uk-icon-imageクラスと背景画像のパスを追加するだけです。
<span class="uk-icon uk-icon-image" style="background-image: url(images/dark.jpg);"></span>
コンポーネントオプション
これらのオプションはすべてコンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら
| オプション | 値 | デフォルト | 説明 |
|---|---|---|---|
icon |
文字列 | 表示するアイコン。 | |
ratio |
数値 | 1 |
アイコンのサイズ比率。 |
iconはプライマリオプションであり、属性値にそれが唯一のオプションである場合はキーを省略できます。
<span uk-icon="heart"></span>JavaScript
JavaScriptコンポーネントの詳細をご覧ください。
初期化
UIkit.icon(element, options);プロパティ
svg
追加されたSVGノードで解決されるJavaScript Promise。
UIkit.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })アクセシビリティ
アイコンコンポーネントに適切なWAI-ARIAロール、ステート、プロパティを設定します。
<a>要素を使用する場合は、その意味を説明するために<a>要素にaria-labelプロパティを設定します。
<a href="" uk-icon="icon: heart" aria-label="…"></a>