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 Icons 插件，默认设置为 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)，对于无头 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>