@ahcloud/icon-react

React Svg Icon Components

安装

npm install @ahcloud/icon-react

引用图标

import { AlertFilled } from "@ahcloud/icon-react";

export default function App() {
  return (
    <div class="root">
      <AlertFilled size={24} />
    </div>
  );
}

import * as ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

自动按需引用图标

可以使用 babel-plugin-import 来按需加载图标。 配置 .babelrc

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@ahcloud/icon-react",
        "libraryDirectory": "build/esm/icons"
      }
    ]
  ]
}

import { AlertFilled } from "@ahcloud/icon-react";
////                  👇🏻                        ////
import AlertFilled from "@ahcloud/icon-react/build/esm/icons/alert-filled";

属性

| 属性名称 | 说明 | 类型 | 默认值 | | -------- | -------------------- | --------------- | -------------- | | size | 图标的大小，宽高相同 | number， string | '24px' | | color | 图标的颜色， | string | 'currentColor' |

打包工具选择说明

Create React App 和 Next.js 默认使用 Webpack 它们在内部集成了 Babel

介绍全新的 JSX 转换

本项目使用 Babel 作为编译 JSX 语法的编译器，使用 Rollup 捆绑