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: Failed to resolve module specifier '~icons/prime/copy'. 对于这种方法或任何提供简单方法的图标库有什么建议吗？我已经尝试过 vue font Awesome 但它仍然没有我想要的那么简单。

Answer 1

我认为您无法动态导入图标，但您可以在应用程序的基础上导入它们，这将使全局可用。

我使用 Font Awesome，所以实现可能会有所不同。见下文：

FontAwesome.ts：

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
    faUserSecret,
    faCommentAlt,
    faCog,
    faPowerOff,
    faMoon,
    faTrophy,
} from "@fortawesome/free-solid-svg-icons";

library.add(
    faUserSecret,
    faCommentAlt,
    faCog,
    faPowerOff,
    faMoon,
    faTrophy,
);

export default FontAwesomeIcon;

主要.ts：

import { createApp, provide, h } from "vue";
import FontAwesomeIcon from "./assets/icons/fontAwesome";

import App from "./App.vue";

const app = createApp(App);
app.component("FontAwesomeIcon", FontAwesomeIcon);

使用图标：

<font-awesome-icon :icon="['fas', 'faTrophy']" />