IconPark

English 简体中文

介绍

IconPark提供了超过1400个高质量图标,并且提供了一个界面来帮你定制图标。与使用各种SVG源文件来达到换肤效果的方案不同的是,我们实现了一种创新性的技术, 通过改变一个SVG文件的属性来变换出多种主题。并且支持跨平台导出多种图标代码库,方便您在代码中以组件的形式按需引用,比如 react-icons, vue-icons and svg-icons. 所以不管您是设计师还是开发者,都可以在您的项目中去使用IconPark.

</ifram>

代码库

多种代码包

可以在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"/> | </img> | 线框主题 | | <Camera theme="filled" size="32" fill="#333"/> | </img> | 填充主题 | | <Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/> | </img> | 双色主题 | | <Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/> | </img> | 多色主题|

网站

定制化

这里是网站IconPark,每一个图标都被手绘在一个48*48的格子里,通过使用SVG 边框属性确保了最大范围的样式灵活性。 你可以在线去更改颜色、大小、线框宽度、端点类型、拐点类型等属性

</img>

便捷的工具

你可以应用在 Figma, Sketch, Photoshop, PPT等等场景里,这里有一些快捷操作:

</img>

变更记录

CHANGELOG.en-US | CHANGELOG.zh-CN

联系

</img> </img>