Nuxt Nation カンファレンスが開催されます。11月12～13日にご参加ください。
54.8K

icon-tw
nuxt-icon-tw

Nuxt用のTailwind CSSアイコンを拡張したアイコンモジュール
1.3K ダウンロード
2 つ星
v1.0.0
JohnCampionJrJohnCampionJr

nuxt-icon-tw

Nuxt Icon Tailwind

npm versionnpm downloadsLicenseNuxt

100,000以上のすぐに使えるアイコンを、Iconifyをベースに、Nuxtアプリケーションに追加します。

@nuxt/iconとの違い

  • 各アイコンのAPI呼び出しではなく、ローカルで読み込むためにTailwind CSS Iconsに基づいています。
  • ローカルにインストールされたIconifyパッケージに加え、JSONファイルからカスタムコレクションを追加できます。
  • CSSを内部で処理するのではなく、Tailwindを使用して管理します。
  • Tailwindを使用しているため、特定の<Icon />コンポーネント以外でもアイコンを提供でき、PrimeVueのような他のコンポーネントでも動作します。

機能 ✨

  • Iconify JSONパッケージによるTailwind CSSアイコン
  • カスタムローカルIconCollection JSONファイル
  • Nuxt 3対応
  • Iconifyを介した100,000以上のオープンソースベクターアイコンのサポート
  • 絵文字サポート
  • カスタムSVGサポート（Vueコンポーネント経由）
  • ローカルにロードされていないコレクションの場合は、API呼び出しにフォールバック

セットアップ ⛓️

プロジェクトにnuxt-icon-tw依存関係を追加します（もちろんTailwindが必要です）

npx nuxi@latest module add icon-tw
npx nuxi@latest module add tailwindcss

nuxt.config.tsのmodules配列に追加します。

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-icon-tw', '@nuxtjs/tailwindcss'],
})

このパッケージのIconコンポーネントが最初に使われるように、@nuxt/iconを取り込む可能性のある他のモジュールの前に配置してください。

Tailwind CSSを介して使用したいIconify JSONパッケージをインストールします。

npm install --save-dev @iconify-json/mdi

# Using yarn
yarn add --dev @iconify-jsom/mdi

これらはTailwind CSSプラグインによって自動的に認識されます。

<Icon />は、i-prefixで始まるすべてのアイコン、つまりi-mdi-homeをロードするためにTailwindを使用します。i-other-iconを使用し、それがローカルにインストールされていないセットの場合、アイコンはIconify API SVGロードにフォールバックします。

:区切り文字を使用するアイコン（例：i-mdi:homeまたはmdi:home）は、Tailwindがクラスに:を許可しないため、Iconify SVGのままになります。

これにより、既存のプロジェクトにTailwindアイコンを追加する場合、NuxtIconTwをNuxtIconの代替としてドロップインすることができます（ちなみに、これが私がこれを作成した理由です）

以上で、コンポーネントで<Icon />を使用できるようになりました！

✨ VS Codeを使用している場合は、@antfuによるIconify IntelliSense拡張機能を使用できます。

使い方 👌

プロパティ

  • name (必須): アイコン名、絵文字、またはグローバルコンポーネント名
  • size: アイコンサイズ（デフォルト：1em）

属性:

Iconifyのアイコンを使用する場合、<svg>が作成されます。ネイティブ要素のすべての属性を指定できます。

<Icon name="uil:github" color="black" />

その他のコンポーネント:

  • <Icon /> - ロードされたコレクションに基づいて、TailwindまたはIconify SVGに自動的に設定されます
  • <IconTw /> - Tailwindによってのみアイコンを作成します。指定された名前がロードされていない場合、空白になります
  • <IconSvg /> - Iconify Svgによってのみアイコンを作成します。ただし、カスタムファイルはここでは機能しません

Iconifyデータセット

https://icones.js.orgコレクションの任意の名前を使用できます

<Icon name="uil:github" />

i-プレフィックスをサポートしています（例：i-uil-github）。

カスタムアイコンコレクション

カスタムアイコンJSONファイルの場所を指定して、Tailwind CSSに含めることができます

import { createResolver } from '@nuxt/kit'

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  icon: {
    customCollections: resolve('./custom.json'),
  },
  modules: ['nuxt-icon-tw', '@nuxtjs/tailwindcss'],
})

