工作中遇到的问题，项目中有使用字体图标，因为需求设计把 logo 形态的图标也加到了字体图标库中，但因为这些新加的图标并不是正方形的，而是长方形的，当使用的时候，就需要设置成很大的字号，才能显示正常，然iconfont上的字体图标制作标准是方形的，也就导致了字体的高度也会和宽度一样，这显然不利于页面布局。
用万能的搜索引擎寻找了下解决方案，发现可以用svg代替。
开始考虑想一个个svg图标导进去使用，但页面那里引入svg和使用布局混在一起，太乱了：
<svg class="icon1">
<defs>...</defs>
<path d="..."></path>
</svg>
<svg class="icon2">
<defs>...</defs>
<path d="..."></path>
</svg>
...然后考虑Symbols的方式，把多个svg图标整合到一个svg中，生成类似下面这样的：
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon1">
<path d="..."></path>
</symbol>
<symbol id="icon2">
<path d="..."></path>
</symbol>
</svg>然后就可以根据id单独使用其中某个icon：
<svg class="icon">
<use xlink:href="#icon1"></use>
</svg>如何转换 svg 为 symbols 格式？
方式有挺多种，其他没了解，下面说下我使用的方式，用gulp-svg-symbols
首先安装此插件:
npm install --save-dev gulp-svg-symbols
// or use yarn
yarn add -D gulp-svg-symbols配置gulpfile.js：
// svg转换
...
gulp.task('svg', function() {
const svgSymbols = require('gulp-svg-symbols')
const path = 'app/common/svg'
return gulp
.src(`${path}/source/*.svg`)
.pipe(svgSymbols())
.pipe(rename(path => (path.basename = 'partner')))
.pipe(gulp.dest(path))
})插件其他参数选项请参考文档
参考：