feat: Remove ionicons v2 dependency on widget (#3402)

app/javascript/widget/components/template/Article.vue

@@ -2,10 +2,13 @@
   <div v-if="!!items.length" class="chat-bubble agent">
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
-        <span class="title">
-          <i class="ion-link icon"></i>{{ item.title }}
+        <span class="title flex items-center text-black-900 font-medium">
+          <fluent-icon icon="link" class="mr-1" />
+          <span>{{ item.title }}</span>
+        </span>
+        <span class="description">
+          {{ truncateMessage(item.description) }}
         </span>
-        <span class="description">{{ truncateMessage(item.description) }}</span>
       </a>
     </div>
   </div>
@@ -13,8 +16,12 @@
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
+  components: {
+    FluentIcon,
+  },
   mixins: [messageFormatterMixin],
   props: {
     items: {
@@ -38,18 +45,6 @@ export default {
     text-decoration: none;
   }
 
-  .title {
-    color: $color-woot;
-    display: block;
-    font-weight: $font-weight-medium;
-
-    .icon {
-      color: $color-body;
-      font-size: $font-size-medium;
-      padding-right: $space-small;
-    }
-  }
-
   .description {
     display: block;
     margin-top: $space-smaller;

app/javascript/widget/components/template/EmailInput.vue

@@ -3,7 +3,7 @@
     <form
       v-if="!hasSubmitted"
       class="email-input-group"
-      @submit.prevent="onSubmit()"
+      @submit.prevent="onSubmit"
     >
       <input
         v-model.trim="email"
@@ -14,12 +14,12 @@
         @keyup.enter="onSubmit"
       />
       <button
-        class="button"
+        class="button small"
         :disabled="$v.email.$invalid"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
-        <i v-if="!isUpdating" class="ion-ios-arrow-forward" />
-        <spinner v-else />
+        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
+        <spinner v-else class="mx-2" />
       </button>
     </form>
   </div>
@@ -27,11 +27,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner';
 import { required, email } from 'vuelidate/lib/validators';
 
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import Spinner from 'shared/components/Spinner';
+
 export default {
   components: {
+    FluentIcon,
     Spinner,
   },
   props: {