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

相关推荐
不瘦80斤不改名10 分钟前
HTML基础(一)
开发语言·前端·html
UXbot13 分钟前
AI画原型工具如何帮非设计师快速生成UI界面
前端·vue.js·ui·kotlin·swift·原型模式·web app
前端若水16 分钟前
原生嵌套(Nesting):以后还写 SCSS 吗?
前端·css·scss
兄弟加油,别颓废了。22 分钟前
系统全功能详细操作手册,从启动到测试
前端·chrome
ZC跨境爬虫39 分钟前
跟着 MDN 学 HTML day_32:(AbstractRange 抽象接口与 DOM 范围操作)
前端·javascript·ui·html·音视频
十子木43 分钟前
设置把所有终端移动到最前端的快捷键
前端
陈老老老板1 小时前
Bright Data Web Scraping 实战:用 MCP + Dify 构建 eBay 商品详情采集 AI 工作流(2026)
前端·人工智能
一渊之隔1 小时前
uniapp蓝牙搜索连接展示蓝牙设备包含信号显示
前端·网络·uni-app·bluetooth
Cisyam^1 小时前
Bright Data Web Scraper 实战:构建 TikTok 与 LinkedIn Web Scraping 自动化 Skill(2026)
运维·前端·自动化
李剑一1 小时前
开箱即用!Vue3+TS 视频组件完整代码,自动提取视频第一帧做封面。妈妈再也不用担心我手动截封面了
前端