Icon Selector

Beta

Icon Selector is a field type that allows users to choose an icon from a predefined list

installyarn add @clayui/core
versionNPM Version
useimport {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 {IconSelector} from '@clayui/core';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<div className="p-4">
			<IconSelector />
		</div>
	);
}

API Reference

IconSelector

({ active: externalActive, defaultActive, direction, messages, 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).

direction

"top" | "bottom" | undefined

Direction the menu will render relative to the trigger.

messages

{ changeIconButton: string; clearInput?: 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).

spritemap *

string

URL of the SVG icons.

Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Ilza Medeiros

Last edited March 12, 2025 at 5:21:21 PM