refactor: use toggle for adding and removing lucide icon pack (#527)

Author: FlorianWoelki

src/icon-pack-manager.ts

@@ -61,26 +61,28 @@ export const setIconPacks = (newIconPacks: IconPack[]): void => {
   iconPacks = newIconPacks;
 };
 
-export const addLucideIconsPack = (): void => {
+export const addLucideIconsPack = (plugin: IconizePlugin): void => {
   iconPacks.push({
     name: LUCIDE_ICON_PACK_NAME,
     prefix: 'Li',
     custom: false,
-    icons: getIconIds()
-      .map((iconId) => iconId.replace(/^lucide-/, ''))
-      .map((iconId) => {
-        const iconEl = getIcon(iconId);
-        iconEl.removeClass('svg-icon'); // Removes native `svg-icon` class.
-        return {
-          name: getNormalizedName(iconId),
-          filename: iconId,
-          prefix: 'Li',
-          svgElement: iconEl?.outerHTML,
-          svgContent: iconEl?.innerHTML,
-          svgViewbox: '',
-          iconPackName: LUCIDE_ICON_PACK_NAME,
-        };
-      }),
+    icons: plugin.doesUseNativeLucideIconPack()
+      ? getIconIds()
+          .map((iconId) => iconId.replace(/^lucide-/, ''))
+          .map((iconId) => {
+            const iconEl = getIcon(iconId);
+            iconEl.removeClass('svg-icon'); // Removes native `svg-icon` class.
+            return {
+              name: getNormalizedName(iconId),
+              filename: iconId,
+              prefix: 'Li',
+              svgElement: iconEl?.outerHTML,
+              svgContent: iconEl?.innerHTML,
+              svgViewbox: '',
+              iconPackName: LUCIDE_ICON_PACK_NAME,
+            };
+          })
+      : [],
   });
 };
 
@@ -374,12 +376,12 @@ export const createIconPackPrefix = (iconPackName: string): string => {
 };
 
 export const loadUsedIcons = async (plugin: IconizePlugin, icons: string[]) => {
-  const iconPacks = [
-    ...(await listPath(plugin)).folders.map((iconPack) =>
-      iconPack.split('/').pop(),
-    ),
-    LUCIDE_ICON_PACK_NAME,
-  ];
+  const iconPacks = (await listPath(plugin)).folders.map((iconPack) =>
+    iconPack.split('/').pop(),
+  );
+  if (plugin.doesUseNativeLucideIconPack()) {
+    iconPacks.push(LUCIDE_ICON_PACK_NAME);
+  }
 
   for (let i = 0; i < icons.length; i++) {
     const entry = icons[i];
@@ -431,7 +433,7 @@ export const loadIcon = async (
 
   if (
     iconPack === LUCIDE_ICON_PACK_NAME &&
-    !plugin.getSettings().useCustomLucideIconPack
+    plugin.doesUseNativeLucideIconPack()
   ) {
     // Native lucide icons already exist for Obsidian.
     const lucideIcons = iconPacks.find(
@@ -524,7 +526,7 @@ export const initIconPacks = async (plugin: IconizePlugin): Promise<void> => {
     const prefix = createIconPackPrefix(zipFile);
     if (
       zipFile === LUCIDE_ICON_PACK_NAME &&
-      !plugin.getSettings().useCustomLucideIconPack
+      !plugin.doesUseCustomLucideIconPack()
     ) {
       continue;
     }

src/lib/icon.ts

@@ -7,6 +7,7 @@ import iconTabs from './icon-tabs';
 import { getFileItemInnerTitleEl, getFileItemTitleEl } from '@app/util';
 import {
   Icon,
+  LUCIDE_ICON_PACK_NAME,
   extractIconToIconPack,
   getAllIconPacks,
   getIconFromIconPack,
@@ -36,7 +37,10 @@ const checkMissingIcons = async (
     const iconPrefix = iconNameWithPrefix.substring(0, iconNextIdentifier);
     const iconPackName = getIconPackNameByPrefix(iconPrefix);
 
-    if (!plugin.getSettings().useCustomLucideIconPack) {
+    if (
+      iconPackName === LUCIDE_ICON_PACK_NAME &&
+      !plugin.doesUseCustomLucideIconPack()
+    ) {
       return;
     }
 

src/main.ts

@@ -108,7 +108,9 @@ export default class IconizePlugin extends Plugin {
     await migrate(this);
 
     const usedIconNames = icon.getAllWithPath(this).map((value) => value.icon);
-    addLucideIconsPack();
+    if (!this.doesUseCustomLucideIconPack()) {
+      addLucideIconsPack(this);
+    }
     await loadUsedIcons(this, usedIconNames);
 
     this.app.workspace.onLayoutReady(() => this.handleChangeLayout());
@@ -914,6 +916,14 @@ export default class IconizePlugin extends Plugin {
     return this.registeredFileExplorers;
   }
 
+  doesUseCustomLucideIconPack(): boolean {
+    return this.getSettings().lucideIconPackType === 'custom';
+  }
+
+  doesUseNativeLucideIconPack(): boolean {
+    return this.getSettings().lucideIconPackType === 'native';
+  }
+
   /**
    * Returns a possible data path by the given value. This function checks for
    * direct icon and custom rules.

src/settings/data.ts

@@ -5,6 +5,8 @@ export enum IconInTitlePosition {
   Inline = 'inline',
 }
 
+export type LucideIconPackType = 'none' | 'custom' | 'native';
+
 export interface ExtraMarginSettings {
   /**
    * Controls the extra margin on the top of the icon.
@@ -166,11 +168,13 @@ export interface IconFolderSettings {
    */
   iconIdentifier: string;
   /**
-   * Whether to use the custom or native lucide icon pack or not.
-   * `false` refers to using the native lucide icon pack.
-   * @default false
+   * Specifies which Lucide icon pack to use.
+   * - 'none': Don't use any Lucide icon pack
+   * - 'native': Use the native Lucide icon pack
+   * - 'custom': Use a custom Lucide icon pack
+   * @default 'native'
    */
-  useCustomLucideIconPack: boolean;
+  lucideIconPackType: LucideIconPackType;
   /**
    * Sets whether the plugin should be in debug mode. This will enable more logging
    * in the console.
@@ -203,6 +207,6 @@ export const DEFAULT_SETTINGS: IconFolderSettings = {
   iconsInNotesEnabled: true,
   iconsInLinksEnabled: true,
   iconIdentifier: ':',
-  useCustomLucideIconPack: false,
+  lucideIconPackType: 'native',
   debugMode: false,
 };

src/settings/ui/customIconPack.ts

@@ -15,6 +15,7 @@ import {
 import IconizePlugin from '@app/main';
 import { readFileSync } from '@app/util';
 import icon from '@app/lib/icon';
+import { LucideIconPackType } from '../data';
 
 export default class CustomIconPackSetting extends IconFolderSetting {
   private textComponent: TextComponent;
@@ -104,7 +105,14 @@ export default class CustomIconPackSetting extends IconFolderSetting {
         });
       });
 
-    getAllIconPacks().forEach((iconPack) => {
+    // Sorts lucide icon pack always to the top.
+    const iconPacks = [...getAllIconPacks()].sort((a, b) => {
+      if (a.name === LUCIDE_ICON_PACK_NAME) return -1;
+      if (b.name === LUCIDE_ICON_PACK_NAME) return 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    iconPacks.forEach((iconPack) => {
       const isLucideIconPack = iconPack.name === LUCIDE_ICON_PACK_NAME;
       const additionalLucideDescription =
         '(Native Pack has fewer icons but 100% Obsidian Sync support)';
@@ -147,17 +155,21 @@ export default class CustomIconPackSetting extends IconFolderSetting {
       // });
 
       if (isLucideIconPack) {
-        iconPackSetting.addToggle((toggle) => {
-          toggle.setTooltip('Use custom Lucide Icons Pack');
-          toggle.setValue(this.plugin.getSettings().useCustomLucideIconPack);
-          toggle.onChange(async (value) => {
-            toggle.setDisabled(true);
+        iconPackSetting.addDropdown((dropdown) => {
+          dropdown.addOptions({
+            native: 'Native',
+            custom: 'Custom',
+            none: 'None',
+          } satisfies Record<LucideIconPackType, string>);
+          dropdown.setValue(this.plugin.getSettings().lucideIconPackType);
+          dropdown.onChange(async (value: LucideIconPackType) => {
+            dropdown.setDisabled(true);
             new Notice('Changing icon packs...');
-            this.plugin.getSettings().useCustomLucideIconPack = value;
+            this.plugin.getSettings().lucideIconPackType = value;
             await this.plugin.saveIconFolderData();
-            if (!value) {
+            if (value === 'native' || value === 'none') {
               await removeCustomLucideIconPack(this.plugin);
-              addLucideIconsPack();
+              addLucideIconsPack(this.plugin);
             } else {
               await addCustomLucideIconPack(this.plugin);
               await icon.checkMissingIcons(
@@ -166,7 +178,7 @@ export default class CustomIconPackSetting extends IconFolderSetting {
               );
             }
 
-            toggle.setDisabled(false);
+            dropdown.setDisabled(false);
             new Notice('Done. This change requires a restart of Obsidian');
           });
         });

src/util.ts

@@ -91,7 +91,7 @@ export const saveIconToIconPack = (
   const iconPackName = getIconPackNameByPrefix(iconPrefix);
   if (
     iconPackName === LUCIDE_ICON_PACK_NAME &&
-    !plugin.getSettings().useCustomLucideIconPack
+    !plugin.doesUseCustomLucideIconPack()
   ) {
     return;
   }