qpushbutton设置两个图标_字节跳动推出开源图标库IconPark

大名鼎鼎的抖音母公司字节跳动在近期发布了可以和阿里巴巴的IconFont很相似的图标库IconPark。

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

- 首页 -

- 地址 -

•Github地址

https://github.com/bytedance/IconPark

•官方地址

http://iconpark.bytedance.com/official

- 特性 -

•支持多种代码包

React component

Vue Component for Vue3.0

Vue Component for old Vue2.0

Pure SVG string

•同一图标支持多种主题

基本的换肤可以通过在元素上设置两个属性来搞定：fill属性和stroke属性。fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。通过改变不同path的这2个属性， 可以把一个SVG图标源文件变换出不同的主题。包括：线框、填充、双色、多色。

以React组件为例

•可视化的定制页面

打开IconPark官方网站即可看到所有的图标和相应的定制化操作栏，可以在线去更改颜色、大小、线框宽度、端点类型、拐点类型等属性

•多种方式使用或导出

1、复制SVG源码

2、复制React图标代码组件

3、复制Vue图标代码组件

4、下载PNG

5、下载SVG

更多详情请访问Github源地址仓库

- 联系与投稿 -

欢迎大家投稿分享各种便捷实用的或新奇有趣的前端工具库或插件

联系方式：公众号私信 或 发邮件到 FEZIRO@foxmail.com

- END -