DEV Community 👩‍💻👨‍💻

Emily Kondziola
Emily Kondziola

Posted on • Updated on

Why aren't my SVGs rendering in Safari?

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" />
        }
      ]}
}
Enter fullscreen mode Exit fullscreen mode

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" />
        }
      ]}
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌙 Dark Mode?!

Turn it on in Settings