ดาวน์โหลด tailwindcss icons - tailwindcss icons ดาวน์โหลดซอร์สโค้ด

tailwindcss icons

ซอร์สโค้ดอื่น ๆ

v1.8.1

ดาวน์โหลด

- คุณสามารถช่วยผู้เขียนเป็นผู้ดูแลโอเพ่นซอร์สเต็มเวลาได้โดยการสนับสนุนเขาบน GitHub

@ egoist/tailwindcss-icons

ใช้ไอคอนใดก็ได้จาก Iconify

ดูตัวอย่าง

ติดตั้ง

npm i @egoist/tailwindcss-icons -D

การใช้งาน

ใน tailwind.config.js ของคุณ:

 const { iconsPlugin , getIconCollections } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [
    iconsPlugin ( {
      // Select the icon collections you want to use
      // You can also ignore this option to automatically discover all individual icon packages you have installed
      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
      collections : getIconCollections ( [ "mdi" , "lucide" ] ) ,
      // If you want to use all icons from @iconify/json, you can do this:
      // collections: getIconCollections("all"),
      // and the more recommended way is to use `dynamicIconsPlugin`, see below.
    } ) ,
  ] ,
}

คุณต้องติดตั้ง @iconify/json (คอลเลกชันไอคอนแบบเต็ม 50MB) หรือ @iconify-json/{collection_name} (แพ็คเกจไอคอนแต่ละรายการ):

 # install every icon:
npm i @iconify/json -D

# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -D

จากนั้นคุณสามารถใช้ไอคอนใน HTML ของคุณ:

 <!-- pattern: i-{collection_name}-{icon_name} -->
< span class =" i-mdi-home " > </ span >

ค้นหาไอคอนที่คุณต้องการใช้ที่นี่: https://icones.js.org

เคล็ดลับ

หากต้องการรับรายชื่อไอคอนทั้งหมดเป็นประเภท typescript คุณสามารถดูปัญหานี้ได้

ตัวเลือกปลั๊กอิน

ตัวเลือก	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
คำนำหน้า	เชือก	`i`	คำนำหน้าชั้นเรียนสำหรับกฎไอคอนที่ตรงกัน
มาตราส่วน	ตัวเลข	`1`	มาตราส่วนสัมพันธ์กับขนาดตัวอักษรปัจจุบัน
จังหวะกว้าง	ตัวเลข	`undefined`	ความกว้างของเส้นขีดสำหรับไอคอน (อาจใช้ไม่ได้กับทุกไอคอน)
คุณสมบัติพิเศษ	บันทึก<string, string>	`{}`	คุณสมบัติ CSS เพิ่มเติมนำไปใช้กับ CSS ที่สร้างขึ้น
คอลเลกชันชื่อนามแฝง	[กรอกชื่อคอลเลกชัน]?: string	`{}`	นามแฝงเพื่อปรับแต่งชื่อคอลเลกชัน

ไอคอนที่กำหนดเอง

คุณยังสามารถใช้ไอคอนแบบกำหนดเองกับปลั๊กอินนี้ได้ เช่น:

 module . exports = {
  plugins : [
    iconsPlugin ( {
      collections : {
        foo : {
          icons : {
            "arrow-left" : {
              // svg body
              body : '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>' ,
              // svg width and height, optional
              width : 24 ,
              height : 24 ,
            } ,
          } ,
        } ,
      } ,
    } ) ,
  ] ,
}

จากนั้นคุณสามารถใช้ไอคอนที่กำหนดเองนี้เป็นชื่อคลาส: i-foo-arrow-left

เคล็ดลับ

หากต้องการอ่านไอคอนที่กำหนดเองจากไดเร็กทอรี คุณสามารถอ้างอิงถึงโหลด svgs จากระบบไฟล์

สร้างไอคอนแบบไดนามิก

แนวคิดนี้มาจาก @iconify/tailwind ขอบคุณผู้เขียน Iconify สำหรับผลงานที่ยอดเยี่ยม!

หากคุณต้องการติดตั้ง @iconify/json และใช้ไอคอนใดก็ได้ที่คุณต้องการ คุณควรเพิ่มปลั๊กอินอื่นใน tailwind.config.js ของคุณ

เนื่องจากเราไม่สามารถเติมข้อความอัตโนมัติให้กับไอคอนทั้งหมดจาก @iconify/json ได้ ซึ่งจะทำให้โปรแกรมแก้ไขของคุณทำงานช้าลง

 const { iconsPlugin , dynamicIconsPlugin } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [ iconsPlugin ( ) , dynamicIconsPlugin ( ) ] ,
}