Platform Icon Library

BlackVue 플랫폼을 위해 최적화된 아이콘 라이브러리입니다.

설치

npm install platform-icon-library

사용법

기본 사용법

import { AccountLightActive } from 'platform-icon-library';

function App() {
  return <AccountLightActive />;
}

사이즈 조절

import { AccountLightActive } from 'platform-icon-library';

function App() {
  return (
    <div>
      <AccountLightActive size={16} />
      <AccountLightActive size={24} />
      <AccountLightActive size={32} />
      <AccountLightActive size="2rem" />
    </div>
  );
}

색상 변경

import { AccountLightActive } from 'platform-icon-library';

function App() {
  return (
    <div>
      <AccountLightActive color="#007AFF" />
      <AccountLightActive color="red" />
      <AccountLightActive color="currentColor" />
    </div>
  );
}

선 두께 조절

import { AccountLightActive } from 'platform-icon-library';

function App() {
  return (
    <div>
      <AccountLightActive strokeWidth={1} />
      <AccountLightActive strokeWidth={2} />
      <AccountLightActive strokeWidth={3} />
    </div>
  );
}

제목 추가

import { AccountLightActive } from 'platform-icon-library';

function App() {
  return (
    <AccountLightActive 
      title="사용자 계정" 
      size={32} 
      color="#007AFF" 
    />
  );
}

모든 props 조합

import { AccountLightActive } from 'platform-icon-library';

function App() {
  return (
    <AccountLightActive 
      size={48}
      color="#FF3B30"
      strokeWidth={2}
      title="활성 계정"
      className="custom-icon"
      onClick={() => console.log('Icon clicked!')}
    />
  );
}

사용 가능한 아이콘

Account Icons

AccountLightActive - 활성 계정 아이콘
AccountLightNormal - 일반 계정 아이콘
AccountLightFocus - 포커스된 계정 아이콘
AccountLightDisabled - 비활성화된 계정 아이콘

Camera Icons

CameraLightActive - 활성 카메라 아이콘
CameraLightNormal - 일반 카메라 아이콘
CameraLightFocus - 포커스된 카메라 아이콘
CameraLightDisabled - 비활성화된 카메라 아이콘

Cloud Icons

CloudLightActive - 활성 클라우드 아이콘
CloudLightNormal - 일반 클라우드 아이콘
CloudLightFocus - 포커스된 클라우드 아이콘
CloudLightDisabled - 비활성화된 클라우드 아이콘

Explore Icons

ExploreLightActive - 활성 탐색 아이콘
ExploreLightNormal - 일반 탐색 아이콘
ExploreLightFocus - 포커스된 탐색 아이콘
ExploreLightDisabled - 비활성화된 탐색 아이콘

Props

모든 아이콘 컴포넌트는 다음 props를 지원합니다:

Prop	타입	기본값	설명
`size`	`number \| string`	`24`	아이콘의 크기 (픽셀 또는 CSS 단위)
`color`	`string`	`'currentColor'`	아이콘의 색상
`strokeWidth`	`number`	`1.5`	선의 두께
`title`	`string`	`undefined`	접근성을 위한 제목
`className`	`string`	`undefined`	CSS 클래스명
`...rest`	`SVGProps`	-	기타 SVG 속성들

개발

의존성 설치

npm install

아이콘 생성

npm run generate:icons

컴포넌트 업데이트

npm run update:components

빌드

npm run build

라이선스

MIT