IconPark Icons

React Icons for IconPark

Introduction

Features

Provide more than 2000 icons
Provide 4 themes:
- outline
- filled
- two-tone
- multi-color

Copy SVG
Copy React Icon component
Copy Vue Icon component
Download PNG
Download SVG

Getting Started

Install

npm install @icon-park/react --save

Include Component

Import an icon from @icon-park/reactat the top of a component and then use it in the render function:

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

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

Style Sheet

Import the icon style:

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

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

Global Config

You can use IconProvider in @icon-park/react to set the default config globally:

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>
    )
}

Import on Demand

You can use babel-plugin-import to import icons on demand.

Set config like this:

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

Icon Component

We recommend loading icons on demand, because this can greatly reduce the volume of compiled code。 However, in some scenarios similar to remote loading menus, direct reference to all icons can reduce the development cost.

Usage:

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="AddText" theme="filled" />
            <Icon type="add-text" />
        </Fragment>
    )
}

You can do this when you are not sure whether the type property is legal:

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>Not Exists</span>
        );
    }

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

Embed IconPark in your project

If you need to use additional information such as icon name, author, category, label and creation time, you can use the icons.json file located in the root directory of each NPM.

Props

prop	description	type	default
theme	Theme of the icons.	'outline' \| 'filled' \| 'two-tone' \| 'multi-color'	'outline'
size	The width/height of the icon	number \| string	'1em'
spin	Rotate icon with animation	boolean	false
fill	Colors of theme	string \| string[]	'currentColor'
strokeLinecap	the stroke-linecap prop of svg element	'butt' \| 'round' \| 'square'	'round'
strokeLinejoin	the stroke-linejoin prop of svg element	'miter' \| 'round' \| 'bevel'	'round'
strokeWidth	the stroke-width prop of svg element	number	4

Other props

You can use all props which are defined in HTMLAttributes<HTMLSpanElement>>, such as:

className
style
onClick
...

Gitee 极速下载 / IconPark

IconPark Icons

Introduction

Features

More

Getting Started

Install

Include Component

Style Sheet

Global Config

Import on Demand

Icon Component

Embed IconPark in your project

Props

简介

发行版

贡献者

近期动态

Gitee 极速下载 / IconPark .gitee-modal { width: 500px !important; }

IconPark Icons

Introduction

Features

More

Getting Started

Install

Include Component

Style Sheet

Global Config

Import on Demand

Icon Component

Embed IconPark in your project

Props

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

Gitee 极速下载 / IconPark