如何在Nuxt3中使用任何图标？
当我尝试使用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>顺便说一下，错误只是在我试图加载页面时出现，而不是在我运行它时出现。
回答 3
Stack Overflow用户
发布于 2022-04-29 09:00:23
我推荐安富市的这个解决方案，到目前为止，这是使用任何图标的最佳方法：https://github.com/antfu/unplugin-icons。
查看更多的纵深文章，解释为什么和如何工作的整个事情。
下面是一个关于如何在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回购以获得一个完全工作的示例，以防需要它。
PS：自动进口功能正在开发中。欲知更多更新，请随时订阅Github。
PS2:如果您有一个预定义的图标数组，那么绑定程序就可以提前知道这些图标，这一点甚至可以与动态分量一起使用，这要归功于分析性阅读。
Stack Overflow用户
发布于 2022-09-22 07:10:37
您还可以使用相当新的包纽特图标，它由NuxtLabs首席执行官生成，并用于nuxt3 3/content2 2初学者模板内容风中。
分期付款
npm install --save-dev nuxt-icon
yarn add --dev nuxt-icon设置Nuxt 3
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-icon']
})使用
只需从icones.js.org复制和粘贴所需图标的名称即可。包将获取图标并粘贴到代码中。您可以选择100k+图标。
<Icon name="logos:google-icon"></Icon>
<Icon name="logos:facebook"></Icon>
<Icon name="logos:apple" fill="#97a3b6"></Icon>Stack Overflow用户
发布于 2022-10-24 21:32:47
仅在使用自定义svg图标时应用。
在使用自定义svg图标(没有图标框架)时，我通常使用vite-svg-装载机。这也适用于Nuxt 3。
yarn add vite-svg-loader --devnuxt.config.ts
import svgLoader from 'vite-svg-loader'
export default defineNuxtConfig({
vite: {
plugins: [
svgLoader({})
]
}
})安装完成后，我将创建一个新组件，稍后可以在其他组件( components /IconLoader.vue)中使用：
<template>
<component :is="icon" />
</template>
<script>
const props = defineProps<{ name: string }>()
const icon = computed(() =>
defineAsyncComponent(() => import(`../assets/icons/${props.name}.svg`))
)
</script>现在，我可以轻松地使用新的自定义图标加载器组件(例如App.vue)显示图标：
<template>
<icon-loader name="calendar" /> // assuming there is a calendar.svg file in your assets folder.
</template>我通常从https://heroicons.dev得到我的图标，它们与Tailwind一起工作得很好。
https://stackoverflow.com/questions/72052807
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号