fix(icons): missing icons

Author: Ni55aN

components/Showcase.vue

@@ -6,12 +6,17 @@
         h2.title {{ item.showcase.title }}
         .description {{ item.showcase.description }}
         .links
-          Button(:to="localePath('/examples')" icon="ios-code" shape="circle" type="primary") {{$t('examples')}}
-          Button(:to="localePath('/docs/')" icon="ios-book" shape="circle" type="primary") {{$t('docs')}}
+          Button.button(:to="localePath('/examples')" shape="circle" type="primary")
+            Icon.icon(name="fa6-solid:code")
+            | {{$t('examples')}}
+          Button.button(:to="localePath('/docs/')" shape="circle" type="primary")
+            Icon.icon(name="fa6-solid:book-open")
+            | {{$t('docs')}}
       Card.preview(:padding="0")
         .open
           Tooltip(:content="$t('openNewTab')" placement="top-end")
-            Button(:to="item.showcase.link || item.showcase.source" icon="ios-link" target="_blank")
+            Button.link(:to="item.showcase.link || item.showcase.source" target="_blank")
+              Icon(name="f7:link")
         client-only
           FrameExample(:src="item.showcase.source" :lazy="true")
           template(#placeholder)
@@ -86,6 +91,11 @@ export default {
       +phone
         flex-direction: row
         justify-content: center
+      .button
+        .icon
+          vertical-align: text-top
+          margin-right: 0.3em
+          size: 1.05em
 
   .preview
     width: 80%
@@ -103,6 +113,7 @@ export default {
         border-radius: 1.8em 0 0 0
         border-bottom: 0
         border-right: 0
+        padding: 0.1em 0.6em
     img
       display: block
       width: 100%

components/content/ProExample.vue

@@ -5,7 +5,8 @@ IViewAlert.alert(show-icon)
     Tooltip(placement="top")
       template(#content)
         .tooltip {{ $t('examplesPage.proExample.info') }}
-      Button(type="text" shape="circle" icon="ios-help-circle-outline")
+      Button.question(type="text" shape="circle")
+        Icon.icon(name="f7:question-circle")
     Button.button(:to="patreon.link" target="_blank") {{ $t('examplesPage.proExample.getAccess') }}
   template(#icon)
     Icon.icon(name="ion:finger-print")
@@ -52,6 +53,10 @@ export default {
       text-wrap: wrap
   .icon
     font-size: 1.25em
+  .question
+    padding: 0.2em 0.5em
+    .icon
+      vertical-align: text-top
 
 iframe
   width: 100%

components/content/RefExample.vue

@@ -1,16 +1,18 @@
 <template lang="pug">
-Button(
-  shape="circle"
-  size="small"
-  icon="ios-code"
+RefButton(
+  :title="title"
+  icon="fa6-solid:code"
   :to="link"
 )
-  | {{title}}
 </template>
 
 <script>
+import RefButton from '../shared/RefButton.vue';
 
 export default {
+  components: {
+    RefButton,
+  },
   props: ['title', 'link'],
 };
 </script>

components/content/RefExternal.vue

@@ -1,16 +1,18 @@
 <template lang="pug">
-Button(
-  shape="circle"
-  size="small"
-  icon="ios-link"
+RefButton(
+  :title="title"
+  icon="fa6-solid:link"
   :to="link"
 )
-  | {{title}}
 </template>
 
 <script>
+import RefButton from '../shared/RefButton.vue';
 
 export default {
+  components: {
+    RefButton,
+  },
   props: ['title', 'link'],
 };
 </script>

components/content/RefGithub.vue

@@ -1,16 +1,18 @@
 <template lang="pug">
-Button(
-  shape="circle"
-  size="small"
-  icon="logo-github"
+RefButton(
+  :title="title"
+  icon="fa6-brands:github"
   :to="link"
 )
-  | {{title}}
 </template>
 
 <script>
+import RefButton from '../shared/RefButton.vue';
 
 export default {
+  components: {
+    RefButton,
+  },
   props: ['title', 'link'],
 };
 </script>

components/content/RefGuide.vue

@@ -1,16 +1,18 @@
 <template lang="pug">
-Button(
-  shape="circle"
-  size="small"
-  icon="ios-book"
+RefButton(
+  :title="title"
+  icon="fa6-solid:book-open"
   :to="link"
 )
-  | {{title}}
 </template>
 
 <script>
+import RefButton from '../shared/RefButton.vue';
 
 export default {
+  components: {
+    RefButton,
+  },
   props: ['title', 'link'],
 };
 </script>

components/shared/RefButton.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+Button(
+  shape="circle"
+  size="small"
+  :to="link"
+)
+  Icon.icon(:name="icon")
+  | {{title}}
+</template>
+
+<script>
+
+export default {
+  props: ['title', 'link', 'icon'],
+};
+</script>
+
+<style lang="sass" scoped>
+.icon
+  margin-right: 0.3em
+  vertical-align: text-bottom
+</style>

pages/index.vue

@@ -11,7 +11,9 @@
     a.origin(href="https://stand-with-ukraine.pp.ua" target="_blank")
       img(:src="originBadge" alt="Stand with Ukraine")
   Logo.logo(v-if="!intro" :hover="logoIsHovered" :zoomIn="false")
-  Button.intro-button(v-if="!intro" shape="circle" type="primary" icon="logo-youtube" @click="intro = true") Intro
+  Button.intro-button(v-if="!intro" shape="circle" type="primary" @click="intro = true")
+    Icon.icon(name="fa6-brands:youtube")
+    | Intro
   Intro.intro(:show="intro" :scroll="true" :autoplay="true")
   .highlights.section
     .highlight
@@ -101,6 +103,10 @@ export default {
   .intro-button
     margin: auto
     display: block
+    .icon
+      font-size: 1.2em
+      margin-right: 0.3em
+      vertical-align: text-top
   .intro
     margin: 2em auto 0 auto
     +phone