@luckrya/icon-box-react

React Svg Icon Components

安装

npm install @luckrya/icon-box-react

引用图标

import { AlertFilled } from "@luckrya/icon-box-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": "@luckrya/icon-box-react",
        "libraryDirectory": "build/esm/icons"
      }
    ]
  ]
}

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

属性

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

打包工具选择说明

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

介绍全新的 JSX 转换

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