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. gerrit-申请id跟本地配置

    OpenID 是一个以用户为中心的数字身份识别框架,它具有开放.分散.自由等特性. 什么是gerrit? 看 了网上的介绍,感觉所谓的gerrit就是一个基于web实现代码管理的服务器.Gerrit ...

  2. 7,NULL与nullptr对比

    #include <iostream> #include <array> using namespace std; void show(int num) { cout < ...

  3. PHP中 “ . ” 和 “ ，”的区别

    在PHP中,“ . ”可以串接两个变量.而“ , ”却没什么用处.

  4. linux删除svn版本号库

    当使用了svn版本号控制系统后每一个文件夹下都会有一个.svn文件夹存在,开发完当交付产品或者上传到server时一般要把这些文件夹删除.事实上在linux删除这些文件夹是非常easy的,命令例如以下 ...

  5. 11. Spring Boot JPA 连接数据库

    转自:https://blog.csdn.net/catoop/article/details/50508397

  6. SimpleDateFormat的使用问题

    今天对过去的代码进行重构,因为使用静态方法调用的原因,使用了一个静态的SimpleDateFormat,结果FindBug报错了,查看了一下,说是使用了静态的SimpleDateFormat对象. S ...

  7. jQuery笔记---选择器(二)

    1.选择器练习: 1)查找UL中的元素的内容 格式:$(“ul li:XX”).text() XX:代表方法 比如:获取到第一元素,然后获取当中的值 $(“ul li:first”).text() 获 ...

  8. iOS Objc Runtime 教程+实例Demo

    样例Demo 欢迎给我star!我会继续分享的. 概述 Objc Runtime使得C具有了面向对象能力,在程序执行时创建,检查.改动类.对象和它们的方法.Runtime是C和汇编编写的,这里http ...

  9. 安装GDB和GDBSERVER

    安装GDB和GDBSERVER 转自http://www.360doc.com/content/10/0407/17/155970_21971613.shtml 把GDBSERVER装入文件系统 转自 ...

  10. OpenExeConfiguration的使用

    //应用程序的路径 string appPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "App.exe"); ...