UIIconPicker

UIIconPicker

A component that allows users to browse and select icons from various icon sets, with search functionality and custom rendering options.

<template>
  <UIIconPicker
    :id="'icon-picker-1'"
    :title="$t('iconPicker.title')"
    :searchPlaceholder="$t('iconPicker.search')"
    :trigger="'click'"
    :placement="'bottom-start'"
    :preLoad="'outline'"
    @onSelected="handleIconSelect"
  >
    <template #trigger>
      <UIButton>
        <template #icon>
          <component :is="selectedIcon || 'IconPlus'" />
        </template>
        {{ $t('iconPicker.selectIcon') }}
      </UIButton>
    </template>
  </UIIconPicker>
</template>

<script setup lang="ts">
const selectedIcon = ref<string | null>(null)

const handleIconSelect = (iconName: string) => {
  selectedIcon.value = iconName
  console.log('Selected icon:', iconName)
}
</script>

Props

• id (string, required): Unique identifier
• title (string): Picker title
• searchPlaceholder (string): Search input placeholder
• trigger (‘hover’ | ‘click’ | ‘focus’ | ‘manual’): Trigger mode
• placement (string): Dropdown placement
• preLoad (string): Preload icon set
• disabled (boolean): Disable the picker
• loading (boolean): Show loading state
• value (string): Selected icon name
• size (‘small’ | ‘medium’ | ‘large’): Icon size

Events

• update:value: Emitted when icon selection changes
• onSelected: Emitted when an icon is selected
• onSearch: Emitted when search input changes
• onClose: Emitted when picker closes

Slots

• trigger: Custom trigger content
• header: Custom header content
• footer: Custom footer content
• empty: Custom empty state content
• loading: Custom loading state content

Usage Examples

1. Basic Usage:

<template>
  <UIIconPicker
    v-model:value="selectedIcon"
    @onSelected="handleSelect"
  />
</template>

<script setup>
const selectedIcon = ref('')
const handleSelect = (icon: string) => {
  console.log('Selected:', icon)
}
</script>

2. Custom Trigger:

<template>
  <UIIconPicker v-model:value="icon">
    <template #trigger>
      <div class="flex items-center gap-2 p-2 border rounded">
        <component :is="icon || 'IconPlaceholder'" />
        <span>{{ icon ? 'Change Icon' : 'Select Icon' }}</span>
      </div>
    </template>
  </UIIconPicker>
</template>

3. With Search and Categories:

<template>
  <UIIconPicker
    v-model:value="icon"
    :searchPlaceholder="'Search icons...'"
    :preLoad="'all'"
  >
    <template #header>
      <div class="flex gap-2 p-2">
        <UIButton
          v-for="category in categories"
          :key="category"
          @click="filterByCategory(category)"
        >
          {{ category }}
        </UIButton>
      </div>
    </template>
  </UIIconPicker>
</template>

4. In Form Context:

<template>
  <UIForm>
    <UIFormItem label="Select Icon" name="icon">
      <UIIconPicker
        v-model:value="formState.icon"
        :disabled="loading"
      />
    </UIFormItem>
  </UIForm>
</template>

Best Practices

1. Icon Management:

   • Organize icons by categories
   • Provide clear icon names
   • Include icon previews
   • Support multiple icon styles

2. User Experience:

   • Enable quick icon search
   • Show recently used icons
   • Provide category filters
   • Include icon tooltips

3. Accessibility:

   • Support keyboard navigation
   • Include ARIA labels
   • Provide clear focus states
   • Use descriptive icon names

4. Performance:

   • Lazy load icon sets
   • Optimize icon rendering
   • Cache search results
   • Minimize re-renders

5. Integration:

   • Support design system
   • Enable custom icon sets
   • Allow icon customization
   • Provide icon utilities

Icon Sets

The component supports various icon sets:

• Outline icons (24px)
• Solid icons (24px)
• Custom icon sets

To use custom icon sets:

<template>
  <UIIconPicker
    :customIcons="customIconSet"
    :preLoad="'custom'"
  />
</template>

<script setup>
const customIconSet = {
  icons: {
    'custom-icon-1': CustomIcon1Component,
    'custom-icon-2': CustomIcon2Component
  },
  categories: {
    'Custom': ['custom-icon-1', 'custom-icon-2']
  }
}
</script>