refactor: update most of the remix icons

rotki · Jan 30, 2025 · eebe4a8 · eebe4a8
1 parent bf50d16
commit eebe4a8
Show file tree

Hide file tree

Showing 30 changed files with 158 additions and 165 deletions.
diff --git a/components/account/home/AccountDetails.vue b/components/account/home/AccountDetails.vue
@@ -42,7 +42,7 @@ const { t } = useI18n();
           :label="t('auth.common.username')"
           hide-details
           color="primary"
-          append-icon="lock-line"
+          append-icon="lu-lock-keyhole"
         />
         <div>
           <RuiTextField
@@ -55,7 +55,7 @@ const { t } = useI18n();
             :label="t('auth.common.email')"
             hide-details
             color="primary"
-            append-icon="lock-line"
+            append-icon="lu-lock-keyhole"
           />
           <div class="text-rui-text-secondary pt-2 px-3 text-xs flex">
             {{ t('account_details.check_email') }}

diff --git a/components/account/home/ApiKeys.vue b/components/account/home/ApiKeys.vue
@@ -34,7 +34,7 @@ const { t } = useI18n();
           @click="regenerateKeys()"
         >
           <template #prepend>
-            <RuiIcon name="refresh-line" />
+            <RuiIcon name="lu-refresh-cw" />
           </template>
           {{ hasApiKeys ? t('actions.regenerate') : t('actions.generate') }}
         </RuiButton>

diff --git a/components/account/home/SubscriptionTable.vue b/components/account/home/SubscriptionTable.vue
@@ -209,7 +209,7 @@ onUnmounted(() => pause());
                 <RuiIcon
                   size="16"
                   class="text-white"
-                  name="information-line"
+                  name="lu-info"
                 />
                 {{ t('account.subscriptions.cancelled_but_still_active.status', { date: row.nextActionDate }) }}
               </div>
@@ -259,7 +259,7 @@ onUnmounted(() => pause());
                 :to="getBlockExplorerLink(pendingTx)"
               >
                 <RuiIcon
-                  name="links-line"
+                  name="lu-link"
                   :size="18"
                 />
               </ButtonLink>

