使用 gulp-svg-symbols 合并处理 svg文件并引用

一、安装环境

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>