Iconify Icon Picker

A lightweight and customizable Vue 3 component for searching and selecting icons from the Iconify icon library.

Installation

# npm
npm install iconify-icon-picker @iconify/vue

# yarn
yarn add iconify-icon-picker @iconify/vue

# pnpm
pnpm add iconify-icon-picker @iconify/vue

Usage

Basic Usage

<script setup>
import { ref } from 'vue'
import IconPicker from 'iconify-icon-picker'
import 'iconify-icon-picker/style.css'

// Define a ref to store the selected icon
const selectedIcon = ref('')
</script>

<template>
	<div>
		<h2>Select an Icon</h2>
		<IconPicker v-model="selectedIcon" />

		<div v-if="selectedIcon">
			<p>Selected icon: {{ selectedIcon }}</p>
		</div>
	</div>
</template>

Props

Prop	Type	Default	Description
modelValue	String	undefined	v-model binding for the selected icon
value	String	undefined	Selected icon (alternative to v-model)
placeholder	String	'Search icons...'	Placeholder text for the search input
debounce	Number	300	Debounce time (ms) for search input
itemsPerPage	Number	30	Number of icons displayed per page
paginationText	String	'Page {0} of {1}'	Text template for pagination (replace {0} with current page and {1} with total pages)

Events

Event	Payload Type	Description
onSelect	String	Emitted when a new icon is selected

Styling

The component can be customized using the following CSS variables:

:root {
	--iconPicker-text: #1a1a1a;
	--iconPicker-border: #e0e0e0;
	--iconPicker-primary: #0066cc;
	--iconPicker-primary-fg: #0052a3;
	--iconPicker-primary-hover: #0052a3;
	--iconPicker-radius: 0.375em;
	--iconPicker-gap: 0.25em;
	--iconPicker-input-height: 2.125em;
	--iconPicker-selected-bg: #e6f3ff;
	--iconPicker-font-base: 16px;
	--iconPicker-transition: all 0.2s ease;
}

Author

safdar-azeem