mirror of
https://hk.gh-proxy.com/https://github.com/bytedance/IconPark.git
synced 2025-11-22 08:16:10 +08:00
92 lines
2.3 KiB
Markdown
92 lines
2.3 KiB
Markdown
# IconPark Icons
|
|
> Pure SVG Icons for IconPark
|
|
|
|
## Introduction
|
|
|
|
### Features
|
|
* Provide more than 2000 icons
|
|
* Provide 4 themes:
|
|
* outline
|
|
* filled
|
|
* two-tone
|
|
* multi-color
|
|
|
|
### More
|
|
Please visit [IconPark Website](http://iconpark.bytedance.com)
|
|
* Copy SVG
|
|
* Copy React Icon component
|
|
* Copy Vue Icon component
|
|
* Download PNG
|
|
* Download SVG
|
|
|
|
## Getting Started
|
|
### Install
|
|
|
|
```
|
|
npm install @icon-park/svg --save
|
|
```
|
|
|
|
### Include Component
|
|
Import an icon from `@icon-park/svg` and then call it:
|
|
|
|
```
|
|
import {Home} from '@icon-park/svg';
|
|
|
|
// examples
|
|
|
|
const svg = Home({theme: 'outline'});
|
|
|
|
console.log(svg);
|
|
```
|
|
|
|
### Global Config
|
|
You can use the static methods `setConfig` in `@icon-park/svg` to set the default config globally:
|
|
|
|
```typescript
|
|
import {setConfig} from '@icon-park/svg'
|
|
|
|
setConfig({
|
|
theme: 'outline',
|
|
size: '1em',
|
|
strokeWidth: 4,
|
|
strokeLinecap: 'round',
|
|
strokeLinejoin: 'round',
|
|
outStrokeColor: '#000',
|
|
outFillColor: '#2F88FF',
|
|
innerStrokeColor: '#FFF',
|
|
innerFillColor: '#43CCF8'
|
|
})
|
|
```
|
|
|
|
### Import on Demand
|
|
|
|
You can use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import icons on demand.
|
|
|
|
Set config like this:
|
|
```json
|
|
{
|
|
"plugins": [
|
|
[
|
|
"import",
|
|
{
|
|
"libraryName": "@icon-park/svg",
|
|
"libraryDirectory": "es/icons",
|
|
"camel2DashComponentName": false
|
|
}
|
|
]
|
|
]
|
|
}
|
|
```
|
|
### 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 | 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 |
|
