nfroidure/svgicons2svgfont

Center glyphs vertically

Closed this issue · 0 comments

Feature request

Feature description

Provide an option to vertically center the glyphs in the generated font.

Use cases

Given these two svgs:

<!-- horizontal.svg -->
<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2C0 3.10457 0.895431 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 0 2 0C0.895431 0 0 0.89543 0 2Z" fill="#DDDDDD"/>
<path d="M8 2C8 3.10457 8.89543 4 10 4C11.1046 4 12 3.10457 12 2C12 0.89543 11.1046 0 10 0C8.89543 0 8 0.89543 8 2Z" fill="#DDDDDD"/>
<path d="M16 2C16 3.10457 16.8954 4 18 4C19.1046 4 20 3.10457 20 2C20 0.89543 19.1046 0 18 0C16.8954 0 16 0.89543 16 2Z" fill="#DDDDDD"/>
</svg>
<!-- vertical.svg -->
<svg width="4" height="20" viewBox="0 0 4 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 0C0.895431 0 0 0.895431 0 2C0 3.10457 0.895431 4 2 4C3.10457 4 4 3.10457 4 2C4 0.895431 3.10457 0 2 0Z" fill="#DDDDDD"/>
<path d="M2 8C0.895431 8 0 8.89543 0 10C0 11.1046 0.895431 12 2 12C3.10457 12 4 11.1046 4 10C4 8.89543 3.10457 8 2 8Z" fill="#DDDDDD"/>
<path d="M2 16C0.895431 16 0 16.8954 0 18C0 19.1046 0.895431 20 2 20C3.10457 20 4 19.1046 4 18C4 16.8954 3.10457 16 2 16Z" fill="#DDDDDD"/>
</svg>

If I generate the svg font, the horizontal version of the icon will end up bottom aligned, like so:

image

If I use the normalize option, the horizontal icon will be stretched to the height of the vertical icon, which is clearly not ideal:

image

The ideal result would be to have both centered vertically, like so:

image

  • I will/have implement the feature

I have opened a PR (#119) that adds this option.

Let me know your thoughts.

Thank you for this library btw!