SVG图标的Sprite处理
svg正在越来越广泛的应用在前端领域,由于矢量图缩放对图像质量无损,越来越多的图标、图片都开始使用svg。但svg文件一旦多起来,就需要对这些资源进行集中管理。webpack的svg-loader只是简单的将svg文件替换成了文本内容,增加了bundle文件的体积,灵活性也不高,如果能将svg文件处理成类似于jpg/png图片一样,做成sprite就好了。而这正是svg-sprite-loader要做的事情。 viewBox 在svg文件中,可以创建若干个view,view包含一个名为viewBox的属性,viewBox允许我们定义一个矩形区域,通过四个参数 left, top, width和height,可以通过设置id来对view进行标示。 当定义view之后,在引入svg文件时,就可以指定显示某个view,如下所示 <img src="sprite.svg#svgView(viewBox(0, 0, 32, 32))" alt=""> .icon-clock { background: url(sprite.svg#icon-clock-view)…