Icons not generated properly
Closed this issue · 6 comments
I'm taking icons from materials website of 42dp.
My gulp task is below:
// Gulp task to generate font icons from svg (run: gulp iconfont)
const fontName = 'icons';
gulp.task('iconfont', function() {
gulp
.src(['some_path/svgs/*.svg'])
.pipe(
iconfontCss({
fontName: fontName,
targetPath: 'style.css',
fontPath: './',
cssClass: 'icon',
})
)
.pipe(
iconfont({
fontName: fontName,
formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'], // default, 'woff2' and 'svg' are available
normalize: true,
prependUnicode: true, // recommended option
fontHeight: 1001, // Tried lot of values, <1000 and also 10000, and 100000 :P but no success
centerHorizontally: true,
})
)
.pipe(gulp.dest('some_path/styles/fonts/'));
});
As the documentation says,
But the fonts generated aren't proper. font
And my expecting fonts should look like obviously not with extra space because I'm giving normalize: true and fontHeight: 1001
This below I got from iconmoon website and this is how I am expecting
Linking to issue
The problem sits in this RegExp I think: https://github.com/nfroidure/svgicons2svgfont/blob/master/src/index.js#L60
Hey @nfroidure
Thanks for pointing that out. But looks correct to me.
For <svg fill="#000000" height="48" viewBox="0 0 24 24" width="48" It's splitting fine. Ain't it?
Hum, right. The problem may be that the width/height should be computed from the width/height and viewBow attribute somewhere there: https://github.com/nfroidure/svgicons2svgfont/blob/master/src/index.js#L186-L210
@nfroidure
I think you're right, it's probably due to this piece of code, which is overriding width and height.
https://github.com/nfroidure/svgicons2svgfont/blob/master/src/index.js#L191-L203
I'm thinking over what it should be.
So, I think I got the issue
@nfroidure
I feel that this code shouldn't exist https://github.com/nfroidure/svgicons2svgfont/blob/master/src/index.js#L198-L203
Instead if you're considering width and height attributes at all, then that can be used as scale factor and not for clipping which is why the size of icon generated is coming more than size of actual icon.
Like, in this case, actual font is (24,24) (since starting is 0,0) but it's actual width,height is 48,48 which means, icon will be clipped as 24,24(as per viewbox) but scaled to 48,48(as per width height attributes)
I think, my explanation is correct bcoz when I open this .svg in inkscape, it opens correctly to the size 48x48. And when I modify values of svg to height="24" viewBox="0 0 24 24" width="24"
this library works fine in converting to icon, which means issue is just in width and height attr not being treated properly
We can discuss about modifying once you think it's fine.