配置.png
接下来输入命令npm install;
自动加载依赖项目,再输入命令:
grunt
这个时候可以看到一个合并的dest-svg.svg文件和一个dest-svg-demo.html文件，打开网页文件，你可以快速的使用这些svg icon了.
一些常见的配置说明:
options.includedemo // 是否生成一个demo的html文件 一般还是写上比较好
options.cleanup //是否支持css 控制图标的fill和stroke属性等，可以传入一个数组实现自定义 ['fill','stroke- width' ...]
options.svg // 添加svg的一些属性在生成的svg文件中 viewBox: '0,0,100,100'
更多选项:参考这里
小结
借助第三方工具我们可以快速的制作svg sprite,相对其他方案，svg更加灵活，可控制，矢量显示等优点，在移动端以及部分pc站点上非常适用于图标解决方案。
扩展阅读: http://events.jackpu.com/svg/demo.html
一、安装svg-sprite-loader npm install svg-sprite-loader -D 二、...
创建以下文件夹 安装svg-sprite-loader： npm i -D svg-sprite-loader...
添加svg-sprite-loader和file-loader本来只添加svg-sprite-loader就行了，...
使用SVG Symbol yarn add --dev svg-sprite-loaderyarn add --...
一、image 一、CSS Sprite 一、Icon Font 一、CSS Icon 一、SVG sprite ...
iconfont symbol对比svg-sprite-loader iconfont symbol在SVG使用上...
之前说过icon-fonts解决方案可以一次性加载纯色图标，并且相对于精灵图更小更灵活；那渐变色或者组合颜色的图标...
演示地址 代码 SVG Sprite 传统的做法使用AI或者合并SVG图像，然后用background-posti...
概述 SVG（Scalable Vector Graphics）是一种矢量图格式。Adobe Illustrato...
一、Sprite技术 Sprite技术，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显...
本文标题：Svg Sprite
本文链接：https://www.haomeiwen.com/subject/icfvnttx.html
网友评论