若依前端使用图标

图标

前后端分离的若依前端使用的图标分为两种:分别是svg图标和element的图标

svg图标

1,使用方法

c 复制代码
<!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class-->
<svg-icon icon-class="password"  class-name='custom-class' />

2,图标扩展

若依自带图标如下图,如果若依自带的图标不够用,可以使用以下方法增加你想要的svg图标,只需把图标放到src/assets/icons/svg 下即可,也就是和若依自带的svg图片放到一起

(1)下载svg图标

https://www.iconfont.cn/

https://www.flaticon.com/

(2)图片png转svg

https://onlineconvertfree.com/zh/convert/png/

(3)自定义(不推荐)

https://zhuanlan.zhihu.com/p/258796445

element图标

使用方法

直接通过设置类名为 el-icon-iconName 来使用即可。例如:

c 复制代码
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

图标展示及详细说明:https://element.eleme.cn/#/zh-CN/component/icon

相关推荐
行走的陀螺仪8 分钟前
Sass 详细指南
前端·css·rust·sass
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ13 分钟前
React 怎么区分导入的是组件还是函数,或者是对象
前端·react.js·前端框架
LYFlied27 分钟前
【每日算法】LeetCode 136. 只出现一次的数字
前端·算法·leetcode·面试·职场和发展
子春一228 分钟前
Flutter 2025 国际化与本地化工程体系:从多语言支持到文化适配,打造真正全球化的应用
前端·flutter
QT 小鲜肉42 分钟前
【Linux命令大全】001.文件管理之file命令(实操篇)
linux·运维·前端·网络·chrome·笔记
羽沢311 小时前
ECharts 学习
前端·学习·echarts
LYFlied2 小时前
WebAssembly (Wasm) 跨端方案深度解析
前端·职场和发展·wasm·跨端
七月丶2 小时前
实战复盘:我为什么把 TypeScript 写的 CLI 工具用 Rust 重写了一遍?
前端·后端·rust
over6972 小时前
《闭包、RAG与AI面试官:一个前端程序员的奇幻LangChain之旅》
前端·面试·langchain