Icon 컴포넌트 사용법

export const StyledIcon = styled.span<{
  size: number;
  color: string;
  fill?: boolean;
}>`
  color: ${({ theme, color }) => theme.color[color]};
  font-size: ${({ size }) => size}px;
  font-variation-settings: ${({ fill }) => (fill ? `'FILL' 1` : `'FILL' 0`)};
`;

1. size는 width와 height에 공통으로 들어갈 값입니다

2. color값은 provider에 등록되어 있는 네이밍을 기준으로 입력해주세요

3. fill은 optional입니다. 속성을 제공하지 않으면 비어있는 아이콘을 반환합니다. fill={true} 일 때는 속이 찬 아이콘을 반환합니다.

실제 사용코드

# 1번 알맹이 없는 놈
<Icon
	name='favorite'
	color='purpleVivid'
/>

# 아래처럼 해도 1번과 동일
<Icon
	name='favorite'
	color='purpleVivid'
	fill={false}
/>

# 2번 알맹이 있는 놈
<Icon
	name='favorite'
	color='purpleVivid'
	fill={true}
/>

1번 결과

2번 결과