Nuxt 图标 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 个开源矢量图标
表情符号支持
自定义 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 开发

用法 👌

属性

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>