React SVG icon components
npm install @ncds/ui-admin-iconReact SVG icon components for NHN Commerce Design System
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.
You can import specific icons directly:
`jsx
import { Plus, Heart } from '@ncds/ui-admin-icon';
function MyComponent() {
return (
$3
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 (
);
}
`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';
`$3
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'; // Line variant
// Solid variant
// Using dynamic import
import Icon from '@ncds/ui-admin-icon/dynamic';
// Uses the line variant by default
// Uses the solid variant
``For a complete list of available icons, please refer to:
https://nhn-commerce-fe.github.io/design-system/
This project is licensed under the terms of the
MIT license.