iconify-icon-picker

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

@iconify/vue is consumer-controlled and supports ^4.1.2 or ^5.0.0. The picker reuses that installation instead of bundling a separate Iconify runtime.

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

Events

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