Replace old icon with font-awesome icons

frontend/src/config/identities/github/config.ts

@@ -4,7 +4,8 @@ const github: IdentityConfig = {
   key: 'github',
   name: 'GitHub',
   image: '/images/identities/github.png',
-  icon: 'github-fill',
+  icon: 'github',
+  iconType: 'brands',
   color: '#24292F',
   member: {
     urlPrefix: 'github.com/',

frontend/src/config/identities/index.ts

@@ -30,6 +30,7 @@ export interface IdentityConfig {
   name: string; // Display name of the identity
   image: string; // Image URL for the identity
   icon?: string; // Image URL for the identity
+  iconType?: string
   color?: string; // Image URL for the identity
   member?: {
     placeholder?: string;

frontend/src/config/identities/linkedin/config.ts

@@ -4,7 +4,8 @@ const linkedin: IdentityConfig = {
   key: 'linkedin',
   name: 'LinkedIn',
   image: '/images/identities/linkedin.png',
-  icon: 'linkedin-box-fill',
+  icon: 'linkedin',
+  iconType: 'brands',
   color: '#2867B2',
   member: {
     urlPrefix: 'linkedin.com/in/',

frontend/src/config/integrations/confluence/components/confluence-params.vue

@@ -7,9 +7,7 @@
             <div
               class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
             >
-              <i
-                class="ri-folders-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-              />
+              <lf-icon name="folders" class="!text-gray-600 mr-1 h-4 flex items-center" />
               1 organization
             </div>
             •
@@ -26,8 +24,9 @@
             Confluence organizations
           </p>
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
-            <i
-              class="ri-community-line text-[16px] mr-1 h-4 flex items-center"
+            <lf-icon
+              name="house-building"
+              class="mr-1 h-4 flex items-center"
             />
 
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
@@ -40,9 +39,7 @@
           </p>
 
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
-            <div
-              class="ri-folder-line text-[16px] mr-1 h-4 flex items-center"
-            />
+            <lf-icon name="folder" class="mr-1 h-4 flex items-center" />
 
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               space?.name || space?.key || "Unnamed space"
@@ -56,6 +53,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   integration: {

frontend/src/config/integrations/devto/components/devto-connect-drawer.vue

@@ -85,7 +85,7 @@
                 class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
                 @click="removeOrganization(org.id)"
               >
-                <i class="ri-delete-bin-line text-lg text-black" />
+                <lf-icon name="trash-can" :size="20" class="text-black" />
               </el-button>
             </div>
             <span
@@ -142,7 +142,7 @@
                 class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
                 @click="removeUser(user.id)"
               >
-                <i class="ri-delete-bin-line text-lg text-black" />
+                <lf-icon name="trash-can" :size="20" class="text-black" />
               </el-button>
             </div>
             <span
@@ -205,6 +205,7 @@ import { IntegrationService } from '@/modules/integration/integration-service';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const { doDevtoConnect } = mapActions('integration');
 

frontend/src/config/integrations/devto/components/devto-params.vue

@@ -7,10 +7,7 @@
             <div
               class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
             >
-              <i
-                class="ri-community-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-              />
-
+              <lf-icon name="house-building" class="!text-gray-600 mr-1 h-4 flex items-center" />
               {{ pluralize("organization", organizations.length, true) }}
             </div>
             •
@@ -32,10 +29,7 @@
               :key="organization"
               class="flex items-center flex-nowrap mb-4 last:mb-0"
             >
-              <i
-                class="ri-community-line text-[16px] mr-1 h-4 flex items-center"
-              />
-
+              <lf-icon name="house-building" class="mr-1 h-4 flex items-center" />
               <span class="text-gray-900 text-sm max-w-3xs truncate">{{
                 organization
               }}</span>
@@ -55,9 +49,7 @@
               :key="user"
               class="flex items-center flex-nowrap mb-4 last:mb-0"
             >
-              <div
-                class="ri-user-line text-[16px] mr-1 h-4 flex items-center"
-              />
+              <lf-icon name="user" class="mr-1 h-4 flex items-center" />
 
               <span class="text-gray-900 text-sm max-w-3xs truncate">{{
                 user
@@ -73,6 +65,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   integration: {

frontend/src/config/integrations/discourse/components/discourse-params.vue

@@ -6,9 +6,7 @@
           <div
             class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
           >
-            <i
-              class="ri-question-answer-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-            />
+            <lf-icon name="messages" class="!text-gray-600 mr-1 h-4 flex items-center" />
             1 forum
           </div>
         </template>
@@ -18,10 +16,7 @@
         </p>
         <div class="max-h-44 overflow-auto -my-1 px-1">
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
-            <i
-              class="ri-question-answer-line text-[16px] mr-1 h-4 flex items-center"
-            />
-
+            <lf-icon name="messages" class="mr-1 h-4 flex items-center" />
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               forum
             }}</span>
@@ -34,6 +29,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   integration: {

frontend/src/config/integrations/github-archive/components/settings/github-settings-add-repository-modal.vue

@@ -103,7 +103,7 @@
                   <lf-avatar :name="org.name" :src="org.logo" :size="32" class="!rounded border border-gray-200">
                     <template #placeholder>
                       <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                        <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+                        <lf-icon name="house-building" :size="12" class="text-gray-400" />
                       </div>
                     </template>
                   </lf-avatar>

frontend/src/config/integrations/github-archive/components/settings/github-settings-org-item.vue

@@ -6,7 +6,7 @@
         <lf-avatar :name="props.organization.name" :src="props.organization.logo" :size="24" class="!rounded border border-gray-200">
           <template #placeholder>
             <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-              <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+              <lf-icon name="house-building" :size="12" class="text-gray-400" />
             </div>
           </template>
         </lf-avatar>
@@ -17,7 +17,7 @@
 
       <div class="flex items-center gap-2">
         <lf-badge v-if="isSynced" type="primary" class="!flex items-center gap-1 !rounded-full !px-2">
-          <lf-icon-old name="loop-right-line" />
+          <lf-icon name="arrows-rotate" />
           Synced
         </lf-badge>
         <lf-dropdown placement="bottom-end" width="11.125rem">
@@ -70,7 +70,6 @@ import {
   GitHubSettingsRepository,
 } from '@/config/integrations/github-archive/types/GithubSettings';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfBadge from '@/ui-kit/badge/Badge.vue';

frontend/src/config/integrations/github/components/connect/github-connect-modal.vue

@@ -15,7 +15,7 @@
           class="-mt-2 -mr-2"
           @click="isModalOpen = false"
         >
-          <lf-icon-old name="close-line" :size="24" />
+          <lf-icon name="xmark" type="regular" :size="24" />
         </lf-button>
       </div>
       <section class="pt-6 pb-8">
@@ -58,11 +58,11 @@
             </p>
             <lf-button type="primary-link" size="small" @click="copy()">
               <template v-if="!copied">
-                <lf-icon-old name="file-copy-line" />
+                <lf-icon name="copy" />
                 Copy app installation link to clipboard
               </template>
               <template v-else>
-                <lf-icon-old name="checkbox-circle-fill" class="text-green-500" />
+                <lf-icon name="circle-check" class="text-green-500" />
                 <span class="text-green-500">Copied to clipboard!</span>
               </template>
             </lf-button>
@@ -100,7 +100,7 @@
               >
                 <template #placeholder>
                   <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                    <lf-icon-old name="community-line" :size="14" class="text-gray-400" />
+                    <lf-icon name="house-building" :size="14" class="text-gray-400" />
                   </div>
                 </template>
               </lf-avatar>
@@ -116,7 +116,7 @@
                 <lf-avatar :src="i.avatarUrl" :name="i.login" :size="18" class="!rounded border border-gray-200 mr-1 mt-px">
                   <template #placeholder>
                     <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                      <lf-icon-old name="community-line" :size="14" class="text-gray-400" />
+                      <lf-icon name="house-building" :size="14" class="text-gray-400" />
                     </div>
                   </template>
                 </lf-avatar>
@@ -139,6 +139,7 @@ import { computed, onMounted, ref } from 'vue';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import config from '@/config';
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';

frontend/src/config/integrations/jira/components/jira-params.vue

@@ -6,9 +6,7 @@
           <div
             class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
           >
-            <i
-              class="ri-folders-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-            />
+            <lf-icon name="folders" class="!text-gray-600 mr-1 h-4 flex items-center" />
             {{ pluralize('project', projects.length, true) }}
           </div>
         </template>
@@ -22,10 +20,7 @@
             :key="project"
             class="flex items-center flex-nowrap mb-4 last:mb-0"
           >
-            <i
-              class="ri-folder-line text-[16px] mr-1 h-4 flex items-center"
-            />
-
+            <lf-icon name="folder" class="mr-1 h-4 flex items-center" />
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               project
             }}</span>
@@ -39,6 +34,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   integration: {

frontend/src/modules/admin/modules/integration/components/integration-status.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="flex items-center text-medium gap-1.5 whitespace-nowrap">
     <template v-if="status">
-      <lf-icon-old :name="status.status.icon" :class="status.status.color" :size="20" />
+      <lf-icon v-if="status.status.icon" :name="status.status.icon" :type="status.status.iconType" :class="status.status.color" :size="20" />
       <span class="font-semibold" :class="status.status.color">{{ status.status.text }}</span>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
 
 const props = defineProps<{

frontend/src/modules/admin/modules/integration/components/status/integration-platform-select.vue

@@ -3,20 +3,20 @@
     <template #trigger>
       <lf-button type="secondary" class="!font-normal">
         <template v-if="!model">
-          <lf-icon-old name="apps-2-line" :size="16" />
+          <lf-icon name="grid-round-2" type="regular" :size="16" />
           All integrations
         </template>
         <template v-else>
           <img :src="lfIntegrations[model]?.image" :alt="lfIntegrations[model]?.name" class="w-4 h-4 object-contain">
           {{ lfIntegrations[model]?.name }}
         </template>
-        <lf-icon-old name="arrow-down-s-line" :size="16" />
+        <lf-icon name="chevron-down" :size="16" />
       </lf-button>
     </template>
     <div class="max-h-80 overflow-y-scroll -m-2 p-2">
       <lf-dropdown-item :selected="!model" @click="model = ''">
         <div class="flex items-center gap-2">
-          <lf-icon-old name="apps-2-line" :size="16" />
+          <lf-icon name="grid-round-2" type="regular" :size="16" />
           All integrations
         </div>
       </lf-dropdown-item>
@@ -40,7 +40,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';

frontend/src/modules/admin/modules/integration/config/status/connecting.ts

@@ -6,7 +6,8 @@ const connecting: IntegrationStatusConfig = {
   statuses: ['in-progress'],
   status: {
     text: 'Connecting',
-    icon: 'loader-4-line animate-spin',
+    icon: 'circle-notch animate-spin',
+    iconType: 'solid',
     color: 'text-secondary-500',
   },
   actionBar: {

frontend/src/modules/admin/modules/integration/config/status/done.ts

@@ -6,7 +6,8 @@ const done: IntegrationStatusConfig = {
   statuses: ['done'],
   status: {
     text: 'Connected',
-    icon: 'checkbox-circle-fill',
+    icon: 'circle-check',
+    iconType: 'solid',
     color: 'text-green-600',
   },
   actionBar: {

frontend/src/modules/admin/modules/integration/config/status/error.ts

@@ -6,7 +6,8 @@ const error: IntegrationStatusConfig = {
   statuses: ['error'],
   status: {
     text: 'Connection failed',
-    icon: 'error-warning-fill',
+    icon: 'circle-exclamation',
+    iconType: 'solid',
     color: 'text-red-500',
   },
   actionBar: {

frontend/src/modules/admin/modules/integration/config/status/index.ts

@@ -11,6 +11,7 @@ export interface IntegrationStatusConfig {
   status: {
     text: string;
     icon: string;
+    iconType?: string;
     color: string;
   },
   actionBar: {

frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts

@@ -6,7 +6,8 @@ const waitingForAction: IntegrationStatusConfig = {
   statuses: ['pending-action', 'mapping'],
   status: {
     text: 'Action required',
-    icon: 'alert-fill',
+    icon: 'triangle-exclamation',
+    iconType: 'solid',
     color: 'text-yellow-600',
   },
   actionBar: {