CSS: icon ​

.instui-icon — سیستم آیکون: اندازه‌دهی .instui-icon به‌اضافهٔ نقاش مشترک -icon-<name> که یک گلیف را (در currentColor) قبل از هر عنصر ماسک می‌کند.

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).

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::beforeخودِ گلیف: یک کادر 1em که از --pantoken-glyph ماسک شده و با currentColor پر شده است.

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--pantoken-glyph<url>url("data:image/svg+xml