tailwindcss icons下載 - tailwindcss icons源碼下載

tailwindcss icons

其他源碼

v1.8.1

下載

？您可以透過在 GitHub 上贊助作者來幫助他成為全職開源維護者。

@egoist/tailwindcss-圖標

使用 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`	圖示的描邊寬度（這可能不適用於所有圖示）
額外的屬性	記錄<字串，字串>	`{}`	應用於生成的 CSS 的額外 CSS 屬性。
集合名稱別名	[CollectionNames 中的鍵]?: 字串	`{}`	用於自訂集合名稱的別名。

自訂圖示

您也可以在此插件中使用自訂圖標，例如：

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