项目源码-Vue3项目07-ElementPlus自动导入Icon

Last Updated on 2025年1月9日 by hangzi

Element-Plus自动导入Icon

1、安装依赖

pnpm add -D unplugin-icons

2、vite配置Icon相关配置

vite.config.js配置内容：

import {defineConfig} from "vite"
import vue from "@vitejs/plugin-vue"
import {fileURLToPath, URL} from "url";
import {resolve} from "path";

const pathSrc = resolve(__dirname, "src");

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";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ["vue", "vue-router"],
            resolvers: [
                // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({}),
            ],
            // 指定自动导入函数TS类型声明文件路径
            dts: resolve(pathSrc,"types","auto-imports.d.ts"),
        }),
        Components({
            resolvers: [
                // 自动导入 Element Plus 组件
                ElementPlusResolver(),
                // 自动注册图标组件
                IconsResolver({
                    // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
                    enabledCollections: ["ep"]
                }),
            ],
            // 指定自动导入函数TS类型声明文件路径
            dts: resolve(pathSrc,"types","components.d.ts"),
        }),
        Icons({
            // 自动安装图标库
            autoInstall: true,
        }),

    ],
    resolve: {
        alias: {
            // '@': resolve(__dirname, 'src')
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

3、使用Element-Plus的Icon

在src/components/HelloWorld.vue组件下加一组按钮前加Icon图标

4、运行项目效果

项目Demo源码：https://github.com/hangzhi7/Vue3-Demo