# @gitee/icons-react

> Gitee Icons React component

Latest version **0.1.49** (published 2023-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gitee/icons-react
pnpm add @gitee/icons-react
yarn add @gitee/icons-react
bun add @gitee/icons-react
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.49 |
| Published | 2023-06-09 |
| First published | 2023-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bluishoul@gmail.com |
| Maintainers | hapboy, nanzm, chenqiongqiong, lc-soft, haohao666, orangedays, javanoclaw, bluishoul, zhongjieling |
| Keywords | gitee, icon, react, iconify |

## Links

- npm: https://www.npmjs.com/package/@gitee/icons-react
- Repository: git@gitee.com:oschina/gitee-icons
- Homepage: https://gitee.com/oschina/gitee-icons
- Issues: https://gitee.com/oschina/gitee-icons/issues
- npm.io page: https://npm.io/package/@gitee/icons-react

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.3
- [@iconify/react](https://npm.io/package/@iconify/react.md) ^3.2.2

## 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
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 0.1.49 (latest) — 2023-06-09

## README

# @gitee/icons-react

基于 `@gitee/icons` 提供的 `IconifyIcon` 数据生成的 React 组件库。

## 如何使用

### 示例

请参考 [examples/nextjs](examples/nextjs)

### 安装

```shell
yarn add @gitee/icons-react
```

### 配置转译

由于 `@gitee/icons-react` 暴露的是 JSX 代码，所以需要配置编译工具对其进行转译。

#### Webpack

```js
rules: [
  {
    test: /\.[tj]sx?$/,
    exclude: {
      or: [/node_modules/, /bower_components/],
      not: [/node_modules\/@gitee\/icons-react/],
    },
    use: ["babel-loader"],
  },
  // other rules...
];
```

#### Next.js

```js
const withTM = require("next-transpile-modules")(["@gitee/icons-react"]);

module.exports = withTM({
  reactStrictMode: true,
});
```

### 在项目中使用

1. 按需引入

```jsx
import { IconApp } from "@gitee/icons-react";

function AComponent() {
  return (
    <div>
      <IconApp width={24} color="#909aaa" />
    </div>
  );
}
```

2. 批量引入

```jsx
import {
  IconProjectTypeKanban,
  IconProjectTypeScrum,
  IconProjectTypeStandard,
} from "@gitee/icons-react";

function IconProjectType(name) {
  switch (name) {
    case "project-type-kanban":
      return <IconProjectTypeKanban width={24} />;
    case "project-type-scrum":
      return <IconProjectTypeScrum width={24} />;
    case "project-type-standard":
      return <IconProjectTypeStandard width={24} />;
    default:
      return null;
  }
}

function AComponent() {
  return (
    <div>
      {[
        "project-type-kanban",
        "project-type-scrum",
        "project-type-standard",
      ].map((name) => (
        <IconProjectType name={name} />
      ))}
    </div>
  );
}
```

不推荐使用下面的方法批量引入（无法 Tree-Shaking），而使用按需引入。

```jsx
import Icon from "@gitee/icons-react/dist/icon";

function AComponent() {
  return (
    <div>
      {[
        "project-type-kanban",
        "project-type-scrum",
        "project-type-standard",
      ].map((name) => (
        <Icon key={name} name={name} width={24} />
      ))}
    </div>
  );
}
```

3. 全部引入

```jsx
import Icon, { iconNames } from "@gitee/icons-react/dist/icon";

function AComponent() {
  return (
    <div>
      {iconNames.map((name) => (
        <Icon key={name} name={name} width={24} />
      ))}
    </div>
  );
}
```

## 开发

1. 安装依赖：因为在项目最顶层使用了 `yarn workspace`，安装依赖请直接在顶层目录执行 `yarn`
2. 构建 `@gitee/icons` 依赖，由于使用了 Turborepo, 在顶层目录执行 `yarn build --filter=@gitee/icons` 即可
3. 修改 [templates](./templates) 目录中的 Handlebars 模板文件
4. 执行 `yarn build` 生成新的组件和类型文件。

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