JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<div style="display:none">
  <svg>
    <symbol id="down-arrow">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.527,6.854L0.202,1.042c-0.269-0.288-0.269-0.754,0-1.042h8.621
c0.269,0.288,0.269,0.755,0,1.042" />
    </symbol>
  </svg>
</div>
<div class="down-arrow">
  <svg>
    <use xlink:href="#down-arrow"></use>
  </svg>
</div>

CSS

.down-arrow {
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -ms-transform-origin: center;
  transform-origin: center;
  width: 16px;
  height: 16px;
}

svg {
  max-height: 100%;
  max-width: 100%;
  vertical-align: top;
}