使用grunt模块创建svg精灵
Creating svg sprites using grunt module
我是grunt和node js的新手。我在使用grunt svg精灵模块创建svg精灵时遇到了问题。我已经使用grunt svg精灵模块来创建svg精灵图像。我已经使用以下命令安装了grunt svg sprite模块。
npm install grunt-svg-sprite --save-dev
我使用下面的行在grunt.js文件中启用了这个插件。
grunt.loadNpmTasks('grunt-svg-sprite');
我的插件配置如下
svg_sprite : {
basic : {
// Target basics
expand : true,
cwd : 'images/svg-logo/',
src : 'images/svg-logo/*.svg',
dest : 'out/',
// Target options
options : {
mode : {
css : { // Activate the «css» mode
render : {
css : true // Activate CSS output (with default options)
}
}
}
}
}
},
下面给出了我的文件夹结构
Project_folder
├───css
├───Images
│ └───svg-logo
├───GruntFile.js
├───html
├───node_modules
├───include
├───package.json
当我运行以下命令时,我会收到成功消息,但没有创建文件夹。
这里一切正常。src应该只指定那里的文件。试试这个。
svg_sprite : {
basic : {
expand : true,
cwd : 'images/svg-logo',
src : ['**/*.svg'],
dest : 'out',
options : {
mode : {
css : {
render : {
css : true
},
},
},
},
},
},
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何更改<svg>标记为<img>用js标记
- 锚点元素不't使用svg时,请打开EDGE上的href
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 使用onclick绘制SVG路径
- SVG/JavaScript:尝试选择和更改多边形点
- 顺时针旋转Svg元件
- 禁用SVG拖动
- 在select元素中显示highchart dashstyle(svg)
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 缩放Raphael/SVG容器以适应所有内容
- JavaScript-动态SVG-onload属性-未触发事件
- 设置动画时,SVG/Raphael大圆圈会变形
- 使用grunt模块创建svg精灵
- HBS模板与咕哝博士svg精灵
- SVG-精灵:符号转换为单个SVG图标
- 在SVG中显示CSS图像精灵,而不使用外来对象
- 我如何创建一个svg精灵,然后获得每个svg的坐标
- 为什么SVG精灵XML文件在服务器上显示为文本字符串,而不是在本地显示