IconPark（一）：可换肤的图标库，Less is more

介绍

IconPark是字节跳动研发的致力于解决研发和设计效率的图标工具，经过一年打磨，提供了近1300个高质量图标。与使用多个SVG源文件达到换肤效果不同的是，我们希望使用尽可能少的文件，来满足更多的使用场景，Less is more，于是实现了一种根据单一SVG源文件变换多种主题的技术方案，及导出多种图标代码库，方便您在代码中以组件的形式按需引用，比如React Icons，Vue Icons， SVG Icons。不管您是设计师还是开发者，都可以在您的项目中去使用IconPark.

（1）传统换肤方案，以 ** terial.io为例：

同一个图标的4种风格，需要4个SVG源文件，切换左侧Themes，可以看到不同风格的图标：

（2）IconPark换肤：

同一个图标，只需一个SVG源文件。不同主题进行不同的颜色匹配，来得到不同风格的图标：

根据单一SVG源文件实现的多主题换肤效果优势

1. 高质量

提供近1300高质量图标， ** ，此处给我们勤劳的设计师们点赞~o(￣▽￣)ｄ

2. 多主题

根据单一SVG源文件变换多主题，包括四种类型：线框、填充、双色、多色。比如针对一个叫camera的SVG图标

（1）源文件

照相机icon的源文件照相机icon的源文件，预览效果

（2）变化之后

针对设计师同学，很简单，直接在官方图标库中在线配置，切换图标风格；

针对技术同学，选择需要所需语言的图标代码库，每个图标都能以一个单独的组件去按需引用

假如是应用在React项目中，确保提前已下载React Icons，以下4个case是针对React场景，Vue等场景类似不再赘述

2.1. 线框主题

<Camera theme="outline" size="32" fill="#000000"/> 线框主题Icon

2.2. 填充主题

<Camera theme="filled" size="32" fill="#333"/> 填充主题Icon

2.3. 双色主题

<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/>双色主题Icon

2.4. 多色主题

<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/>多色主题Icon

3. 跨平台

支持导出不同代码库，满足React/Vue/SVG/m移动端/小程序等多种开发场景使用

3.1. Github

React componentVue componentPure SVG string

3.2. NPM

@icon-park/react@icon-park/vue@icon-park/svg

4. 定制化

在线定制图标样式，每一个图标都被绘制在一个48*48的格子里，你可以在线去更改颜色、大小、线框宽度、端点类型、拐点类型等属性

5. 高效率

丰富的可视化交互，方便用户快速操作图标，直接拿去Sketch、PPT 、 ** 组件代码在React/Vue项目中去使用

** SVG源码 ** React图标代码组件 ** Vue图标代码组件下载PNG下载SVG最后

欢迎大家体验和交流。(✪ω✪)

Github地址：https://github.com/bytedance/IconParkNPM下载地址：@icon-park/react@icon-park/vue@icon-park/svg下期介绍

后续几期会继续介绍换肤技术的由来、实现和应用。