vue3按需使用Element Plus的icon
1、需求:需要用到Element Plus的icon,发现与element有点不同了
2、实操:按需引入需要安装@iconify-json/ep,unplugin-icons
npm i -D @iconify-json/ep unplugin-icons
在vite.config.ts配置
import path from 'path' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Components from 'unplugin-vue-components/vite' import AutoImport from 'unplugin-auto-import/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import Icons from 'unplugin-icons/vite' import IconsResolver from 'unplugin-icons/resolver' import Unocss from 'unocss/vite' import { presetAttributify, presetIcons, presetUno, transformerDirectives, transformerVariantGroup, } from 'unocss' const pathSrc = path.resolve(__dirname, 'src') // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ imports: ["vue", "vue-router"], resolvers: [ IconsResolver(), ElementPlusResolver(), ], dts: "src/autoImport.d.ts" }), Components({ // allow auto load markdown components under `./src/components/` extensions: ['vue', 'md'], // allow auto import and register components used in markdown include: [/\.vue$/, /\.vue\?vue/, /\.md$/], resolvers: [ IconsResolver(), ElementPlusResolver({ importStyle: 'sass', }), ], dts: 'src/components.d.ts', }), Unocss({ presets: [ presetUno(), presetAttributify(), presetIcons({ scale: 1.2, warn: true, }), ], transformers: [ transformerDirectives(), transformerVariantGroup(), ] }), Icons({ autoInstall: true, }), ], })
在.vue使用,标签格式 i+eq+(Element Plus里icon的类名)
<template> <el-icon><i-ep-aim />el-icon> template>