# @subgame/react-icon-subgame

> react icon components for subgame

Latest version **1.0.3** (published 2022-03-14) · Apache-2 license · 0 weekly downloads

## Install

```sh
npm install @subgame/react-icon-subgame
pnpm add @subgame/react-icon-subgame
yarn add @subgame/react-icon-subgame
bun add @subgame/react-icon-subgame
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-03-14 |
| First published | 2021-10-07 |
| Weekly downloads | 0 |
| License | Apache-2 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 363.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | SubGame Developers |
| Maintainers | paulpaul456, subgame-network, y920075 |
| Keywords | react, icons, svg, inline, figma, design |

## Links

- npm: https://www.npmjs.com/package/@subgame/react-icon-subgame
- Homepage: http://subgame.org/
- npm.io page: https://npm.io/package/@subgame/react-icon-subgame

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [framer-motion](https://npm.io/package/framer-motion.md) ^4
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11
- [@chakra-ui/react](https://npm.io/package/@chakra-ui/react.md) ^1.6.5
- [styled-components](https://npm.io/package/styled-components.md) ^5.1.1
- [clipboard-polyfill](https://npm.io/package/clipboard-polyfill.md) ^3.0.2
- [@babel/plugin-transform-react-jsx](https://npm.io/package/@babel/plugin-transform-react-jsx.md) ^7.12.17

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-03-14
- 1.0.2 — 2021-10-08
- 1.0.1 — 2021-10-08
- 1.0.0 — 2021-10-07

## README

## 安裝

### 依賴項目

此套件使用 [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 的大小 |

---
_Source: https://npm.io/package/@subgame/react-icon-subgame · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._