Merge pull request 'Replaced IconRenderer with FontAwesome' (#157) from replace-iconrenderer into master

Reviewed-on: trent_larson/crowd-funder-for-time-pwa#157

src/assets/icons.json

@@ -1,75 +0,0 @@
-{
-  "warning": {
-    "fillRule": "evenodd",
-    "d": "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-    "clipRule": "evenodd"
-  },
-  "spinner": {
-    "d": "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-  },
-  "chart": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-  },
-  "plus": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 4v16m8-8H4"
-  },
-  "settings": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-  },
-  "settingsDot": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-  },
-  "lock": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-  },
-  "download": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-  },
-  "check": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-  },
-  "edit": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-  },
-  "trash": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-  },
-  "plusCircle": {
-    "strokeLinecap": "round",
-    "strokeLinejoin": "round",
-    "strokeWidth": "2",
-    "d": "M12 6v6m0 0v6m0-6h6m-6 0H6"
-  },
-  "info": {
-    "fillRule": "evenodd",
-    "d": "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
-    "clipRule": "evenodd"
-  }
-} 

src/components/IconRenderer.vue

@@ -1,90 +0,0 @@
-<template>
-  <svg
-    v-if="iconData"
-    :class="svgClass"
-    :fill="fill"
-    :stroke="stroke"
-    :viewBox="viewBox"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path v-for="(path, index) in iconData.paths" :key="index" v-bind="path" />
-  </svg>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
-import icons from "../assets/icons.json";
-import { logger } from "../utils/logger";
-
-/**
- * Icon path interface
- */
-interface IconPath {
-  d: string;
-  fillRule?: string;
-  clipRule?: string;
-  strokeLinecap?: string;
-  strokeLinejoin?: string;
-  strokeWidth?: string | number;
-  fill?: string;
-  stroke?: string;
-}
-
-/**
- * Icon data interface
- */
-interface IconData {
-  paths: IconPath[];
-}
-
-/**
- * Icons JSON structure
- */
-interface IconsJson {
-  [key: string]: IconPath | IconData;
-}
-
-/**
- * Icon Renderer Component
- *
- * This component loads SVG icon definitions from a JSON file and renders them
- * as SVG elements. It provides a clean way to use icons without cluttering
- * templates with long SVG path definitions.
- *
- * @author Matthew Raymer
- * @version 1.0.0
- * @since 2024
- */
-@Component({
-  name: "IconRenderer",
-})
-export default class IconRenderer extends Vue {
-  @Prop({ required: true }) readonly iconName!: string;
-  @Prop({ default: "h-5 w-5" }) readonly svgClass!: string;
-  @Prop({ default: "none" }) readonly fill!: string;
-  @Prop({ default: "currentColor" }) readonly stroke!: string;
-  @Prop({ default: "0 0 24 24" }) readonly viewBox!: string;
-
-  /**
-   * Get the icon data for the specified icon name
-   *
-   * @returns {IconData | null} The icon data object or null if not found
-   */
-  get iconData(): IconData | null {
-    const icon = (icons as IconsJson)[this.iconName];
-    if (!icon) {
-      logger.warn(`Icon "${this.iconName}" not found in icons.json`);
-      return null;
-    }
-
-    // Convert single path to array format for consistency
-    if ("d" in icon) {
-      return {
-        paths: [icon as IconPath],
-      };
-    }
-
-    return icon as IconData;
-  }
-}
-</script>

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"
+            icon="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            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"
           />
+          <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"
+            icon="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            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"
           />
+          <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"
+            icon="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            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"
           />
+          <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"
+            icon="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            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"
           />
+          <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
+              <font-awesome
-                icon-name="warning"
+                icon="triangle-exclamation"
-                svg-class="h-5 w-5 text-red-400"
+                class="h-5 w-5 text-red-400"
-                fill="currentColor"
               />
             </div>
             <div class="ml-3">
@@ -207,10 +186,9 @@
         >
           <div class="flex">
             <div class="flex-shrink-0">
-              <IconRenderer
+              <font-awesome
-                icon-name="warning"
+                icon="triangle-exclamation"
-                svg-class="h-5 w-5 text-red-400"
+                class="h-5 w-5 text-red-400"
-                fill="currentColor"
               />
             </div>
             <div class="ml-3">
@@ -229,10 +207,7 @@
         >
           <div class="flex">
             <div class="flex-shrink-0">
-              <IconRenderer
+              <font-awesome icon="check" class="h-5 w-5 text-green-400" />
-                icon-name="check"
-                svg-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"
+            icon="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            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"
           />
+          <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
+            <font-awesome icon="info" class="h-5 w-5 text-blue-400" />
-              icon-name="info"
-              svg-class="h-5 w-5 text-blue-400"
-              fill="currentColor"
-            />
           </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
+          <font-awesome
-            icon-name="spinner"
+            icon="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
           />
           {{ loadingMessage }}
         </div>
@@ -375,10 +340,7 @@
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <IconRenderer
+                  <font-awesome icon="lock" class="h-6 w-6 text-orange-600" />
-                    icon-name="lock"
-                    svg-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
+                  <font-awesome icon="check" class="h-6 w-6 text-teal-600" />
-                    icon-name="check"
-                    svg-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
+                  <font-awesome icon="gear" class="h-6 w-6 text-purple-600" />
-                    icon-name="settings"
-                    svg-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
+                  <font-awesome icon="check" class="h-6 w-6 text-indigo-600" />
-                    icon-name="check"
-                    svg-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
+                  <font-awesome
-                    icon-name="chart"
+                    icon="chart-line"
-                    svg-class="h-6 w-6 text-blue-600"
+                    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
+                  <font-awesome icon="check" class="h-6 w-6 text-green-600" />
-                    icon-name="check"
-                    svg-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
+                    <font-awesome
-                      icon-name="plusCircle"
+                      icon="circle-plus"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="check"
+                      icon="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="trash"
+                      icon="trash-can"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="plusCircle"
+                      icon="circle-plus"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="edit"
+                      icon="pen"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="check"
+                      icon="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="trash"
+                      icon="trash-can"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="plusCircle"
+                      icon="circle-plus"
-                      svg-class="h-5 w-5 text-blue-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="edit"
+                      icon="pen"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="check"
+                      icon="check"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                      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
+                    <font-awesome
-                      icon-name="trash"
+                      icon="trash-can"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
+                      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;