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. 1.JPA概要

    转自:https://www.cnblogs.com/holbrook/archive/2012/12/30/2839842.html JPA定义了Java ORM及实体操作API的标准.本文摘录了J ...

  2. AndroidStudio 内存泄漏分析 Memory Monitor

    ok.写一段内存泄漏的code private TextView txt; @Override protected void onCreate(Bundle savedInstanceState) { ...

  3. JS实现拖拽小案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 每日技术总结：fly.js，个位数前补零等

    01.FLY.JS 文档:https://wendux.github.io/dist/#/doc/flyio/readme 02.微信小程序组件——input属性之cursor-spacing 属性 ...

  5. （错误记录）git push 报错 403

    在push的时候遇到错误: RPC failed; HTTP curl The requested URL returned error: Forbidden 如果是自己创建的项目的话,可以在网上找到 ...

  6. the steps that may be taken to solve a feature selection problem：特征选择的步骤

    參考:JMLR的paper<an introduction to variable and feature selection> we summarize the steps that m ...

  7. Android开发人员应该知道的Kotlin

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/01/kotlin-android Android开发人员在语言限制方面面临着 ...

  8. NYOJ448_寻找最大数【贪心】

    寻找最大数 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比方当n=920813467185 ...

  9. Hadoop3.0配置

    1.core-site.xml <configuration> <property> <name>fs.default.namenode</name> ...

  10. C# is 和 as的用法

    try            {                if (sender is Button)                {                    Button dd ...