JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<svg viewBox="0 0 21 21"
    xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
    role="img" aria-label="PDF">
    <g>
        <path fill="none" class="svg-stroke-action" d="
            M  4.5  1.5
            L 11.5  1.5
            L 16.5  6.5
            L 11.5  6.5
            L 11.5  1.5
            M 16.5  6.5
            L 16.5 19.5
            L  4.5 19.5
            L  4.5  1.5"
            stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" />
      <text x="5.5" y="13.5" class="svg-fill-action" style="font-family: Roboto, Arial, sans-serif; font-size: 5px;">PDF</text>
    </g>
</svg>

CSS

.svg-fill-action {
    fill: #A00893;
}

.svg-stroke-action {
    stroke: #A00893;
}

svg {
  border: 1px solid #AAA;
  display: block;
  margin: 5px;
  width: 100px;
}