rove-icon-react

English | 中文

RoveIconSelector Icon Picker Component

Component Introduction

RoveIconSelector is a wrapper library based on react-icons@^5.5.0, providing access to all its icon selections.

• Note: rove-icon-react includes the selector for all icon libraries from react-icons@^5.5.0, so it will bundle all icons and cannot be tree-shaken.

• When using the RoveIcon component, only icons from the currently selected icon library will be loaded (with caching), while other libraries will not be loaded. However, all libraries are still bundled.

• RoveIconSelector and RoveIcon are used together: RoveIconSelector for selecting icons, and RoveIcon for using the selected icons.

Features

• Support for multiple icon library selections

• Ability to exclude specific icon libraries

• Real-time search and filtering of icons

• Adjustable icon size

• Customizable icon color

• Icon information copying functionality

• Internationalization support

• Configurable display/hide of feature items

• MIT license icon filtering

Installation

npm install rove-icon-react

\# or

yarn add rove-icon-react

Import Component

import { RoveIconSelector, RoveIcon } from 'rove-icon-react';

Basic Usage

import React, { useState } from 'react';
import { RoveIconSelector, RoveIcon } from 'rove-icon-react';

function App() {
    const [state, setState] = useState<IconSelectorState>({
        lib: "ai",
        name: "",
        width: 24,
        height: 24,
        color: "#000000",
    });

    return (
        <div style={{ width: "calc(100vw - 100px)", height: "80vh", display: "flex" }}>
            <RoveIconSelector
                isPopup
                onConfirm={(state) => {
                    setState(state);
                }}
            ></RoveIconSelector>
            <div style={{ marginLeft: 20 }}></div>
            <RoveIcon {...state} />
        </div>
    );
}

export default App;

Property Description

IconSelectorProps

Property	Type	Default	Description
style	React.CSSProperties	-	Custom style for the component
title	string	-	Popup header title
isPopup	boolean	false	Whether to display as a popup
lib	RoveIconLibsType	ai	Initially selected icon library
name	string	-	Initially selected icon name
onConfirm	(state: IconSelectorState) => void	-	Callback function when confirming selection
showSize	boolean	true	Whether to show size input
showColor	boolean	true	Whether to show color picker
showCopy	boolean	true	Whether to show copy button
showCopyName	boolean	true	Whether to show copy name button
MIT	boolean	false	Whether to only show MIT licensed icons
exclude	RoveIconLibsType[]	[]	List of excluded icon libraries
include	RoveIconLibsType[]	-	List of included icon libraries (highest priority)

IconSelectorState

Property	Type	Default	Description
lib	RoveIconLibsType	"ai"	Selected icon library
name	string	null	Selected icon name
width	number	24	Icon width
height	number	24	Icon height
color	string	"#000000"	Icon color

RoveIconLibsType

type RoveIconLibsType =
    | "ci"
    | "fa"
    | "fa6"
    | "io"
    | "io5"
    | "md"
    | "ti"
    | "go"
    | "fi"
    | "lu"
    | "gi"
    | "wi"
    | "di"
    | "ai"
    | "bs"
    | "ri"
    | "fc"
    | "gr"
    | "hi"
    | "hi2"
    | "si"
    | "sl"
    | "im"
    | "bi"
    | "cg"
    | "vsc"
    | "tb"
    | "tfi"
    | "rx"
    | "pi"
    | "lia";

Event Description

onConfirm

Callback function triggered when confirming selection, returns the complete state of the currently selected icon.

const handleConfirm = (state) => {​
  console.log('Icon selected:', state);​
  // state includes: lib, name, width, height, color​
};

Icon Library Support

The component supports all icon libraries from the react-icons library View

Advanced Usage

1. Show only specified icon libraries

<IconSelector
    include={['ai', 'fa', 'md']}
    onConfirm={handleIconConfirm}
/>

2. Exclude certain icon libraries

<IconSelector
    exclude={['ai', 'fa', 'md']}
    onConfirm={handleIconConfirm}
/>

3. Show only MIT licensed icons

<IconSelector
    MIT={true}
    onConfirm={handleIconConfirm}
/>

Style Description

The component uses the following CSS class names, which can be customized as needed:

Internationalization Support

The component integrates internationalization functionality (RoveContext)

Built-in English|Chinese, for other languages refer to this example

function Example() {
    const [state, setState] = useState<IconSelectorState>({
        lib: "ai",
        name: "",
        width: 24,
        height: 24,
        color: "#000000",
    });
    return (
        <div style={{ width: "calc(100vw - 100px)", height: "80vh", display: "flex" }}>
            <RoveContext.Provider
                value={{
                    type: "ch",
                }}
            >
                <>
                    <RoveIconSelector
                        isPopup
                        onConfirm={(state) => {
                            setState(state);
                        }}
                    ></RoveIconSelector>
                    <div style={{ marginLeft: 20 }}></div>
                    <RoveIcon {...state} />
                </>
            </RoveContext.Provider>
        </div>
    );
}

• RoveContext supports type and language

<RoveContext.Provider
    value={{
        type: "en",
        language: {
            "rove-modal-title": "my modal title",
        },
    }}
>
//...
<RoveContext.Provider/>

• Keys in language

{
    "rove-modal-title": "select icon",
    "rove-modal-select-name": "select",
    "rove-selector-width": "width",
    "rove-selector-height": "height",
    "rove-selector-color": "color",
    "rove-selector-copyname": "Copy name",
    "rove-selector-copy": "Copy",
    "rove-selector-ok": "Confirm",
    "rove-search-placeholder": "Search icon name",
    "rove-search-button": "Search",
}

RoveIcon

interface RoveIconProps = {
    /**
     * @description lib name
     */
    lib: RoveIconLibsType;
    /**
     * @description icon name
     */
    name: string;
    /**
     * @description width
     * @default 24 px
     */
    width?: number;
    /**
     * @description width
     * @default 24 px
     */
    height?: number;
    /**
     * @description icon color
     */
    color?: string;
    /**
     * @description if not found,return it
     */
    fallback?: React.ReactNode;
    /**
     * @description loading, show it
     */
    loadingIndicator?: React.ReactNode;
}

<RoveIcon lib="ai" name="AiFillAudio" width={30} height={30} />

Notes

• Icon Library Loading: Icon libraries are loaded dynamically when selected, which may cause a loading delay on first use.

• License Issues: Not all icon libraries in react-icons are based on the MIT license. Please pay attention to the relevant license agreements when using them (can be controlled using the MIT parameter).

• Performance Optimization: It is recommended to use the include property to limit the number of loaded icon libraries according to project needs.

• Search Functionality: The search function is case-insensitive and will match any part of the icon name.

License

MIT