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. 【MongoDB】The connection between two tables

    In mongoDB, there are two general way to connect with two tables. Manual Connection and use DBRef 1. ...

  2. css中的!important作用

    css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...

  3. angular反向代理

    第一步:根目录新建 proxy.conf.json target:就是代理的服务器地址. 接口地址必须是http://localhost:8081/api开头 { "/api":{ ...

  4. JSP与Servlet的介绍说明

    什么是Servlet和JSP 用Java开发Web应用程序时用到的技术主要有两种,即Servlet和JSP. Servlet是在服务器端执行的Java程序,一个被称为Servlet容器的程序(其实就是 ...

  5. FZU Problem 2168 防守阵地 I

    http://acm.fzu.edu.cn/problem.php?pid=2168 题目大意: 给定n个数和m,要求从n个数中选择连续的m个,使得a[i]*1+a[i+1]*2+--a[i+m]*m ...

  6. NSDate时间

    NSDate 使用 ios时间的秒数 取当前时间的秒数 NSTimeInterval time = [[NSDate date] timeIntervalSince1970]; long long i ...

  7. POJ 2983 Is the Information Reliable? 依旧差分约束

    http://poj.org/problem?id=2983 题目大意: 星际大战开始了.你购买了情报,需要判断它的准确性.已知地方的根据地在由南向北排成一条直线.P A B X,表示A在B北面距离X ...

  8. 9.8 Binder系统_c++实现_内部机制1

    1. 内部机制_回顾binder框架关键点 binder进程通讯过程情景举例: test_server通过addservice向service_manager注册服务 test_client通过get ...

  9. 使用u盘量产工具修复写保护的u盘

    自己的u盘突然提示写保护,而且也没有写保护开关,怎么都写不进文件,试了很多办法都无法去除写保护,最后找了一个u盘量产工具,搞定: 插上u盘后,会检测到u盘,点“开始"后静静等待它完成,u盘又 ...

  10. Android使用BitmapFactory.Options解决加载大图片内存溢出问题

    由于Android对图片使用内存有限制,若是加载几兆的大图片便内存溢出.Bitmap会将图片的所有像素(即长x宽)加载到内存中,如果图片分辨率过大,会直接导致内存溢出(java.lang.OutOfM ...