ภาพรวมของชุดไอคอน Iconify

ชุดไอคอน Iconify หลายชุดพร้อมใช้งานเป็นแพ็กเกจ npm ร่วมกับคอมโพเนนต์ Icon ของ Astro แต่ละชุดมีการ import ของตัวเองและใช้ API แบบ name-based เหมือนกัน

การเปรียบเทียบชุดไอคอน

ชุดไอคอน	คำนำหน้า	จำนวนไอคอน	สไตล์	เหมาะสำหรับ	หน้า
Material Design	mdi	7,638	แบบเติมสี + แบบเส้นขอบ	ใช้งานทั่วไป ครอบคลุมกว้างที่สุด	Material Design
Carbon	carbon	2,582	แบบเส้นขอบ	งานออกแบบระดับองค์กร/IBM เส้นสะอาด	Carbon
Phosphor	ph	9,161	หลายน้ำหนัก	ตัวเลือกน้ำหนักที่ยืดหยุ่น (จากบางถึงเติมสี)	Phosphor
Tabler	tabler	6,034	แบบเส้นขีด	ไอคอนเส้นคมชัด ความหนาเส้นขีดสม่ำเสมอ	Tabler

การใช้งาน

แต่ละชุดมีคอมโพเนนต์ Icon.astro ของตัวเอง:

---
import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';
import CarbonIcon from '@f5-sales-demo/icons-carbon/Icon.astro';
import PhIcon from '@f5-sales-demo/icons-phosphor/Icon.astro';
import TablerIcon from '@f5-sales-demo/icons-tabler/Icon.astro';
---

<MdiIcon name="database" />
<CarbonIcon name="cloud" />
<PhIcon name="globe" />
<TablerIcon name="shield" />

ไอคอนจะแสดงผลเป็น SVG แบบ inline โดยใช้ currentColor — ปรับตัวให้เข้ากับโหมดสว่างและโหมดมืดโดยอัตโนมัติ

การเลือกชุดไอคอน

• ครอบคลุมกว้างที่สุด: Material Design Icons มีไอคอนมากที่สุด (7,638) พร้อมรูปแบบเติมสีและเส้นขอบสำหรับเกือบทุกกรณีการใช้งาน
• งานออกแบบระดับองค์กร: Carbon ใช้ภาษาออกแบบของ IBM ด้วยเส้นขอบที่สะอาดและสม่ำเสมอ เหมาะสำหรับแอปพลิเคชันทางธุรกิจ
• ความยืดหยุ่นด้านน้ำหนัก: Phosphor มีรูปแบบน้ำหนัก 6 ระดับ (thin, light, regular, bold, fill, duotone) สำหรับปรับแต่งน้ำหนักภาพอย่างละเอียด
• เส้นขีดสม่ำเสมอ: Tabler ใช้ความหนาเส้นขีด 2px สม่ำเสมอทั่วทั้ง 6,034 ไอคอน เพื่อรูปลักษณ์ที่เป็นอันหนึ่งอันเดียวกัน

ดูหน้าเฉพาะของแต่ละชุดไอคอนสำหรับตารางไอคอนที่คัดสรรมาแล้วและลิงก์สำหรับเรียกดู