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

عناصر زائفة ​

عنصر زائفالوصف
::beforeالغليف نفسه: مربع بحجم 1em مقنع من --pantoken-glyph وممتلئ بـ currentColor.

الرموز المستهلكة ​

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