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

相关推荐
冰镇生鲜几秒前
《元素视口可见性检测 》Vue自定义指令 封装
前端·vue.js
qirong1 分钟前
夜色渐浓,众星拱月 - Threejs复刻原神绝美空月之歌场景(二)
前端·javascript·three.js
华科云商xiao徐2 分钟前
C#编写HttpClient爬虫程序示例
前端
卖报的小行家_3 分钟前
Vue2源码,响应式原理,数组
前端
蓉妹妹4 分钟前
AntDesign下,Select内嵌Menu标签,做一个多选下拉框,既可以搜索,还可以选择下拉项
前端·react.js
牛马喜喜4 分钟前
如何从零实现一个todo list(3)
前端
hepherd7 分钟前
Vue学习笔记 - 安装与环境搭建
前端·vue.js
前端飞天猪7 分钟前
学习笔记:从输入URL到页面呈现的全流程深度解析
前端·浏览器
想想拼搏8 分钟前
高德地图配合three.js加载3d模型
前端
牛马喜喜9 分钟前
如何从零实现一个todo list(4)
前端