Icons not generated properly

[aseem2625]

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

[nfroidure]

The problem sits in this RegExp I think: https://github.com/nfroidure/svgicons2svgfont/blob/master/src/index.js#L60

[aseem2625]

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?

[nfroidure]

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

[aseem2625]

@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.

[aseem2625]

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.

[nfroidure]

Was actually a duplicate of https://github.com/nfroidure/svgicons2svgfont/issues/9