IconPark/packages/react/README.zh-CN.md

IconPark 图标

IconPark图标体系

介绍

新特性

• 提供超过1200图标
• 支持4种主题:
  • 线性
  • 填充
  • 双色
  • 四色

更多图标

请访问IconPark图标网站, 提供更多便捷的操作：

• 复制SVG源文件
• 复制React图标组件
• 复制Vue图标组件
• 下载PNG
• 下载SVG

快速上手

安装

npm install @icon-park/react --save

引用图标

在组件的上方引用@icon-park/react，并在组件的渲染函数中使用:

import {Home} from '@icon-park/react';

// examples
<Home/>
<Home theme="filled"/>

Style Sheet

引用预设样式

import '@icon-park/react/styles/index.css';

或者

import '@icon-park/react/styles/index.less';

全局

你可以使用 @icon-park/react 中的 IconProvider来设置全局配置。

import {IconProvider, DEFAULT_ICON_CONFIGS} from '@icon-park/react'
import {Home} from '@icon-park/react';

const IconConfig = {...DEFAULT_ICON_CONFIGS, prefix: 'icon'}

function App() {

    return (
        <IconProvider value={IconConfig}>
            <Home/>
            <Home theme="filled"/>
        </IconProvider>
    )
}

按需加载

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

配置如下:

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

使用Icon组件

我们更推荐使用按需加载的方式来加载图标，因为这样可以大幅度缩减编译后代码体积， 但是在有些类似远程加载的菜单的场景下，直接引用全部图标可以缩减开发成本。

使用方式：

import Icon, {IconType} from '@icon-park/react/es/all';
import React, {Fragment} from 'react';

export function Demo(props: {type: IconType}): JSX.Element {

    const {type} = props;

    return (
        <Fragment>
            <Icon type={type} theme="filled" />
            <Icon type="People" theme="filled" />
            <Icon type="Switch" />
        </Fragment>
    )
}

当你不确定type是否合法时，你可以这样做

import Icon, {ALL_ICON_KEYS, IconType} from '@icon-park/react/es/all';
import React, {Fragment} from 'react';

export function Demo(props: {type: IconType}): JSX.Element {

    const {type} = props;

    if(ALL_ICON_KEYS.indexOf(type) < 0) {
        return (
            <span>图标不存在</span>
        );
    }

    return (
        <Fragment>
            <Icon type={type} theme="filled" />
            <Icon type="People" theme="filled" />
            <Icon type="Switch" />
        </Fragment>
    )
}

属性

属性名称	介绍	类型	默认值	注释
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

其他属性 你可以使用定义的HTMLAttributes<HTMLSpanElement>>上的全部属性，比如：

• className
• style
• onClick
• ...