关于element-icon的使用

本文使用的所有插件及软件版本相关信息

  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.7.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@iconify-json/ep": "^1.1.15",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "unplugin-auto-import": "^0.16.1",
    "unplugin-vue-components": "^0.25.2",
    "unplugin-icons": "0.16.1"
  },
 "system": {
     "nodejs": "^16.20.2",
     "npm": "^8.19.4"
  }

一、安装element-icon

# NPM
npm install @element-plus/icons-vue
# Yarn
yarn add @element-plus/icons-vue
# pnpm
pnpm install @element-plus/icons-vue

二、全局注册使用

1、在main.js中直接全局安装

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入element图标文件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus).use(store).use(router)
// 统一注册所有 element-ui 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.mount('#app')

2、创建单独的图标组件

在src目录下创建utils文件夹，并创建icon.js文件

//此处from后面的内容需要与安装版本的命令相同
import * as Icons from '@element-plus/icons-vue'
// 统一注册图标，key: i+图标名字
export function loadIcon(app) {
    // 注册ElementIcon
    for (const [key, component] of Object.entries(Icons)) {
        app.component(key, component)
    }
}

在main.js文件中引入上述文件中的loadIcon方法，并注册element-icon到app中

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入icon.js文件中的loadIcon方法
import {loadIcon} from '@/utils/icon'

const app = createApp(App)
app.use(ElementPlus).use(store).use(router)
// 统一注册所有 element-ui 图标
loadIcon(app)
app.mount('#app')

三、按需引入

1、需要先安装自动引入element-plus插件

# NPM
npm install -D unplugin-vue-components unplugin-auto-import
# Yarn
yarn add -D unplugin-vue-components unplugin-auto-import
# pnpm
pnpm install -D unplugin-vue-components unplugin-auto-import

注释

unplugin-auto-import 按需自动导入API，如：ref，reactive,watch,computed 等API
unplugin-vue-components 按需自动导入组件，如：Element Plus 等三方库和指定目录下的自定义组件
//直接安装上述插件如果报如下错误，请回退插件版本,或者直接安装指定版本
TypeError: AutoImport is not a function

回退的插件版本

yarn add -D unplugin-auto-import@0.16.1 unplugin-vue-components@0.25.2

2、配置element-plus自动导入

//vue.config.js文件
const {defineConfig} = require('@vue/cli-service')
//引入element-plus自动导入相关插件
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
    //配置插件,必须在configureWebpack目录下
    configureWebpack: {
        plugins: [
            // 配置插件
            AutoImport({
                //自动导入element-plus组件
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                //自动注册element-plus组件
                resolvers: [ElementPlusResolver()],
            })
        ],
    },
    transpileDependencies: true
})

特殊使用方式

在你配置完成element-plus插件自动导入后你就可以使用el-icon-图标名称的方式使用element-plus图标

        <el-menu-item index="2">
          <el-icon>
          	<!-- 例子 -->
            <el-icon-menu/>
          </el-icon>
          <span>Navigator Two</span>
        </el-menu-item>

3、安装自动引入element-icon插件

# NPM
npm install -D unplugin-icons
# Yarn
yarn add -D unplugin-icons
# pnpm
pnpm install -D unplugin-icons

注释

//直接安装上述插件如果报如下错误，请回退插件版本,或者直接安装指定版本
TypeError: IconsResolver is not a function

回退的插件版本

yarn add -D unplugin-icons@0.16.1

4、配置element-icon自动导入(从 iconify中自动导入)

const {defineConfig} = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')
// 引入element-icon自动导入相关插件
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

module.exports = defineConfig({
    configureWebpack: {
        plugins: [
            AutoImport({
                resolvers: [
                    ElementPlusResolver(),
                    // 自动导入图标组件
                    IconsResolver(),
                ],
            }),
            Components({
                resolvers: [
                    ElementPlusResolver(),
                    // 自动注册图标组件
                    IconsResolver({
                        //此处配置前缀，默认是i，设置为false则不显示前缀
                        prefix: 'xxx',
                        //此处配置的为图标集，在中括号中多个图标集以逗号分割
                        enabledCollections: ['ep']
                    })
                ],
            }),
            //自动下载图标
            Icons({
                autoInstall: true,
            }),
        ],
    },
    transpileDependencies: true
})

配置完成后使用**配置前缀-图标库名称-图标名**方式使用图标。

        <el-menu-item index="2">
          <el-icon>
          	<!-- 例子，ep为element-icon图库名称 -->
            <xxx-ep-menu/>
          </el-icon>
          <span>Navigator Two</span>
        </el-menu-item>