use arrow-right icon instead of "»" in bread crumbs

src/backend/views/pages/page.twig

@@ -7,6 +7,7 @@
         <a href="/" class="page__header-nav-item">
           Documentation
         </a>
+        {{ svg('arrow-right') }}
         {% if page._parent %}
           <a class="page__header-nav-item"
             {% if pageParent.uri %}

src/frontend/styles/components/page.pcss

@@ -12,6 +12,9 @@
     }
 
     &-nav {
+      display: flex;
+      align-items: center;
+
       &-item {
         color: inherit;
         text-decoration: none;
@@ -23,13 +26,10 @@
         &:hover {
           color: var(--color-link-active);
         }
+      }
 
-        &:not(:last-of-type) {
-          &::after {
-            content: '»';
-            margin: 0 0.7em 0 0.45em;
-          }
-        }
+      svg {
+        margin: 0 6px;
       }
     }
 

src/frontend/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.037 6.08a.833.833 0 0 0 0 1.175l2.95 2.992-2.95 2.95a.833.833 0 1 0 1.183 1.175l3.533-3.534a.832.832 0 0 0 0-1.183L9.22 6.08a.833.833 0 0 0-1.183 0Z" fill="#717682"/></svg>