CoreIconBadge

레거시 아이콘 뱃지 컴포넌트. IconBadge로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 IconBadge를 사용하세요.

CoreIconBadge는 아이콘을 원형 컨테이너에 감싸 표시하는 뱃지 컴포넌트입니다.

4가지 size — sm(16px), md(20px), lg(28px), xl(32px)
자동 아이콘 크기 — icon에 size prop이 없으면 컨테이너 크기에 맞춰 자동 조정
커스텀 아이콘 크기 — icon에 직접 size를 지정하면 해당 값을 유지

Usage

기본 사용법

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreIconBadge size="sm" icon={<IconInstagramColored />} />
<CoreIconBadge size="md" icon={<IconInstagramColored />} />
<CoreIconBadge size="lg" icon={<IconInstagramColored />} />
<CoreIconBadge size="xl" icon={<IconInstagramColored />} />
</HStack>

다양한 아이콘

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreIconBadge size="md" icon={<IconInstagramColored />} />
<CoreIconBadge size="md" icon={<IconYoutubeColored />} />
<CoreIconBadge size="md" icon={<IconNaverBlogColored />} />
<CoreIconBadge size="md" icon={<IconChatFilled />} />
</HStack>

커스텀 아이콘 크기

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreIconBadge size="xl" icon={<IconInstagramColored size="$icon-xs" />} />
<CoreIconBadge size="xl" icon={<IconInstagramColored size="$icon-md" />} />
<CoreIconBadge size="xl" icon={<IconInstagramColored size="$icon-lg" />} />
</HStack>

시스템 아이콘

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreIconBadge size="md" icon={<IconAddOutline />} />
<CoreIconBadge size="md" icon={<IconSearchOutline />} />
<CoreIconBadge size="md" icon={<IconCloseOutline />} />
</HStack>

Props

ComponentPropsWithoutRef<'div'>를 확장한 컴포넌트입니다.

Prop

Type

iconBadgeSizeType

Prop

Type

스타일

display: flex, justify-content: center, align-items: center
background-color: white
border: 1px solid border-default
border-radius: radius-full
flex-shrink: 0

Size Variants

size	컨테이너 크기	기본 아이콘 크기
`sm`	16 × 16 px	12px
`md`	20 × 20 px	16px
`lg`	28 × 28 px	20px
`xl`	32 × 32 px	20px

마이그레이션 가이드

신규 IconBadge 컴포넌트는 $css prop과 반응형 size를 지원합니다.

Before / After

// Before — CoreIconBadge
import { CoreIconBadge } from '@featuring-corp/components';
import { IconInstagramColored } from '@featuring-corp/icons';

<CoreIconBadge size="md" icon={<IconInstagramColored />} />

// After — IconBadge
import { IconBadge } from '@featuring-corp/components';
import { IconInstagramColored } from '@featuring-corp/icons';

<IconBadge size="md" icon={<IconInstagramColored />} />

변경 사항

CoreIconBadge	IconBadge
`size` — 정적 string	`size` — 반응형 객체 지원
`icon` — JSX.Element	`icon` — JSX.Element (동일)
자동 아이콘 크기 조정	동일
`import { CoreIconBadge }`	`import { IconBadge }`

On this page