fix(Icon): unify lucide icons into 1 path

rotki · Nov 25, 2024 · aba86ae · aba86ae
1 parent f4b120d
commit aba86ae
Show file tree

Hide file tree

Showing 72 changed files with 477 additions and 236 deletions.
diff --git a/example/src/auto-imports.d.ts b/example/src/auto-imports.d.ts
@@ -333,9 +333,10 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
+
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
@@ -658,4 +659,4 @@ declare module 'vue' {
     readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
     readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
   }
-}
+}
diff --git a/example/src/components/AppNav.vue b/example/src/components/AppNav.vue
@@ -10,9 +10,9 @@ interface Theme {
 }
 
 const themes: Theme[] = [
-  { name: 'Light', value: ThemeMode.light, icon: 'sun-line' },
-  { name: 'Dark', value: ThemeMode.dark, icon: 'moon-line' },
-  { name: 'System', value: ThemeMode.auto, icon: 'macbook-line' },
+  { name: 'Light', value: ThemeMode.light, icon: 'lu-soon' },
+  { name: 'Dark', value: ThemeMode.dark, icon: 'lu-moon' },
+  { name: 'System', value: ThemeMode.auto, icon: 'lu-monitor' },
 ];
 
 const onSwitchTheme = ({ value }: Theme) => switchThemeScheme(value);

