Element Plus中图标的使用

安装

首先需要安装element-plus的icon库

npm install @element-plus/icons-vue

使用

方法一：直接注册所有图标

注册之后可以在项目中直接使用

main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

方法二：按需引入

使用时，在当前组件，按需导入使用的图标组件

<el-button type="primary" :icon="Plus" circle />


import {Plus} from '@element-plus/icons-vue'

方法三：自动导入

1.安装自动导入的插件

npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons

2.修改vite.config.ts

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  plugins: [
    // ...
    AutoImport({
      resolvers: [
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({prefix: 'Icon'}),
      ],
      // 自动生成components.d.ts文件
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Components({
      resolvers: [
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({prefix: 'Icon'}),
      ],
      // 自动生成components.d.ts文件
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({autoInstall: true}),
  ],
})