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. 在<img src="..." title="..."> 中使title的内容换行的方法

    在<img src="..." title="...">中要使TITILE的内容换行,不能使用html标签,只能用ASCII码,方法如下: < ...

  2. DATAX动态参数数据传递

    实例:ORACLE到ORACLE的数据传递   编写job.xml文件,添加变量参数 执行datax.py文件时记得带参数 格式:./datax.py –p"-Ddbname=*** -Di ...

  3. 机器学习:评价分类结果(Precision - Recall 的平衡、P - R 曲线)

    一.Precision - Recall 的平衡 1)基础理论 调整阈值的大小,可以调节精准率和召回率的比重: 阈值:threshold,分类边界值,score > threshold 时分类为 ...

  4. linux configure使用方法

    'configure'脚本有大量的命令行选项.对不同的软件包来说,这些选项可能会有变化,但是许多基本的选项是 不会改变的.带上'--help'选项执行'configure'脚本可以看到可用的所有选项. ...

  5. UE4异步载入资源

    转自:http://blog.ch-wind.com/ue4%E5%BC%82%E6%AD%A5%E8%BD%BD%E5%85%A5%E8%B5%84%E6%BA%90/ 所有的“硬”指针指向的资源都 ...

  6. SQL属性第一个值不被选中,属性默认第一个值

    把 Please Choose Color 属性名设置为不可选的 UPDATE `products_attributes` SET `attributes_display_only` = '1' WH ...

  7. 将CDM中所有以Relatonship_开头的关系全部重命名,避免生成数据库因为重复关系名报错

    Option   Explicit ValidationMode   =   True InteractiveMode =   im_Batch Dim   mdl   '当前model '获取当前活 ...

  8. java线程面试题及答案

    1)2017Java面试题及答案:什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务 ...

  9. LAMP 2.2 Apache配置静态缓存

    这里的静态文件指的是图片.js.css 等文件,用户访问一个站点,其实大多数元素都是图片.js.css 等,这些静态文件其实是会被客户端的浏览器缓存到本地电脑上的,目的就是为了下次再请求时不再去服务器 ...

  10. Android排错: has leaked window com.android.internal.policy.impl.PhoneWindow$ that was originally added here

    异常场景: 经常在应用中需要处理一些耗时的工作,诸如读取大文件.访问网络资源等.为了避免因程序假死而带来的糟糕用户体验,通常我们可以通过线程+Handler或者Android提供的AsyncTask来 ...