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

相关推荐
_安晓23 分钟前
Rust 中精确大小迭代器(ExactSizeIterator)的深度解析与实践
java·前端·python
烛阴24 分钟前
从create到yield:Lua协程完全上手指南
前端·lua
薛一半1 小时前
Vue3的Pinia详解
前端·javascript·vue.js
浅影歌年2 小时前
vue3模块中引用公共css变量文件
前端
盼哥PyAI实验室3 小时前
从搭建到打磨:我的纯前端个人博客开发复盘
前端·javascript
前端初见3 小时前
2025前端面试题大合集
前端
用户904706683573 小时前
vue3.5新特性——useTemplateRef
前端
嘉琪0013 小时前
vue3+ts面试题(一)JSX,SFC
前端·javascript·react.js
何贤3 小时前
🪐 行星科技概念官网!Hero Section 回归!(Three.js ✨)
前端·javascript·three.js
前端拿破轮3 小时前
ReactNative从入门到性能优化(一)
前端·react native·客户端