IconPark Icons

> React Icons for IconPark

Introduction

$3

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

$3

Please visit IconPark Website
* Copy SVG
* Copy React Icon component
* Copy Vue Icon component
* Download PNG
* Download SVG

Getting Started

$3

``
npm install @icon-park/react --save
`

$3


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


`

$3


Import the icon style:
`typescript
import '@icon-park/react/styles/index.css';
`
Or

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

$3


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

`typescript jsx
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 (




)
}
`

$3

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

Set config like this:
`json
{
"plugins": [
[
"import",
{
"libraryName": "@icon-park/react",
"libraryDirectory": "es/icons",
"camel2DashComponentName": false
}
]
]
}
`

$3

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:

`typescript jsx
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 (





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

`typescript jsx
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 (
Not Exists
);
}

return (





)
}
`


$3


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 | note |
| ---------- | --- | --- | --- | --- |
| 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>`, such as:
* className
* style
* onClick
* ...