Skip to content

CSS: icon ​

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

Source: icon.css

アクセシビリティ ​

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

使用法 ​

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

修飾子 ​

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

疑似要素 ​

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

使用トークン ​

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