若依前端使用图标

图标

前后端分离的若依前端使用的图标分为两种:分别是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

相关推荐
烛阴15 分钟前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript
上单带刀不带妹1 小时前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
11054654012 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax2 小时前
在图片没有加载完成时设置默认图片
前端
OEC小胖胖3 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
你怎么知道我是队长3 小时前
C语言---编译的最小单位---令牌(Token)
java·c语言·前端
一枚前端小能手4 小时前
🔥 Vue状态管理越写越乱,Pinia拯救了我
前端
cloudcruiser4 小时前
Apache HTTP Server:深入探索Web世界的磐石基石!!!
前端·其他·http·apache
一个专注api接口开发的小白4 小时前
手把手教程:使用 Postman 测试与调试淘宝商品详情 API
前端·数据挖掘·api
织_网5 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron