Nuxt Icon Tailwind

為您的 Nuxt 應用程式新增 100,000+ 個隨時可用的圖示，基於 Iconify。

與 @nuxt/icon 的差異

基於 Tailwind CSS Icons 以本地載入，而非為每個圖示進行 API 呼叫
除了本地安裝的 Iconify 套件外，還可以從 JSON 檔案新增自訂集合
使用 Tailwind 管理 CSS，而非在內部處理
由於它使用 Tailwind，因此可以在特定的 <Icon /> 元件之外提供圖示，使其可以在其他元件（如 PrimeVue）中運作

功能 ✨

透過 Iconify JSON 套件的 Tailwind CSS 圖示
自訂本地 IconCollection JSON 檔案
Nuxt 3 就緒
透過 Iconify 支援 100,000 個開源向量圖示
Emoji 支援
自訂 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'],
})

請確保它在任何其他可能引入 @nuxt/icon 的模組之前，以便優先使用此套件的 Icon 元件。

透過 Tailwind CSS 安裝您想要使用的任何 Iconify JSON 套件

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

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

這些將由 Tailwind CSS 外掛程式自動拾取。

<Icon /> 將使用 Tailwind 載入任何以 i-prefix 開頭的圖示，例如 i-mdi-home。如果您使用 i-other-icon 且它是未本地安裝的集合，則圖示將回退至 Iconify API SVG 載入

任何使用 : 分隔符號的圖示（例如 i-mdi:home 或 mdi:home）將保留 Iconify SVG，因為 Tailwind 不允許在類別中使用 :。

如果您想將 Tailwind 圖示新增至現有專案，這允許 NuxtIconTw 作為 NuxtIcon 的直接替換（順便說一句，這就是我建立它的原因）

就這樣，您現在可以在您的元件中使用 <Icon /> 了！

✨ 如果您正在使用 VS Code，您可以使用 Iconify IntelliSense 擴充功能，由 @antfu 開發

用法 👌

Props

name (必填)：圖示名稱、emoji 或全域元件名稱
size：圖示大小（預設值：1em）

Attributes:

當使用來自 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"]
}

Emoji

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

Render Function

您可以在 render function 中使用 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>