关于vue项目中的svg矢量图的使用_vue中的矢量图放在什么标签中-程序员宅基地

技术标签: 前端  vue.js  javascript  

       矢量图,也称为面向对象图像或绘图图像,在数学上定义为一系列由点连接的线。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。

矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。它的特点是放大后图像不会失真,和分辨率无关,适用于图形设计、文字设计和一些标志设计、版式设计等。

我们一般项目中(vue2,vue3)中都会使用到,下面我用一个案例来告知怎么使用

这是项目中矢量图的位置

如果你要是想替换掉这个矢量图 

1.建议到阿里巴巴矢量图官网  iconfont-阿里巴巴矢量图标库

 输入你要想找的图标信息关键字

选择矢量图点击下载

 

选择你需要的下载方式,这里我选用svg代码下载

之后你会得到一段svg标签包裹的代码,放入项目中直接替换掉你文件中的代码即可。 即example.svg的内容

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/s_sos0/article/details/121136812

智能推荐

VS+Qt配置_vs配置qt-程序员宅基地

文章浏览阅读2.5k次。vs和qt的配置,内容较为简略_vs配置qt

(附源码)springboot中药知识分享网站设计 毕业设计201818-程序员宅基地

文章浏览阅读277次,点赞2次,收藏3次。(1)中药知识分享网站系统中的web后台管理中的后端不再使用古老的jsp+javabean+servlet技术,而是使用当前主流的springboot框架,它减少java配置代码,简化编程代码,目前springboot框架也是很多企业选择的框架之一。(2)中药知识分享网站系统中的web后台管理中的前端使用的是bootstrap[7]框架,它配合ajax和jquery可以美化页面设计。(3)流行vue框架结合jQuery技术,在jQuery基础上扩展一些插件,通过自己定义插件更好的实现前端的设计。

【附源码】基于flask框架家政服务平台 (python+mysql+论文)-程序员宅基地

文章浏览阅读516次,点赞6次,收藏5次。本毕业设计题目旨在开发一款基于前端技术(HTML+CSS+JavaScript+Vue)和后端技术(Python+Flask)的家政服务平台,使用MySQL 5.7作为数据库,以期为用户提供优质的家政服务体验。通过对家政服务人员的资质审核、评价体系建立等措施,平台可以筛选出优秀的家政服务人员,为用户提供更优质的服务。在数据库管理工具的选择上,使用了Navicat 11,这是一个用户友好且功能强大的数据库管理软件,它支持多种数据库系统,包括MySQL,并提供了图形化界面,使得数据库的管理和维护工作更加便捷。

gvim 换行符替换_gvim换行符-程序员宅基地

文章浏览阅读3k次。用 VIM 编辑文本文件,想在每一行的换行之前,添加一个字符,比如 “;”。想到替换命令::%s/\n/;\n/g结果总是出错。后来找到解决方案::%s/\n/;\r/g有人总结的结论:When searching: \n is newline, \r is CR (carriage return = Ctrl-M = ^M)_gvim换行符

代码的坏味道之十五 :Message Chains(过度耦合的消息链)_面向对象的代码异味messagechain-程序员宅基地

文章浏览阅读1.7k次。如果你看到用户向一个对象索求(request)另一个对象,然后再向后者索求另一个对象,然后再索求另一个对象……这就是Message Chains。实际代码中你看到的可 能是一长串getThis()或一长串临时变量。采取这种方式,意味客户将与查找过程中的航行结构(structure of the navigation)紧密耦合。一旦对象间的关系发生任何变化,客户端就不得不做出相应修改。这时候_面向对象的代码异味messagechain

自用PTA题目记录0004_作为一个职业hr,要给某个项目组的所有职员群发邮件,已经知道hr有所有人的姓名、电-程序员宅基地

文章浏览阅读1.7k次。自用PTA题目记录0004 以下题目序号并无实际意义文章目录自用PTA题目记录00047-2 谷歌的招聘代码总结7-2 谷歌的招聘题目作者: AMi 单位: 临沂大学 代码长度限制: 16 KB 时间限制: 200 ms 内存限制: 64 MB作为一个职业HR,要给某个项目组的所有职员群发邮件,已经知道HR有所有人的姓名、电话以及邮箱,请编写程序,取出所有人的邮箱,合并为一个邮箱列表,邮箱之间以“;”隔开,使其可以群发邮件。输入格式: 在一行中给出所有人的姓名、电话以及邮箱,例如:_作为一个职业hr,要给某个项目组的所有职员群发邮件,已经知道hr有所有人的姓名、电

