若依前端引入外部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"即可

相关推荐
超级无敌攻城狮1 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel2 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip2 小时前
JavaScript事件流
前端·javascript
赵得C3 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG3 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904273 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路3 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa3 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事3 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss3 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3