HCL Software Enchanted Icons package

Enchanted Icons is a collection of icons that are used in HCL Software products. This package exposes own creations as well as external icons from the Carbon React Icons Package and exposes those as ready to use Material-UI components.

(C) 2024 HCL America Inc. Apache-2.0 license https://www.apache.org/licenses/LICENSE-2.0


⬇️ Installation

``sh
npm install @hcl-software/enchanted-icons
`


Usage

In most cases, the Enchanted Components use the correct icons to adhere to the Enchanted design language; however, there may be valid reasons to use
icons directly from this library. Always consult with your UX contact when using icons directly from this library.

$3

#### Icon size
`jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...

`
or
`jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...

`

#### Icon color
`jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...

`
Note: It is strongly recommended to use the thematic names of colors of the Enchanted theme, rather than explicit rgba values. For example, "success" or "action". This ensures consistency of colors across the UI and over time.

#### Icon button
A common pattern is to use an icon in conjunction with an Enchanted
`jsx
import IconButton from '@hcl-software/enchanted-react-components/dist/IconButton';
import RocketIcon from '@hcl-software/enchanted-icons/dist/carbon/es/rocket';
...

`
Note: In this case the size of the icon is determined by the size prop of the . The icon color is controlled by the different button states (active, disabled, etc) and should not be overriden.

$3