JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<svg>
                <clipPath id="forecast-icon-edit">
                    <path d="M 6.565 2.118 L 9.882 5.435 L 3.318 12 L 0 12 L 0 8.682 L 6.565 2.118 Z M 2.894 11.012 L 3.6 10.306 L 1.765 8.471 L 1.059 9.176 L 1.059 10.024 L 2.047 10.024 L 2.047 11.012 L 2.894 11.012 Z M 6.988 3.6 C 6.988 3.459 6.918 3.459 6.847 3.459 C 6.776 3.459 6.776 3.459 6.706 3.529 L 2.4 7.835 C 2.329 7.906 2.329 7.906 2.329 7.976 C 2.329 8.118 2.4 8.118 2.471 8.118 C 2.541 8.118 2.541 8.118 2.612 8.047 L 6.918 3.741 C 6.988 3.741 6.988 3.671 6.988 3.6 Z M 12 2.894 C 12 3.176 11.929 3.388 11.718 3.6 L 10.376 4.941 L 7.059 1.624 L 8.4 0.282 C 8.612 0.071 8.824 0 9.106 0 C 9.388 0 9.6 0.071 9.812 0.282 L 11.647 2.118 C 11.929 2.329 12 2.612 12 2.894 Z" />
                </clipPath>
                <clipPath id="forecast-icon-copy">
                    <path
                        d="M 0.407 0.435 L 8.171 0.435 L 8.171 2.569 L 2.524 2.569 L 2.524 8.2 L 0.407 8.2 Z"
                        
                    />
                    <path
                        d="M 3.878 3.878 L 11.643 3.878 L 11.643 11.643 L 3.878 11.643 L 3.878 3.878 Z"
                        
                    />
                </clipPath>
                <clipPath id="forecast-icon-drag">
                    <path d="M 4.518 6.353 L 4.518 3.176 L 6.353 3.176 L 3.176 0 L 0 3.176 L 1.835 3.176 L 1.835 8.824 L 0 8.824 L 3.176 12 L 6.353 8.824 L 4.518 8.824 L 4.518 7.059 Z" />
                </clipPath>
            </svg>
            
            <div id="mask"> </div>

CSS

svg {
  width: 0px;
  height: 0px;
}
#mask {
  background: red;
  width: 40px;
  height: 40px;
  clip-path: url("#forecast-icon-edit");
}