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

相关推荐
阿里云云原生11 分钟前
阿里云 SLS 多云日志接入最佳实践:链路、成本与高可用性优化
数据库·阿里云·云计算
ドロロ80620 分钟前
element-plus点击重置表单,却没有进行重置操作
javascript·vue.js·elementui
海盐泡泡龟1 小时前
ES6新增Set、Map两种数据结构、WeakMap、WeakSet举例说明详细。(含DeepSeek讲解)
前端·数据结构·es6
t_hj2 小时前
Ajax案例
前端·javascript·ajax
bigHead-2 小时前
9. 从《蜀道难》学CSS基础:三种选择器的实战解析
前端·css
阿里小阿希3 小时前
解决 pnpm dev 运行报错的坎坷历程
前端·node.js
未脱发程序员3 小时前
分享一款开源的图片去重软件 ImageContrastTools,基于Electron和hash算法
前端·javascript·electron
千叶真尹3 小时前
基于阿里云DataWorks的物流履约时效离线分析
阿里云·云计算
geovindu3 小时前
vue3: pdf.js 2.16.105 using typescript
javascript·vue.js·typescript·pdf
视频砖家3 小时前
Web前端VSCode如何解决打开html页面中文乱码的问题(方法2)
前端·vscode·vscode乱码·vscode中文乱码·vscode中文编码