Swiper arrows

Default

        {% include "@Components/swiper-arrows/swiper-arrows.twig" with {
  props : {
    extraClass: "extra-class"
  }
} %}

          <div class="swiper-arrows  extra-class">

  <div class="swiper-arrows__arrow swiper-button-prev">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small left</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="4.75 0.75 0.75 4.75 4.75 8.75"/></g></g></svg>
  </span>
  </div>

  <div class="swiper-arrows__arrow swiper-button-next">
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
  </div>
</div>

Large

        {% include "@Components/swiper-arrows/swiper-arrows.twig" with {
  props : {
    size: "lg"
  }
} %}

          <div class="swiper-arrows --lg">

  <div class="swiper-arrows__arrow swiper-button-prev">
    <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.5 19.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>big left</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="9.75 0.75 0.75 9.75 9.75 18.75"/></g></g></svg>
  </span>
  </div>

  <div class="swiper-arrows__arrow swiper-button-next">
    <span class="icon  --xl">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.5 19.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>big right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 0.75 9.75 9.78 0.75 18.75"/></g></g></svg>
  </span>
  </div>
</div>

Schema

    {
  "props": {
    "size": {
      "type": "string",
      "description": "Size of the component"
    },
    "extraClass": {
      "type": "string",
      "description": "extra class of slide-arrows"
    }
  }
}