Icon List
IconList is a visual icon picker component designed for quickly filtering and selecting an icon from a predefined set. It includes search functionality, icon preview, current selection highlighting, and the ability to clear the selection.
vue
<IconList icon="heart" />Features
- Built-in search bar with real-time filtering (can be disabled)
- Highlights the currently selected icon
- Optionally allows clearing the selected icon
- Customizable width
- Accepts a custom icon list or uses the full default list
- Emits useful events for external control
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | — | The currently selected icon (external value binding) |
placeholder | string | — | Placeholder text for the search input |
disabled | boolean | false | Disables input and selection |
iconsList | string[] | ALL_ICONS | Custom list of icons to filter and select from |
icon | string | — | Internal fallback icon value if modelValue is not provided |
width | string | number | '100%' | Width of the component (e.g. '100%', '300px', 320) |
disableSearch | boolean | false | Hides the search input if true |
disableClear | boolean | true | Hides the clear button for selected icon if true |
modelSearch | string | '' | External control of the current search query |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted when an icon is selected or cleared |
iconSelect | string | Emitted when an icon is selected (same as modelValue) |
update:modelSearch | string | Emitted when the search query is updated |
Exposed Refs
| Name | Type | Description |
|---|---|---|
inputRef | Ref | Ref to the native input element inside search |