2021-02-04 16:27:16 +08:00
# [IconPark](http://iconpark.bytedance.com/official)
2020-08-27 17:02:57 +08:00
2020-08-29 00:59:28 +08:00
< div align = "center" >
2020-09-02 11:12:43 +08:00
< a href = "http://iconpark.bytedance.com/official" >
< img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/logo.svg" alt = "IconPark Logo" width = "384" height = "96" >
< / a >
2020-08-29 00:59:28 +08:00
< / div >
English | [简体中文 ](README.zh-CN.md )
2020-08-27 17:02:57 +08:00
2020-08-28 17:58:33 +08:00
## Introduction
2020-09-02 11:12:43 +08:00
2021-01-12 23:04:53 +08:00
IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icons.
2023-01-04 14:39:18 +08:00
Instead of using various SVG source files to achieve different themes, we implement a technology transforming attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including [`react-icons` ](./packages/react/README.md ), [`vue-icons` ](./packages/vue/README.md ) and [`svg-icons` ](./packages/vue/README.md ).
2020-09-02 11:12:43 +08:00
So whether you are a designer or a developer, you can use them in your designs or your projects for free.
< img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/icon-dance.gif" > < / img >
2020-08-29 00:59:28 +08:00
### Packages
2020-09-02 11:12:43 +08:00
#### Generate Cross-platform Components
2021-01-17 11:31:22 +08:00
Find packages in `packages` folder. NPM packages make it painless to import icon components to your project.
2020-09-02 11:12:43 +08:00
2020-12-27 03:16:05 +08:00
| Name | Github link | NPM link |
| ------- | --- | --- |
| React Icons | [React Component ](./packages/react/README.md ) | [@icon-park/react ](https://www.npmjs.com/package/@icon-park/react ) |
| Vue2 Icons | [Vue Component for old Vue2.0 ](./packages/vue/README.md ) | [@icon-park/vue ](https://www.npmjs.com/package/@icon-park/vue ) |
| Vue3 Icons | [Vue Component for Vue3.0 ](./packages/vue-next/README.md ) | [@icon-park/vue-next ](https://www.npmjs.com/package/@icon-park/vue-next ) |
| SVG Icons | [Pure SVG String ](./packages/svg/README.md )| [@icon-park/svg ](https://www.npmjs.com/package/@icon-park/svg ) |
2020-08-29 00:59:28 +08:00
#### Multiple themes
2020-09-02 11:12:43 +08:00
Basic coloring can be done by setting two attributes on the node: fill and stroke. Fill sets the color inside the object while stroke sets the color of the line drawn around the object. By changing this two attributes, you can transform a single SVG icon into different themes, including: `outline` , `filled` , `two-tone` , `multi-color` . Take the icon named `camera` for example:
2020-08-29 00:59:28 +08:00
Source file: 
After Transforming:
| React icons | Preview | Theme |
| ---- | --- | --- |
2020-09-02 12:01:08 +08:00
| ```<Camera theme="outline" size="32" fill="#000000"/>` `` | < img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_outline.png" width = "100" ></ img > | Outline theme |
| ```<Camera theme="filled" size="32" fill="#333"/>` `` | < img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_filled.png" width = "100" ></ img > | Filled theme |
| ```<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/>` `` | < img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_two-tone.png" width = "100" ></ img > | Two-tone theme |
| ```<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/>` `` | < img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_multi-color.png" width = "100" ></ img > | Multi-color theme |
2021-01-17 11:31:22 +08:00
#### 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.
2020-08-29 00:59:28 +08:00
### Website
2020-09-02 11:12:43 +08:00
#### Customization
2021-01-17 11:31:22 +08:00
Here is the website of [IconPark ](http://iconpark.bytedance.com/official ). Each icon is hand-coded within a 48x48 grid, using SVG stroke giving the maximum flexibility on styling. You can adjust the color, size, `stroke-width` , `stroke-linejoin` , `stroke-linecap` and other attributes to meet your needs.
2020-09-02 11:12:43 +08:00
< img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/screenshot.png" alt = "Screenshot of customization" > < / img >
2020-08-29 00:59:28 +08:00
2020-09-02 11:12:43 +08:00
#### Convenient Online Tools
2020-08-29 00:59:28 +08:00
2020-09-02 11:12:43 +08:00
> You can use them in Figma, Sketch, Photoshop, PPT, etc.
2020-08-27 17:02:57 +08:00
2020-08-29 22:09:33 +08:00
- Copy SVG
2020-09-02 11:12:43 +08:00
- Copy React Icon Component
- Copy Vue Icon Component
2020-08-29 22:09:33 +08:00
- Download PNG
- Download SVG
2020-08-29 00:59:28 +08:00
2020-09-04 12:40:34 +08:00
< img src = "https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/icon-tool.png" alt = "Icon Tools" width = "200px" > < / img >
2020-10-29 15:21:15 +08:00
2020-09-30 01:00:09 +08:00
### Changelog
2020-12-27 01:16:00 +08:00
[CHANGELOG.en-US ](CHANGELOG.en-US.md ) | [CHANGELOG.简体中文 ](CHANGELOG.zh-CN.md )
