Enhanced custom icon support with tailwind (#5159)

* Add support for custom iconify using tailwind plugin
- Register svgs from custom icons folder
- Update existing custom icons to remove padding
- Swap component icons for classes in sidebar tabs
- Update browse templates in menu to use custom icon

* Add basic check for custom SVG icons

* Remove unused iconify packages

src/composables/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -1,18 +1,14 @@
-import { defineAsyncComponent, markRaw } from 'vue'
+import { markRaw } from 'vue'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
-const AiModelIcon = markRaw(
-  defineAsyncComponent(() => import('virtual:icons/comfy/ai-model'))
-)
-
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'model-library',
-    icon: AiModelIcon,
+    icon: 'icon-[comfy--ai-model]',
     title: 'sideToolbar.modelLibrary',
     tooltip: 'sideToolbar.modelLibrary',
     label: 'sideToolbar.labels.models',

src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts

@@ -1,16 +1,12 @@
-import { defineAsyncComponent, markRaw } from 'vue'
+import { markRaw } from 'vue'
 
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
-const NodeIcon = markRaw(
-  defineAsyncComponent(() => import('virtual:icons/comfy/node'))
-)
-
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'node-library',
-    icon: NodeIcon,
+    icon: 'icon-[comfy--node]',
     title: 'sideToolbar.nodeLibrary',
     tooltip: 'sideToolbar.nodeLibrary',
     label: 'sideToolbar.labels.nodes',

src/composables/sidebarTabs/useWorkflowsSidebarTab.ts

@@ -1,20 +1,16 @@
-import { defineAsyncComponent, markRaw } from 'vue'
+import { markRaw } from 'vue'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
-const WorkflowIcon = markRaw(
-  defineAsyncComponent(() => import('virtual:icons/comfy/workflow'))
-)
-
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
   return {
     id: 'workflows',
-    icon: WorkflowIcon,
+    icon: 'icon-[comfy--workflow]',
     iconBadge: () => {
       if (
         settingStore.get('Comfy.Workflow.WorkflowTabsPosition') !== 'Sidebar'