ui:icon
汎用アイコンコンポーネントです。
- Web Component (
<ui-icon>) として提供しています。 - 利用可能なアイコンリストは、Refference / Iconsを参照して下さい。
Examples
Section titled “Examples”Source Code
<div class="flex gap-2"> <ui-icon data-icon="chevron-down"></ui-icon> <ui-icon data-icon="chevron-left"></ui-icon> <ui-icon data-icon="chevron-right"></ui-icon> <ui-icon data-icon="chevron-up"></ui-icon> <ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></div>Variants
Section titled “Variants”| 属性 | 要素 | 値 | 効果 |
|---|---|---|---|
data-icon | root | chevron-down, … | アイコンIDの指定 |
aria-label | root | 任意の文字列 | アクセシブル名の指定 |
<ui-icon> は aria-label の有無で a11y 属性を排他的に管理します。
| 条件 | 自動付与される属性 | 想定用途 |
|---|---|---|
aria-label 無し | aria-hidden="true" | 装飾アイコン |
aria-label 有り | role="img" | 単独で意味を持つアイコン |
Behavior
Section titled “Behavior”Styles
Section titled “Styles”現在のコンテクストの font-size, currentColor を踏襲します。
Progressive Enhancement
Section titled “Progressive Enhancement”<ui-icon> は Light DOM の Web Component です。Shadow DOM を使わないため、JSがロードされる前でもアイコン自体は表示されます。
JS upgrade 前は role / aria-hidden が未設定なので、SRには汎用カスタム要素として認識されます。視覚的な表示には影響しません。