Vue 3 Icon Picker

Icon picker component

Installation

If you are using npm:

npm i vue3-icon-picker

If you are using yarn:

yarn add vue3-icon-picker

About

This package use icons from xicons with SVG components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon. Check this website for view icons list: https://www.xicons.org.

Demo

View the live demo here

Usage

You can add this package globally to your project:

// main.js
import { createApp } from 'vue'

import App from './App.vue'

import Vue3IconPicker from 'vue3-icon-picker'
import 'vue3-icon-picker/dist/style.css'

createApp(App).use(Vue3IconPicker).mount('#app')

If needed rename component to use:

createApp(App).use(Vue3IconPicker, { name: 'IconPicker' }).mount('#app') // use in template <IconPicker />

Alternatively you can also import the component locally:

<script setup>
 import { Vue3IconPicker } from 'vue3-icon-picker'
 import 'vue3-icon-picker/dist/style.css'
</script>

You can then use the component in your template

<template>
 <Vue3IconPicker v-model="icon" placeholder="Select icon" />
</template>

Props

Name	Type	Description	Default	Required
v-model	string / string[]	Selection, icon(s) SVG code(s) or name(s)	null	Yes
placeholder	string	Input placeholder	undefined	No
multiple	boolean	Enable multiple selection when set to true	false	No
multipleLimit	number	Maximum number of selections when multiple selection is enabled	Infinity	No
selectedItemsToDisplay	number	Number of selected icons to display when multiple selection is enabled	9	No
iconLibrary	'all' / 'antd' / 'carbon' / 'fa' / 'fluent' / 'ionicons4' / 'ionicons5' / 'material' / 'tabler'	Icon library to display. This property can take an array of several libraries to display	'fa'	No
selectedIconBgColor	string	Selected icon(s) background color	'#d3d3d3'	No
selectedIconColor	string	Selected icon(s) color	'#000000'	No
clearable	boolean	Make selected icon clearable when multiple is false	false	No
disabled	boolean	Disable component	false	No
displaySearch	boolean	Display search input	true	No
searchPlaceholder	string	Search input placeholder	'Search'	No
valueType	'svg' / 'name'	Type of selection value, icon(s) SVG code(s) or name(s)	'svg'	No
includeIcons	string[]	List of icons to include	[]	No
excludeIcons	string[]	List of icons to exclude	[]	No
includeSearch	string	The search query whose results must be included	undefined	No
excludeSearch	string	The search query whose results must be excluded	undefined	No
emptyText	string	Empty text	'Nothing to show'	No

Slots

Name	Parameters	Description
empty	()	Empty slot for the dropdown icons list

Events

• change
  • This event is fired when selection change.

Display icons

You can simply display icons like that if your value type is svg:

<script setup>
 const icon = ref(null)
</script>

<template>
 <Vue3IconPicker v-model="icon" placeholder="Select icon" />
 <i v-html="icon"></i>
</template>

Or use custom icon component provided by this package:

<script setup>
 import { Icon } from 'vue3-icon-picker'
 const icon = ref(null)
</script>

<template>
 <Vue3IconPicker v-model="icon" placeholder="Select icon" />
 <Icon :data="icon" :size="24" color="#124ebb"></Icon>
</template>

Icon Props

Name	Type	Description	Default	Required
data	string	Icon svg code or name	undefined	Yes
size	number / string	Icon size	24	No
color	string	Icon color	undefined	No

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT