Skip to content

CSS: icon

.instui-icon — 아이콘 시스템: .instui-icon 크기 규격과, 어떤 요소보다 먼저 글리프(currentColor)를 마스크하는 공유 -icon-<name> 페인터를 포함합니다.

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