After migrating from `fontgen-loader` icons seem to be created with extra width
topher515 opened this issue · 2 comments
I'm attempting to upgrade from your old library fontgen-loader to webfonts-loader (as well as from webpack v2 to v4).
It appears that icons which were working correctly in fontgen-loader are created with "extra width" in webfonts-loader. This extra width appears as empty space on the right. You can see what I mean in the screenshots below. The icon's extra width is causing the circle which contains it to be misshapen.
It appears exactly as if the icon has a margin-right or padding-right applied to it, but I am absolutely 100% certain this is not the case. The icon element itself appears to be missized. (Note that the extra width doesn't seem to double the size of the icon, more like add 50%).
I'm not super adept at working with fonts so I'm not really sure how to go about verifying that the "bad" sizing is actually embedded into the webfont file (which is what I'm assuming), so if someone could help me check on that, it would be appreciated.
@topher515 Make sure that your svg icons are unified, flattened and stripped of any unnecessary elements before compiling it to the font.
What I mean is that every svg icon should have the same dimensions and not contain any transforms. Also getting rid of extra layers can help.
I think the reason for this behavior is that this lib generates monospace font. This means that every icon dimensions are scaled up to the largest icon in the set.
@topher515 if you dont want the extra width created by the monospace that @DamianOsipiuk mentioned, you can remove the fixedWidth: true property from the font configuration. But just remember its left upto you to maintain the size of the icons in this case.