@gitee/icons-react

@gitee/icons-react

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

如何使用

示例

请参考 examples/nextjs

安装

yarn add @gitee/icons-react

配置转译

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

Webpack

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

Next.js

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

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

在项目中使用

• 按需引入

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

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

• 批量引入

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），而使用按需引入。

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>
  );
}

• 全部引入

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

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

开发

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