open-index/open-npm huggingface dataset:
npm package: @hcl-software/enchanted-icons
Description: Enchanted Icons is a collection of icons that are used in HCL Software products.
Author: Mridul Shrivastava
Latest version: 1.10.0

# 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](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) 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](https://www.apache.org/licenses/LICENSE-2.0)


[![npm](https://nodei.co/npm/@hcl-software/enchanted-icons.png)](https://www.npmjs.com/package/@hcl-software/enchanted-icons)

## ⬇️ 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.**

### Examples

#### Icon size
```jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...
<CheckmarkIcon fontSize="small" />
```
or
```jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...
<CheckmarkIcon fontSize="16px" />
```

#### Icon color
```jsx
import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
...
<CheckmarkIcon color="success" />
```
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 `<IconButton>`
```jsx
import IconButton from '@hcl-software/enchanted-react-components/dist/IconButton';
import RocketIcon from '@hcl-software/enchanted-icons/dist/carbon/es/rocket';
...
<IconButton size="small" aria-label="launch"><RocketIcon /></IconButton>
```
Note: In this case the size of the icon is determined by the `size` prop of the `<IconButton>`. The icon color is controlled by the different button states (active, disabled, etc) and should not be overriden.

### Advanced
Icons from this library can take any props supported by MUI's `<SvgIcon>` component. See https://v5.mui.com/material-ui/api/svg-icon/  
**Always consult with your UX contact before applying any advanced styling.**
npm package: @hcl-software/enchanted-icons-web-component
Description: Enchanted Icons is a collection of web component icons that are used in HCL Software products.
Author: Nhicko Garachico
Latest version: 1.10.0

# HCL Software Enchanted Icons package for Web Components

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](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) and exposes those as ready to use web components.

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


[![npm](https://nodei.co/npm/@hcl-software/enchanted-icons.png)](https://www.npmjs.com/package/@hcl-software/enchanted-icons)

## ⬇️ Installation

```sh
npm install @hcl-software/enchanted-icons-web-component
```
### Usage
Web Components can be used in any web framework or plain HTML.

**1. Import the icon definition**
You must first import the icon's JavaScript file to define the custom element. This is typically done once in your application's main entry point.
```javascript
import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/rocket';
import '@hcl-software/enchanted-icons-web-component/dist/apps/es/app-switcher';
```

**2. Use the HTML tag**
Once defined, you can use the icon's custom HTML tag. The tag name is `icon-` followed by the icon's name (e.g., `icon-rocket`, `icon-app-switcher`).
```html
<icon-rocket></icon-rocket>
```

Icons with double dash in their name like `chevron--up` will use single dash in their component name.
```javascript
import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/chevron--up';

// Usage
<icon-chevron-up></icon-chevron-up>

// Usage by using the 'VITE_COMPONENT_PREFIX=prefix-' env parameter
<prefix-icon-chevron-up></prefix-icon-chevron-up>
```

**Styling (Size and Color)**
You can style the icons by setting the `size` and `color` properties on the element.

**As HTML attributes:**
```html
<icon-rocket size="32"></icon-rocket>

<icon-app-switcher color="blue"></icon-app-switcher>
```

**As JavaScript properties:**
```javascript
const myIcon = document.querySelector('icon-rocket');
myIcon.size = 24;
myIcon.color = 'var(--my-theme-color)';
```

**With CSS Custom Properties (Advanced):**
The icons are styled internally with CSS Custom Properties. You can override these variables globally to set a theme for all icons.
```css
/* Set a default theme size and color for all icons on the page */
body {
  --icon-theme-size: 24px;
  --icon-theme-color: #3d3d3d;
}
```
npm package: @hcl-software/enchanted-web-components
Description: UI Library providing Lit web components
Author: Hanjo Hagemeier
Latest version: 5.2.1

# @hcl-software/enchanted-web-components

## Usage

```sh
npm install @hcl-software/enchanted-web-components
```

```typescript
import '@hcl-software/enchanted-web-components/dist/components/atomic-component/enchanted-button';

...

render() {
  return html`
    <enchanted-button
      @click=${debounce(this.handleClick, DEFAULT_CLICK_DEBOUNCE_WAIT)}
      ?disabled="${this.disabled || nothing}"
      imgurl="${svgSearchUrl}"
      buttontext="${this.buttontext || getMessage(this.locale, 'header.enduser.search')}"
      exportparts="${Object.values(BUTTON_PARTS).join(',')}"
    >
    </enchanted-button>
  `;
}

```

## Development

### NPM targets

We provide the following utility development commands:

| task | command | description |
|--|--|--|
| `install` | `npm ci` | Initial installation of the project dependencies. Run this to get started. |
| `clean` | `rm -rf node_modules` and `rm -rf dist` | Removes all node_modules etc |
| `build lib` | `npm run build` and `npm run build-complete` | Builds the package |
| `lint` | `npm run lint` | Run the linting task |
| `styling` | `npm run compile-enchanted-css` and `npm run watch-enchanted-css` | Runs the styling tasks |
| `build storybook` | `npm run build-storybook` | Builds a storybook |
| `storybook` | `npm run storybook`  or scoped one `VITE_COMPONENT_PREFIX=prefix- npm run storybook` | Runs a storybook instance |
| `testing` | `npm run test-unit` or scoped one `VITE_COMPONENT_PREFIX=prefix- npm run test-unit` | Run unit tests |