如何在 Nuxt 或 Vue 中使用任何图标？

Question

当我尝试使用 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']
    }
  }
})

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

[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)

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

Answer 1

我推荐antfu的解决方案，在我看来，这是迄今为止处理任何类型图标的最佳方法：https://github.com/antfu/unplugin-icons
\n查看更深入的文章，解释整个过程的原因和方式事情有效。

\n\n

这是如何将它与 Nuxt3 一起使用的快速方法，首先满足要求：

\n

\n
• 确保使用 Node v16 或更高版本
\n
• 启动一个新的 Nuxt3 项目：pnpm dlx nuxi init nuxt3-unplugin-icons
\n
• 我正在使用 PNPM，所以pnpm i --shamefully-hoist
\n
• 添加上述包pnpm add -D unplugin-icons
\n

\n

将其放入您的nuxt.config.ts文件中

\n

// @ts-nocheck\nimport { defineNuxtConfig } from \'nuxt\'\nimport Icons from \'unplugin-icons/vite\'\n\nexport default defineNuxtConfig({\n  vite: {\n    plugins: [\n      Icons({\n        // the feature below is experimental \xe2\xac\x87\xef\xb8\x8f\n        autoInstall: true\n      })\n    ]\n  }\n})\n

\n

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

\n\n

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

\n

\n

请注意格式为[collection-id]:[name]，因此在您的情况下为fa6-solid:xmark。

\n

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

\n

<script setup>\nimport IconXmark from `~icons/fa6-solid/xmark`\n</script>\n\n<template>\n  <icon-xmark style="font-size: 2em; color: blue" />\n</template>\n

\n

您的 Nuxt3 项目现在将能够为您自动安装相关包。

\n

\n

就这样！

\n\n

此autoInstall功能在大多数情况下都有效，但并未经过 100% 的实战测试。
\n我注意到它只能同时安装 2 个图标包（只需重新启动服务器即可解决该问题）。

\n

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

\n

\n\n

这是有关如何使用其他一些图标的示例

\n

<script setup>\nimport IconXmark from \'~icons/fa6-solid/xmark\'\nimport IconAccountBox from \'~icons/mdi/account-box\'\nimport TastyPizza from \'~icons/noto-v1/pizza\'\nimport IconPs from \'~icons/ri/playstation-line\'\n</script>\n\n<template>\n  <icon-xmark style="font-size: 2em; color: blue" />\n  <icon-account-box style="font-size: 2em; color: red" />\n  <tasty-pizza style="font-size: 2em" />\n  <icon-ps style="font-size: 2em" />\n</template>\n

\n

实际结果完全可以使用 CSS 进行定制，如您所见

\n

\n

如果需要的话，您可以查看我的github 存储库以获取完整的工作示例。

\n

PS：自动导入功能正在开发中。欢迎订阅 Github PR 以获取更多更新。

\n

PS2：如果您有一组预定义的可能图标，那么该图标甚至可以与动态组件一起使用，以便捆绑器可以通过分析读取提前了解它们。

\n

Answer 2

您还可以使用相当新的包nuxt-icon，它是由NuxtLabs 的首席执行官制作的，并在 nuxt3/content2 入门模板content-wind中使用。

安装

npm install --save-dev nuxt-icon

yarn add --dev nuxt-icon

设置 Nuxt 3

nuxt.config.ts

npm install --save-dev nuxt-icon

yarn add --dev nuxt-icon

用法

只需从icones.js.org复制并粘贴您想要的图标名称即可。包将获取图标并粘贴到您的代码中。您有 10 万多个图标可供选择。

export default defineNuxtConfig({
   modules: ['nuxt-icon']
})