import { Story, ArgTypes, Canvas } from '@storybook/addon-docs'
import { ChannelBtnSmileFilledIcon } from '@channel.io/bezier-icons'
import * as IconStories from './Icon.stories'

# Icon

## Overview

베지어 디자인 시스템에서 제공하는 아이콘 리소스입니다.

아이콘 단독으로 사용되거나, `bezier-react`의 다른 컴포넌트를 구성하는 기본 요소입니다.

<Canvas of={IconStories.Overview} />

### Naming

아이콘 이름은 다음과 같은 규칙을 가집니다. 일관성 있는 naming을 통해, 아이콘 이름을 검색해보지 않아도 쉽게 원하는 이름을 연상할 수 있습니다.

1. Name (chevron, arrow, ...)
2. Direction (left, right, ...)
3. Shape (circle, triangle, ...)
4. Status (off, disabled, ...)
5. Filled

**Example**

- `arrow-left`
- `bookmark`, `bookmark-filled`
- `check`, `check-circle`, `check-circle-filled`

모든 아이콘 목록을 확인하시려면 [스토리](/story/components-icon--all-icons)를 참조하세요.

## Usage

`Icon` 컴포넌트에 아이콘의 종류를 `source` prop으로 전달하여 사용합니다.

```tsx
import {
  Icon,
  ChannelBtnSmileFilledIcon,
} from '@channel.io/bezier-react'

<Icon
  source={ChannelBtnSmileFilledIcon}
  ...
/>
```

### Colors

`Icon` 컴포넌트에 color variant는 따로 정해져 있지 않습니다.
Semantic 색상을 `color` prop에 지정하여 아이콘이 어떤 색상으로 렌더링할지 결정합니다.

<Canvas of={IconStories.UsageColor} />

```tsx
<Icon
  source={ArrowLeftIcon}
  color="text-accent-blue"
/>
```

### Sizes

아이콘의 크기는 정사각형입니다. Normal (24x24) 크기를 기본으로 하며, `size` prop으로 아이콘의 크기를 지정할 수 있습니다.

아이콘의 크기를 지정할 때는 `IconSize` enum을 사용합니다.

<Canvas of={IconStories.UsageSize} />

```tsx
<Icon
  source={ArrowLeftIcon}
  size={IconSize.S}
/>
```

### Composite usage

`bezier-react`의 많은 컴포넌트는 아이콘을 포함하고 있습니다.
어떤 아이콘을 지정할지 커스터마이징할 수 있다면, 보통 `BezierIcon` type을 가지는 prop을 통해 지정하게 됩니다.

이에 대한 예시로는 `Button` 컴포넌트가 있습니다.
`Button`의 `leftContent`, `rightContent` prop에 `BezierIcon` 을 지정하면, 원하는 아이콘을 버튼에 표시할 수 있습니다.

```tsx
<Button
  leftContent={PlusIcon}
  text="Add content"
  rightContent={ArrowRightIcon}
/>
```

### How to add new icons to `bezier-react`

디자이너가 새로운 아이콘을 추가하거나, 기존의 아이콘을 변경한 경우 아이콘 리소스를 변경하여 배포가 이루어져야 합니다.

아이콘 리소스는 SVG 파일로 이루어져 있습니다.
이를 design tool 에서 직접 수동으로 다운로드 받을 수도 있지만, 이 프로세스를 자동화하기 위한 tool이 준비되어 있습니다.

아래 문서를 참고 바랍니다.

- [Integration with Figma](https://github.com/channel-io/bezier-react/tree/next-v1/packages/bezier-figma-plugin)

### Usage (Legacy)

`LegacyIcon` 컴포넌트와 `name` prop을 사용하는 패턴은 레거시 패턴입니다.

이 패턴으로 아이콘을 사용하는 경우, tree-shaking이 이루어지지 않기 때문에 모든 아이콘 리소스가 어플리케이션 번들에 포함되는 단점이 있습니다.

따라서, 이 패턴을 사용하고 있다면, 위의 예시처럼 `source` prop을 사용하는 `Icon` 컴포넌트로 마이그레이션이 이루어져야 합니다.

```tsx
// DON'T ❌
<LegacyIcon
  name="arrow-left"
  ...
/>

// DO ✅
<Icon
  source={ArrowLeftIcon}
  ...
/>
```

## Tips

### Margin

아이콘 주위에 margin이 필요한 경우, `styled(Icon)` 처럼 스타일을 overriding하여 margin을 작성할 수 있으나,
`marginTop`, `marginRight` 등의 prop을 지원하기 때문에 overriding 없이 작성할 수 있습니다.

<Canvas of={IconStories.TipsMargin} />

```tsx
<Icon
  source={ChannelBtnSmileFilledIcon}
  color="text-accent-blue"
  marginTop={16}
  marginRight={24}
  marginBottom={32}
  marginLeft={40}
/>
```

## API

<ArgTypes of={IconStories} />

## Version

- Available since v0.1.4