element-plus框架的图标icon种类较少,一般无法涵盖所有业务情况
这时候引入font awesome6免费版,图标库非常丰富,一般可以满足所有业务场景
官网:https://fa6.dashgame.com/Font Awesome 6,一套始终绝佳的图标字体库和CSS框架。Font Awesome6中文网。https://fa6.dashgame.com/
官网上有vue3的引入教程
这里复制主要部分
npm安装
npm i --save @fortawesome/fontawesome-svg-core
# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
# for Vue 3.x
npm i --save @fortawesome/vue-fontawesome@latest-3
main.js引用
/* import the fontawesome core */
import {library} from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {
faChartLine,
faChartColumn,
faChartPie,
faList,
} from '@fortawesome/free-solid-svg-icons'
library.add(faChartLine, faChartColumn, faChartPie, faList)
/* 注册 font awesome icon 全局组件 */
app.component('font-awesome-icon', FontAwesomeIcon)
页面使用图标
可以使用font-size等css属性控制样式
<div>
<font-awesome-icon icon="fa-solid fa-chart-pie">
<font-awesome-icon icon="fa-solid fa-chart-line">
</div>