CSS: icon ​

.instui-icon — アイコンシステム：要素の前にグリフを（currentColor 内で）マスクする共有の -icon-<name> ペインター と .instui-icon のサイズ指定。

Source: icon.css

アクセシビリティ ​

このグリフは装飾的なので aria-hidden="true" としてマークしてください。アイコンが単独で意味を伝える場合にのみ role またはラベルを付けてください。

使用法 ​

css
@import "@pantoken/components/components.css";

例 ​

html
<span class="instui-icon -icon-megaphone" aria-hidden="true"></span>

修飾子 ​

修飾子説明
.-icon-*グリフトークン（--pantoken-glyph）を設定し、共有ペインター（例えば -icon-search）でレンダリングします。

疑似要素 ​

疑似要素説明
::beforeグリフ自体：--pantoken-glyph からマスクされた 1em のボックスで、currentColor で塗りつぶされています。

使用トークン ​

Token型値
--pantoken-glyph<url>url("data:image/svg+xml