Icon Selector Beta Icon Selector is a field type that allows users to choose an icon from a predefined list
install yarn add @clayui/core version use import {IconSelector } from '@clayui/core' ;
Introduction
Icon Selector is a field type that allows users to choose an icon from a predefined list. When clicking the button, a dropdown menu appears displaying available icons, enabling selection with a single click. The chosen icon is then visually represented within the field.
Example
import {Provider , IconSelector } from '@clayui/core' ;
import React from 'react' ;
const spritemap = '/icons.svg' ;
export default function App () {
return (
<div className = "p-4" >
<Provider spritemap = "/icons.svg" >
<IconSelector spritemap = {spritemap } />
</Provider >
</div >
);
}Show code API Reference
IconSelector ({ active : externalActive , defaultActive , defaultSelectedIcon , direction , messages , selectedIcon : externalSelectedIcon , onIconChange , onActiveChange , spritemap , }: Props ) => JSX .Element Parameters active boolean | undefined
Flag to indicate if menu is showing or not (controlled).
defaultActive boolean | undefined
The initial value of the active state (uncontrolled).
defaultSelectedIcon string | undefined
The initial value of the icon state (uncontrolled).
direction "bottom" | "top" | undefined
Direction the menu will render relative to the trigger.
messages { changeIconButton : string ; clearInput ?: string ; iconSelected : string ; notFound : string ; placeholder ?: string ; removeIcon : string ; selectIcon : string ; selectIconButton ?: string ; } | undefined
Messages for icon selector.
onActiveChange InternalDispatch < boolean > | undefined
Callback for when the active state changes (controlled).
onIconChange InternalDispatch < string > | undefined
Callback when an icon is selected.
selectedIcon string | undefined
Selected icon (controlled).
Returns ElementEdit this page on GitHub Contributors
Matuzalém Teles, Ilza Medeiros
Last edited May 11, 2025 at 1:37:56 AM
