Vue页面快速使用阿里巴巴矢量图标库

前面我已经写个一篇文章

阿里巴巴矢量图标如何使用_turbo夏日漱石的博客-CSDN博客

这篇文章非常详细地讲解了在html页面中如何使用阿里巴巴矢量图标库

下面我们讲解在vue页面中引入阿里巴巴矢量图标库icon的几种方法

目录

一、引入在线链接

1、 第九步链接引入在vue中应该是在入口文件index.html中引入

2、使用时即可在任意vue页面在标签中这样使用

二、下载png

1、按上文中的方法先保存到项目中

2、悬停在需要的icon上,点击下载

3、选中png下载

4、放到vue项目src/assets下的合适位置

5、在页面设置样式

6、标签引入

7、页面显示


一、引入在线链接

该方法与html页面中如何使用阿里巴巴矢量图标库的方法几乎一致,博客入口就是:

阿里巴巴矢量图标如何使用_turbo夏日漱石的博客-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/qq_62799214/article/details/131884248

只需要修改以下几步:

1、 第九步链接引入在vue中应该是在入口文件index.html中引入

2、使用时即可在任意vue页面在标签中这样使用

二、下载png

1、按上文中的方法先保存到项目中

2、悬停在需要的icon上,点击下载

3、选中png下载

4、放到vue项目src/assets下的合适位置

5、在页面设置样式

