MotuCloud/IconPark
0
0
Fork 0
mirror of https://hk.gh-proxy.com/https://github.com/bytedance/IconPark.git synced 2026-07-26 13:07:40 +08:00
Code Issues Projects Packages Activity Actions
🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons http://iconpark.bytedance.com/
101 commits 11 branches 41 tags 14 MiB
  • TypeScript 100%
Find a file
Exact
AppleMonkey2019 f136487144 fix(readme): update README
2021-01-12 23:37:28 +08:00
build feat(icon): add 9 icons, update 80 icons, support for ByteMD Editor 2021-01-12 23:04:53 +08:00
packages fix(readme): update README 2021-01-12 23:37:28 +08:00
source feat(icon): add 9 icons, update 80 icons, support for ByteMD Editor 2021-01-12 23:04:53 +08:00
types/gulp-babel feat(Icon): add 1342 icons 2020-08-27 17:02:57 +08:00
.gitignore feat(Icons): update icon source file 2020-08-28 18:09:06 +08:00
CHANGELOG.en-US.md feat(icon): add 9 icons, update 80 icons, support for ByteMD Editor 2021-01-12 23:04:53 +08:00
CHANGELOG.zh-CN.md feat(icon): add 9 icons, update 80 icons, support for ByteMD Editor 2021-01-12 23:04:53 +08:00
gulpfile.ts fix(All): fixed a gulp build error. 2020-09-30 00:36:40 +08:00
lerna.json v1.2.1 2021-01-12 23:18:59 +08:00
LICENSE feat(Icon): add 1342 icons 2020-08-27 17:02:57 +08:00
package.json feat(Vue3): add vue-next to support vue3.0 2020-09-29 23:59:40 +08:00
README.md feat(icon): add 9 icons, update 80 icons, support for ByteMD Editor 2021-01-12 23:04:53 +08:00
README.zh-CN.md feat(icon): add 9 icons, update 80 icons, support for ByteMD Editor 2021-01-12 23:04:53 +08:00
tsconfig.json feat(Icon): add 1342 icons 2020-08-27 17:02:57 +08:00

README.md

IconPark

English | 简体中文

Introduction

IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icons. 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, vue-icons and svg-icons. So whether you are a designer or a developer, you can use them in your designs or your projects for free.

Packages

Generate Cross-platform Components

Find packages in packages folder. NPM packages make it painless to import icon components to your project.

Name Github link NPM link
React Icons React Component @icon-park/react
Vue2 Icons Vue Component for old Vue2.0 @icon-park/vue
Vue3 Icons Vue Component for Vue3.0 @icon-park/vue-next
SVG Icons Pure SVG String @icon-park/svg

Multiple themes

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:

Source file:

After Transforming:

React icons Preview Theme
<Camera theme="outline" size="32" fill="#000000"/> Outline theme
<Camera theme="filled" size="32" fill="#333"/> Filled theme
<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/> Two-tone theme
<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/> Multi-color theme

Website

Customization

Here is the website of IconPark. 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.

Screenshot of customization

Convenient Online Tools

You can use them in Figma, Sketch, Photoshop, PPT, etc.

  • Copy SVG
  • Copy React Icon Component
  • Copy Vue Icon Component
  • Download PNG
  • Download SVG

Icon Tools

Changelog

CHANGELOG.en-US | CHANGELOG.简体中文

Contact Us

Lark

Wechat