Icon Picker
A user-friendly Vue 3 component for selecting icons from a searchable list. It combines a dropdown, search input, and icon preview in one compact UI.
vue
<IconPicker icon="heart" />Features
- Dropdown-based icon selector
- Search functionality
- Preview of selected icon
- Clear/reset icon selection
- Fully controlled or uncontrolled via
v-model - Custom icon list support
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | — | Currently selected icon (controlled mode) |
label | string | — | Optional field label |
placeholder | string | "Select an icon" | Placeholder text when no icon is selected |
disabled | boolean | false | Disables the component |
className | string | — | Custom CSS class for the outer wrapper |
icon | string | — | Initial selected icon (used in uncontrolled mode) |
iconsList | string[] | ALL_ICONS | Custom list of available icon names |
width | string | number | "100%" | Custom dropdown width (e.g., 300, '20rem', '100%') |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted when a new icon is selected or cleared |