@aloudata/icons-svg NPM

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