以自动导入方式使用element-plus/icons

版本

vite 3.1 element-plus 2.2 @element-plus/icons 2.0

步骤

1. 添加依赖

代码语言：javascript复制

"element-plus": "^2.2.17",
"@element-plus/icons-vue": "^2.0.10",
"@iconify-json/ep": "^1.1.7",
"unplugin-icons": "^0.14.11",
"unplugin-auto-import": "^0.11.2",
"unplugin-icons": "^0.14.11",
"unplugin-vue-components": "^0.22.8",

2. vite配置

vite.config.ts

代码语言：javascript复制

import {resolve} from 'path'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [
            	// 自动导入element-plus组件
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon'
                })
            ],
        }),
        Components({
            resolvers: [
            	// 自动导入element-plus组件
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    enabledCollections: ['ep']
                })
            ],
        }),
        // 自动导入图标组件
        Icons({
            autoInstall: true,
        })
    ]
})

1. 使用 无需再次引入，在官方图标集合中标识的图标名前追加前缀IEp即可使用

代码语言：javascript复制

<IEpMinus/>
<IEpPlus/>

config element icons vite 集合

0 人点赞