vue3.0 ElementPlus使用图标

安装unplugin-icons插件

npm install -D unplugin-icons

配置vue.config.js 文件

1. 导入unplugin-icons插件下的 webpack和resolver

`const Icons = require('unplugin-icons/webpack')

const IconsResolver = require('unplugin-icons/resolver')`

2. 在plugins 列表中添加unplugin-icons，并自动加载图标集 Icons({ autoInstall: true })

3. 自动导入图标组件，组件名以icon开头

AutoImport({ imports: ['vue'], resolvers: [ IconsResolver({ prefix: 'icon' }), ElementPlusResolver({exclude: new RegExp(/^(?!.*loading-directive).*$/)}) ] })

4. 自动注册图标组件 Components({ resolvers: [ // 自动注册图标组件 IconsResolver({ prefix: 'icon' }), ElementPlusResolver() ] })

5. 使用图标 iconify图标网站地址 icon-sets.iconify.design/carbon/clos…

使用 组件名以icon开头

<el-icon :size="20"> <icon-carbon-close /> </el-icon>