หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ไอคอน SVG ที่สร้างขึ้นด้วยมือที่สวยงามโดยผู้ผลิต CSS Tailwind
มีให้เป็นไอคอน SVG ขั้นพื้นฐานและผ่านห้องสมุด React ของบุคคลแรกและ VUE

เรียกดูที่ heroicons.com →

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

วิธีที่เร็วที่สุดในการใช้ไอคอนเหล่านี้คือการคัดลอกแหล่งข้อมูลสำหรับไอคอนที่คุณต้องการจาก Heroicons.com และอินไลน์โดยตรงใน HTML ของคุณ:

 <SVG
  class = "size-6 text-gray-500" fill = "none" viewbox = "0 0 24 24" stroke = "CurrentColor" stroke-width = "2">
  <Pathstroke-Linecap = "Round" Stroke-LineJoin = "Round" D = "M12 8V4L3 3M6-3A9 9 0 11-18 0 9 9 0 0118 0Z"
  /> </svg>

รูปแบบไอคอนทั้งสองได้รับการกำหนดค่าไว้ล่วงหน้าให้มีสไตล์โดยการตั้งค่าคุณสมบัติ CSS color ไม่ว่าจะด้วยตนเองหรือใช้คลาสยูทิลิตี้เช่น text-gray-500 ในเฟรมเวิร์กเช่น Tailwind CSS

ตอบโต้

ก่อนอื่นติดตั้ง @heroicons/react จาก NPM:

 npm install @heroicons/react

ตอนนี้ไอคอนแต่ละตัวสามารถนำเข้าเป็นส่วน ๆ เป็นส่วนประกอบของปฏิกิริยา:

 นำเข้า {beakericon} จาก '@heroicons/react/24/solid'function myComponent () {
  return (<div> <beakericon classname = "size-6 text-blue-500"/> <p> ... </p> </div>
  -

ไอคอนโครงร่าง 24x24 สามารถนำเข้าได้จาก @heroicons/react/24/outline ไอคอนของแข็ง 24x24 สามารถนำเข้าได้จาก @heroicons/react/24/solid ไอคอน 20x20 ของแข็งสามารถนำเข้าได้จาก @heroicons/react/20/solid และไอคอนของแข็ง 16x16 สามารถนำเข้าได้จาก @heroicons/react/16/solid

ไอคอนใช้การประชุมการตั้งชื่อเคสอูฐด้านบนและมักจะถูกต่อท้ายด้วย Icon คำ

เรียกดูรายชื่อทั้งหมดของชื่อไอคอนใน UNPKG →

ความเต็ม

ก่อนอื่นติดตั้ง @heroicons/vue จาก NPM:

 npm ติดตั้ง @heroicons/vue

ตอนนี้ไอคอนแต่ละตัวสามารถนำเข้าเป็นส่วน ๆ เป็นองค์ประกอบ VUE:

 <เทมเพลต>
  <div>
    <beakericon class = "size-6 text-blue-500" />
    <p> ... </p>
  </div>
</template> <การตั้งค่าสคริปต์> นำเข้า {beakericon} จาก '@heroicons/vue/24/solid' </script>

ไอคอนโครงร่าง 24x24 สามารถนำเข้าได้จาก @heroicons/vue/24/outline ไอคอนของแข็ง 24x24 สามารถนำเข้าได้จาก @heroicons/vue/24/solid ไอคอน 20x20 ของแข็งสามารถนำเข้าได้จาก @heroicons/vue/20/solid และไอคอนของแข็ง 16x16 สามารถนำเข้าได้จาก @heroicons/vue/16/solid

ไอคอนใช้การประชุมการตั้งชื่อเคสอูฐด้านบนและมักจะถูกต่อท้ายด้วย Icon คำ

เรียกดูรายชื่อทั้งหมดของชื่อไอคอนใน UNPKG →

การบริจาค

ในขณะที่เราชื่นชมความตั้งใจของทุกคนที่จะลองและปรับปรุงโครงการ แต่ขณะนี้เราสนใจเฉพาะการมีส่วนร่วมที่แก้ไขข้อบกพร่องเช่นสิ่งต่าง ๆ เช่นประเภท typescript ที่ไม่ถูกต้องหรือแก้ไขไอคอนที่ถูกส่งออกด้วยการเติมแทนจังหวะ ฯลฯ ฯลฯ

เราไม่ยอมรับการมีส่วนร่วมสำหรับไอคอนใหม่หรือเพิ่มการสนับสนุนสำหรับเฟรมเวิร์กอื่น ๆ เช่น Svelte หรือ SolidJs แต่เราขอแนะนำให้คุณปล่อยไอคอนของคุณเองในห้องสมุดของคุณเองและสร้างแพ็คเกจของคุณเองสำหรับเฟรมเวิร์กอื่น ๆ ที่คุณต้องการดูรองรับ

ใบอนุญาต

ห้องสมุดนี้ได้รับใบอนุญาต MIT

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