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.mzph.cn/news/892987.shtml

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

相关文章

网络安全面试题汇总(个人经验)

1.谈一下SQL主从备份原理? 答:主将数据变更写入自己的二进制log,从主动去主那里去拉二进制log并写入自己的二进制log,从而自己数据库依据二进制log内容做相应变更。主写从读 2.linux系统中的计划任务crontab配置文件中的五个星星分别代表什么&#xff…

Elasticsearch:Jira 连接器教程第二部分 - 6 个优化技巧

作者:来自 Elastic Gustavo Llermaly 将 Jira 连接到 Elasticsearch 后,我们现在将回顾最佳实践以升级此部署。 在本系列的第一部分中,我们配置了 Jira 连接器并将对象索引到 Elasticsearch 中。在第二部分中,我们将回顾一些最佳实…

5 分钟复刻你的声音,一键实现 GPT-Sovits 模型部署

想象一下,只需简单几步操作,就能生成逼真的语音效果,无论是为客户服务还是为游戏角色配音,都能轻松实现。GPT-Sovits 模型,其高效的语音生成能力为实现自然、流畅的语音交互提供了强有力的技术支持。本文将详细介绍如何…

【CSS】---- CSS 实现超过固定高度后出现展开折叠按钮

1. 实现效果 2. 实现方法 使用 JS 获取盒子的高度,来添加对应的按钮和样式;使用 CSS 的浮动效果,参考CSS 实现超过固定高度后出现展开折叠按钮;使用容器查询 – container 语法;使用 clamp 函数进行样式判断。 3. 优…

【git】如何删除本地分支和远程分支?

1.如何在 Git 中删除本地分支 本地分支是您本地机器上的分支,不会影响任何远程分支。 (1)在 Git 中删除本地分支 git branch -d local_branch_name git branch 是在本地删除分支的命令。-d是一个标志,是命令的一个选项&#x…

基于微信小程序的摄影竞赛系统设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…

人工智能-机器学习之多分类分析(项目实战二-鸢尾花的多分类分析)

Softmax回归听名字,依然好像是做回归任务的算法,但其实它是去做多分类任务的算法。 篮球比赛胜负是二分类,足球比赛胜平负就是多分类 识别手写数字0和1是二分类,识别手写数字0-9就是多分类 Softmax回归算法是一种用于多分类问题…

DeepSeek-v3在训练和推理方面的优化

1. 基础架构:MLA,大幅减少了KV cache大小。(计算量能不能减少?) 2. 基础架构:MoE,同等参数量(模型的”能力“)下,训练、推理的计算量大幅减少。 3. MoE的load…

MySQL8数据库全攻略:版本特性、下载、安装、卸载与管理工具详解

大家好,我是袁庭新。 MySQL作为企业项目中的主流数据库,其5.x和8.x版本尤为常用。本文将详细介绍MySQL 8.x的特性、下载、安装、服务管理、卸载及管理工具,旨在帮助用户更好地掌握和使用MySQL数据库。 1.MySQL版本及下载 企业项目中使用的…

centos 7 Mysql服务

将此服务器配置为 MySQL 服务器,创建数据库为 hubeidatabase,将登录的root密码设置为Qwer1234。在库中创建表为 mytable,在表中创建 2 个用户,分别为(xiaoming,2010-4-1,女,male&…

紫光无人机AI飞控平台介绍

随着无人机技术的迅猛发展,无人机飞控平台的智能化需求不断提升。紫光无人机AI飞控平台作为一款创新型产品,为用户提供了从飞行控制到任务管理的一站式解决方案,尤其在AI实时识别和事件分析方面具有显著优势。本文将介绍平台的核心功能、技术…

【机器学习实战入门】有趣的Python项目:使用OpenCV进行性别和年龄检测

Gender and Age Detection Python 项目 首先,向您介绍用于此高级 Python 项目的性别和年龄检测中的术语: 什么是计算机视觉? 计算机视觉是一门让计算机能够像人类一样观察和识别数字图像和视频的学科。它面临的挑战大多源于对生物视觉有限的了解。计算机视觉涉及获取、处…

AutoAlign实体对齐方法的详细工作原理和在大规模知识图谱中的应用

AutoAlign是一种全自动且高效的知识图谱对齐方法,其工作原理主要基于大型语言模型(LLM),如ChatGPT和Claude,通过构建谓词邻近图和实体嵌入模块来实现实体和谓词的自动对齐。这种方法不需要人工标注种子对齐&#xff0c…

【2025最新】国内中文版 ChatGPT镜像网站整理合集,GPT最新模型4o1,4o,4o-mini分类区别,镜像站是什么

1.快速导航 原生中转型镜像站点 立即Chat支持GPT4、4o以及o1,canvs等,同步官网功能 AIChat.com 支持最新4O 2.两者对比 官网立即Chat访问难度需要魔法直接访问支付手段国际支付国内支付封禁策略检测节点,随时封禁不会封禁价格每月140元订阅费用每年70元…

事务机制及Spring事务管理

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

CCLINKIE转ModbusTCP网关,助机器人“掀起”工业智能的“惊涛骇浪”

以下是一个稳联技术CCLINKIE转ModbusTCP网关(WL-CCL-MTCP)连接三菱PLC与机器人的配置案例:设备与软件准备设备:稳联技术WL-CCL-MTCP网关、三菱FX5UPLC、支持ModbusTCP协议的机器人、网线等。 稳联技术ModbusTCP转CCLINKIE网关&…

python管理工具:conda部署+使用

python管理工具:conda部署使用 一、安装部署 1、 下载 - 官网下载: https://repo.anaconda.com/archive/index.html - wget方式: wget -c https://repo.anaconda.com/archive/Anaconda3-2023.03-1-Linux-x86_64.sh2、 安装 在conda文件的…

python爬虫入门(理论)

python爬虫 学习网站 一、准备 环境搭建 requests beautifulsoup4 selenium 爬虫架构 URL管理器:管理URL,存储已爬取或待爬取的URL 网页下载器:破解网页,进行下载 网页解析器:对网页的HTML样式、连接的URL等进…

windows-本地部署Git仓库-安装Gitea

windows-本地部署Git仓库-安装Gitea 初始化MysQL数据库下载运行后关闭配置服务初始化打开防火墙指定端口入站规则 初始化MysQL数据库 create database gitea character set utf8mb4; 下载 运行后关闭 配置服务 初始化 打开防火墙指定端口入站规则

CV 图像处理基础笔记大全(超全版哦~)!!!

一、图像的数字化表示 像素 数字图像由众多像素组成,是图像的基本构成单位。在灰度图像中,一个像素用一个数值表示其亮度,通常 8 位存储,取值范围 0 - 255,0 为纯黑,255 为纯白。例如,一幅简单的…