We have a site with many SVG icons. A gulp task turns them into an icon font in .eot, .ttf and .woff formats. Everything has worked nicely until recently when two new glyphs were added.
After the new icons were added, most of the existing ones now render with strange ball joints where curves should be. For example one of the icons should look like this:
But instead we get this:
What could be causing this? The conversion is done using gulp-iconfont, which uses svgicons2svgfont and svg2ttf. I tried tweaking the options but nothing seems to help. I even removed the new glyphs and generated the font again but everything still looks funky. No npm module versions were changed in between.
Here's the SVG code for the icon in the example for reference:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><defs><style>.cls-1{fill:#333;}</style></defs><path class="cls-1" d="M596.06,140H564.15V105a35.1,35.1,0,0,0-35-35H467.46a35.1,35.1,0,0,0-35,35v35H267.52V105a35.1,35.1,0,0,0-35-35H170.84a35.1,35.1,0,0,0-35,35v35h-31.9A34,34,0,0,0,70,173.89v422.2A34,34,0,0,0,103.94,630H596.06A34,34,0,0,0,630,596.09V173.89A34,34,0,0,0,596.06,140Zm-122.73-9.11a17.55,17.55,0,0,1,17.5-17.5h14.95a17.55,17.55,0,0,1,17.5,17.5v38.28a17.55,17.55,0,0,1-17.5,17.5H490.83a17.55,17.55,0,0,1-17.5-17.5V130.87Zm-296.62,0a17.55,17.55,0,0,1,17.5-17.5h14.95a17.55,17.55,0,0,1,17.5,17.5v38.28a17.55,17.55,0,0,1-17.5,17.5H194.21a17.55,17.55,0,0,1-17.5-17.5V130.87ZM571.67,567a4.61,4.61,0,0,1-4.59,4.63H133a4.61,4.61,0,0,1-4.66-4.56V238a4.59,4.59,0,0,1,4.6-4.63H567a4.59,4.59,0,0,1,4.64,4.56V567Z"/><path class="cls-1" d="M249.56,435.78c10.67,0,15.11,5.51,15.11,14.93s-4.44,14.93-15.11,14.93H177c-9.42,0-15.11-7.11-15.11-14.76,0-11,2.67-16.71,35.38-39.47l16.89-11.73c8.71-6,11.91-11,11.91-18.31,0-8.71-5.87-14.4-15.47-14.4-20.27,0-9.78,24.71-29.87,24.71-12.8,0-17.42-7.11-17.42-17.24,0-17.07,16.71-35.2,48.35-35.2,37.87,0,51,20.62,51,40.35,0,14.93-7.47,25.6-23.29,35.56l-32.18,20.27v0.36h42.31Z"/><path class="cls-1" d="M323,440.23H281c-12.09,0-16.71-8.36-16.71-19,0-6.58,2.84-12.62,10.67-22l37.15-44.8c10.13-12.09,15.29-16.18,24.53-16.18,13.33,0,20.8,7.29,20.8,18.84v55.47c10.49,0,17.07,3.2,17.07,13.87,0,10.84-6.58,13.87-17.07,13.87v8.53c0,11.73-5.69,19.2-17.24,19.2S323,460.49,323,448.76v-8.53Zm0-66h-0.36l-29.15,38.22H323V374.27Z"/><path class="cls-1" d="M413.82,346.36c3.38-9.78,5.33-11.73,13.15-11.73,5.69,0,13,3.73,13,12.27,0,3.2-2,8.71-5,17.42l-32.71,92.62c-3.38,9.78-5.33,11.73-13.16,11.73-5.69,0-13-3.73-13-12.27,0-3.2,2-8.71,5-17.42Z"/><path class="cls-1" d="M456.66,370.36c-10.49,0-15.82-5.51-15.82-14.4s5.33-14.4,15.82-14.4H526c11,0,17.6,4.09,17.6,15.64,0,6.76-3.56,12.62-16,25.78-7.29,7.64-21.87,34.67-25.07,59.91C499.68,465.47,490.44,468,481.37,468c-7.82,0-15.82-7.11-15.82-16.36,0-23.11,27.38-69.86,40.53-81.24H456.66Z"/></svg>
Here's our gulp task:
var iconfont = require('gulp-iconfont'),
iconfontCss = require('gulp-iconfont-css'),
order = require('gulp-order'),
jsonfile = require('jsonfile'),
tap = require('gulp-tap');
module.exports = function(gulp, plugins) {
'use strict';
return function() {
var runTimestamp = Math.round(Date.now()/1000),
fontName = 'customer-icons',
iconPaths = ['src/assets/icons/iconfont/*.svg'],
codepointFile = 'src/assets/icons/iconfont/glyphs.json',
existingGlyphs = [],
saveGlyphs = [],
basePath = process.cwd();
try {
// If we already have a JSON of glyphs that have been assigned a codepoint,
// load that data first so we can pass the icons in the same order to avoid
// showing wrong icons when new ones are added.
existingGlyphs = jsonfile.readFileSync(codepointFile).glyphs.concat(iconPaths);
}
catch(e) {} // No need to do anything, just use the default empty array.
return gulp.src(iconPaths)
.pipe(order(
existingGlyphs, { base: basePath }
))
.pipe(tap(function(file) {
saveGlyphs.push(file.path.match(/(src\/assets\/icons\/iconfont\/.*)/)[1]);
})).on('end', function() {
jsonfile.writeFile(codepointFile, { glyphs: saveGlyphs }, function(err) {
if(err !== null) {
console.error('Error saving glyph file: ' + err);
}
})
})
.pipe(iconfontCss({
fontName: fontName,
path: 'scss',
targetPath: '../../../base/iconfont.scss',
fontPath: '/.resources/customer-ui-module/webresources/assets/fonts/customer-icons/'
}))
.pipe(iconfont({
fontName: fontName,
appendUnicode: true,
fontHeight: 1001,
normalize: true,
formats: ['ttf', 'eot', 'woff'], // default, 'woff2' and 'svg' are available
timestamp: runTimestamp, // recommended to get consistent builds when watching files
}))
.on('glyphs', function(glyphs, options) {
// CSS templating, e.g.
// console.log(glyphs, options);
})
.pipe(gulp.dest('src/assets/fonts/customer-icons'));
};
}
