vue 动态组件自动导入问题

[qq309187341]

vite 项目中使用 unplugin-vue-components 和 unplugin-auto-import 还有 unplugin-icons 等插件做自动第三方组件导入和 icon 导入的功能。但是发现图标使用动态组件就没办法了。请问需要如何处理？

[zcf0508]

没有办法，他们的原理都是理解你代码中的引用关系，在编译时帮你把以来添加进去，动态组件没有办法在编译时确定，就无法使用。

[kingterrors]

虽然我不知道我的理解对不对，以前在研究 unocss 的时候有过可能出现的类似的问题，你需要注意到两点：
1. 如果使用 ts ，或许可以通过添加 icon 到`components.d.ts`到项目中。
2. 是否因为动态导入被 treeshaking 掉了，所以没了。
3. 如果符合第二点，并且动态导入的名称是拼接而成，是否能够通过显式声明这个 icon 组件的方式（但实际不展示）使其有效。

具体场景和问题建议做个 demo ，sandboxcode 之类的发出来看看

[thinkershare]

如果是 SVG 的图标，我现在的办法是将图标作为一个远程资源去动态加载(当然这样也有缺陷), SVG 总是作为静态组件被全局引用，然后根据名称去匹配，这样静态引用时候使用具体的 Icon 的名称，动态引用的 svg 会去下载实际引用的资源。

[1xiaozi]

vite+vue3_elementPlus 相同的问题，暂时是手动引入解决