In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the svgo and svg-sprite-generator npm packages to automate the process of compressing the SVGs and creating the sprite.

Note: This lesson assumes you have npm installed.

Install:

npm i - svgo svg-sprite-generator

Run:

svgo -f icons -o icons/out && svg-sprite-generate -d icons/out -o icons/out/sprite.svg

[SVG] Combine Multiple SVGs into an SVG Sprite的更多相关文章

  1. 学习SVG系列（1）：SVG基础

    什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形 ...

  2. SVG Viewer 3.0安装发现SVG Viewer License.txt无法介入写入，安装失败

    这几天研究SVG,发现"SVG Viewer 3.0安装发现SVG Viewer License.txt无法介入写入,安装失败"这个问题,晚上没找到解答的答案,后来被我们项目经理搞 ...

  3. svg矢量图制作工具(Sketsa SVG Editor) v7.1.1 中文免费版

    下载地址:https://www.jb51.net/softs/555253.html Sketsa SVG Editor中文版是一款强大好用的矢量图绘制工具,该工具的最大特色就是集成了中文语言,且支 ...

  4. 学习SVG系列（5）：SVG渐变

    SVG渐变 渐变是一种从一种颜色到另一种颜色的平滑过渡,可以把多个颜色的过渡应用到同一个元素. 渐变有两种: Linear Redial 线性渐变-<linearGradient> lin ...

  5. 学习SVG系列（4）：SVG滤镜效果

    注意:Internet Explorer和Safari不支持SVG滤镜 <defs>.<filter> 所有互联网的SVG滤镜定义在<defs>元素中,<fi ...

  6. 学习SVG系列（3）：SVG Stroke属性

    SVG stroke 属性 1.stroke 2.stroke-width 3.stroke-linecap 4.stroke-dasharray 5.stroke-opacity 6.stroke- ...

  7. 学习SVG系列（2）：SVG图形系列

    SVG形状: 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 & ...

  8. 多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址

    多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...

  9. d3.svg.line()错误：TypeError: d3.svg.line is not a function

    var line_generator= d3.svg.line() .x(function (d,i) { return i; }) .y(function (d) { return d; }) 错误 ...

随机推荐

  1. GO语言学习（十七）Go 语言类型转换

    Go 语言类型转换 类型转换用于将一种数据类型的变量转换为另外一种类型的变量.Go 语言类型转换基本格式如下: type_name(expression) type_name 为类型,expressi ...

  2. 【前端图表】echarts实现散点图x轴时间轴

    话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...

  3. 不在JPA 的 persistence.xml 文件中配置Entity class的解决办法

    在Spring 集成 Hibernate 的JPA方式中,需要在persistence配置文件中定义每一个实体类,这样非常地不方便,2种方法可以解决此问题: 这2种方式都可以实现不用在persiste ...

  4. Mahjong tree (hdu 5379 dfs)

    Mahjong tree Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tot ...

  5. （转）ORA-01940: cannot drop a user that is currently connected 问题解析

    删除数据库用户的时候经常会遇到这样的错误: ORA: cannot drop a user that is currently connected 原因是有程序在连接我们需要删除的用户,我们删除用户之 ...

  6. 5W1H分析法和5W2H分析法

    5W1H分析法也称六何分析法,是一种思考方法,也可以说是一种创造技法.是对选定的项目.工序或操作,都要从原因(WHY).对象(WHAT).地点(WHERE).时间(WHEN).人员(WHO).方法(H ...

  7. vue使用改变element-ui主题色

    每个项目的主题色一般都不一样,直接用element-ui的默认主题色似乎有点不合适,还需要自己一个一个的找元素class名然后在修改样式,非常麻烦,还容易影响到包含该类名的其他元素样式,所以需要自定义 ...

  8. decode与case when

    语法 decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) select * from reglike; ,),'aaa','yes','no') decode from ...

  9. Shiro的Web项目配置（转）

    Shiro的Web项目配置 一 shiro的学习 二 shiro的java客户端配置 三 关于权限的一些问题 一 shiro的学习 官网和张开涛博客 二 shiro的java客户端配置 1.在web. ...

  10. Android内存优化杂谈

    Android内存优化是我们性能优化工作中比较重要的一环,这里其实主要包括两方面的工作: 优化RAM,即降低运行时内存.这里的目的是防止程序发生OOM异常,以及降低程序由于内存过大被LMK机制杀死的概 ...