介绍
这是一个图标库,上面的所有图标完全开源,皆可商用!该图标库还支持自定义图标,你可以随意设置图标的边框、大小、风格、颜色等属性。在无障碍浏览和性能方面该库也做了充足的优化,它与众不同!
![非常流行的开源图标库,完全开源免费,可商用——ikonate](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
Github
https://github.com/mikolajdobrucki/ikonate
是什么让Ikonate与众不同?
- 完全可定制化
我们很难找到一个完美的图标集,尤其是免费图标集。Ikonate图标可以轻松调整,以满足正在设计的品牌或产品的需求
![非常流行的开源图标库,完全开源免费,可商用——ikonate](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
- 无障碍友好型
Ikonate是第一个这样的图标集,旨在完全可访问*并帮助使产品更具包容性,对每个人都有用。
![非常流行的开源图标库,完全开源免费,可商用——ikonate](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
- 性能优越,易用性高
在互联网上找到的大多数图标都充斥着大量无用的代码,只会降低你的代码性能。Ikonate图标开箱即用。
![非常流行的开源图标库,完全开源免费,可商用——ikonate](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
- 完全开源免费
Ikonate完全开源,你可以到Github获取最原始的代码,完全可商用
![非常流行的开源图标库,完全开源免费,可商用——ikonate](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
安装使用
可以手动克隆仓库到项目中安装
git clone https://github.com/eucalyptuss/ikonate.git
也可以使用npm管理
npm install ikonate npm install npm run build
- DEMO和文件结构
原始SVG,所有图标都可以在./ikonate/icons中作为原始的,没有样式的SVG使用
演示文件:
演示分别在
./ikonate/build/inline/index.html和
./ikonate/build/sprite/index.html下提供。如果直接在浏览器中打开精灵演示,则可能无法正确显示图标。要正确打开,需要在服务器环境下打开,建议演示可以使用live-server。
用法
- 作为img标签或者background-image使用
要将图标生成为单独的样式svg文件,可访问官方网站。使用图标作为或background-image,则无法使用CSS自定义它们。
- 内联SVG
要将图标用作内联svg,请使用适合您项目的技术从./ikonate/icons导入所需的图标。使用此方法,可以稍后使用CSS自定义图标。
- SVG sprite
也可以自定义CSS
- 定制
要使用CSS自定义图标,需要将图标用作内联SVG或SVG sprite。可以使用以下CSS参数来自定义图标:
- width
- height
- stroke
- stroke-width
- stroke-linecap
- stroke-linejoin
例如:
width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
在线图标生成
在官方网站上可在线导出SVG
![非常流行的开源图标库,完全开源免费,可商用——ikonate](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
你可以根据自己的需要设置边框、尺寸、颜色等,如下:
![非常流行的开源图标库,完全开源免费,可商用——ikonate](http://www.yixao.com/wp-content/themes/exou/themer/assets/images/lazy.png)
总结
ikonate是一个及其优秀的开源图标库,你可以用在任何时候任何地方,完全免费,送给不爱写代码的设计师!如果你有这样的需求,不妨尝试一下!
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/21731.html