diff --git a/example/src/components/buttons/ButtonGroups.vue b/example/src/components/buttons/ButtonGroups.vue
@@ -41,7 +41,7 @@ onBeforeMount(() => {
           Increase
         </RuiButton>
         <RuiButton @click="buttonGroup.count++">
-          <RuiIcon name="add-fill" />
+          <RuiIcon name="lu-plus" />
         </RuiButton>
       </RuiButtonGroup>
       <div class="mt-2">

diff --git a/example/src/components/buttons/MultiToggleButtonGroups.vue b/example/src/components/buttons/MultiToggleButtonGroups.vue
@@ -35,16 +35,16 @@ onBeforeMount(() => {
         v-model="buttonGroup.modelValue"
       >
         <RuiButton model-value="left">
-          <RuiIcon name="align-left" />
+          <RuiIcon name="lu-align-left" />
         </RuiButton>
         <RuiButton model-value="center">
-          <RuiIcon name="align-center" />
+          <RuiIcon name="lu-align-center" />
         </RuiButton>
         <RuiButton model-value="right">
-          <RuiIcon name="align-right" />
+          <RuiIcon name="lu-align-right" />
         </RuiButton>
         <RuiButton model-value="justify">
-          <RuiIcon name="align-justify" />
+          <RuiIcon name="lu-align-justify" />
         </RuiButton>
       </RuiButtonGroup>
       <div

diff --git a/example/src/components/buttons/SingleButtons.vue b/example/src/components/buttons/SingleButtons.vue
@@ -14,8 +14,8 @@ type ButtonData = ButtonProps & ExtraProperties;
 const attributes: Partial<ButtonData>[] = [
   {}, // Base button
   { variant: 'outlined' }, // Outlined button
-  { prepend: 'arrow-right-line' }, // Button with prepend icon
-  { append: 'arrow-right-line' }, // Button with append icon
+  { prepend: 'lu-arrow-right' }, // Button with prepend icon
+  { append: 'lu-arrow-right' }, // Button with append icon
   { variant: 'text' }, // Text variant button
   { disabled: true }, // Disabled button
   { disabled: false, rounded: true }, // Rounded button
@@ -26,9 +26,9 @@ const attributes: Partial<ButtonData>[] = [
   { disabled: true, rounded: true }, // Disabled rounded text variant
   { loading: true, rounded: true }, // Loading and rounded button
   { variant: 'fab' }, // FAB button
-  { variant: 'fab', icon: true, iconName: 'add-fill' },
-  { variant: 'text', icon: true, iconName: 'add-fill' },
-  { variant: 'outlined', icon: true, iconName: 'add-fill' },
+  { variant: 'fab', icon: true, iconName: 'lu-plus' },
+  { variant: 'text', icon: true, iconName: 'lu-plus' },
+  { variant: 'outlined', icon: true, iconName: 'lu-plus' },
 ];
 
 const buttons = ref<ButtonData[]>([]);

diff --git a/example/src/components/buttons/ToggleButtonGroups.vue b/example/src/components/buttons/ToggleButtonGroups.vue
@@ -40,16 +40,16 @@ onBeforeMount(() => {
         v-model="buttonGroup.modelValue"
       >
         <RuiButton>
-          <RuiIcon name="align-left" />
+          <RuiIcon name="lu-align-left" />
         </RuiButton>
         <RuiButton>
-          <RuiIcon name="align-center" />
+          <RuiIcon name="lu-align-center" />
         </RuiButton>
         <RuiButton>
-          <RuiIcon name="align-right" />
+          <RuiIcon name="lu-align-right" />
         </RuiButton>
         <RuiButton>
-          <RuiIcon name="align-justify" />
+          <RuiIcon name="lu-align-justify" />
         </RuiButton>
       </RuiButtonGroup>
       <div

diff --git a/example/src/main.ts b/example/src/main.ts
@@ -4,29 +4,28 @@ import '@fontsource/roboto/latin.css';
 
 import { createPinia, storeToRefs } from 'pinia';
 import {
-  RiAddFill,
-  RiAlertLine,
-  RiAlignCenter,
-  RiAlignJustify,
-  RiAlignLeft,
-  RiAlignRight,
-  RiArrowDownCircleLine,
-  RiArrowDownSLine,
-  RiArrowLeftLine,
-  RiArrowLeftSLine,
-  RiArrowRightLine,
-  RiArrowRightSLine,
-  RiArrowUpSLine,
-  RiCheckboxCircleLine,
-  RiCloseFill,
-  RiDeleteBinLine,
-  RiErrorWarningLine,
-  RiFileCopyLine,
-  RiInformationLine,
-  RiMacbookLine,
-  RiMoonLine,
-  RiStarFill,
-  RiSunLine,
+  LuAlignCenter,
+  LuAlignJustify,
+  LuAlignLeft,
+  LuAlignRight,
+  LuArrowLeft,
+  LuArrowRight,
+  LuChevronDown,
+  LuChevronLeft,
+  LuChevronRight,
+  LuChevronUp,
+  LuCircleAlert,
+  LuCircleArrowDown,
+  LuCircleCheck,
+  LuCopy,
+  LuInfo,
+  LuMonitor,
+  LuMoon,
+  LuPlus,
+  LuStar,
+  LuSun,
+  LuTrash2,
+  LuX,
   createRui,
 } from '@rotki/ui-library';
 import App from '@/App.vue';
@@ -40,29 +39,29 @@ const { itemsPerPage, stickyOffset } = storeToRefs(useDefaultsStore());
 const RuiPlugin = createRui({
   theme: {
     icons: [
-      RiMoonLine,
-      RiStarFill,
-      RiSunLine,
-      RiMacbookLine,
-      RiArrowLeftLine,
-      RiArrowRightLine,
-      RiAddFill,
-      RiAlertLine,
-      RiAlignCenter,
-      RiAlignLeft,
-      RiAlignRight,
-      RiAlignJustify,
-      RiCheckboxCircleLine,
-      RiCloseFill,
-      RiInformationLine,
-      RiErrorWarningLine,
-      RiArrowLeftSLine,
-      RiArrowRightSLine,
-      RiArrowUpSLine,
-      RiArrowDownSLine,
-      RiArrowDownCircleLine,
-      RiDeleteBinLine,
-      RiFileCopyLine,
+      LuMoon,
+      LuStar,
+      LuSun,
+      LuMonitor,
+      LuArrowLeft,
+      LuArrowRight,
+      LuPlus,
+      LuCircleAlert,
+      LuAlignCenter,
+      LuAlignLeft,
+      LuAlignRight,
+      LuAlignJustify,
+      LuCopy,
+      LuTrash2,
+      LuChevronUp,
+      LuChevronDown,
+      LuChevronLeft,
+      LuChevronRight,
+      LuInfo,
+      LuX,
+      LuCircleAlert,
+      LuCircleArrowDown,
+      LuCircleCheck,
     ],
   },
   defaults: {

diff --git a/example/src/views/AlertView.vue b/example/src/views/AlertView.vue
@@ -22,7 +22,7 @@ function createAlert(type: typeof colors[number], options: Partial<AlertData>):
   return {
     type,
     ...options,
-    ...(['primary', 'secondary'].includes(type) ? { icon: 'information-line' } : {}),
+    ...(['primary', 'secondary'].includes(type) ? { icon: 'lu-info' } : {}),
   };
 }
 

diff --git a/example/src/views/AutoCompleteView.vue b/example/src/views/AutoCompleteView.vue
@@ -338,8 +338,8 @@ function getDisplayText(options?: SelectOption | SelectOption[]): string {
                 <RuiIcon
                   class="transition"
                   :class="[{ 'rotate-180': open }]"
-                  name="arrow-drop-down-fill"
-                  size="32"
+                  name="lu-chevron-down"
+                  size="24"
                 />
               </template>
             </RuiButton>
@@ -378,8 +378,8 @@ function getDisplayText(options?: SelectOption | SelectOption[]): string {
                 <RuiIcon
                   class="transition"
                   :class="[{ 'rotate-180': open }]"
-                  name="arrow-drop-down-fill"
-                  size="32"
+                  name="lu-chevron-down"
+                  size="24"
                 />
               </template>
             </RuiButton>
@@ -411,7 +411,7 @@ function getDisplayText(options?: SelectOption | SelectOption[]): string {
             <RuiIcon
               v-if="active"
               class="transition"
-              name="check-line"
+              name="lu-check"
               size="24"
             />
           </template>
@@ -443,7 +443,7 @@ function getDisplayText(options?: SelectOption | SelectOption[]): string {
             <RuiIcon
               v-if="active"
               class="transition"
-              name="check-line"
+              name="lu-check"
               size="24"
             />
           </template>
@@ -475,7 +475,7 @@ function getDisplayText(options?: SelectOption | SelectOption[]): string {
             <RuiIcon
               v-if="active"
               class="transition"
-              name="check-line"
+              name="lu-check"
               size="24"
             />
           </template>

diff --git a/example/src/views/BadgeView.vue b/example/src/views/BadgeView.vue
@@ -8,7 +8,7 @@ import ComponentView from '@/components/ComponentView.vue';
 
 const defaultModelValue = true;
 const defaultText = '1';
-const icon = 'star-fill';
+const icon = 'lu-star';
 const placement = 'bottom';
 const colors = ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success'] as const;
 

diff --git a/example/src/views/DataTableView.vue b/example/src/views/DataTableView.vue
@@ -928,7 +928,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
                 @click="removeRow(table, row)"
               >
                 <RuiIcon
-                  name="delete-bin-line"
+                  name="lu-trash-2"
                   size="14"
                   color="error"
                 />
@@ -947,7 +947,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
                   create users
                   <template #append>
                     <RuiIcon
-                      name="add-fill"
+                      name="lu-plus"
                       color="primary"
                     />
                   </template>
@@ -988,7 +988,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
                 size="sm"
               >
                 <RuiIcon
-                  name="more-fill"
+                  name="lu-ellipsis"
                   color="primary"
                 />
               </RuiButton>
@@ -998,7 +998,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
               #item.expand="{ row }"
             >
               <RuiTableRowExpander
-                icon="arrow-down-circle-line"
+                icon="lu-circle-arrow-down"
                 :expanded="isExpanded(row, table.expanded)"
                 @click="toggleRow(row, table.expanded)"
               />
@@ -1062,7 +1062,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
                 size="sm"
               >
                 <RuiIcon
-                  name="more-fill"
+                  name="lu-ellipsis"
                   color="primary"
                 />
               </RuiButton>
@@ -1113,7 +1113,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
                 size="sm"
               >
                 <RuiIcon
-                  name="more-fill"
+                  name="lu-ellipsis"
                   color="primary"
                 />
               </RuiButton>
@@ -1136,7 +1136,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
                 size="sm"
               >
                 <RuiIcon
-                  name="more-fill"
+                  name="lu-ellipsis"
                   color="primary"
                 />
               </RuiButton>
@@ -1167,7 +1167,7 @@ function removeRow(table: Pick<DataTableProps<ExtendedUser, 'id'>, 'rows'>, row:
                 size="sm"
               >
                 <RuiIcon
-                  name="more-fill"
+                  name="lu-ellipsis"
                   color="primary"
                 />
               </RuiButton>

diff --git a/example/src/views/IconView.vue b/example/src/views/IconView.vue
@@ -3,9 +3,9 @@ import { type LogoProps, RuiIcon, type RuiIcons, RuiLogo } from '@rotki/ui-libra
 import ComponentView from '@/components/ComponentView.vue';
 
 const icons = ref<{ name: RuiIcons; size: number }[]>([
-  { name: 'moon-line', size: 24 },
-  { name: 'sun-line', size: 24 },
-  { name: 'arrow-right-line', size: 24 },
+  { name: 'lu-moon', size: 24 },
+  { name: 'lu-soon', size: 24 },
+  { name: 'lu-arrow-right', size: 24 },
 ]);
 
 const logos = ref<(LogoProps & { name: string })[]>([

diff --git a/example/src/views/MenuView.vue b/example/src/views/MenuView.vue
@@ -365,7 +365,7 @@ const menuSelectPrimitive = ref<RuiMenuSelectProps<string, string>[]>([
                 <RuiIcon
                   class="transition"
                   :class="[{ 'rotate-180': open }]"
-                  name="arrow-drop-down-fill"
+                  name="lu-chevron-down"
                   size="32"
                 />
               </template>
@@ -435,7 +435,7 @@ const menuSelectPrimitive = ref<RuiMenuSelectProps<string, string>[]>([
             <RuiIcon
               v-if="active"
               class="transition"
-              name="check-line"
+              name="lu-check"
               size="24"
             />
           </template>
@@ -466,7 +466,7 @@ const menuSelectPrimitive = ref<RuiMenuSelectProps<string, string>[]>([
             <RuiIcon
               v-if="active"
               class="transition"
-              name="check-line"
+              name="lu-check"
               size="24"
             />
           </template>
@@ -498,7 +498,7 @@ const menuSelectPrimitive = ref<RuiMenuSelectProps<string, string>[]>([
             <RuiIcon
               v-if="active"
               class="transition"
-              name="check-line"
+              name="lu-check"
               size="24"
             />
           </template>