Importing SVG icons with viewBox respected or with artboard that has correct height is not working

[phun-ky]

The issue is that when using html-sketchapp-cli (that uses your code more or less directly) to import svg icons, all my icons (200+) does not get correct width and height set. This means that it is not easy to just swap out an icon in a symbol in Sketch, resulting in pain for our designers. The symbol swapper will only allow to swap icons that has the exact same size.

When importing, I expect that the artboard or symbol size would be the same as the container or the SVG itself (for example 48px x 48px), but when importing, we get sizes like 45px x 45px or 43,5px x 43,5px or 43px x 41px.

This happens also when I manually drag and drop a svg into sketch. This does however NOT happen when doing the same in Figma or Framer. What gives? Is this purely a Sketchapp issue, or could this be handled by html-sketchapp?

html-sketchapp version: Latest

minimal example: https://gist.github.com/phun-ky/deb1579e2a108ab2cf6654f3d20d6cb0

screenshot from the browser:

screenshot from Sketch:

[phun-ky]

Maybe add something like these guys did, a rectangle? AMoreaux/Sketch-Icons#2

[phun-ky]

I've fixed it on my part by adding a transparent rectangle with the same width and height (when creating the documentation, not the production icons) as the viewbox, but I suggest that this is either done automatically on your behalf or that it is covered in some form of documentation :)