@teamsparta/stack-icons/README.md

stack icons

# Icons

## Installation

```sh
pnpm add @teamsparta/stack-icons
```

```sh
yarn add @teamsparta/stack-icons
```

## 사용설명서

### 1. 변수명 예시

- v1
  - Figma Ag: arrow_drop_down, line, 16: `<ArrowDropDownLine size={16} color={"red"}/>`
  - Figma Ag: close_circle_fill, 20 => `<CloseCircleFill size={20} primaryColor={"red"} secondaryColor={"blue"}/>`
- v2
  - Figma 상 명시된 Icon Props들 중 ${Category}${Name}의 조합
  - ![Screenshot 2023-11-15 at 11 40 16 AM](https://github.com/TeamSparta-Inc/stack/assets/104753722/8ff33795-bf6d-4f9f-9c0b-f0ca32c75343)
  - 위 이미지에서의 아이콘 이름은 `ArrowChevronRightCircle`

### 2. Props

- v1
  - 아이콘 이름에 `line`이 있는 경우: `color`
  - 아이콘 이름에 `fill`이 있는 경우: `primaryColor & secondaryColor`
  - 색 관련 props 작성 안할 시, 기본색 (neutralDay.gray100) 제공
- v2
  - Figma에서 Style 존재 시, variant ('line' | 'fill') & size (16 | 20 | 24) 필수
  - Figma에서 Style 없을 시, size 필수
  - color props 작성 안할 시, 기본색 (neutralDay.gray90) 제공

### 3. 사용 방법 (auto complete)

```typescript

export const LoginPage = () => {
  return (
    <S.Wrapper>
      <ArrowChevronRightCircle size={16} variant={"line"} color={"red"}/>
    </S.Wrapper>
  )
}

```