如何在 Nuxt3 中使用任何图标？答案

【问题标题】：How to use any icons with Nuxt or Vue?如何在 Nuxt3 中使用任何图标？
【发布时间】：2022-06-25 20:58:24
【问题描述】：

当我尝试使用 vue-fontawesome 框架和 @nuxtjs/fontawesome 框架时，我遇到了 Nuxtjs 错误，这是错误：

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
    at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
    at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

这是我在nuxt.config.ts中的代码：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/fontawesome'
  ],

  fontawesome: {
    icons: {
      solid: ['faXmark']
    }
  }
})

这是我要使用图标的组件：

<template>
  <div :class="props.className">
    <font-awesome-icon icon="xmark" />
    <slot />
  </div>
</template>

顺便说一句，错误只是在我尝试加载页面时出现，而不是在我运行它时出现。

【问题讨论】：

看起来错误不是来自您共享的内容。你的代码中没有.component 吗？左边的部分有时看起来是未定义的。
不，我创建的其他文件都没有与之相符，但实际上其余的错误显示：at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31) at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)
哦，所以你使用的是 Nuxt3。不确定这个模块是否兼容。
自从上次提交是在 15 个月前，我们可以很遗憾地确信它与 Nuxt 3 不兼容。你必须找到另一种方法来使用你自己的插件/模块来安装你的 fontawesome 库！

标签： javascript vue.js nuxt.js nuxtjs3

【解决方案1】：

我推荐 antfu 的这个解决方案，这是迄今为止 IMO 处理任何类型图标的最佳方法：https://github.com/antfu/unplugin-icons
查看更多 in-depth article 解释整个事情的原因和方式。

这里有一个关于如何将它与 Nuxt3 一起使用的快速方法，首先是要求：

请务必使用 Node v16 或更高版本
开始一个新的 Nuxt3 项目：pnpm dlx nuxi init nuxt3-unplugin-icons
我正在使用 PNPM，所以pnpm i --shamefully-hoist
用pnpm add -D unplugin-icons添加上述包

在您的 nuxt.config.ts 文件中获取此信息

// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import Icons from 'unplugin-icons/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Icons({
        // the feature below is experimental ⬇️
        autoInstall: true
      })
    ]
  }
})

我不知道如何修复类型，所以我只是忽略了这里的检查。

完成后，您可以转到icones.js 并查找您的特定图标，单击它，您会看到这个

注意格式是[collection-id]:[name]，所以在你的例子中是fa6-solid:xmark。

现在您可以转到任何.vue 文件并在导入时将fa6-solid:xmark 格式转换为~icons/fa6-solid/xmark。

<script setup>
import IconXmark from `~icons/fa6-solid/xmark`
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
</template>

您的 Nuxt3 项目现在可以为您自动安装相关包。

仅此而已！ ?

这个autoInstall 功能大部分时间都有效，但并非 100% 经受住考验。
我注意到它只能同时安装 2 个图标包（只需重新启动服务器即可解决问题）。

如果自动安装功能失败，您可以随时转到 npm 并在您的情况下查找 @iconify-json/[your collection id] aka @iconify-json/fa6-solid。
NPM 非常擅长从我所见的情况中提出好的建议。

这是一个关于如何使用其他图标的示例

<script setup>
import IconXmark from '~icons/fa6-solid/xmark'
import IconAccountBox from '~icons/mdi/account-box'
import TastyPizza from '~icons/noto-v1/pizza'
import IconPs from '~icons/ri/playstation-line'
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
  <icon-account-box style="font-size: 2em; color: red" />
  <tasty-pizza style="font-size: 2em" />
  <icon-ps style="font-size: 2em" />
</template>

实际结果，如您所见，完全可以使用 CSS 自定义

如果需要，您可以查看我的github repo 以获得完整的示例。

PS：auto-import feature 正在开发中。欢迎订阅 Github PR 以获取更多更新。

【讨论】：