vue项目引入阿里云svg资源图标

news2025/1/19 3:01:49

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.coloradmin.cn/o/2278742.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis 中 TTL 的基本知识与禁用缓存键的实现策略(Java)

目录 前言1. 基本知识2. Java代码 前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF 单纯学习Redis可以看我前言的Java基本知识路线!! 对于Java的基本知识推荐阅读: java框架…

使用nginx搭建通用的图片代理服务器,支持http/https/重定向式图片地址

从http切换至https 许多不同ip的图片地址需要统一进行代理 部分图片地址是重定向地址 nginx配置 主站地址:https://192.168.123.100/ 主站nginx配置 server {listen 443 ssl;server_name localhost;#ssl证书ssl_certificate ../ssl/ca.crt; #私钥文件ssl_ce…

Unix 与 Linux 深度应用与对比分析

文章目录 引言Unix 与 Linux 的相似之处1. 设计理念2. 文件系统结构3. 命令行界面4. 多用户多任务支持 Unix 与 Linux 的不同之处1. 开源性2. 内核架构3. 应用场景4. 发行版 Unix 和 Linux 的开发语言1. C 语言2. 脚本语言 在 Unix 和 Linux 上开发简单应用示例1. 编写一个简单…

事务机制及Spring事务管理

事务概览 事务是一组操作的集合,它是一个不可分割的工作单位。 事务会将所有的操作作为一个整体一起向系统提交或撤销操作请求,换句话说:这些操作要么同时成功、要么同时失败。 具体案例 我们先看一个需求:现在有两张数据库表&…

48.【6】BUUCTF WEB BabySQL

进入靶场 order by 判断字节数 输入内容是 1 order by 2# 显示图片内容,知被过滤了 一般最简单的绕过方法是双写或大小写 尝试双写 It is ok continue 经过多次尝试,4时异常,所以字节数是3 union select都被过滤了 双写解决,成…

Spring6.0新特性-HTTP接口:使用@HttpExchange实现更优雅的Http客户端

文章目录 一、概述二、使用1、创建接口HttpExchange方法2、创建一个在调用方法时执行请求的代理3、方法参数4、返回值5、错误处理(1)为RestClient(2)为WebClient(3)为RestTemplate 注意 一、概述 官方文档…

高效并发编程:掌握Go语言sync包的使用方法

高效并发编程:掌握Go语言sync包的使用方法 引言基本概念并发与并行互斥锁(Mutex)读写锁(RWMutex)等待组(WaitGroup)一次性操作(Once)条件变量(Cond&#xff0…

.Net Core webapi 实现JWT认证

文章目录 需求准备创建JWT配置创建JWTService注册JWT创建中间件读取jwt的token在需要的接口上添加属性启动认证启动swagger的授权认证使用 需求 实现一个记录某个用户所有操作的功能 准备 创建你的webapi项目从nuget下载安装JWT资源包根据你的项目使用.net版本下载对应的jwt…

Linux《Linux简介与环境的搭建》

在学习了C或者是C语言的基础知识之后就可以开始Linux的学习了,现在Linux无论是在服务器领域还是在桌面领域都被广泛的使用,所以Linxu也是我们学习编程的重要环节,在此接下来我们将会花大量的时间在Linxu的学习上。在学习Linux初期你可以会像初…

从零开始:Gitee 仓库创建与 Git 配置指南

引言 Git 是一款广泛使用的版本控制工具,它能够帮助开发者在开发过程中高效地管理代码的版本。而 Gitee(码云)是国内知名的 Git 托管平台,它提供了强大的代码托管、团队协作和项目管理功能。如果你是 Git 和 Gitee 的新手&#x…

创建模式、结构模式及行为模式

谁在什么地方提供什么功能? 要设计几个类?这些类各个是什么功能?相互间的关系是什么? 创建模式指的是对象那么多,怎么把它"生"出来?生几个?从这个角度上来说数组就是一种另类的创建模式。主要…

SpringBoot链接Kafka

一、SpringBoot生产者 (1)修改SpringBoot核心配置文件application.propeties, 添加生产者相关信息 # 连接 Kafka 集群 spring.kafka.bootstrap-servers192.168.134.47:9093# SASL_PLAINTEXT 和 SCRAM-SHA-512 认证配置 spring.kafka.properties.securi…

Linux下源码编译安装Nginx1.24及服务脚本实战

1、下载Nginx [rootlocalhost ~]# wget -c https://nginx.org/download/nginx-1.24.0.tar.gz2、解压 [rootlocalhost ~]# tar xf nginx-1.24.0.tar.gz -C /usr/local/src/3、安装依赖 [rootlocalhost ~]# yum install gcc gcc-c make pcre-devel openssl-devel -y4、 准备 N…

解答二重积分

什么是积分? 一元函数的积分。具体计算过程,是将无数个小矩形加起来,然后求极限。 而今天我们要讲的积分,是二元函数的积分。我们可以用曲顶柱体的体积来理解。 什么是曲顶柱体? 它的底是xoy平面上的一个闭区域。顶是…

代理模式实现

一、概念:代理模式属于结构型设计模式。客户端不能直接访问一个对象,可以通过代理的第三者来间接访问该对象,代理对象控制着对于原对象的访问,并允许在客户端访问对象的前后进行一些扩展和处理;这种设置模式称为代理模…

回归预测 | MATLAB实TCN时间卷积神经网络多输入单输出回归预测

效果一览 基本介绍 回归预测 | MATLAB实TCN时间卷积神经网络多输入单输出回归预测 …………训练集误差指标………… 1.均方差(MSE):166116.6814 2.根均方差(RMSE):407.5741 3.平均绝对误差(MAE):302.5888 4.平均相对…

《目标检测数据集下载地址》

一、引言 在计算机视觉的广袤领域中,目标检测宛如一颗璀璨的明星,占据着举足轻重的地位。它宛如赋予计算机一双锐利的 “眼睛”,使其能够精准识别图像或视频中的各类目标,并确定其位置,以边界框的形式清晰呈现。这项技…

Android系统定制APP开发_如何对应用进行系统签名

前言 当项目开发需要使用系统级别权限或frame层某些api时,普通应用是无法使用的,需要在AndroidManifest中配置sharedUserId: AndroidManifest.xml中的android:sharedUserId“android.uid.system”,代表的意思是和系统相同的uid&a…

【NextJS】PostgreSQL 遇上 Prisma ORM

NextJS 数据库 之 遇上Prisma ORM 前言一、环境要求二、概念介绍1、Prisma Schema Language(PSL) 结构描述语言1.1 概念1.2 组成1.2.1 Data Source 数据源1.2.2 Generators 生成器1.2.3 Data Model Definition 数据模型定义字段(数据)类型和约束关系&…

Mybatis 进阶 / Mybatis—Puls (详细)

目录 一.动态SQL 1.1标签 1.2 标签 1.3标签 1.4标签 1.5标签 1.6标签 mybatis总结: 二.Mybatis-Puls 2.1准备工作 2.2CRUD单元测试 2.2.1创建UserInfo实体类 2.2.2编写Mapper接⼝类 2.2.3 测试类 2.3 常见注解 2.3.1TableName 2.3.2TableField 2.4打印日…