ไอคอน

คอมโพเนนต์ไอคอนให้วิธีที่สอดคล้องกันในการแสดงไอคอนด้วยขนาด โทน และตัวแปรต่างๆ ทั่วทั้งแอปพลิเคชัน

คุณสมบัติหลัก

• หลายขนาด:ตัวเลือกขนาดเจ็ดแบบจาก 2xs ถึง 2xl สำหรับการปรับขนาดที่ยืดหยุ่น
• โทนเชิงความหมาย:โทนห้าประเภทสำหรับการแสดงสถานะ: success, error, info, pending และ caution
• ตัวแปรภาพ:ตัวแปรการจัดสไตล์สามแบบ: primary (เต็ม), secondary (เค้าโครง) และ tertiary (ธรรมดา)
• การรวม Iconify:การรวมอย่างราบรื่นกับไลบรารีไอคอนที่ครอบคลุมของ Iconify
• การจัดสไตล์ที่สอดคล้อง:ลักษณะที่เป็นมาตรฐานด้วยการเว้นวรรคและการจัดตำแหน่งที่เหมาะสม

การใช้งานพื้นฐาน

ไอคอนพื้นฐานต้องมี ID และชื่อไอคอนจากไลบรารี Iconify

<spr-icon id="basic-icon" icon="ph:user" />

ขนาด

ไอคอนสามารถแสดงได้ในขนาดต่างๆ เพื่อให้ตรงกับบริบท UI ที่แตกต่างกัน

<template>
  <spr-icon id="icon-2xs" icon="ph:user" size="2xs" />
  <spr-icon id="icon-xs" icon="ph:user" size="xs" />
  <spr-icon id="icon-sm" icon="ph:user" size="sm" />
  <spr-icon id="icon-md" icon="ph:user" size="md" />
  <spr-icon id="icon-lg" icon="ph:user" size="lg" />
  <spr-icon id="icon-xl" icon="ph:user" size="xl" />
  <spr-icon id="icon-2xl" icon="ph:user" size="2xl" />
</template>

โทนและตัวแปร

ไอคอนสามารถจัดสไตล์ด้วยโทนและตัวแปรที่แตกต่างกันเพื่อสื่อความหมายหรือสถานะ

ตัวแปรหลัก (เต็ม)

ตัวแปรรอง (เค้าโครง)

ตัวแปรสาม (ธรรมดา)

<template>
  <!-- ตัวแปรหลัก -->
  <spr-icon id="success-primary" icon="ph:check-circle" tone="success" variant="primary" />

  <!-- ตัวแปรรอง -->
  <spr-icon id="info-secondary" icon="ph:info" tone="info" variant="secondary" />

  <!-- ตัวแปรสาม -->
  <spr-icon id="warning-tertiary" icon="ph:warning" tone="caution" variant="tertiary" />
</template>

การอ้างอิง API

พร็อพส์

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
id	ตัวระบุเฉพาะสำหรับไอคอน จำเป็นสำหรับการทำงานที่เหมาะสม	string	-
icon	ชื่อไอคอน Iconify ที่จะแสดง (เช่น 'ph:user', 'ph:check-circle')	string	''
size	ขนาดของไอคอน ตัวเลือกที่มีอยู่: 2xs: เล็กพิเศษพิเศษ (16px) xs: เล็กพิเศษ (20px) sm: เล็ก (24px) md: กลาง (36px) lg: ใหญ่ (40px) xl: ใหญ่พิเศษ (56px) 2xl: ใหญ่พิเศษพิเศษ (80px)	'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'md'
tone	โทนสีของไอคอน ตัวเลือกที่มีอยู่: success: เขียว สำหรับการดำเนินการ/สถานะเชิงบวก error: แดง สำหรับข้อผิดพลาด/ความล้มเหลว info: น้ำเงิน สำหรับข้อมูล pending: เหลือง สำหรับสถานะที่กำลังดำเนินการ caution: ส้ม สำหรับคำเตือน	'success' | 'error' | 'info' | 'pending' | 'caution'	-
variant	สไตล์ภาพของไอคอน: primary: พื้นหลังเต็ม secondary: เค้าโครงด้วยพื้นหลังอ่อน tertiary: ไอคอนธรรมดาโดยไม่มีพื้นหลัง	'primary' | 'secondary' | 'tertiary'	-

การใช้ผลิตภัณฑ์