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';

Table of Contents

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

Open on CodeSandboxOpen Sandbox
import {IconSelector} from '@clayui/core';
import React from 'react';

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

const spritemap = '/icons.svg';

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

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.

spritemap *

string

URL of the SVG icons.

selectedIcon

string | undefined

Selected icon (controlled).

Returns
Element
Edit this page on GitHub

Contributors

Ilza Medeiros, Matuzalém Teles

Last edited April 9, 2025 at 3:15:07 PM

Table of Contents