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