TailwindCSS: SVG icon won't resize properly

Question

I have been trying to resize the icon in this example.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>
<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">
    <svg class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 100 100" width="100px" height="100px">
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>
    <div class="leading-normal">
      Some demo text
    </div>
  </div>
</div>

But, whatever I try I can't get the svg to resize. What am I doing wrong?

Answer 1

Changing SVG width and height in TailwindCSS

Adam Wathan (TailwindCSS creator) solution for working with SVGs is presented in a video here. His solution is as follows:

Steps to change SVG element

1. Remove width and height attributes
2. Add TailwindCSS width and height classes

Example of SVG in question

I've taken the SVG in the question and paired it down to just the SVG and abbreviated the path. Then making the above changes.

Before

<svg class="flex-no-shrink fill-current"
     fill="none" 
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     width="100px" height="100px">  <!-- 1. Remove width and height attributes -->
  <path d="M5 5a5 5 0 0 1 10 0v2A5..."/>
</svg>

After

   <!--      \/---- 2. Add tailwindcss width and height classes -->
<svg class="h-4 w-4 flex-no-shrink fill-current"
     fill="none" 
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100">
  <path d="M5 5a5 5 0 0 1 10 0v2A5..."/>
</svg>

He doesn't mention the viewbox other than to say it's easier if you keep it square.

Answer 2

You need to first fix the viewbox--it's too big. That's what's giving you the extra padding. Then set the width and height as desired. See the snippet below:

function changeHandler(event){
  var svg = document.getElementById('svg');
  svg.setAttribute("width", event.target.value + 'px');
  svg.setAttribute("height", event.target.value + 'px');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet" />
<input type="number" value="20" onchange="changeHandler(event)" />
<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">
    <svg id="svg" class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px">
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>
    <div class="leading-normal">
      Some demo text
    </div>
  </div>

</div>

Answer 3

To resize the icon, resize the viewBox

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.2/tailwind.min.css" rel="stylesheet"/>

<div class="bg-indigo-dark">
  <div class="flex text-grey-lighter">

    <svg 
      class="flex-no-shrink fill-current" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 80 80"  
      width="100px" 
      height="100px"
    >
      <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
    </svg>

    <div class="leading-normal">
      Some demo text
    </div>
  </div>
</div>