Derek Notion Blog/
🏯2 tone SVG icons
🏯

2 tone SVG icons

There has been a tendency that 2 tone SVG icons adopt the market. Font awesome even charges for this feature. Let’s see a solution from tailwind official website.
 

Solution 1: fill and fill-opacity

 
Active button with 2 tone indigo colors: 
<button type="button" class="group text-sm font-semibold w-full flex flex-col items-center">
  <svg width="48" height="48" fill="none" aria-hidden="true" class="mb-6 text-indigo-500 dark:text-indigo-400">
    <rect
      x="5"
      y="5"
      width="28"
      height="28"
      rx="4"
      fill="currentColor"
      fill-opacity=".1"
      stroke="currentColor"
      stroke-width="2"
    ></rect>
    <path
      d="M5 41h28M33 39v4M5 39v4M39 5h4M39 33h4M41 33V5"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></path>
  </svg>
</button>
 
Inactive button with gray color: 
<button type="button" class="group text-sm font-semibold w-full flex flex-col items-center">
  <svg
    width="48"
    height="48"
    fill="none"
    aria-hidden="true"
    class="mb-6 text-slate-300 group-hover:text-slate-400 dark:text-slate-600 dark:group-hover:text-slate-500"
  >
    <rect
      x="5"
      y="5"
      width="28"
      height="28"
      rx="4"
      fill="currentColor"
      fill-opacity="0"
      stroke="currentColor"
      stroke-width="2"
    ></rect>
    <path
      d="M5 41h28M33 39v4M5 39v4M39 5h4M39 33h4M41 33V5"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    ></path>
  </svg>
</button>
 

Solution 2: use div as a wrapper + svg

I did this in VMware Global Catalog Poc Project.

Reference

https://tailwindcss.com/