IconParkIcon 库与制作工具
IconPark 提供了超过 2000 个高质量图标，并且提供了一个界面来帮你定制图标，由字节跳动开源。
与使用各种SVG源文件来达到换肤效果的方案不同的是，IconPark 实现了一种创新性的技术， 通过改变一个 SVG 文件的属性来变换出多种主题。并且支持跨平台导出多种图标代码库，方便您在代码中以组件的形式按需引用，比如 react-icons, vue-icons and svg-icons. 所以不管您是设计师还是开发者，都可以在您的项目中去使用IconPark.
代码库
多种代码包
可以在packages文件夹下面找到，你可以应用在你的React、Vue、小程序等不同类型项目中使用
| 名称 | Github查看 | NPM包地址 |
|---|---|---|
| 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 |
多种主题
基本的换肤可以通过在元素上设置两个属性来搞定：fill属性和stroke属性。fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。通过改变不同path的这2个属性， 你可以把一个SVG图标源文件变换出不同的主题。包括：线框、填充、双色、多色。拿一个叫"照相机"的图标来举个例子：
源文件效果:
变换之后效果，以React版图标库为例：
| React版图标库 | 预览效果 | 对应主题 |
|---|---|---|
<Camera theme="outline" size="32" fill="#000000"/> |
线框主题 | |
<Camera theme="filled" size="32" fill="#333"/> |
填充主题 | |
<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/> |
双色主题 | |
<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF','#43CCF8']}/> |
多色主题 |
将IconPark嵌入到你的项目中
如果你的项目中需要使用到图标名称，作者，分类，标签以及创建时间等额外的信息，你可以使用位于每个NPM根目录的icons.json文件。
网站
定制化
这里是网站IconPark，每一个图标都被手绘在一个48*48的格子里，通过使用SVG 边框属性确保了最大范围的样式灵活性。 你可以在线去更改颜色、大小、线框宽度、端点类型、拐点类型等属性
便捷操作
你可以应用在 Figma, Sketch, Photoshop, PPT等等场景里，这里有一些快捷操作：
- 复制SVG源码
- 复制React图标代码组件
- 复制Vue图标代码组件
- 下载PNG
- 下载SVG
评论