docs: update styling

docs/src/components/Btn/style.scss

@@ -9,7 +9,6 @@
   text-align: center;
   line-height: 1;
   text-decoration: none;
-
   white-space: nowrap;
 
   &--primary {
@@ -46,6 +45,8 @@
   }
 
   &__icon {
+    transition: opacity 0.2s $ease;
+
     &:first-child {
       margin-right: 0.5rem;
     }

docs/src/components/Icon/index.vue

@@ -1,3 +1,11 @@
+<template>
+  <div :class="`icon icon--${size}`">
+    <svg>
+      <use :xlink:href="`${require('remixicon/fonts/remixicon.symbol.svg')}#ri-${name}`" />
+    </svg>
+  </div>
+</template>
+
 <script>
 export default {
   name: 'Icon',
@@ -13,25 +21,6 @@ export default {
       default: 'normal',
     },
   },
-
-  render(createElement) {
-    let svgHTML = ''
-    try {
-      svgHTML = require(`!html-loader!@/assets/icons/${this.name}.svg`)
-    } catch (e) {
-      // eslint-disable-next-line
-      console.warn(`Unable to load "${this.name}.svg" icon. Verify it exists in the icons directory.`, e)
-    }
-    return createElement(
-      'div',
-      {
-        class: `icon icon--${this.size}`,
-        domProps: {
-          innerHTML: svgHTML,
-        },
-      },
-    )
-  },
 }
 </script>
 

docs/src/components/Icon/style.scss

@@ -1,7 +1,16 @@
 .icon {
   display: inline-flex;
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 0.4rem;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
 
   &::v-deep > svg {
     width: 100%;

docs/src/components/PageNavigation/index.vue

@@ -3,7 +3,7 @@
     <btn
       class="page-navigation__previous"
       type="secondary"
-      icon="arrow-left"
+      icon="arrow-left-line"
       icon-position="before"
       :to="previousPage.link"
       v-if="previousPage"
@@ -13,7 +13,7 @@
     <btn
       class="page-navigation__next"
       type="secondary"
-      icon="arrow-right"
+      icon="arrow-right-line"
       :to="nextPage.redirect || nextPage.link"
       v-if="nextPage"
     >