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

相关推荐
熬夜患者22 分钟前
HTML学习笔记(4)
前端·css·html
2401_882727971 小时前
web组态可视化编辑器
前端·后端·物联网·低代码·编辑器
谢道韫6661 小时前
今日总结 2025-01-14
前端
大邳草民2 小时前
Vue 项目中引入外部脚本的方式
前端·javascript·vue.js·笔记
iDestin2 小时前
解决 chls.pro/ssl 无法进入问题
前端·代理·charles
半点寒12W3 小时前
CSS3 动画详解
前端·css·css3
桂月二二3 小时前
深入探索 Vue.js 组件开发中的最新技术:Teleport 和 Suspense 的使用
前端·javascript·vue.js
影子信息3 小时前
element 日期时间组件默认显示当前时间
java·前端·javascript
神仙别闹5 小时前
基于Vue和Vuex实现俄罗斯方块小游戏
前端·javascript·vue.js