Vue 3 基于 Props 动态导入

Question

我正在使用 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 但仍然没有我想要的那么简单。

Answer 1

不幸的是，目前无法动态创建导入。几个月前我发现自己遇到了同样的问题。我的解决方案是将图标视为 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>

<MyIcon icon="sliders-horizontal"/>

当然，手动创建导入文件会很麻烦，因此在我的例子中，我创建了一个 python 脚本，该脚本采用 SVG 图标文件夹的路径并处理每个图标以缩小它们并自动创建导入文件。 该脚本适用于荧光粉图标库中的图标。 您可以在 github 存储库中找到脚本和 Vue 组件的代码：

https://github.com/fchancel/Phosphor-icon-vue-component

如果您决定使用 Phosphor 图标，请毫不犹豫地受到启发、修改它或使用它