一、安装环境
1.安装npm
2. 安装gulp
$ npm install --global gulp
3.配置工作文件夹
新建一个文件夹 c:\svg
cd c:\svg
在下面创建文件夹 \assets\svg
c:\svg 下 创建 gulpfile.js 内容如下
const gulp = require('gulp')
const svgSymbols = require('gulp-svg-symbols')
gulp.task(`sprites`, function() {
return gulp
.src(`assets/svg/*.svg`)
.pipe(svgSymbols())
.pipe(gulp.dest(`assets`))
})
打开命令行
cd c:\svg
npm install --save-dev gulp-svg-symbols
npm install gulp
二、生成合并svg文件
用 http://editor.method.ac/ 可以编辑svg文件
icomoon.io上可以下载svg文件
将要使用的svg文件拷贝到 c:\svg\assets\svg
打开命令行工具,
cd c:\svg
gulp sprites
c:\svg\assets\ 下会生成一个合并的svg文件。
三、引用svg文件
直接在html文件中使用,并且可以直接使用css来定义宽高、填充颜色等属性。如下代码所示
<style> .icon{fill:black;width:32px;height:32px; } </style>
<svg class="icon">
<use xlink:href="..\mysvg.svg#back"> </use>
</svg>