Installation

1. Install the package in your project directory with:

npm install @ncds/ui-admin-icon

yarn add @ncds/ui-admin-icon

2. Import and use icons in your components.

Usage

Importing individual icons

You can import specific icons directly:

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)

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:

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:

// 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.