代码拉取完成，页面将自动刷新
React Icons for IconPark
Please visit IconPark Website
npm install @icon-park/react --save
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"/>
Import the icon style:
import '@icon-park/react/styles/index.css';
Or
import '@icon-park/react/styles/index.less';
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>
)
}
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
}
]
]
}
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>
)
}
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.
| 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<HTMLSpanElement>>, such as:
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手