Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Emily Kondziola
Emily Kondziola

Posted on • Edited 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.

Afterconsole.loging to make sure the prop was passed in correctly I eventually realized the SVG would only render when aheight attribute was specified in the component being passed in.

constHeader=()=>{<Menulinks={[{itemName:'account settings'SVG:<AccountIconheight="20rem"/>}]}}
Enter fullscreen modeExit fullscreen mode

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

constHeader=()=>{<Menulinks={[{itemName:'account settings'SVG:<AccountIconclassName="svg-icon"/>}]}}
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Trying to get my cypress tests to pass 🤖
  • Location
    USA
  • Work
    Frontend engineer
  • Joined

More fromEmily Kondziola

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp