JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!-- <svg>
  <symbol id="icon01" viewBox="0 0 300 100">
    <circle r="50" cx="50" cy="50"></circle>
    <circle r="50" cx="180" cy="50" fill="currentColor"></circle>
  </symbol>
  <symbol id="icon02" viewBox="0 0 100 100">
    <circle r="50" cx="50" cy="50" fill="#FF0000"></circle>
  </symbol>
</svg>

<svg class="icon01">
  <use xlink:href="#icon01"></use>
</svg>
<svg class="icon02">
  <use xlink:href="#icon01"></use>
</svg>
<svg class="icon03">
  <use xlink:href="#icon02"></use>
</svg> -->
<div class="wrap">
  가나다라마가나다라마
  가나다라마
  가나다라마
  가나다라마
  가나다라마
  
</div>

CSS

.icon01 {
  fill: red;
  color: green;
}
.icon02 {
  fill: pink;
  color: yellow;
}

.wrap {
  max-width: 20ch;
  background: red;
}