Icon

@phosphor-icons/react 의 아이콘 컴포넌트를 icon prop 으로 주입하고 PDS 기본 size / color 를 적용한다. 공급자는 @fluxloop-ai/pds-icons/icons 중립 서브패스로만 소비한다(공급자 직접 import 금지).

사용

import { Icon } from "@fluxloop-ai/pds-ui/components/icon";
import { MagnifyingGlass } from "@fluxloop-ai/pds-icons/icons";

<Icon icon={MagnifyingGlass} size="md" color="label-normal" />

커스텀 SVG 도 동일하게 붙인다.

import { MyCustomIcon } from "@fluxloop-ai/pds-icons";

<Icon icon={MyCustomIcon} size="lg" color="primary" label="커스텀 아이콘" />

Size

xs

sm

md

lg

xl

size	px
`xs`	12
`sm`	16
`md`	20
`lg`	24
`xl`	28

Color

semantic 토큰 이름을 값으로 받는다. 기본은 inherit — 부모 text color 상속.

label-normal

label-alternative

label-assistive

primary

positive

cautionary

negative

Gallery

MagnifyingGlass

Check

X

Warning

Gear

Lightning

Props

Prop	타입	기본	설명
`icon`	`PhosphorIcon \| ComponentType<SVGAttributes>`	—	렌더할 아이콘 컴포넌트
`size`	`xs \| sm \| md \| lg \| xl`	`md`	PDS 5단계
`color`	semantic token 이름	`inherit`	아래 표 참조
`label`	`string`	—	있으면 `role="img"` + `aria-label`. 없으면 `aria-hidden`

지원 color 토큰

inherit · label-normal · label-strong · label-neutral · label-alternative · label-assistive · label-disable · primary · positive · cautionary · negative

Registry 설치

npx shadcn add https://pds.pluto.com/r/icon