feat: support native tab icons

src/components/Tabs.svelte

@@ -211,6 +211,18 @@
         tabIcon.removeClass('_hidden');
       }
 
+      if (!settings.customizeTabIcon) {
+        // @ts-expect-error
+        const _leaf = plugin.app.workspace.getLeafById(leaf.id)
+        const iconEl = _leaf.tabHeaderInnerIconEl.firstChild.cloneNode(true)
+        if (!iconEl) return;
+
+        if (iconEl) {
+          tabIcon.setChildrenInPlace([iconEl])
+          return
+        }
+      }
+
       const matchedConfig = getMatchedTabIconConfig(
         tabIconRules,
         getDirname(leaf),

src/main.ts

@@ -23,7 +23,8 @@ export default class VerticalTabsView extends Plugin {
   }
 
   async loadSettings() {
-    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+    const currentSettings = await this.loadData();
+    this.settings = Object.assign({}, DEFAULT_SETTINGS, currentSettings);
 
     // migrate
     if (
@@ -36,6 +37,11 @@ export default class VerticalTabsView extends Plugin {
       delete this.settings.tabIconConfigs;
       this.saveSettings(this.settings);
     }
+
+    // backward compatibility
+    if (!('customizeTabIcon' in currentSettings) && currentSettings.tabIconRules.length > 0) {
+      this.settings.customizeTabIcon = true;
+    }
   }
 
   async saveSettings(settings: VerticalTabsViewSettings) {

src/setting.ts

@@ -11,6 +11,7 @@ export interface VerticalTabsViewSettings {
   showPinnedIcon: boolean;
   showPinIconIfNotPinned: boolean;
   showTabIcon: boolean;
+  customizeTabIcon: boolean;
   defaultTabIcon: string;
   tabIconRules: TabIconRule[];
   // deprecated
@@ -24,6 +25,7 @@ export const DEFAULT_SETTINGS: VerticalTabsViewSettings = {
   showPinnedIcon: true,
   showPinIconIfNotPinned: true,
   showTabIcon: true,
+  customizeTabIcon: false,
   defaultTabIcon: 'file',
   tabIconRules: [],
 };
@@ -82,8 +84,14 @@ export class VerticalTabsViewSettingTab extends PluginSettingTab {
       this.display();
     });
 
+    createToggle(containerEl, 'Customize tab icon', '', this.settings.customizeTabIcon, (value) => {
+      this.settings.customizeTabIcon = value;
+      this.save();
+      this.display();
+    });
+
     // tab icon per condition
-    if (this.settings.showTabIcon) {
+    if (this.settings.customizeTabIcon) {
       // default icon
       const { previewIconWrapper, previewIcon, previewIconText } = this.createPreviewIcon(this.settings.defaultTabIcon);