IconPark 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
IconPark 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
IconPark 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 Apache 2.0
开发语言 TypeScript
操作系统 跨平台
软件类型 开源软件
所属分类 应用工具开源图标
开源组织
地区 国产
投 递 者 罗奇奇
适用人群 未知
收录时间 2021-12-17

软件简介

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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部