Custom arrows for Hooper

I used Gridsome & TailwindCSS for it’s example.

        <hooper-navigation slot="hooper-addons">
          <svg
            slot="hooper-prev"
            width="38"
            height="64"
            fill="none"
            viewBox="0 0 38 64"
            class="opacity-25 hover:opacity-100 transition-all duration-300"
          >
            <path
              stroke="#000"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-opacity=".5"
              stroke-width="2"
              d="M35.41 1.11L1.568 31.049a1.346 1.346 0 000 2.012L35.409 63"
            />
          </svg>
          <svg
            slot="hooper-next"
            width="38"
            height="64"
            fill="none"
            viewBox="0 0 38 64"
            class="opacity-25 hover:opacity-100 transition-all duration-300"
          >
            <path
              stroke="#000"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-opacity=".5"
              stroke-width="2"
              d="M1.988 62.89l33.84-29.939a1.346 1.346 0 000-2.012L1.988 1"
            />
          </svg>
        </hooper-navigation>