ค้นหาไอคอน SVG
ค้นหา Lucide & Heroicons—คลิกเพื่อคัดลอกโค้ด SVG, React หรือ Vue
ปรับแต่งขนาด สี และความหนาของเส้นได้
🔒การทำงานทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณเท่านั้น
เกี่ยวกับ
เครื่องมือค้นหาไอคอน SVG ช่วยให้คุณค้นหาไอคอนจากชุด Lucide และ Heroicons พร้อมคัดลอกโค้ด SVG ได้ในคลิกเดียว ปรับแต่งขนาด สี และความหนาของเส้นได้ตามต้องการ รวมถึงสร้างโค้ดคอมโพเนนต์สำหรับ React หรือ Vue ให้พร้อมใช้งาน ทุกการทำงานเกิดขึ้นในเบราว์เซอร์ของคุณโดยไม่ต้องเรียกใช้เครือข่าย
วิธีใช้งาน
ค้นหาตามชื่อ
พิมพ์คำค้นหา (เช่น arrow, home เป็นต้น) เพื่อกรองไอคอน
เลือกและปรับแต่ง
คลิกที่ไอคอน จากนั้นปรับขนาด สี และความหนาของเส้น
คัดลอกโค้ด
คัดลอกโค้ด SVG, React หรือ Vue ไปใช้ในโปรเจกต์ของคุณได้โดยตรง
อภิธานศัพท์
- SVG (Scalable Vector Graphics)
- รูปแบบภาพเวกเตอร์ที่อิงตาม XML ซึ่งสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ เหมาะสำหรับเว็บ
- Lucide
- ชุดไอคอน SVG แบบโอเพนซอร์สที่มีมากกว่า 1,500 ไอคอน ใช้ไลเซนส์ ISC
- Heroicons
- ชุดไอคอน SVG โดยทีมงาน Tailwind CSS ใช้ไลเซนส์ MIT
- viewBox
- แอตทริบิวต์ของ SVG ที่กำหนดระบบพิกัด เพื่อให้การปรับสัดส่วนมีความถูกต้อง
- stroke-width
- ใช้สำหรับควบคุมความหนาของเส้นขอบไอคอน
- currentColor
- คีย์เวิร์ดของ SVG ที่รับค่าสีมาจาก CSS (color) เพื่อใช้เป็นสีเส้นหรือสีเติม
คำถามที่พบบ่อย
- Q.ไอคอนเหล่านี้ใช้ไลเซนส์อะไร?
- Lucide ใช้ไลเซนส์ ISC ส่วน Heroicons ใช้ไลเซนส์ MIT ทั้งสองแบบสามารถใช้งานเชิงพาณิชย์ได้ฟรี
- Q.มีการส่งข้อมูลไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ ทุกการทำงานเกิดขึ้นภายในเบราว์เซอร์ของคุณเท่านั้น
กรณีการใช้งาน
ออกแบบเว็บไซต์
ค้นหาไอคอนที่สมบูรณ์แบบสำหรับโปรเจกต์ UI
โปรเจกต์ React
คัดลอกโค้ดคอมโพเนนต์สำหรับอิมพอร์ตได้ทันที
ม็อกอัปการออกแบบ
ดูตัวอย่างไอคอนก่อนนำไปเพิ่มใน Figma
เปรียบเทียบไลบรารี
เปรียบเทียบ Lucide และ Heroicons แบบจับวางเทียบกัน
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง