JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<img className="check-icon" src="/static/icons/check.svg" alt="check" />
<div class="check-icon">
<svg width="13px" height="10px" viewBox="0 0 13 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- Generator: Sketch 52.1 (67048) - http://www.bohemiancoding.com/sketch -->
    <g id="Symbols" stroke="none" stroke-width="1" fill="currentcolor" >
        <g id="Icons/Checkmark" fill="#044ca0">
            <g id="Overrides/Cell/Accessory/Checkmark">
                <polygon id="Checkmark" points="1.5 4.5 0 6 4 10 13 1.5 11.5 0 4 7"></polygon>
            </g>
        </g>
    </g>
</svg>
</div>

SCSS

$green:red;
.check-icon svg {
  fill: $green !important;
  background:$green;
}