Replaced IconRenderer with FontAwesome

src/libs/fontawesome.ts

@@ -20,6 +20,7 @@ import {
   faCameraRotate,
   faCaretDown,
   faChair,
+  faChartLine,
   faCheck,
   faChevronDown,
   faChevronLeft,
@@ -28,6 +29,7 @@ import {
   faCircle,
   faCircleCheck,
   faCircleInfo,
+  faCirclePlus,
   faCircleQuestion,
   faCircleRight,
   faCircleUser,
@@ -49,6 +51,7 @@ import {
   faFloppyDisk,
   faFolderOpen,
   faForward,
+  faGear,
   faGift,
   faGlobe,
   faHammer,
@@ -58,6 +61,7 @@ import {
   faHouseChimney,
   faImage,
   faImagePortrait,
+  faInfo,
   faLeftRight,
   faLightbulb,
   faLink,
@@ -72,8 +76,8 @@ import {
   faPersonCircleCheck,
   faPersonCircleQuestion,
   faPlus,
-  faQuestion,
   faQrcode,
+  faQuestion,
   faRightFromBracket,
   faRotate,
   faShareNodes,
@@ -106,6 +110,7 @@ library.add(
   faCameraRotate,
   faCaretDown,
   faChair,
+  faChartLine,
   faCheck,
   faChevronDown,
   faChevronLeft,
@@ -114,6 +119,7 @@ library.add(
   faCircle,
   faCircleCheck,
   faCircleInfo,
+  faCirclePlus,
   faCircleQuestion,
   faCircleRight,
   faCircleUser,
@@ -135,6 +141,7 @@ library.add(
   faFloppyDisk,
   faFolderOpen,
   faForward,
+  faGear,
   faGift,
   faGlobe,
   faHammer,
@@ -144,6 +151,7 @@ library.add(
   faHouseChimney,
   faImage,
   faImagePortrait,
+  faInfo,
   faLeftRight,
   faLightbulb,
   faLink,

src/views/DatabaseMigration.vue

@@ -91,17 +91,12 @@
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="downloadAccount"
         >
-          <IconRenderer
+          <font-awesome
             v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
           />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
           Show Account Seed
         </button>
 
@@ -110,17 +105,12 @@
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="downloadSettingsContacts"
         >
-          <IconRenderer
+          <font-awesome
             v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
           />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
           Download Settings &amp; Contacts
         </button>
 
@@ -143,17 +133,12 @@
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="compareDatabases"
         >
-          <IconRenderer
+          <font-awesome
             v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
           />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
           Compare Databases
         </button>
 
@@ -162,17 +147,12 @@
           class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateAll"
         >
-          <IconRenderer
+          <font-awesome
             v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="check"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
           />
+          <font-awesome v-else icon="check" class="-ml-1 mr-3 h-5 w-5" />
           Migrate All
         </button>
 
@@ -185,10 +165,9 @@
         >
           <div class="flex">
             <div class="flex-shrink-0">
-              <IconRenderer
-                icon-name="warning"
-                svg-class="h-5 w-5 text-red-400"
-                fill="currentColor"
+              <font-awesome
+                icon="triangle-exclamation"
+                class="h-5 w-5 text-red-400"
               />
             </div>
             <div class="ml-3">
@@ -207,10 +186,9 @@
         >
           <div class="flex">
             <div class="flex-shrink-0">
-              <IconRenderer
-                icon-name="warning"
-                svg-class="h-5 w-5 text-red-400"
-                fill="currentColor"
+              <font-awesome
+                icon="triangle-exclamation"
+                class="h-5 w-5 text-red-400"
               />
             </div>
             <div class="ml-3">
@@ -229,10 +207,7 @@
         >
           <div class="flex">
             <div class="flex-shrink-0">
-              <IconRenderer
-                icon-name="check"
-                svg-class="h-5 w-5 text-green-400"
-              />
+              <font-awesome icon="check" class="h-5 w-5 text-green-400" />
             </div>
             <div class="ml-3">
               <h3 class="text-sm font-medium text-green-800">Success</h3>
@@ -249,7 +224,7 @@
           class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="exportComparison"
         >
-          <IconRenderer icon-name="download" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="download" class="-ml-1 mr-3 h-5 w-5" />
           Export Comparison
         </button>
 
@@ -258,17 +233,12 @@
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="displayDatabases"
         >
-          <IconRenderer
+          <font-awesome
             v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
           />
+          <font-awesome v-else icon="chart-line" class="-ml-1 mr-3 h-5 w-5" />
           Show Previous Data
         </button>
 
@@ -277,7 +247,7 @@
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateAccounts"
         >
-          <IconRenderer icon-name="lock" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="lock" class="-ml-1 mr-3 h-5 w-5" />
           Migrate Accounts
         </button>
 
@@ -286,7 +256,7 @@
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateSettings"
         >
-          <IconRenderer icon-name="settings" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="gear" class="-ml-1 mr-3 h-5 w-5" />
           Migrate Settings
         </button>
 
@@ -295,7 +265,7 @@
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateContacts"
         >
-          <IconRenderer icon-name="plus" svg-class="-ml-1 mr-3 h-5 w-5" />
+          <font-awesome icon="plus" class="-ml-1 mr-3 h-5 w-5" />
           Migrate Contacts
         </button>
       </div>
@@ -316,11 +286,7 @@
       >
         <div class="flex">
           <div class="flex-shrink-0">
-            <IconRenderer
-              icon-name="info"
-              svg-class="h-5 w-5 text-blue-400"
-              fill="currentColor"
-            />
+            <font-awesome icon="info" class="h-5 w-5 text-blue-400" />
           </div>
           <div class="ml-3">
             <h3 class="text-sm font-medium text-blue-800">
@@ -357,10 +323,9 @@
         <div
           class="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-blue-500 hover:bg-blue-400 transition ease-in-out duration-150 cursor-not-allowed"
         >
-          <IconRenderer
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
+          <font-awesome
+            icon="spinner"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
           />
           {{ loadingMessage }}
         </div>
@@ -375,10 +340,7 @@
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="lock"
-                    svg-class="h-6 w-6 text-orange-600"
-                  />
+                  <font-awesome icon="lock" class="h-6 w-6 text-orange-600" />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
@@ -398,10 +360,7 @@
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="check"
-                    svg-class="h-6 w-6 text-teal-600"
-                  />
+                  <font-awesome icon="check" class="h-6 w-6 text-teal-600" />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
@@ -422,10 +381,7 @@
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="settings"
-                    svg-class="h-6 w-6 text-purple-600"
-                  />
+                  <font-awesome icon="gear" class="h-6 w-6 text-purple-600" />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
@@ -445,10 +401,7 @@
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="check"
-                    svg-class="h-6 w-6 text-indigo-600"
-                  />
+                  <font-awesome icon="check" class="h-6 w-6 text-indigo-600" />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
@@ -469,9 +422,9 @@
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="chart"
-                    svg-class="h-6 w-6 text-blue-600"
+                  <font-awesome
+                    icon="chart-line"
+                    class="h-6 w-6 text-blue-600"
                   />
                 </div>
                 <div class="ml-5 w-0 flex-1">
@@ -492,10 +445,7 @@
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <IconRenderer
-                    icon-name="check"
-                    svg-class="h-6 w-6 text-green-600"
-                  />
+                  <font-awesome icon="check" class="h-6 w-6 text-green-600" />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
@@ -526,9 +476,9 @@
                   class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="plusCircle"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                    <font-awesome
+                      icon="circle-plus"
+                      class="h-5 w-5 text-blue-600 mr-2"
                     />
                     <span class="text-sm font-medium text-blue-900">Add</span>
                   </div>
@@ -541,9 +491,9 @@
                   class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="check"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
                       >Unmodified</span
@@ -558,9 +508,9 @@
                   class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    <font-awesome
+                      icon="trash-can"
+                      class="h-5 w-5 text-red-600 mr-2"
                     />
                     <span class="text-sm font-medium text-red-900">Keep</span>
                   </div>
@@ -677,9 +627,9 @@
                   class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="plusCircle"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                    <font-awesome
+                      icon="circle-plus"
+                      class="h-5 w-5 text-blue-600 mr-2"
                     />
                     <span class="text-sm font-medium text-blue-900">Add</span>
                   </div>
@@ -692,9 +642,9 @@
                   class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="edit"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="pen"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
                       >Modify</span
@@ -709,9 +659,9 @@
                   class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="check"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
                       >Unmodified</span
@@ -726,9 +676,9 @@
                   class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    <font-awesome
+                      icon="trash-can"
+                      class="h-5 w-5 text-red-600 mr-2"
                     />
                     <span class="text-sm font-medium text-red-900">Keep</span>
                   </div>
@@ -868,9 +818,9 @@
                   class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="plusCircle"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                    <font-awesome
+                      icon="circle-plus"
+                      class="h-5 w-5 text-blue-600 mr-2"
                     />
                     <span class="text-sm font-medium text-blue-900">Add</span>
                   </div>
@@ -883,9 +833,9 @@
                   class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="edit"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="pen"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
                       >Modify</span
@@ -900,9 +850,9 @@
                   class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    <font-awesome
+                      icon="check"
+                      class="h-5 w-5 text-yellow-600 mr-2"
                     />
                     <span class="text-sm font-medium text-yellow-900"
                       >Unmodified</span
@@ -917,9 +867,9 @@
                   class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
                 >
                   <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    <font-awesome
+                      icon="trash-can"
+                      class="h-5 w-5 text-red-600 mr-2"
                     />
                     <span class="text-sm font-medium text-red-900">Keep</span>
                   </div>
@@ -1067,7 +1017,6 @@ import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 import { Router } from "vue-router";
 
-import IconRenderer from "../components/IconRenderer.vue";
 import {
   compareDatabases,
   migrateSettings,
@@ -1104,9 +1053,6 @@ import { logger } from "../utils/logger";
  */
 @Component({
   name: "DatabaseMigration",
-  components: {
-    IconRenderer,
-  },
 })
 export default class DatabaseMigration extends Vue {
   $router!: Router;