vue项目引入阿里云svg资源图标

1:生成svg图标

登录阿里云官网

1.1 创建项目组

1.2 从阿里云网站上面获取喜欢的图标加入到已有的项目组

1.3 如果团队有自己的设计师,也可以让设计师上传自己的svg图标到阿里云指定的项目组;

使用的时候,把 资源包下载到本地项目中static或者assets文件下

2:项目中使用svg图标

2.1 把阿里云下载的资源文件放在vue的资源文件中static或者assets文件夹中

2.2 在main.ts (main.js)中引入 资源路径

如果阿里云所在项目组有新上传的资源,记得更新下本地的资源包,下载下来,覆盖本地的资源就可以。

javascript 复制代码
import '@/assets/fonts/iconfont.css'

2.3 在route中使用阿里云提供的svg名称

2.4 在页面渲染路由的时候,用svg来渲染svg格式的文件资源

这里我用的单独组件去封装的

解析svg

相关推荐
棉花糖超人2 分钟前
【从0-1的CSS】第1篇:CSS简介,选择器已经常用样式
前端·css
GISer_Jing7 分钟前
XHR / Fetch / Axios 请求的取消请求与请求重试
前端·javascript·网络
天涯学馆11 分钟前
微前端架构设计:从理论到实践的全面指南
前端·javascript·面试
Verin22 分钟前
Next.js+Wagmi+rainbowkit构建以太坊合约交互模版
前端·web3·以太坊
KenXu24 分钟前
🚀 Cursor 1.0 重磅发布!AI代码编辑器迎来革命性升级
前端
凌辰揽月26 分钟前
Web后端基础(Maven基础)
前端·pycharm·maven
梦想CAD控件30 分钟前
(VUE3集成CAD)在线CAD实现焊接符号自定义
前端·javascript·vue.js
小华同学ai31 分钟前
千万别错过!这个国产开源项目彻底改变了你的域名资产管理方式,收藏它相当于多一个安全专家!
前端·后端·github
lyc23333331 分钟前
鸿蒙数据备份:让用户数据「稳如磐石」的3个核心要点💾
前端
Vowwwwwww35 分钟前
GIT历史存在大文件的解决办法
前端·git·后端