JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<svg class="icon-1" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="25" fill="currentcolor" />
</svg>

<div class="icon-2"></div>

<svg class="icon-3" viewBox="0 0 50 50" data-color="blue">
  <circle cx="25" cy="25" r="25" />
</svg>

<svg class="icon-4" viewBox="0 0 50 50" data-color="#FFA">
  <circle cx="25" cy="25" r="25" />
</svg>

CSS

.icon-1 {
  width: 50px;
  height: 50px;
  color: #FAA;
}

.icon-2 {
  width: 50px;
  height: 50px;
  background-color: #AFA;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='25' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='25' /%3E%3C/svg%3E");
}

.icon-3 {
  width: 50px;
  height: 50px;
}

.icon-3[data-color="red"] * {
  fill: #FAA;
}

.icon-3[data-color="green"] * {
  fill: #AFA;
}

.icon-3[data-color="blue"] * {
  fill: #AAF;
}

.icon-4 {
  width: 50px;
  height: 50px;
}

.icon-4[data-color] * {
  fill: attr(data-color color, #000);
}