Craft CMS Pagination

arrow.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs><style>.cls-1{fill:#0071b7}</style></defs>
  <title>Arrow</title>
  <g id="Ebene_5" data-name="Ebene 5">
    <polyline class="cls-1" points="256.04 307.67 0 307.67 0 204.36 256.04 204.36"></polyline>
    <polyline class="cls-1" points="256.04 85.13 256.04 -0.04 512.07 256 256.04 512.04 256.04 426.9"></polyline>
  </g>
</svg>

pagination.scss

.blogPagination {
  display: flex;
  justify-content: space-between;
  a {
    display: block;
    &:nth-child(odd):before {
      content: "";
      background-image: url('/theme/img/arrow.svg');
      width: 20px;
      height: 20px;
      position: absolute;
      transform: rotate(180deg);
      transform-origin: 50% 48%;
      margin-left: -30px;
    }
    &:nth-child(even):after {
      content: "";
      background-image: url('/theme/img/arrow.svg');
      width: 20px;
      height: 20px;
      position: absolute;
      margin-left: 10px;
    }
  }
}

Pagination.twig

{# Set parameters for prev/next elements list #}
{% set params = craft.entries.section('blogEntry').order('title asc') %}

{# Get the prev/next elements #}
{% set prevEntry = entry.getPrev(params) %}
{% set nextEntry = entry.getNext(params) %}

{# And make sure to only output the links if the element exists #}
<div class="blogPagination">
  {% if prevEntry %}
    <a href="{{ prevEntry.url }}">
      {{ prevEntry.title }}
    </a>
  {% endif %}
  {% if nextEntry %}
    <a href="{{ nextEntry.url }}">
      {{ nextEntry.title }}</a>
    {% endif %}
</div>