search

Templarian / MaterialDesign-React

Dist for Material Design Icons React Component for JS/TypeScript
https://materialdesignicons.com
MIT License
142 stars 20 forks source link

`<svg>` bigger than the `<path>` #30

Closed GalGreenfield closed 5 years ago

GalGreenfield commented 5 years ago

Hi,

I'm using the icon AccountBoxOutline and noticed that the <svg> is bigger than the <path> itself, so I end up getting an <svg> with content that is smaller than the <svg> itself.

Downloading the <svg> file for the icon from the website and importing that file does not provide the same problem.

What can be done to fix this? It shouldn't be like this - this is wasted space (and in my use case, space is quite necessary).

Templarian commented 5 years ago

Not quite sure what you mean. Do you mean the icon is 24x24, but account-box-outline actually only takes up 18x18?

Not sure how we would fix that as each icon is a different size.

GalGreenfield commented 5 years ago

Not sure exactly what you meant, but the <svg> is 24x24px and the <path> is only 18x18px. And it's weird to me because as I mentioned, it doesn't happen with the SVG code from the website for this icon.

GalGreenfield commented 5 years ago

And it's not a question, it's an issue. It shouldn't be like this - especially since the icons from the website don't behave like that.

Templarian commented 5 years ago

The SVG's are on a viewBox="0 0 24 24" with absolute positioned points. We don't export anywhere without the viewBox set.

account-box-outline

Look at the preview above for this icon to get an idea of how it renders in the viewBox.

Templarian commented 5 years ago

You could theoretically get the min and max x and y and set the viewBox. That math is way beyond my ability though and outside of the scope of this component.

Templarian commented 5 years ago

https://material.io/design/iconography/system-icons.html#grid-keyline-shapes

If you scroll down to "Keyline Shapes" explains proportions. The icons are designed to be placed next to each other vertically and horizontally and look uniform.

GalGreenfield commented 5 years ago

I realized that the problem might have been due to me exporting the SVG code as a file via Adobe Illustrator - it might have changed the properties of the SVG in the one I use (where the path fill the viewbox, where there isn't padding).

Thanks for the information, that's probably the source of the difference - I'll just work with the component rather than the files I exported from Illustrator.