Nuxt 图标 Tailwind

基于 Iconify，将超过 100,000 个随时可用的图标添加到您的 Nuxt 应用程序中。

与 @nuxt/icon 的区别

基于 Tailwind CSS 图标本地加载，而不是针对每个图标进行 API 调用。
除了本地安装的 Iconify 包之外，还可以从 JSON 文件中添加自定义集合。
使用 Tailwind 管理 CSS，而不是在内部处理 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，则可以使用 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 图标类上使用的前缀。默认情况下为 i，以确保与其他 Tailwind 图标插件向后兼容。但是，可以将其设置为为空 ('')，从而完全不需要前缀。

集合

指定您希望包含的 Iconify 集。

字符串数组:

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>

贡献 🙏

克隆此存储库。
使用 pnpm install 安装依赖项（使用 corepack enable 安装 pnpm，了解更多）。
运行 npm run dev:prepare 以生成类型存根。
使用 npm run dev 以开发模式启动游乐场。

鸣谢 💌

原始 Nuxt 图标
@egoist 及其 Tailwind CSS 图标插件
我之前尝试开发的 Tailwind 图标插件 (有效但速度缓慢)
@benjamincanac 为初始版本做出了贡献。
@cyberalien 为创建 Iconify 做出了贡献。

许可证 📎

MIT 许可证