.logo {top: 9px;left: 9px;margin-right: 10px;width: 30px;height: 30px;// border-radius: 4px;background: url("../assets/images/mulu2.png") no-repeat;background-size: contain;}

6、标签引入

7、页面显示

注意:

方法1引入的矢量图可能时黑白的,可在样式中自定义颜色

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/139483.html

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

相关文章

安卓备份基带分区 备份字库 步骤解析 以免误檫除分区或者“格机” 后悔莫及

玩机搞机---安卓机型mtk和高通芯片查看分区 导出分区 备份分区的一些工具分析 修复基带 改串码 基带qcn 改相关参数 格机危害 手机基带的重要性前面几期博文我都有相关的说明。他区别于别的分区。而且目前手机的安全性越来越高。基带分区基本都是专机专用。而不像早期机型一…

【AI语言大模型】文心一言功能使用介绍

一、前言 文心一言是一个知识增强的大语言模型,基于飞桨深度学习平台和文心知识增强大模型,持续从海量数据和大规模知识中融合学习具备知识增强、检索增强和对话增强的技术特色。 最近收到百度旗下产品【文心一言】的产品,抱着试一试的心态体…

java服务内存说明及配置详解

java进程内存 JVM内存分布图: 【java进程内存】【堆外内存】 【jvm堆内存】 【堆外内存】 【Metaspace】 【Direct Memory】【JNI Memory】【code_cache】 … 堆外内存泄漏的排查在于【本地内存(Native Memory)】【Direct Memory】【JNI Memory】 一般…

期刊分类一览

分区情况 jcr分区 中科院分区 EI 理工科 一般是SCI的都是EI 国内的分区

网络安全深入学习第三课——热门框架漏洞(RCE—Struts2远程代码执行)

文章目录 一、Struts2框架介绍二、Struts2远程代码执行漏洞三、Struts2执行代码的原理四、Struts2框架特征五、漏洞手工POC六、漏洞工具复现 一、Struts2框架介绍 ------ Struts2是apache项目下的一个web 框架,普遍应用于阿里巴巴、京东等互联网、政府、企业门户网…

2023-09-20 Android CheckBox 让文字显示在选择框的左边

一、CheckBox 让文字在选择框的左边 &#xff0c;在布局文件里面添加下面一行就可以。 android:layoutDirection"rtl" 即可实现 android:paddingStart"10dp" 设置框文间的间距 二、使用的是left to right <attr name"layoutDirection">&…

一文掌握CodiMD安装与使用

简介&#xff1a;CodiMD 是一个基于 Markdown 语言的实时协作文档编辑器&#xff0c;它允许多个用户在同一个文档上进行实时编辑。CodiMD 的前身是 HackMD&#xff0c;但为了满足更开放的开源社区需求&#xff0c;CodiMD 作为其社区版本独立出来。 优势&#xff1a; 1. 开源且…

【Godot】解决游戏中的孤立/孤儿节点及分析器性能问题的分析处理

Godot 4.1 因为我在游戏中发现&#xff0c;越运行游戏变得越来越卡&#xff0c;当你使用 Node 节点中的 print_orphan_nodes() 方法打印信息的时候&#xff0c;会出现如下的孤儿节点信息 孤儿节点信息是以 节点实例ID - Stray Node: 节点名称(Type: 节点类型) 作为格式输出&a…

关于JPA +SpringBoot 遇到的一些问题及解决方法

关于JPA SpringBoot 遇到的一些问题及解决方法&#xff08;可能会有你正在遇到的&#xff09; 一、JpaRepository相关 1.1 org.springframework.dao.InvalidDataAccessResourceUsageException: Named parameter not bound : id; nested exception is org.hibernate.QueryEx…

【从0学习Solidity】33. 发送空投

【从0学习Solidity】 33. 发送空投 博主简介&#xff1a;不写代码没饭吃&#xff0c;一名全栈领域的创作者&#xff0c;专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构&#xff0c;分享一些项目实战经验以及前沿技术的见解。关注我们的主页&#xff0c;探索全栈…

day03_基础语法

今日内容 零、复习昨日 一、Idea安装&#xff0c;配置 二、Idea使用 三、输出语句 四、变量 五、数据类型 附录: 单词 零、 复习昨日 1 装软件(typora,思维导图) 2 gpt(学会让他帮你解决问题) 3 java发展(常识) 4 HelloWorld程序 5 编码规范 6 安装jdk,配置环境变量 电脑常识 任…

vuex如何安装、报错、安装版本注意事项

npm i vuex报错&#xff0c;为什么呢&#xff1f; 在2022.2.7&#xff0c;Vue3就变成了默认版本&#xff0c; Vue2中&#xff0c;必须要用Vuex的3版本 Vue3中&#xff0c;必须要用Vuex的4版本&#xff0c;否则会报错 npm i vuex 安装的就是4版本 如果我们需要安装3版本&…

LaTex打出上大下小的公式

想要在latex中打出如下word公式 首先使用 \atop符号 使用如下语句 d_{H(A,B)} max\{{sup\, inf \atop {a \in A\,b \in B}}\,d(a,b), {sup\, inf\,\atop {b\in B\,a\in\,A}}d(b,a)\}. ![在这里插入图片描述](https://img-blog.csdnimg.cn/0c842594716a4693b1124523d53bfcad…

Unity实现角色受到攻击后屏幕抖动的效果

文章目录 实现效果摄像机抖动脚本 玩家受伤其他文章 实现效果 首先看一下实现效果。 摄像机 我们要使用屏幕抖动&#xff0c;使用的是CinemachineVirtualCamera这个组件&#xff0c;这个组件需要在包管理器中进行导入。 导入这个组件之后&#xff0c;创建一个Chinemachine-…

【Spring】Spring Security学习笔记

基本概念 概念定义认证判断一个用户身份是否合法的过程(登录过程)会话为了避免用户的每次操作都进行认证, 将用户的信息保存在会话中. 常见的会话有基于session的模式和基于token的模式授权校验用户是否有权限访问某个资源 认证是为了验证用户的身份; 授权是为了验证用户是否有…

大范围XSS扫描工具:XSS-Freak,BurpSuite随机用户代理,Hades 静态代码审核系统

大范围XSS扫描工具&#xff1a;XSS-Freak&#xff0c;BurpSuite随机用户代理&#xff0c;Hades 静态代码审核系统。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&#xff0c;支持研究学习…

【新版】系统架构设计师 - 案例分析 - 架构设计<Web架构>

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 架构设计&#xff1c;Web架构&#xff1e;Web架构知识点单台机器 到 数据库与Web服务器分离应用服务器集群负载均衡负载均衡技术静态与动态算法Session共享机制有状态与无状态 持久化技…

postman几种常见的请求方式

1、get请求直接拼URL形式 对于http接口&#xff0c;有get和post两种请求方式&#xff0c;当接口说明中未明确post中入参必须是json串时&#xff0c;均可用url方式请求 参数既可以写到URL中&#xff0c;也可写到参数列表中&#xff0c;都一样&#xff0c;请求时候都是拼URL 2&am…

Vue Grid Layout -️ 适用Vue.js的栅格布局系统,在vue3+上使用

文章目录 1、官网简介2、在vue3中使用1)、需要导入vue3支持的版本插件2)、在mian.js里引入&#xff1a;3)、在组件中使用 3、layout布局的计算逻辑4、 gridLayout 的属性 该栅格系统目前对 vue2 的支持是最好的&#xff0c;vue3 是需要用插件支持的&#xff0c;会在小节详细讲解…

工作中C语言高低字节转换

工作中C语言高低字节转换 C语言高低字节转换 C语言高低字节转换 #include <iostream> #include <stdint.h> #include <stdio.h>#define _G_HI24_BYTE(x) (((x) >> 24) & 0xFF) #define _G_HI16_BYTE(x) (((x) >> 16) & 0xFF) #define _…