mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 21:54:50 +00:00
feat: add dynamic icon support for NavItem components (#5285)
* feat: add dynamic icon support for NavItem components - Created NavIcon component with switch-case based icon rendering - Added iconName prop to NavItem and NavItemData interface - Updated LeftSidePanel to pass icon names to nav items - Added sample icons to SampleModelSelector navigation (download, tag, layers, grid) - Uses i-lucide syntax without imports for better tree-shaking 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * test: add Storybook stories for navigation components - Add NavIcon.stories.ts with interactive icon selector and all icons gallery - Add NavItem.stories.ts with text customization and interactive list examples - Add LeftSidePanel.stories.ts with various navigation configurations - Remove old Navigation.stories.ts (replaced with component-specific stories) - Configure slot visibility and hide update:modelValue event in controls * refactor: simplify NavIcon component and improve type definitions * fix: add icon size specification for Lucide icons in Storybook * feature: NavItem story modified * fix: disable knip unresolved imports rule for virtual icon modules Add unresolved: 'off' to knip configuration to ignore virtual module imports from unplugin-icons (~icons/*). These are generated at build time and cannot be resolved statically. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: v-if condition added * chore: knip ignoreUnresolved added based on knip issue PR * refactor: navItem types added & deleting any type on storybook files --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
13
src/components/widget/nav/NavIcon.vue
Normal file
13
src/components/widget/nav/NavIcon.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<span v-if="icon" class="text-xs text-neutral">
|
||||
<component :is="icon" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NavItemData } from '@/types/navTypes'
|
||||
|
||||
defineProps<{
|
||||
icon: NavItemData['icon']
|
||||
}>()
|
||||
</script>
|
||||
Reference in New Issue
Block a user