IconPark 图标

IconPark 图标体系

快速上手

安装

npm install @aloudata/icons-react/svg --save

引用图标

引用@aloudata/icons-react/svg，并渲染函数对应的图标:

import {Home} from '@aloudata/icons-react/svg';

// examples

const svg = Home({theme: 'outline'});

console.log(svg);

全局

你可以使用 @aloudata/icons-react/svg 中的 setConfig方法来设置全局配置。

import { setConfig } from "@aloudata/icons-react/svg";

setConfig({
    theme: "outline",
    size: "1em",
    strokeWidth: 4,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    outStrokeColor: "#000",
    outFillColor: "#2F88FF",
    innerStrokeColor: "#FFF",
    innerFillColor: "#43CCF8"
});

按需加载

可以使用babel-plugin-import来按需加载图标

配置如下:

{
    "plugins": [
        [
            "import",
            {
                "libraryName": "@aloudata/icons-react/svg",
                "libraryDirectory": "es/icons",
                "camel2DashComponentName": false
            }
        ]
    ]
}

将 IconPark 嵌入到你的项目中

如果你的项目中需要使用到图标名称，作者，分类，标签以及创建时间等额外的信息，你可以使用位于每个 NPM 根目录的icons.json文件。

属性

| 属性名称 | 介绍 | 类型 | 默认值 | 注释 | | -------------- | ------------------------------------------- | ---------------------------------------------------------------- | -------------- | ---- | | theme | 图标主题 | 'outline' | 'filled' | 'two-tone' | 'multi-color' | 'outline' | | size | 图标的大小，宽高相同 | number | string | '1em' | | spin | 给图标加旋转效果 | boolean | false | | fill | 图标的颜色，不超过 4 个颜色，默认为当前颜色 | string | string[] | 'currentColor' | | strokeLinecap | svg 元素的 stroke-linecap 属性 | 'butt' | 'round' | 'square' | 'round' | | strokeLinejoin | svg 元素的 stroke-linejoin 属性 | 'miter' | 'round' | 'bevel' | 'round' | | strokeWidth | svg 元素的 stroke-width 属性 | number | 4 |