如何在页面中使用svg图标
1.svg图标长啥样
注意:图标的宽高无所谓,使用时可以根据需求修改,fill后面是颜色的填充,可修改图标颜色。
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<path d="M941.248 352L672 82.752A64 64 0 0 0 626.752 64H128a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768
a64 64 0 0 0 64-64V397.248A64 64 0 0 0 941.248 352zM256 128h48v160H256V128z m112 0H512v160h-144V128zM256 896
v-192h512v192H256z m640 0h-64v-224a32 32 0 0 0-32-32H224a32 32 0 0 0-32 32v224H128V128h64v192a32 32 0 0 0 32 32
h320a32 32 0 0 0 32-32V128h50.752L896 397.248V896z" fill="#f06"/>
</svg>
2.使用svg图标
2.1将下载好的.svg文件或者自己制作的.svg文件放到项目目录下面。
2.2将 .svg 图标作为背景图使用:
#email {
background: url(./img/email.svg) 12px 7px no-repeat;
background-size: 20px 20px; // 在这设置图标大小,不设置就是svg默认的宽高
}
3.为什么使用svg图标?
这其实跟使用web字体图标(比如:font-awsome、iconfont)差不多,只是一个项目中使用的图标也就那几个,没有必要把所有的字体图标库文件全部加载下来(iconfont可以按照需要加载一定数量的字体图标,但是无论如何都需要引入字体库),二来还可以减少页面的标签数量。
如果项目中大量使用图标,建议使用字体库。毕竟单个使用图标还是有些麻烦。
如何在页面中使用svg图标的更多相关文章
- HTML 页面中的 SVG
SVG 文件可通过以下标签嵌入 HTML 文档:<embed>.<object> 或者 <iframe>. 1>使用 <embed> 标签 < ...
- 在页面中嵌入svg的几种方法
//在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...
- HTML页面中嵌入SVG
HTML页面中嵌入SVG的几种方式 你有N种理由使用SVG在页面中展示图像,如它的矢量特性.广泛的浏览器支持.比JPEG和PNG更小的体积.可用CSS设置外观.使用DOM API操作以及各种可用的SV ...
- vue中引入.svg图标,使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...
- Vue项目中使用svg图标
svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader ...
- vue中,svg图标添加click事件,部分浏览器不生效
vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...
- DEV中svg图标的使用
0.开始之前 先看看使用效果 在操作栏的使用: 在菜单中的使用 1.简述SVG图标 中文名:可缩放矢量图形 外文名:Scalable Vector Graphics 外语缩写:SVG 开发商:万维网联 ...
- HTML5中的SVG
* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...
- vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...
随机推荐
- web打印详解
在B/S模式开发中,打印是个很大的困扰.无论是采用页面直接输出或者引用WORD.DLL也好,都有不足之处. 目前最好的办法就是采用第三方控件,网上流传的打印控件有很多.总结了下推荐几个给大家: 一.首 ...
- Celery-4.1 用户指南: Workers Guide (Workers 指南)
启动工作单元 你可以通过执行以下命令在前台启动工作单元: $ celery -A proj worker -l info 查看启动工作单元的可用命令行选项,可以执行: $ celery worker ...
- NT AUTHORITY\IUSR登录失败解决方法
NT AUTHORITY\IUSR登录失败解决方法 1 今天打开网站时,突然报这个错误,平时都好好的 Cannot open database "aslkm" requested ...
- leetcode874
这道题直接按照题意来解,建立坐标系和移动方案,思路是比较简单的.只是需要注意需要使用set来判断是否遇到障碍,否则会超时. int robotSim(vector<int>& co ...
- DAY9-python并发之多线程理论
一 什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...
- 安卓读取SD卡的容量
在开发中,我们经常会用到SD卡,那么在对SD卡进行读写的时候,我们经常需要判断SD卡的剩余容量是否足够.因此,这次我们来写写获取SD卡容量的程序. 该注意的地方,我都在程序里面有注明了.看程序基本就懂 ...
- Elasticsearch之curl创建索引
前提,是 Elasticsearch之curl创建索引库 [hadoop@djt002 elasticsearch-2.4.3]$ curl -XPUT 'http://192.168.80.200: ...
- 【272】ArcPy处理数据
参考:ArcPy 函数列表(按字母顺序) 参考:在arcgis上用python脚本(arcpy)做数据批处理 1. 导入 ArcPy,定义 Workspace >>> import ...
- springmvc配置式开发下的视图解析器
多个视图解析器优先级:
- 关于android中,菜单按钮点击事件首次执行之后再次执行需要双击按钮的问题
有时候在获取事件的时候,需要双击才能获取,解决方法很简单,把返回值设为true,那么这个事件就不会再分发了,我预计是设为其他值会继续分发,造成事件的相应混乱