html - SVG Doesn't show up in button element

Question

I'm using inline SVG ( as JSX ) on my website, I'm trying to display a hamburger menu button but it isn't showing up. Here is my code:

import Link from "next/link"

function Nav() {
    return (
        <nav>
            <button > /// SVG is here
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-172 -12 210 50" stroke="#000000">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
            <ul className="">
                <li>
                        <Link href="/">
                                <a>Main</a>
                        </Link>
                </li>
                <li>
                        <Link href="/resume">
                                <a>Resume</a>
                        </Link>
                </li>
                <li>
                        <Link href="/projects">
                                <a>Projects</a>
                        </Link>
                </li>

                <li>
                        <Link href="/blog">
                                <a>Blog</a>
                        </Link>
                </li>
                <li>
                        <Link href="/contact">
                                <a>Get in touch</a>
                        </Link>
                </li>
            </ul>
        </nav>
    );
}

export default Nav;

The Icon is only visible when it's outside the button tag, how do I view it while preserving the viewBox attribute?

question from:https://stackoverflow.com/questions/65926794/svg-doesnt-show-up-in-button-element

Answer 1

In your case you need to adjust the viewBox for your svg element, that way when you set your svg's height and width, your svg scales properly and you get the desired result. Here's your code which I tweaked:

<button> 
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="2 1 20 20" stroke="#000000" height="50px" width="50px">
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
     </svg>
</button>

See it work on codepen here.

You can learn about how viewBox works at CSS tricks and MDN.