我正在使用 unplugin-icon 创建一个图标组件，通常情况下我可以导入例如
//script import IconCopy from '~icons/prime/copy' //template <IconCopy/>
它可以工作，但是如果我们想使用另一个图标，那么逐个导入感觉不方便，所以我创建了一个名为 Eunoicon.vue 的动态组件
<script setup>
const props = defineProps({
icon : {type:String}
})
const from = `~icons/prime/${props.icon}`
const TheIcon = await import(/* @vite-ignore */from)
console.log('ti',TheIcon)
</script>
<template>
<TheIcon/>
</template>
但是当我尝试将其导入到组件时，它会抛出错误 Uncaught (in Promise) TypeError: 无法解析模块说明符 '~icons/prime/copy'.
对于这种方法或任何提供简单方法的图标库有什么建议吗？我已经尝试过 vue font Awesome 但仍然没有我想要的那么简单。
不幸的是，目前无法动态创建导入。几个月前我发现自己遇到了同样的问题。我的解决方案是将图标视为 SVG 并创建一个附加到我的项目的导入文件，如下所示：
interface SvgObject { [key: string]: Function; } export function importSvg(icon: string) { const svg = { "sliders-horizontal": () => { return '<line x1="148" y1="172" x2="40" y2="172" fill="none" /> <line x1="216" y1="172" x2="188" y2="172" fill="none" /> <circle cx="168" cy="172" r="20" fill="none" /> <line x1="84" y1="84" x2="40" y2="84" fill="none" /> <line x1="216" y1="84" x2="124" y2="84" fill="none" /> <circle cx="104" cy="84" r="20" fill="none" /> '; }, }并创建一个视图组件，如下所示，借助道具，该组件将检索与给定名称相对应的图标。
<script setup lang="ts"> import { computed } from "vue"; import { importSvg } from "@/icons/importSvg"; interface Props { icon: string; } const IconComponent = importSvg(props.icon); </script> <template> <span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" :aria-labelledby="icon" v-html="IconComponent" ></svg> </span> </template> <style> ... </style>当然，手动创建导入文件会很麻烦，因此在我的例子中，我创建了一个 python 脚本，该脚本采用 SVG 图标文件夹的路径并处理每个图标以缩小它们并自动创建导入文件。 该脚本适用于荧光粉图标库中的图标。 您可以在 github 存储库中找到脚本和 Vue 组件的代码：
https://github.com/fchancel/Phosphor-icon-vue-component
如果您决定使用 Phosphor 图标，请毫不犹豫地受到启发、修改它或使用它