Icons

설치

npm install @vapor-ui/icons

사용법

import { CheckCircleIcon, SearchOutlineIcon } from '@vapor-ui/icons';

function Example() {
    return (
        <>
            <CheckCircleIcon size="24" />
            <SearchOutlineIcon size="20" color="gray" />
        </>
    );
}

Props

아이콘 스타일

• Basic

  *Icon

  채워진 실선 스타일. 주요 액션이나 강조가 필요한 요소에 사용합니다.
  용도: 버튼, 상태 표시, 주요 UI 요소
• Outline

  *OutlineIcon

  외곽선만 있는 스타일. 보조 요소나 덜 강조된 UI에 적합합니다.
  용도: 보조 버튼, 리스트 아이템, 내비게이션
• Symbol

  *ColorIcon

  브랜드 원본 색상을 유지하는 아이콘. 서비스 로고나 국기 등에 사용합니다.
  용도: 소셜 로그인, 브랜드 표시, 국가 선택
• Symbol Black

  *Icon (symbol)

  단색으로 표현된 브랜드 아이콘. 색상 통일이 필요한 UI에 적합합니다.
  용도: 푸터 링크, 단색 UI, 프린트용

아이콘 목록