前言
今天博主正在学习Springboot+Vue的后台管理项目,对着B站的教程视频在模仿着敲,发现和up主的代码一样但是图标 不 显 示!
在摸索了近半个小时之后,发现新版的Element Plus在进行图标引入时需要按需引入
一、官网
官网:https://element-plus.gitee.io/zh-CN/
图标教程:https://element-plus.gitee.io/zh-CN/component/icon.html
二、步骤
前面的安装以及注册所有图标在这里就不多描述了,直接放上代码
# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
// main.js
// 如果您正在使用CDN引入,请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
在这里以Edit和Avatar图标为例
1.图标按需引入
import { Edit,Avatar} from '@element-plus/icons-vue'
export default {
name: "页面名",
components: {
Avatar,
Edit,
}
}
2.在页面上使用
第一种是可以使用el-icon标签引入图标,同时可以对图标进行样式上的设计
<!-- Use el-icon to provide attributes to SVG icon -->
<template>
<div>
<el-icon :size="size" :color="color">
<Edit />
</el-icon>
</div>
</template>
第二种是直接使用icon的名字进行SVG图标的引入
<!-- Or use it independently without derive attributes from parent -->
<Edit />
<!-- 由于SVG图标默认不携带任何属性 -->
<!-- 你需要直接提供它们 -->
<Edit style="width: 1em; height: 1em; margin-right: 8px" />
<Share style="width: 1em; height: 1em; margin-right: 8px" />
<Delete style="width: 1em; height: 1em; margin-right: 8px" />
<Search style="width: 1em; height: 1em; margin-right: 8px" />