EIcon

EIcon is a UI element that provides popular icons from iconsax and tabler in your React projects view [Demo] (/)

• More info about icon packages here.

Import

import EIcon from "@components/UI/EIcon";

Usage <EIcon/>

We provide icon support using EIcon component to render icons directly. It takes 3 props :

Prop	Type	Note
name	String	Specifies the icon name .
iconPack	String	Specifies which library the selected icon is from : iconsax or tabler
options	Object	Specifies icon features.

NOTE

• The default value of iconsax in the app.config.js is set to 'iconsax'. Additionally, we've created a changeIconPackaction in src/store/iconPackSlice, allowing you to change the value dynamically.

// Redux Imports
import {useDispatch, useSelector} from "react-redux";

// Actions
import {changeIconPack} from "@/store/iconPackSlice";

// Custom Components Imports
import EBtn from "@components/Elements/EBtn";

export const IconPackToggler = () => {
    // Hooks
    const dispatch = useDispatch();
    const {iconPack} = useSelector((state) => state.iconPackSlice);

    const iconPackToggler = () => {
        if (iconPack === 'iconsax') dispatch(toggleIconPack("tabler"))
        else dispatch(changeIconPack("iconsax"))
    }

    return (
        <EBtn onClick={iconPackToggler}>
            The current icon pack is {iconPack}. Tap to change!
        </EBtn>
    );
};

• If you want to use an icon from tabler library without changing the redux value you can always use iconPack prop to specify your desired library name for that specific icon.

// Custom Components Imports
import EIcon from "@components/UI/EIcon";

export const IconPackExample = () => {
    return (
        {/* The icon below is from Tabler, regardless of what the iconPack value is. */}
    <EIcon name="shopping-bag" iconPack="tabler"/>
)
};

• We also auto-store the iconPack in the localStorage for later usage.

How to use EIcon Component?

Adding an icon to your project is so easy :

tabler

<EIcon name="shopping-bag" iconPack="tabler"/>

iconsax

<EIcon name="Bag"/>

How to style an icon using EIcon Component?

option prop makes it easy to specify your selected icon's features and it has following properties:

tabler

const options = {
    size: 24,
    color: "currentColor",
    className: "",
    strokeWidth: "1.5",
};

iconsax

const options = {
    size: 24,
    color: "currentColor",
    className: "",
    type: "linear",
};

Use icon inside other elements

Some UI elements have props that you can use to add icons to them (props like prependIcon,appendIcon , icon, etc).

To display an icon, the name property of icon props must be present. All other attributes are optional.

tabler

const icon = {
    name: "Eye",
    iconPack: "tabler"
    size: 24,
    color: "currentColor",
    className: "",
    strokeWidth: "1.5",
}

iconsax

const icon = {
    name: "Eye",
    iconPack: "iconsax"
    size: 24,
    color: "currentColor",
    className: "",
    type: "linear",
}

Show me an example 👀

Suppose you want to create a download button with a prepend icon, Here's an example of how you can do it:

<EBtn prependIcon={{name: "ImportCurve"}}>Download</EBtn>

The above example shows a button with ImportCurve icon which belongs to iconsax library. ✨