Why aren't my SVGs rendering in Safari?

#webdev #safari #react

Recently for work I created a react component where I was passing in an SVG as a prop. Everything looked good in chrome, but when I tested in safari I realized my SVGs weren't showing up.

After console.loging to make sure the prop was passed in correctly I eventually realized the SVG would only render when a height attribute was specified in the component being passed in.

const Header = () => {
    <Menu 
        links={[
        {
          itemName: 'account settings'
          SVG: <AccountIcon height="20rem" />
        }
      ]}
}

Another option is to define the className of the SVG in the parent component and add styling in the child where it's being rendered.

const Header = () => {
    <Menu 
        links={[
        {
          itemName: 'account settings'
          SVG: <AccountIcon className="svg-icon" />
        }
      ]}
}