diff --git a/components/account/home/UnverifiedEmailWarning.vue b/components/account/home/UnverifiedEmailWarning.vue
@@ -48,7 +48,7 @@ async function resend() {
     >
       <template #prepend>
         <RuiIcon
-          name="mail-send-line"
+          name="lu-mail"
           size="20"
         />
       </template>

diff --git a/components/checkout/pay/CryptoPaymentForm.vue b/components/checkout/pay/CryptoPaymentForm.vue
@@ -244,7 +244,7 @@ watch(canvas, async (canvas) => {
             @click="open()"
           >
             <RuiIcon
-              name="link"
+              name="lu-link-2"
               size="20"
             />
           </RuiButton>

diff --git a/components/checkout/pay/HostedField.vue b/components/checkout/pay/HostedField.vue
@@ -45,7 +45,7 @@ const quotedLabel = computed(() => `"  ${get(label)}  "`);
         v-if="number"
         :class="[$style.icon, $style.prepend]"
       >
-        <RuiIcon name="bank-card-line" />
+        <RuiIcon name="lu-credit-card" />
       </div>
     </div>
     <div class="flex flex-1 overflow-hidden">

diff --git a/components/checkout/pay/SavedCardDisplay.vue b/components/checkout/pay/SavedCardDisplay.vue
@@ -180,7 +180,7 @@ defineExpose({ submit });
       :loading="deleteLoading"
       @click="deleteCardClick()"
     >
-      <RuiIcon name="delete-bin-5-line" />
+      <RuiIcon name="lu-trash-2" />
     </RuiButton>
   </div>
   <RuiAlert

diff --git a/components/checkout/payment-method/PaymentMethodSelection.vue b/components/checkout/payment-method/PaymentMethodSelection.vue
@@ -33,21 +33,21 @@ const paymentMethods: PaymentMethodItem[] = [
   {
     id: PaymentMethod.BLOCKCHAIN,
     label: 'Blockchain',
-    icon: 'coin-line',
+    icon: 'lu-blockchain',
     name: 'checkout-pay-request-crypto',
     class: 'sm:col-start-1',
   },
   {
     id: PaymentMethod.CARD,
     label: 'Card',
-    icon: 'bank-card-line',
+    icon: 'lu-credit-card',
     name: 'checkout-pay-card',
     class: 'sm:col-start-2',
   },
   {
     id: PaymentMethod.PAYPAL,
     label: 'Paypal',
-    icon: 'paypal-line',
+    icon: 'lu-paypal',
     name: 'checkout-pay-paypal',
     class: 'sm:col-start-2',
   },

diff --git a/components/checkout/plan/PlanSelection.vue b/components/checkout/plan/PlanSelection.vue
@@ -93,7 +93,7 @@ const canBuy = reactify(canBuyNewSubscription)(account);
         >
           <RuiIcon
             :class="$style.note__icon"
-            name="arrow-right-circle-line"
+            name="lu-circle-arrow-right"
           />
           <p>{{ line }}</p>
         </div>

diff --git a/components/checkout/plan/SelectablePlan.vue b/components/checkout/plan/SelectablePlan.vue
@@ -71,7 +71,7 @@ function click() {
     >
       <RuiIcon
         class="text-black/60"
-        name="hand-coin-line"
+        name="lu-donate-fill"
       />
       <span>
         {{ t('home.plans.save_discount', { discount: plan.discount }) }}

diff --git a/components/common/CopyButton.vue b/components/common/CopyButton.vue
@@ -33,7 +33,7 @@ function copyToClipboard() {
         <RuiIcon
           class="text-black/[.54] dark:text-white/[.56]"
           size="20"
-          name="file-copy-line"
+          name="lu-copy"
         />
       </RuiButton>
     </template>

diff --git a/components/common/NavigationMenu.vue b/components/common/NavigationMenu.vue
@@ -83,7 +83,7 @@ const { isMdAndDown } = useBreakpoint();
         >
           <RuiIcon
             size="18"
-            name="external-link-line"
+            name="lu-external-link"
           />
         </template>
       </ButtonLink>
@@ -102,7 +102,7 @@ const { isMdAndDown } = useBreakpoint();
               <div class="flex items-center gap-2">
                 {{ menu.label }}
                 <RuiIcon
-                  name="arrow-down-s-line"
+                  name="lu-chevron-down"
                   size="16"
                 />
               </div>
@@ -128,7 +128,7 @@ const { isMdAndDown } = useBreakpoint();
               >
                 <RuiIcon
                   class="ml-8"
-                  name="external-link-line"
+                  name="lu-external-link"
                 />
               </template>
             </ButtonLink>
@@ -150,7 +150,7 @@ const { isMdAndDown } = useBreakpoint();
           >
             <RuiIcon
               size="18"
-              name="external-link-line"
+              name="lu-external-link"
             />
           </template>
         </ButtonLink>

diff --git a/components/content/ProseLi.vue b/components/content/ProseLi.vue
@@ -5,9 +5,9 @@ import { RuiIcon } from '@rotki/ui-library';
 <template>
   <li class="py-1 inline-flex w-full">
     <RuiIcon
-      name="arrow-drop-right-line"
-      class="mr-2 text-rui-text-secondary min-w-[1.5rem]"
-      size="24"
+      name="lu-chevron-right"
+      class="mr-2 mt-1 text-rui-text-secondary min-w-[1.5rem]"
+      size="16"
     />
     <span class="py-0.5">
       <slot />

diff --git a/components/download/DownloadDocs.vue b/components/download/DownloadDocs.vue
@@ -29,7 +29,7 @@ const { t } = useI18n();
           >
             {{ t('download.documentation.action') }}
             <template #append>
-              <RuiIcon name="external-link-line" />
+              <RuiIcon name="lu-external-link" />
             </template>
           </ButtonLink>
         </div>

diff --git a/components/download/DownloadItem.vue b/components/download/DownloadItem.vue
@@ -2,7 +2,7 @@
 export interface DownloadItemProps {
   platform: string;
   url: string;
-  icon: 'download-cloud-2-line' | 'apple-line' | 'windows-line';
+  icon: 'lu-cloud-download-2-fill' | 'lu-os-apple' | 'lu-os-windows';
 }
 
 defineProps<DownloadItemProps>();

diff --git a/components/footer/FooterIconLinks.vue b/components/footer/FooterIconLinks.vue
@@ -12,25 +12,25 @@ const menus: { title: string; showText: boolean; href: string; icon: RuiIcons }[
     title: 'Github',
     showText: false,
     href: github,
-    icon: 'github-line',
+    icon: 'lu-github',
   },
   {
     title: 'Twitter',
     showText: false,
     href: twitter,
-    icon: 'twitter-x-line',
+    icon: 'lu-x-twitter',
   },
   {
     title: 'Discord',
     showText: false,
     href: discord,
-    icon: 'discord-line',
+    icon: 'lu-discord',
   },
   {
     title: 'Contact',
     showText: true,
     href: emailMailto,
-    icon: 'mail-send-line',
+    icon: 'lu-mail',
   },
 ];
 </script>

diff --git a/components/header/PageHeader.vue b/components/header/PageHeader.vue
@@ -39,7 +39,7 @@ watch(
             color="primary"
             @click="menuOpened = true"
           >
-            <RuiIcon name="menu-line" />
+            <RuiIcon name="lu-menu" />
           </RuiButton>
         </div>
       </div>
@@ -49,7 +49,7 @@ watch(
       >
         <RuiButton icon>
           <RuiIcon
-            name="close-line"
+            name="lu-x"
             color="primary"
           />
         </RuiButton>
@@ -84,7 +84,7 @@ watch(
             @click="logout()"
           >
             <span class="flex items-center">
-              <RuiIcon name="logout-box-r-line" />
+              <RuiIcon name="lu-log-out" />
               <span class="md:hidden ml-3">{{ t('logout') }}</span>
             </span>
           </RuiButton>

diff --git a/components/home/HomeBanner.vue b/components/home/HomeBanner.vue
@@ -5,17 +5,17 @@ const { t } = useI18n();
 
 const data: { icon: RuiIcons; text: string; tooltip: string }[] = [
   {
-    icon: 'open-source-line',
+    icon: 'lu-code-xml',
     text: t('home.advantages.open_source.title'),
     tooltip: t('home.advantages.open_source.description'),
   },
   {
-    icon: 'computer-line',
+    icon: 'lu-laptop-minimal',
     text: t('home.advantages.local_app.title'),
     tooltip: t('home.advantages.local_app.description'),
   },
   {
-    icon: 'database-line',
+    icon: 'lu-database',
     text: t('home.advantages.own_your_data.title'),
     tooltip: t('home.advantages.own_your_data.description'),
   },

diff --git a/components/home/PremiumFeatures.vue b/components/home/PremiumFeatures.vue
@@ -5,30 +5,30 @@ const { t } = useI18n();
 
 const data = computed<{ icon: RuiIcons; text: string; description: string }[]>(() => [
   {
-    icon: 'pie-chart-line',
+    icon: 'lu-chart-pie',
     text: t('home.premium_features.features.graphs_and_statistics.title'),
     description: t(
       'home.premium_features.features.graphs_and_statistics.detail',
     ),
   },
   {
-    icon: 'bit-coin-line',
+    icon: 'lu-layers',
     text: t('home.premium_features.features.premium_staking.title'),
     description: t('home.premium_features.features.premium_staking.detail'),
   },
   {
-    icon: 'coins-line',
+    icon: 'lu-history',
     text: t('home.premium_features.features.history.title'),
     description: t('home.premium_features.features.history.detail'),
   },
   {
-    icon: 'bank-line',
+    icon: 'lu-landmark',
     text: t('home.premium_features.features.dex_support.title'),
     description: t('home.premium_features.features.dex_support.detail'),
   },
 
   {
-    icon: 'bar-chart-2-line',
+    icon: 'lu-chart-no-axes-column',
     text: t('home.premium_features.features.premium_defi.title'),
     description: t('home.premium_features.features.premium_defi.detail'),
   },

diff --git a/components/home/testimonials/Testimonial.vue b/components/home/testimonials/Testimonial.vue
@@ -17,7 +17,7 @@ withDefaults(
     <span :class="$style.thumbnails">
       <span :class="$style.icon">
         <RuiIcon
-          name="chat-1-line"
+          name="lu-message-circle"
           size="16"
         />
       </span>

diff --git a/components/integration/IntegrationDetails.vue b/components/integration/IntegrationDetails.vue
@@ -77,7 +77,7 @@ const { isMdAndUp } = useBreakpoint();
           v-model="search"
           variant="outlined"
           :label="t('integration.search')"
-          prepend-icon="search-line"
+          prepend-icon="lu-search"
           color="primary"
           clearable
         />

diff --git a/components/jobs/JobDetail.vue b/components/jobs/JobDetail.vue
@@ -63,7 +63,7 @@ const { t } = useI18n();
         <div class="bg-rui-primary/[.04] p-6 lg:w-[384px]">
           <div class="flex">
             <div class="bg-white rounded-lg p-3 text-rui-primary">
-              <RuiIcon name="lightbulb-line" />
+              <RuiIcon name="lu-lightbulb" />
             </div>
           </div>
           <ContentRenderer

diff --git a/components/jobs/JobTag.vue b/components/jobs/JobTag.vue
@@ -11,9 +11,9 @@ const { tag } = toRefs(props);
 const icon = computed<RuiIcons | undefined>(() => {
   const value = get(tag);
   const map: Record<string, RuiIcons> = {
-    'full-time': 'timer-2-line',
-    'part-time': 'timer-2-line',
-    'remote': 'user-location-line',
+    'full-time': 'lu-timer',
+    'part-time': 'lu-timer',
+    'remote': 'lu-map-pin',
   };
 
   return map[value] ?? undefined;
@@ -32,6 +32,7 @@ const icon = computed<RuiIcons | undefined>(() => {
       <RuiIcon
         :name="icon"
         class="p-0.5"
+        size="20"
       />
     </template>
     {{ tag }}

diff --git a/components/values/ValueContact.vue b/components/values/ValueContact.vue
@@ -14,27 +14,27 @@ const contacts: { title: string; description: string; href: string; icon: RuiIco
     title: 'Email',
     description: t('values.contact_section.email.description'),
     href: emailMailto,
-    icon: 'chat-smile-2-line',
+    icon: 'lu-mail',
     linkLabel: email,
   },
   {
     title: 'Twitter',
     description: t('values.contact_section.twitter.description'),
     href: twitter,
-    icon: 'twitter-x-line',
+    icon: 'lu-x-twitter',
     linkLabel: '@RotkiApp',
   },
   {
     title: 'Discord',
     description: t('values.contact_section.discord.description'),
     href: discord,
-    icon: 'discord-line',
+    icon: 'lu-discord',
   },
   {
     title: 'Github',
     description: t('values.contact_section.github.description'),
     href: github,
-    icon: 'github-line',
+    icon: 'lu-github',
     linkLabel: 'Rotki Solutions GmbH',
   },
 ];