求解 vite+vue3 项目中关于动态图标的问题

是不是不支持动态呢
https://github.com/antfu/unplugin-icons/issues/5

我是自己写的组件，不用第三方插件，动态加载没问题<svg-icon :name="your-variable" />
https://blog.yunyuyuan.net/articles/9074

@yunyuyuan 你这个是项目内的 svg 图标吧。但是如果你需要使用第三方的图标呢？还是只能显示的导入再按需加载。

@qq309187341 1 楼已经提到了，unplugin-icons 不支持动态加载

使用 iconify 在线请求的方式，内部可搭私服

@xiaohundun 我通过 autoImport 插件实现了动态图标，但是现在存在一个问题，使用动态图标需要接受比如 let icon = IEpPlus 。 而后台返回的是 “IEpPlus”是一个字符串。我使用 eval()方法也成功实现了 “IEpPlus”转化成 IEpPlus 。但是 eval()有安全问题，我想问问还有什么别的方式，或者其他插件或者现有插件就有提供相关方式的

我看腾讯的 starter 脚手架里用的是 vite-svg-loader ，加载的 svg 是一个组件。

import MyIcon from 'xxx/xxx.svg'

上面这样引入 svg 文件就行。

上图床更可控点

我说前几天好像看过一个类似的帖子。。。果然是你发的。。。请不要频繁面向 V2EX 编程。
而且上一个帖子我就说了，写个 demo ，有兴趣研究的人，直接在 demo 上手。方便你我他，然而你忽略了我的建议。
任何新手在提问前，都应该尽可能将问题描述清楚，并方便解决人来尽快解决。
甚至你在自己写个 demo 的时候，问题说不定就解决了。
而打那么多字，你也费劲，别人理解也费劲。
请下次提问带上 demo 。
关联： t/928689#r_12888230

推荐 unocss 的图标处理方案，直接加 class 名，无需额外的组件，自定义的图标可以配置好自动导入使用，动态图标直接写在配置中的 safelist 或者只要页面上有对应的类名能触发到就行

试试 new URL(url, [base])

搞不懂，你们后端返回图片是不返回链接的吗？

@renmu 因为这个是图标，而且是后台管理系统的菜单图标。所以可能就是这个图标的字符串

我觉得应该用 10 楼的方案，用 class 来做，要是你能处理 eval 的安全问题，那现在的也行

@xiaohundun #14 至少我见过的管理端的图标都是 classname

写个脚本
比如你图标放 /assets/icons
每次新加图标就运行一下脚本
这个脚本就做一件事情，读取这个目录的文件名然后生成一个 ts 文件
import BasicActtive from '~icons/assets-icons/basic-acttive';
export {
BasicActtive,
}
类似这种各式
我项目里就是这么处理
后端返回的是 icon 字符串
前端导入
import Bookmark from '~icons/carbon/bookmark';
import * as icons from '~/assets/icons';

export const getIcon = (name?: string) => {
if (!name) return Bookmark;
return Reflect.get(
icons,
camelcase(name, { pascalCase: true, preserveConsecutiveUppercase: true }),
);
};

~icons/assets-icons/是 unplugin-icons 配置的自定义目录
用 vite-svg-loader 也可以

@qq309187341 #6

<component :is="vue: IEpPlus" /> vue 自动会将 `vue:` 前缀字符串解析到对应的组件，op 是这个意思吗？

https://cn.vuejs.org/api/built-in-special-attributes.html#is

vue 帮你调用 `resolveComponent`

动态图标 lottie
https://github.com/megasanjay/vue3-lottie

src/components/Iconify.vue：

<template>
<el-icon>
<Icon :icon="icon"/>
</el-icon>
</template>

<script setup lang="ts">
import {Icon} from '@iconify/vue';

const props = defineProps({
icon: {
type: String,
default: null,
}
});
</script>

src/components/RecursiveMenu.vue：

<template>
<template v-for="item in menuTree">
<template v-if="item.children && item.children.length > 0">
<el-sub-menu :index="String(item.id)">
<template #title>
<Iconify :icon="item.icon"/>
<span>{{ item.name }}</span>
</template>
<RecursiveMenu :menu-tree="item.children"/>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="String(item.id)">
<Iconify :icon="item.icon"/>
<span>{{ item.name }}</span>
</el-menu-item>
</template>
</template>
</template>

<script setup lang="ts">
import Iconify from "@/components/Iconify.vue";

const props = defineProps({
menuTree: {
type: Array as PropType<any[]>,
required: true
}
});
</script>