SVG画像を定義する

    <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>">
    <defs>
      <symbol id="icon-arrow-right" viewBox="0 0 20 20">
      <title>arrow-right</title>
        <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </symbol>
    </defs>
    </svg>

SVG画像を配置する

<svg class="inline h-5 w-5 pb-1 fill-current text-blue-600 icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>

classはTailwind CSSの例

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>">
    <defs>
      <symbol id="chevron-double-down" viewBox="0 0 20 20">
      <title>chevron-double-down</title>
<path fill="currentColor" d="M207 477.5L12.7 283.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0l154.7 154 154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 477.5c-9.4 9.3-24.6 9.3-34 0zm34-192L435.3 91.1c9.4-9.4 9.4-24.6 0-33.9l-22.7-22.7c-9.4-9.4-24.5-9.4-33.9 0L224 188.5 69.3 34.5c-9.4-9.3-24.5-9.3-33.9 0L12.7 57.2c-9.4 9.4-9.4 24.6 0 33.9L207 285.5c9.4 9.3 24.6 9.3 34 0z"></path>
      </symbol>
    </defs>
    </svg>

<svg><use xlink:href="#chevron-double-down"></use></svg>

style="display: inline;width: 1.25rem;height: 1.25rem;padding-bottom: 0.25rem;fill: #333;color:#333;overflow: hidden;"