open-index/open-npm huggingface dataset:
npm package: @subgame/react-icon-subgame
Description: react icon components for subgame
Author: SubGame Developers
Latest version: 1.0.3

## 安裝

### 依賴項目

此套件使用 [chakra-ui](https://chakra-ui.com/) 做為基底，所以需要安裝 [chakra-ui](https://chakra-ui.com/) 作為依賴項

```
 yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```

### 安裝套件

```
 yarn add @subgame/react-icon-subgame
```

## 使用方式

### 設定 `ChakraProvider`

參考官方文件 [Set up Provider](https://chakra-ui.com/docs/getting-started#set-up-provider)

```tsx
import * as React from "react";

import { ChakraProvider } from "@chakra-ui/react";

function App({ Component }) {
  return (
    <ChakraProvider>
      <Component />
    </ChakraProvider>
  );
}
```

### Icon 使用方法

```tsx
import React from "react";
import "./App.css";
import {
  IconFax,
  IconFilter,
  IconPin,
  IconWater,
} from "@subgame/react-icon-subgame";

function App() {
  return (
    <div className="App">
      <IconFax />
      <IconFilter />
      <IconPin />
      <IconWater />
    </div>
  );
}

export default App;
```

## 可用 Props

產生的 Icon 元件可用所有 svg 元素適用的 Props，以及 [chakra-ui 提供的 Style Props](https://chakra-ui.com/docs/features/style-props)，
除此之外，還可以另外使用以下兩個 Props 。

| name  | desc        |
| ----- | ----------- |
| color | Icon 的顏色 |
| size  | Icon 的大小 |