คอมโพเนนต์ทั้งหมด
Icons
Phosphor ชุดเดียวทั้งระบบ ขนาดและน้ำหนักที่ใช้ซ้ำได้
@phosphor-icons/reactServer safeขนาดและน้ำหนัก
ใช้ Phosphor ชุดเดียวทั้งสองแบรนด์ น้ำหนัก regular เป็นค่าหลัก bold ในปุ่มและลูกศร fill สำหรับสถานะที่เลือกแล้ว
import { BookOpen } from "@phosphor-icons/react"; // client components
import { BookOpen } from "@phosphor-icons/react/ssr"; // server components
<BookOpen size={20} aria-hidden="true" />
<Button><BookOpen aria-hidden="true" />เริ่มเรียน</Button>
<Button iconOnly aria-label="บันทึกไว้"><Heart weight="fill" aria-hidden="true" /></Button>ในคอมโพเนนต์
ไอคอนในปุ่มรับขนาดจากตัวอักษรของปุ่มอัตโนมัติ ไม่ต้องกำหนด size
ชุดที่ใช้บ่อย
ไอคอนที่คัดแล้วสำหรับงานเว็บเรียนและพอร์ตโฟลิโอ ค้นหาด้วยชื่อภาษาอังกฤษ
ใช้เมื่อไร
ควรทำ
- ใส่ aria-hidden ทุกไอคอนที่มีข้อความอยู่ข้างๆ
- ปุ่มไอคอนอย่างเดียวต้องมี aria-label
- ใช้ /ssr ใน Server Components
ไม่ควรทำ
- วาด SVG ไอคอนเอง
- ผสมไอคอนหลายไลบรารีในหน้าเดียว
- ใช้ไอคอนแทนข้อความในการกระทำที่ไม่คุ้นเคย