CODEWITHSUNDEEP
htmlsvg
Little Code
Little Code

Reputation: 1545

Applying label to svg path

I am looking to apply a label underneath a SVG path representing a hamburger menu icon. However, depsite trying various options, I am so far unable to force the text below, it only appears to the right, as per the screenshot below:

enter image description here

I have tried:

My sample code can be found at https://codesandbox.io/s/beautiful-currying-ww68b?file=/index.html

Upvotes: 0

Views: 4385

Answers (1)

fatalcoder524
fatalcoder524

Reputation: 1480

Method 1:

Remove inline-flex class of <button>.

Method 2:

Modify the code to:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<button type="button" class="items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu"
  aria-haspopup="true">
   <svg
      class="h-10 w-10"
      stroke="currentColor"
      fill="none"
      viewBox="0 0 40 40"
      >
      <path
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-width="2"
         d="M4 6h16M4 12h16M4 18h16"
         />
      <text x="0" y="35" font-size="12">MENU</text>
   </svg>
</button>

Upvotes: 2

Related Questions