docs: update styling

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%;