element-plus自动导入icon不显示的处理

安装图标

yarn add @element-plus/icons-vue

安装自动导入的依赖

yarn add unplugin-icons unplugin-auto-import -D

参考官网给出的模板

vite.config.js

...
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';

export default defineConfig({
    plugins: [
        AutoImport({
            ...
            IconResolver({
                prefix: 'Icon',
            })
        }),
        Components({
            resolvers: {
                ...
                IconsResolver({
                    enabledCollections: ['ep'],
                }),
            },
        }),
        Icons({
            autoInstall: true,
        }),
    ]
});

使用

<el-icon :size="20">
    <Edit />
</el-icon>

如网页所示，根本不起作用

解决

需要再安装这个依赖

yarn add @iconify-json/ep -D

代码改为

<i-ep-edit></i-ep-edit>

这样才生效...