Nuxt Icon Tailwind

為您的 Nuxt 應用程式加入 100,000 多個隨時可用的圖示，基於 Iconify。

與 @nuxt/icon 的差異

基於 Tailwind CSS 圖示，可本地載入，而非針對每個圖示進行 API 呼叫
除了本地安裝的 Iconify 套件外，還可以從 JSON 檔案新增自訂集合
使用 Tailwind 來管理 CSS，而非在內部處理
由於使用 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'],
})

請確保它在任何其他可能會引入 @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 不允許在類別中使用 : 。

這使得 NuxtIconTw 能夠成為 NuxtIcon 的直接替代品，如果您想將 Tailwind 圖示新增至現有專案中（順帶一提，這也是我建立此套件的原因）

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

✨ 如果您使用 VS Code，可以使用由 @antfu 提供的 Iconify IntelliSense 擴充功能

用法 👌

Props

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>