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图标的更多相关文章

  1. HTML 页面中的 SVG

    SVG 文件可通过以下标签嵌入 HTML 文档:<embed>.<object> 或者 <iframe>. 1>使用 <embed> 标签 < ...

  2. 在页面中嵌入svg的几种方法

    //在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...

  3. HTML页面中嵌入SVG

    HTML页面中嵌入SVG的几种方式 你有N种理由使用SVG在页面中展示图像,如它的矢量特性.广泛的浏览器支持.比JPEG和PNG更小的体积.可用CSS设置外观.使用DOM API操作以及各种可用的SV ...

  4. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

  5. Vue项目中使用svg图标

    svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader ...

  6. vue中,svg图标添加click事件,部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  7. DEV中svg图标的使用

    0.开始之前 先看看使用效果 在操作栏的使用: 在菜单中的使用 1.简述SVG图标 中文名:可缩放矢量图形 外文名:Scalable Vector Graphics 外语缩写:SVG 开发商:万维网联 ...

  8. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  9. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

随机推荐

  1. 解决ListView 缓存机制带来的显示不正常问题

    ListView加载数据原理:系统绘制ListView时,首先会用getCount()函数得到要绘制的这个列表的长度,然后开始逐行绘制.然后调用getView()函数,在这个函数里面首先获得一个Vie ...

  2. Azure上Linux VM误配防火墙的恢复方法

    在实际运维中,防火墙把自己挡在机器外面的情况会时有发生.如何快速的恢复对运维人员是很重要的. 本文将介绍如何用Azure Extension实现不通过ssh对VM进行操作的方法. 之前写过一遍Blog ...

  3. 分布式锁之一:zookeeper分布式锁1

    zookeeper集群的每个节点的数据都是一致的, 那么我们可以通过这些节点来作为锁的标志. 首先给锁设置一下API, 至少要包含, lock(锁住), unlock(解锁), isLocked(是否 ...

  4. Angular常犯的错误

    ng-app="name名称" name名称  == 一定要写对 其次 angular.min导入一定要正确,一定要导入正确的angular.min的库 再次js中要写自调用 (f ...

  5. 侯捷STL学习(三)--分配器测试

    第七节:分配器测试 标准的分配器Allocator,#include<ext/...>都是拓展的 可以用不同的分配器测试同一容器 分配器allocate() & deallocat ...

  6. Rails中文乱码问题【转】

    乱码情况一:netbeas控制台输出乱码 具体表现为:在程序中定义中文字符串,然后输出.但输出为乱码 解决方法:打开netbeans安装目录,找到etc目录下的netbeans.conf文件.在net ...

  7. 关于pipe管道的读写端关闭问题

    知识概述 通过pipe在内核中创建一个文件,然后可以实现两个进程通信 管道是一种最基本的IPC机制,由 pipe 函数创建: #include <unistd.h> ]); 调用 pipe ...

  8. 将chrome浏览器的默认背景颜色修改为浅绿色,以减缓长时间看电脑的眼睛不舒服的问题

    修改chrome文件夹中的Custom.css, 此文件里面默认内容是空的. 在其中添加下面这段代码: 你也可以选择自己的喜欢的颜色, 前提是你知道你想要更改的颜色的十六进制颜色值, 例如:#CCEB ...

  9. 如何使32位Linux支持4G以上内存

    问题 Linux无法支持超过4G的内存,笔者使用的Linux是CentOS 5,机器是DELL PE1950服务器.    原因: X86系统默认寻址能力的限制    解决办法: 安装具有PAE(物理 ...

  10. The R Project for Statistical Computing

    [Home] Download CRAN R Project About R Contributors What’s New? Mailing Lists Bug Tracking Conferenc ...