tailwindcss icons

? Anda dapat membantu penulis menjadi pengelola sumber terbuka penuh waktu dengan mensponsori dia di GitHub.

---

@egoist/tailwindcss-icons

Gunakan ikon apa pun dari Iconify

Memasang

npm i @egoist/tailwindcss-icons -D

Penggunaan

Di tailwind.config.js Anda:

 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.
    } ) ,
  ] ,
}

Anda juga perlu menginstal @iconify/json (koleksi ikon lengkap, 50MB) atau @iconify-json/{collection_name} (paket ikon individual):

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

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

Kemudian Anda dapat menggunakan ikon di HTML Anda:

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

Cari ikon yang ingin Anda gunakan di sini: https://icones.js.org

Tip

Untuk mendapatkan daftar lengkap nama ikon sebagai tipe skrip ketikan, Anda bisa merujuk ke masalah ini.

Opsi Pengaya

Pilihan	Jenis	Bawaan	Keterangan
awalan	rangkaian	i	Awalan kelas untuk aturan ikon yang cocok
skala	nomor	1	Skala relatif terhadap ukuran font saat ini
lebar pukulan	nomor	undefined	Lebar guratan untuk ikon (ini mungkin tidak berfungsi untuk semua ikon)
properti ekstra	Rekam<string, string>	{}	Properti CSS tambahan diterapkan pada CSS yang dihasilkan.
koleksiNamaAlias	[masukkan Nama Koleksi]?: string	{}	Alias ​​untuk menyesuaikan nama koleksi.

Ikon Kustom

Anda juga dapat menggunakan ikon khusus dengan plugin ini, misalnya:

 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 ,
            } ,
          } ,
        } ,
      } ,
    } ) ,
  ] ,
}

Kemudian Anda dapat menggunakan ikon khusus ini sebagai nama kelas: i-foo-arrow-left .

Tip

Untuk membaca ikon khusus dari direktori, Anda dapat merujuk ke Memuat svgs dari sistem file

Hasilkan Ikon Secara Dinamis

Idenya berasal dari @iconify/tailwind, terima kasih kepada penulis Iconify atas kerja hebatnya!

Jika Anda ingin memasang @iconify/json dan menggunakan ikon apa pun yang Anda inginkan, Anda harus menambahkan plugin lain ke tailwind.config.js Anda.

Hal ini karena kami tidak dapat menyediakan pelengkapan otomatis untuk semua ikon dari @iconify/json , hal ini akan membuat editor Anda lambat.

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

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

Kemudian Anda bisa menggunakan ikon secara dinamis seperti <span class="i-[mdi-light--home]"></span> .

Sponsor

Lisensi

MIT © EGOIS