<p align="center">
  <a href="https://www.nhn-commerce.com/" rel="noopener" target="_blank"><img width="246" height="60" src="https://img.cdn-nhncommerce.com/NCDS/logo/logo_commerce.png" alt="NHN COMMERCE logo"></a>
</p>

<h1 align="center">@ncds/ui-admin-icon</h1>

<p align="center">React SVG icon components for NHN Commerce Design System</p>

## Installation

1. Install the package in your project directory with:

```sh
npm install @ncds/ui-admin-icon
```

```sh
yarn add @ncds/ui-admin-icon
```

2. Import and use icons in your components.

## Usage

### Importing individual icons

You can import specific icons directly:

```jsx
import { Plus, Heart } from '@ncds/ui-admin-icon';

function MyComponent() {
  return (
    <div>
      <Plus />
      <Heart width={24} height={24} color="red" />
    </div>
  );
}
```

### Dynamic import

If you want to load icons on demand, you can use the dynamic import. (Icon chunk will be loaded when the icon is used)

```jsx
import Icon from '@ncds/ui-admin-icon/dynamic';

function MyComponent() {
  return (
    <div>
      <Icon name="plus" />
      <Icon name="heart" width={24} height={24} color="red" />
    </div>
  );
}
```

The type of `name` is defined in the package, so you can use it for type checking:

```ts
import type { IconName } from '@ncds/ui-admin-icon/dynamic';

const iconName: IconName = 'plus';
```

### Icon styles

The package includes both solid (fill) and line style icons. You can use them the same way:

```jsx
// Using direct import
import { Activity, ActivityFill } from '@ncds/ui-admin-icon';

<Activity />      // Line variant
<ActivityFill />  // Solid variant

// Using dynamic import
import Icon from '@ncds/ui-admin-icon/dynamic';

<Icon name="activity" />       // Uses the line variant by default
<Icon name="activity-fill" />  // Uses the solid variant
```

## Documentation

For a complete list of available icons, please refer to:
https://nhn-commerce-fe.github.io/design-system/

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