VS Code Iconifyにこれらを表示することもできます。

{
  // set from root of the project
  "iconify.customCollectionJsonPaths": ["./playground/custom.json"]
}

絵文字

<Icon name="🚀" />

Vueコンポーネント

<Icon name="NuxtIcon" />

NuxtIconはcomponents/global/フォルダー内にある必要があることに注意してください（例を参照）。

Tailwindアイコン構成

プレフィックス

Tailwindアイコンクラスで使用するプレフィックスを指定できます。これは、他のTailwindアイコンプラグインとの後方互換性のため、デフォルトでiになっています。ただし、プレフィックスをまったく必要としないように、空（''）に設定することもできます。

コレクション

含めるIconifyセットを指定します

  • string[]:
    export default defineNuxtConfig({
  icon: {
    collections: ['mdi', 'ph'],
  },
  modules: ['nuxt-icon-tw', '@nuxtjs/tailwindcss'],
})
  • []: 自動解決を完全にオフにします
  • 'all': Iconify JSON全体をロードすることを明確にオプトインします。警告：時間がかかる場合があります
  • IconCollection: 自動化を完全にオーバーライドします
    export default defineNuxtConfig({
  icon: {
    collections: {
      foo: {
        icons: {
          'arrow-left': {
            body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>',
            width: 20,
            height: 20,
          },
        },
      },
    },
  },
  modules: ['nuxt-icon-tw', '@nuxtjs/tailwindcss'],
})

Tailwindの強制

Tailwindアイコンのみを許可し、Iconify APIアイコンをまったく許可しないようにする必要がある場合は、これをtrueに設定します。

export default defineNuxtConfig({
  icon: {
    forceTailwind: true,
  },
  modules: ['nuxt-icon-tw', '@nuxtjs/tailwindcss'],
})

構成 ⚙️

<Icon />のデフォルトサイズ（1em）を更新するには、iconTw.sizeプロパティを使用してapp.config.tsを作成します。

app.config.tsはnuxt.config.tsのサイズ設定をオーバーライドします

ヘッドレスアイコンの場合は、iconTw.class: ''と設定するだけで、<Icon />のデフォルトクラス（.icon）をiconTw.classプロパティで更新します。

iconTw.aliasesプロパティを利用して、アイコンの入れ替えを簡単にするエイリアスを定義することもできます。

// app.config.ts
export default defineAppConfig({
  iconTw: {
    size: '24px', // default <Icon> size applied
    class: 'icon', // default <Icon> class applied
    aliases: {
      nuxt: 'logos:nuxt-icon',
    },
  },
})

アイコンのデフォルトサイズは24pxになり、nuxtアイコンが利用可能になります。

<Icon name="nuxt" />

デフォルトでは、このモジュールは公式Iconify APIからアイコンを取得します。 iconTw.iconifyApiOptions.urlプロパティを独自のIconify APIに設定することで、この動作を変更できます。

iconTw.iconifyApiOptions.publicApiFallbackをtrueに設定して、パブリックAPIをフォールバックとして使用することもできます（<Icon>コンポーネントのみ、<IconCSS>コンポーネントは対象外）

// app.config.ts
export default defineAppConfig({
  iconTw: {
    // ...
    iconifyApiOptions: {
      url: 'https://<your-api-url>',
      publicApiFallback: true, // default: false
    },
  },
})

レンダリング関数

レンダリング関数（関数型コンポーネントを作成する場合に便利）でIconコンポーネントを使用できます。これを行うには、#componentsからインポートします。

import { Icon } from '#components'

<MyIcon>コンポーネントの例を参照してください

<script setup>
import { Icon } from '#components'

const MyIcon = h(Icon, { name: 'uil:twitter' })
</script>

<template>
  <p><MyIcon /></p>
</template>

貢献 🙏

  1. このリポジトリをクローンします
  2. pnpm installを使用して依存関係をインストールします（corepack enableでpnpmをインストールします。詳細についてはこちらを参照してください）
  3. npm run dev:prepareを実行して、タイプスタブを生成します。
  4. npm run devを使用して、開発モードでプレイグラウンドを開始します。

クレジット 💌

ライセンス 📎

MITライセンス