安裝Icon?圖標
# 選擇一個你喜歡的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue?自動導入
首先你需要安裝?unplugin-icons?和?unplugin-auto-import?這兩款插件
npm install -D unplugin-icons unplugin-auto-import修改配置文件
// vue.config.js
const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const IconsResolver = require('unplugin-icons/resolver');
const Icons = require('unplugin-icons/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = defineConfig({
...
configureWebpack: {
plugins: [
AutoImport({
resolvers: [
IconsResolver({
prefix: 'Icon',
}),
],
}),
Components({
resolvers: [
// 自動注冊圖標組件
IconsResolver({
enabledCollections: ['ep'],
}),
],
}),
Icons({
autoInstall: true,
}),
],
},
});按需引入后發(fā)現(xiàn)文章來源：http://www.zghlxwxcb.cn/news/detail-527187.html
// 按需引入后，發(fā)現(xiàn)以下寫法不能顯示icon的圖標
<el-icon size="20">
<Edit />
</el-icon>
// 正確的寫法是
<el-icon size="20">
<i-ep-add-location />
</el-icon>
// 或
<i-ep-add-location />https://www.yyyi1.cn/detail?id=63e65183982003a0a19bbe23文章來源地址http://www.zghlxwxcb.cn/news/detail-527187.html
到了這里，關于Element Plus Icon圖標自動引入的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
