若依前端引入外部icon

若依前端引入外部icon

场景:使用若依管理平台时,element-ui自带icon不满足需求,需要自己引入

具体实现:

  1. 下载自己需要的svg文件,推荐下载地址: https:www.iconfont.cn,下载时选择SVG下载
  2. 将下载的svg文件引入项目中(src/assets/icons/svg文件夹下)
  3. 在需要使用的vue文件中使用:
javascript 复制代码
<svg-icon icon-class="bookmark" class-name='custom-class'/>

.custom-class{
    color: #C03639;
    font-size: 40px;
  }

说明:bookmark为svg文件名,custom-class为自定义样式,若样式不生效,将svg文件中的fill参数删除或者改为fill="currentColor"即可

相关推荐
sycmancia1 分钟前
Qt——布局管理区(二)
开发语言·前端·qt
勇哥是也1 分钟前
前端也能玩 AI:阿里云百炼流式对话开发
前端·人工智能·阿里云
夜影风3 分钟前
Prompt Engineering(提示词工程) vs. Agent Skills(智能体技能):从“口头吩咐”到“标准化操作手册”的进化
前端·人工智能·prompt
落魄江湖行6 分钟前
基础篇九 Nuxt4 插件系统:扩展 Nuxt 能力
前端·vue.js·typescript·nuxt4
程序员小寒15 分钟前
JavaScript设计模式(十):模板方法模式实现与应用
前端·javascript·设计模式·模板方法模式
Bigger16 分钟前
第六章:我是如何剖析 Claude Code 的终端界面渲染原理的
前端·react.js·claude
Alvin千里无风16 分钟前
ECharts 世界地图实现完整指南
前端·echarts
We་ct19 分钟前
EventSource & WebSocket & HTTP
前端·javascript·网络·websocket·网络协议·http·面试
张风捷特烈21 分钟前
GetX 之死 | 8 年从未用过,以后将不会再用
android·前端·flutter
冲浪中台25 分钟前
20个常用的CSS知识点
前端·css