@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
本项目使用 Babel 作为编译 JSX 语法的编译器,使用 Rollup 捆绑