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.rhkb.cn/news/2519.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件测试 —— 自动化测试(Selenium)

软件测试 —— 自动化测试(Selenium) 什么是SeleniumPython安装Selenium1.安装webdirver-manager2.安装Selenium 写一个简单用例CSS_SELECTOR和XPATH浏览器快速定位页面元素浏览器的前进(forward),后退(bac…

新垂直电商的社交传播策略与AI智能名片2+1链动模式S2B2C商城小程序的应用探索

摘要:随着互联网技术的不断进步和电商行业的快速发展,传统电商模式已难以满足消费者日益增长的个性化和多元化需求。新垂直电商在此背景下应运而生,通过精准定位、用户细分以及深度社交传播策略,实现了用户群体的快速裂变与高效营…

Jmeter进行http接口并发测试

目录: 1、Jmeter设置(1)设置请求并发数(2)设置请求地址以及参数(3)添加结果数 2、启动看结果 1、Jmeter设置 (1)设置请求并发数 (2)设置请求地址…

有一台服务器可以做哪些很酷的事情

有一台服务器可以做哪些很酷的事情 今天我也来简单分享一下,这几年来,我用云服务器做了哪些有趣的事情。 服务器推荐 1. 个人博客 拥有个人服务器,你可以完全掌控自己的网站或博客。 与使用第三方托管平台相比,你能自由选择网站…

链家房价数据爬虫和机器学习数据可视化预测

完整源码项目包获取→点击文章末尾名片!

从网络的角度来看,用户输入网址到网页显示,期间发生了什么?

步骤(总体来看) 浏览器根据输入网页的URL进行解析,解析出对应的请求方式、URL、端口等,生成HTTP请求报文。浏览器查询缓存,检查缓存是否已经存在该URL的资源,如果缓存命中中直接读取并显示,比如…

MYSQL创建表

1.要求 2.步骤 1.创建数据库: create database mydb6_product;2.使用数据库: use mydb6_product;3.创建employees表: create table employees(id int primary key,name varchar(50) not null, age int not null,gender varchar(10) not null default unknown&…

计算机网络的五层协议

计算机网络的五层协议 ‌计算机网络的五层协议模型包括物理层、数据链路层、网络层、传输层和应用层,每一层都有其特定的功能和相关的协议。‌‌1 ‌物理层‌:负责传输原始的比特流,通过线路(有线或无线)将数据转换为…

C语言初阶习题【30】字符串左旋

1. 题目描述——字符串左旋 实现一个函数,可以左旋字符串中的k个字符。 例如: ABCD左旋一个字符得到BCDA ABCD左旋两个字符得到CDAB 2. 思路 先思考了下如何把最前面的字符串移到后面。 思路比较简单,就是把第一个字符保存下来&#xf…

ESP8266固件烧录

一、烧录原理 1、引脚布局 2、引脚定义 3、尺寸封装 4、环境要求 5、接线方式 ESP8266系列模块集成了高速GPI0和外围接口,这可能会导致严重的开关噪声。如果某些应用需要高功率和EMI特性,建议在数字I/0线上串联10到100欧姆。这可以在切换电源时抑制过冲…

word-break控制的几种容器换行行为详解

word-break 属性在控制换行行为时需要根据语言判断,对于中文 一个字符就是一个单词,字符换行不影响阅读理解,而对于英文来说,多个连续的字符才会是一个单词,例如中文的 早 英文为 morning。 morning7个字符才算一个单词…

年后找工作需要注意的事项

大家好!我是 [数擎 AI],一位热爱探索新技术的前端开发者,在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情,欢迎关注我的文章,我们一起成长、进步! 开发领域:前端开发 | A…

Flink链接Kafka

一、基于 Flink 的 Kafka 消息生产者 Kafka 生产者的创建与配置: 代码通过 FlinkKafkaProducer 创建 Kafka 生产者,用于向 Kafka 主题发送消息。Flink 执行环境的配置: 配置了 Flink 的检查点机制,确保消息的可靠性,支…

Windows 10 ARM工控主板连接I2S音频芯片

在Windows工控主板应用中,音频功能是一项基本的需求,USB声卡在x86/x64 Windows系统上就可直接免驱使用,但这些USB声卡通常不提供ARM上的Windows系统驱动。本文将介绍如何利用安装在ARM上的Windows工控主板——ESM8400的I2S接口、连接WM8960音…

机器学习实战33-LSTM+随机森林模型在股票价格走势预测与买卖点分类中的应用

大家好,我是微学AI,今天给大家介绍一下机器学习实战33-LSTM随机森林模型在股票价格走势预测与买卖点分类中的应用。对于LSTM随机森林模型的融合应用,我们选择股票价格走势预测与买卖点分类作为应用场景。股票市场数据丰富且对投资者具有实际价…

在VS2022中用C++连接MySQL数据库读取数据库乱码问题

1.正确安装mysql 安装之后的配置文件 2.在VS2022中进行相关配置 (1)右键项目,打开属性 注意是右键项目,不是.cpp文件 (2)配置属性-> VC目录 -> 包含目录 ->添加头文件路径(如图&am…

vue3+ts+element-plus 输入框el-input设置背景颜色

普通情况&#xff1a; 组件内容&#xff1a; <el-input v-model"applyBasicInfo.outerApplyId"/> 样式设置&#xff1a; ::v-deep .el-input__wrapper {background-color: pink; }// 也可以这样设置 ::v-deep(.el-input__wrapper) {background-color: pink…

Realsense相机驱动安装及其ROS通讯配置——机器人抓取系统基础系列(四)

文章目录 概要1 Realsense相机驱动安装Method1: 使用Intel服务器预编译包Method2: 使用ROS服务器预编译包Method3: 使用SDK源代码方法对比总结 2 Realsense-ROS通讯配置与使用2.1 Realsense-ROS包安装2.2 ROS节点启动 小结Reference 概要 本文首先阐述了Realsense相机驱动安装…

初识 Git——《Pro Git》

Why Git&#xff1f; 1. 本地版本控制系统 Why&#xff1a; 许多人习惯用复制整个项目目录的方式来保存不同的版本&#xff0c;或许还会改名加上备份时间以示区别。 这么做唯一的好处就是简单&#xff0c;但是特别容易犯错。 有时候会混淆所在的工作目录&#xff0c;一不小心…

Freeswitch使用media_bug能力实现回铃音检测

利用freeswitch的media bug能力来在智能外呼时通过websocket对接智能中心的声音检测接口&#xff0c;来实现回铃音检测&#xff0c;来判断用户当前是否已响应&#xff0c;拒接&#xff0c;关机等。 1.回铃音处理流程 2.模块源码目录结构 首先新建一个freeswitch的源码的src/a…