tailwindcss icons

? 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	アイコンのストローク幅 (これはすべてのアイコンで機能するとは限りません)
追加プロパティ	レコード<文字列、文字列>	{}	生成された 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 ( ) ] ,
}

これにより、 <span class="i-[mdi-light--home]"></span>のようにアイコンを動的に使用できるようになります。

スポンサー

ライセンス

MIT © エゴイスト