Default size / required size

[ChloeCaronEng]

Previous issue

While working with the HeroIcons, we test on both Chrome and Safari. When a size is not specified in the className for Chrome, there is no issue as it will automatically size the SVG. However, in Safari, this is not the case as Safari computes the width value to 0px instead of auto when you are using a flexible container (source).

The issue

I have seen a lot of discussions where people have said that you need to pass the width&height or the size down to the icon for it to work: example.

However, these properties are not required and so when using React/Typescript, I do not get any errors if I do not pass it a height&width or the size in the className. This doesn't seem right as they should be specified to ensure that they render.

Therefore, would it be worth using a default size or making a size property required when using the icons?