当前位置: 首页 > news >正文

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)中引入 资源路径

如果阿里云所在项目组有新上传的资源,记得更新下本地的资源包,下载下来,覆盖本地的资源就可以。

import '@/assets/fonts/iconfont.css'

2.3 在route中使用阿里云提供的svg名称

2.4 在页面渲染路由的时候,用svg来渲染svg格式的文件资源

这里我用的单独组件去封装的

解析svg

http://www.lryc.cn/news/521779.html

相关文章:

  • 存储过程和触发器
  • 《拉依达的嵌入式\驱动面试宝典》—计算机网络篇(二)
  • 【深度学习实战】kaggle 自动驾驶的假场景分类
  • Spring Boot 和微服务:快速入门指南
  • qt QPainter setViewport setWindow viewport window
  • 网络安全面试题汇总(个人经验)
  • 【网络云SRE运维开发】2025第3周-每日【2025/01/14】小测-【第13章ospf路由协议】理论和实操
  • FreeType 介绍及 C# 示例
  • 金融项目实战 04|JMeter实现自动化脚本接口测试及持续集成
  • Linux网络知识——路由表
  • 浅谈云计算14 | 云存储技术
  • AI 编程工具—Cursor进阶使用 阅读开源项目
  • 使用 WPF 和 C# 将纹理应用于三角形
  • Elasticsearch搜索引擎(二)
  • unity学习17:unity里的旋转学习,欧拉角,四元数等
  • 走出实验室的人形机器人,将复刻ChatGPT之路?
  • 如何使用wireshark 解密TLS-SSL报文
  • 电脑有两张网卡,如何实现同时访问外网和内网?
  • 定义:除了Vue内置指令以外的其他 v-开头的指令(需要程序员自行扩展定义)作用:自己定义的指令, 可以封装一些 dom 操作, 扩展
  • SpringBoot错误码国际化
  • LeetCode 3066.超过阈值的最少操作数 II:模拟 - 原地建堆O(1)空间 / 优先队列O(n)空间
  • 深度学习中的模块复用原则(定义一次还是多次)
  • Mac——Cpolar内网穿透实战
  • 安全测评主要标准
  • qBittorent访问webui时提示unauthorized解决方法
  • 504 Gateway Timeout:网关超时解决方法
  • Vue 实现当前页面刷新的几种方法
  • MCP Server开发的入门教程(python和pip)
  • 手撕Transformer -- Day7 -- Decoder
  • C#异步和多线程,Thread,Task和async/await关键字--12