Display an SVG sprite icon for back-to-top functionality

by davidxmartins

HTML

<svg width="0" height="0" style="position:absolute">
    <defs>
      <symbol id="back-to-top" viewBox="0 0 49.88 55.01">
        <!-- Hexagon: uses --hex-fill -->
        <path style="fill: var(--hex-fill, currentColor);"
              d="m49.88,37.09v-19.16c0-2.98-1.59-5.73-4.17-7.22L29.11,1.12c-2.58-1.49-5.76-1.49-8.34,0L4.17,10.7C1.59,12.19,0,14.94,0,17.92v19.16c0,2.98,1.59,5.73,4.17,7.22l16.6,9.58c2.58,1.49,5.76,1.49,8.34,0l16.6-9.58c2.58-1.49,4.17-4.24,4.17-7.22Z"/>

        <!-- Arrow line: uses --arrow-stroke -->
        <line style="stroke: var(--arrow-stroke, currentColor); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;"
              x1="24.94" y1="15.89" x2="24.94" y2="40.85"/>

        <!-- Arrowhead: uses --arrow-stroke -->
        <polyline style="stroke: var(--arrow-stroke, currentColor); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;"
                  points="11.94 28.89 24.94 15.89 37.94 28.89"/>
      </symbol>
    </defs>
  </svg>


  <svg class="icon back-to-top">
    <use href="#back-to-top"></use>
  </svg>

CSS

/* Icon container */
    .icon {
      width: 60px;
      height: 60px;
      display: inline-block;
      margin: 20px;
    }

    .back-to-top {
      --hex-fill: rgb(23, 48, 95);
      --arrow-stroke: #f1b613;
    }

     .back-to-top:hover {
      --hex-fill: rgb(189, 123, 0);
      --arrow-stroke: #ffffff;
    }