CoreIconBadge

Usage

기본 사용법

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

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

다양한 아이콘

import { CoreIconBadge } from '@featuring-corp/components';
import { 
  IconInstagramColored, 
  IconYoutubeColored, 
  IconNaverBlogColored,
  IconChatFilled 
} from '@featuring-corp/icons';

<CoreIconBadge size="sm" icon={<IconInstagramColored />} />
<CoreIconBadge size="sm" icon={<IconYoutubeColored />} />
<CoreIconBadge size="sm" icon={<IconNaverBlogColored />} />
<CoreIconBadge size="sm" icon={<IconChatFilled />} />

크기 설정

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

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

커스텀 아이콘 크기

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

<CoreIconBadge size="sm" icon={<IconInstagramColored size={12} />} />

Props

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

Prop

Type

iconBadgeSizeType

Prop

Type

스타일

기본 스타일 속성

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

Size Variants

sm: width: 16px, height: 16px
md: width: 20px, height: 20px
lg: width: 28px, height: 28px
xl: width: 32px, height: 32px

On this page