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

相关推荐
OpenTiny社区28 分钟前
如何使用 TinyEditor 快速部署一个协同编辑器
前端·开源·编辑器·opentiny
IT_陈寒32 分钟前
震惊!我用JavaScript实现了Excel的这5个核心功能,同事直呼内行!
前端·人工智能·后端
前端伪大叔1 小时前
freqtrade智能挂单策略,让你的资金利用率提升 50%+
前端·javascript·后端
江城开朗的豌豆1 小时前
从“any”战士到类型高手:我的TypeScript进阶心得
前端·javascript·前端框架
麦麦大数据1 小时前
F043 vue+flask天气预测可视化系统大数据+机器学习+管理端+爬虫+超酷界面+顶级可视化水平 【黑色版】
大数据·vue.js·flask·天气预测·气温预测·天气大数据·天气可视化
红尘散仙1 小时前
TRNovel王者归来:让小说阅读"声"临其境的终端神器
前端·rust·ui kit
知花实央l1 小时前
【Web应用安全】SQLmap实战DVWA SQL注入(从环境搭建到爆库,完整步骤+命令解读)
前端·经验分享·sql·学习·安全·1024程序员节
烛阴1 小时前
为你的Lua代码穿上盔甲:精通错误处理的艺术
前端·lua
专注前端30年1 小时前
Vue CLI与Webpack:区别解析与实战使用指南
前端·vue.js·webpack
余道各努力,千里自同风1 小时前
如何使用 Promise.all() 处理异步并发操作?
开发语言·前端·javascript