随便推点

jpype._jexception.RuntimeExceptionPyRaisable: java.lang.RuntimeException: Class AESEncode not found-程序员宅基地

文章浏览阅读4k次。博主最近再用python做一个与java对接的会员管理系统,与要用到java的加密方式,就在网上看了看jpype的教程,如果你们看到这篇文章,而且hollo 也打印成功了,最后出现了下面的错误:jpype._jexception.RuntimeExceptionPyRaisable: java.lang.RuntimeException: Class AESEncode not found..._jpype._jexception.runtimeexceptionpyraisable: java.lang.runtimeexception: cl

nat模式下怎么让其他物理主机访问到宿主机的虚拟机_怎么使用其他电脑访问nat的虚拟机-程序员宅基地

文章浏览阅读3.1k次。桥接模式是虚拟出一台“物理”主机,ip和宿主机处于一个网段,可以访问外网,可以和在同一网段中的物理主机通信nat模式是虚拟出一个和宿主机不同网段(默认情况下是不同网段)的虚拟机,可以访问外网,只可以和宿主机进行通信。仅主机模式是一个和宿主机不同网段的虚拟机,只可以和宿主机进行通信,不可以访问外网我在创建虚拟机的时使用了桥接模式的网络适配器,但是不知道什么原因不能正常访问外网也不同和宿主机以及其它的物理主机进行通信,而我的nat模式是正常的,因为我想让其他的物理主机和他通信,所以我只能通过间接的方式来访问虚拟_怎么使用其他电脑访问nat的虚拟机

PTA C++两个字符串的合并 (编写insert函数)完整代码_字典合并pta 用c++-程序员宅基地

文章浏览阅读452次。编写这个程序有很多种方法,这里我就给大家包括函数的代码,比较简单,c++入门者都可以读懂#include<iostream>#include<cstring>void insert(char str[],char a);using namespace std;int main(){ char str[20],a[20]; cin>>str>>a; int i=0,n=strlen(a); for(;i<n;i++) { ._字典合并pta 用c++

语音识别之CTC,RNA,RNN-T,Neural Transducer,MoChA模型详解——语音信号处理学习(四)_nerual transducer存在什么问题-程序员宅基地

文章浏览阅读352次,点赞2次,收藏4次。LAS:就是 seq2seqCTC:decoder 是 linear classifier 的 seq2seqRNA:输入一个东西就要输出一个东西的 seq2seqRNN-T:输入一个东西可以输出多个东西的 seq2seqNeural Transducer:每次输入一个 window 的 RNN-TMoCha:window 移动伸缩自如的 Neural Transducer。_nerual transducer存在什么问题

2020 离职经验分享_2020离职经验分享-程序员宅基地

文章浏览阅读355次。en。。。我又离职了去年老师邀请我加入现在公司,组建了独立于公司的成都开发团队。上班的第一天,我就觉得公司一团乱麻,留下的PHP项目遗留了几个危险的bug。我就和老师说,我觉得我不适合这份工作,没有仓库代码,只有线上代码,连文档都没有,而且公司在兴文,不购买成都的社保。最后老师劝我坚持下去,渐渐的我查看日志找到问题,深夜上线实施解决了遗留bug。招聘前端组建团队,深入的管理项目生命周期,完成一个个项目。这一年多,我们远离公司,公司在宜宾兴文。每次有项目要做都是微信电话沟通,感谢领导的信任,没有人._2020离职经验分享

bolt数据库简单使用教程_bolt 使用-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏2次。打开数据库package mainimport ("os""github.com/boltdb/bolt""github.com/go-kit/kit/log")func main() {logger := log.NewLogfmtLogger(os.Stdout)db, err := bolt.Open("mydb.db", 0600, nil)if err != nil ..._bolt 使用

推荐文章

热门文章

相关标签