阿里图标库批量下载iOS适配的图标
没有UI设计师精湛的技艺,很难设计出符合业务场景的图标,作为开发,确实拙计。
练手的项目可以完全可以降低标准,不必达到看图识意,生产上在再请专业UI出图也不失是一个好的方案。
阿里巴巴矢量图标库,就给了我们极大方便,😭。
阿里图网址:
可以使用微博,git,等第三方登陆
https://www.iconfont.cn/
根据自己的需要选择图标库类型,我一般选单色图标,然后再根据情况在下载时选择图标大小和颜色。
参考苹果的图标尺寸大小:
标准 tab bars 压缩 tab bars
69px × 69px (23pt × 23pt @3x) 51px × 51px (17pt × 17pt @3x)
46px × 46px (23pt × 23pt @2x) 34px × 34px (17pt × 17pt @2x)
默认选48px就可以,当作@2x 的图标来用。
然后可以,右键网页--检查,在网页的控制台输入全选图标的代码:
var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
console.log(span[i].querySelector('span').click());
}
会发现所有的图标都已被放入购物车,
然后打开购物车,选择合适的大小和颜色,再点击下方的SVG/AI/PNG就可以打包下载了对应文件格式压缩包了。
解压缩后,全选图标文件,右键重命名,可以在后面批量追加文字,例如_hilight,_disabled.@2x,@3x.
再拖进Xcode文件里就可以使用了。
普通图标颜色:1296db
hilight图标颜色:10d3ad
不可用图标颜色:707070
蒲公英的内测工具箱里有简单好用的App 图标批量导出工具:
http://static.pgyer.com/about/cooperation
可以选择一个自己喜欢的简易图标,下载1024x1024的图,然后上传,让系统切割好Icon,直接导入Xcode即可,方便快捷。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具