Icons

@featuring-corp/icons — 336개 시스템 아이콘 + 26개 서비스 아이콘

@featuring-corp/icons

SVG 기반 React 아이콘 컴포넌트 패키지. 시스템 아이콘과 서비스(브랜드) 아이콘을 제공합니다.

설치

npm install @featuring-corp/icons

아이콘 종류

종류	수량	설명
System Icons	336개	UI 시스템 아이콘 — 11개 카테고리 (Ai, Business, Controls, Data 등)
Service Icons	26개	소셜/브랜드 아이콘 — Apple, Google, Facebook 등

사용법

import { IconSearchOutline, IconHomeFilled } from '@featuring-corp/icons';

// 기본 사용
<IconSearchOutline />

// 크기 지정 — $icon-* 토큰 또는 px 값
<IconHomeFilled size="$icon-xl" />

// $icon-* 토큰
<IconSearchOutline size="$icon-xs" />   // 12px
<IconSearchOutline size="$icon-sm" />   // 14px
<IconSearchOutline size="$icon-md" />   // 16px (기본값)
<IconSearchOutline size="$icon-lg" />   // 20px
<IconSearchOutline size="$icon-xl" />   // 24px
<IconSearchOutline size="$icon-2xl" />  // 32px

// 색상 지정 — $토큰 또는 CSS 값
<IconSearchOutline fill="$icon-primary" />
<IconSearchOutline fill="$primary-60" />
<IconSearchOutline fill="$support-error-3" />

// CSS 값도 그대로 사용 가능
<IconSearchOutline fill="#ff6b6b" />
<IconSearchOutline fill={vars.global.colors.gray[60]} />

`fill` 토큰

$ 접두어로 design-tokens 색상을 참조할 수 있습니다. IDE 자동완성을 지원합니다.

패턴	예시	변환 결과
Global 색상	`$gray-90`, `$primary-60`	`var(--global-colors-gray-90)`
Semantic 아이콘	`$icon-primary`, `$icon-tertiary`	`var(--semantic-color-icon-primary)`
Semantic 기타	`$support-error-3`, `$text-1`	`var(--semantic-color-support-error-3)`
CSS 값	`#ff6b6b`, `red`	그대로 passthrough

Props

Prop	타입	기본값	설명
`size`	`IconSize`	`16` (`$icon-md`)	아이콘 크기 — `$icon-*` 토큰, px 문자열, 숫자(rem 변환)
`fill`	`IconFill`	`currentColor`	아이콘 색상 — `$토큰` 또는 CSS 값

Subpath Exports

// 전체 import
import { IconSearchOutline } from '@featuring-corp/icons';

// 시스템 아이콘만
import { IconSearchOutline } from '@featuring-corp/icons/system';

// 서비스 아이콘만
import { IconGoogleColored } from '@featuring-corp/icons/service';

네이밍 규칙

System: Icon{Name}{Style} — Style: Outline, Filled
Service: Icon{Brand}{Variant} — Variant: Colored, White

On this page