Ionic Framework 内置的图标库,免费开源、数量多,性能还不错,无论是开发还是设计,都是一个优质的资源。

关于 Ionicons

Ionicons 是一个完全开源的图标集,是知名混合开发框架 Ionic Framework 内置的图标库,包含 1300 个为 Web / iOS / Android 和桌面应用程序专门定制的图标。Ionic Framework 是一个跨平台的混合开发和 Web App 框架,这个框架之前写过的文章 vonic 中有提到过,简单地说就是使用 javascript 和 html5 来开发 APP 的框架,在国外使用的开发者很多。

同时 Ionicons 这套图标库是一个独立的项目,完全可以脱离 Ionic Framework 单独使用。

Ionicons 亮点盘点

  • 包含 1300 个设计优雅、风格统一的高质量图标,能满足大多数的业务场景
  • 在 web 平台上使用具有高性能的按需加载机制,只加载需要的图标资源,无需手动配置
  • 提供 filled、outline、sharp 三种不同风格的变体,适应不同的设计场景,开发中甚至可以为不同手机平台设置不同的风格的图标,适配对应手机系统的设计规范

设计师怎么用

Ionicons 官网的右上角为设计师提供了所有图标打包下载的功能,图标源文件格式为通用的 SVG 格式,满足了设计师学习临摹和二次修改的需求。

开发上手使用体验

以 web 开发为例,如果我们使用的是 Ionic Framework 框架来开发应用,不需要安装就可以直接使用了,国内一般用 Ionic 比较少,所以我们想要在自己项目中使用 Ionicons 这套图标库,只需要引入 script 标签即可:

默认是以 module 方式引入,当然下面的 nomodule 是为了兼容不支持 module 的老版本浏览器。

只需要给 ion-icon 标签设置对应的 name 属性即可:

在 Ionic Framework 中使用图标时,我们还可以为每个平台指定不同的图标:

设置图标大小、颜色等更多用法:

之前我推荐过不少免费开源、可商用的图标库,原因是在很多前端 UI 组件库中,图标这块大多都缺失,像 Element UI 这样内置图标库的,往往具有一定的品牌特性,数量不多,开发过程中经常找不到合适的图标。而 Ionicons 的图标数量不仅多,覆盖也很全面,自动按需加载的机制也让开发者省心。

免费开源和商用说明

Ionicons 是 Ionic Framework 开发框架内置的图标库,由研发团队独立设计,SVG 源文件的代码基于 MIT 开源协议完全免费开源,任何个人和公司都可以免费下载用于自己的项目,包括商业项目。

原文链接:https://www.thosefree.com/ionicons

Ionicons - Ionic 出品的免费开源、高性能图标库,适用于 web / APP / 桌面应用相关推荐

  1. Radix Icons - 一组优雅细腻的免费开源线性图标库

    一组漂亮的图标库,不仅可以用于开发应用,在PPT / 报告 / 海报中使用这些图标,也会让成品锦上添花,值得收藏留用. 关于 Radix Icons Radix Icons 是一组基于 15×15 像 ...

  2. xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件,内置解析器、也能节省流量

    一个功能强大,符合国内视频播放业务的 web 视频播放组件,由西瓜视频技术团队官方出品. 关于西瓜播放器 西瓜播放器 (xgplayer.js) 不是一个看片软件,而是一个 Web 开发上的视频播放器 ...

  3. bootstrap搜索框_Bootstrap 开源 SVG 图标库 Bootstrap Icons

    Bootstrap 开源了首套 SVG 图标库 Bootstrap Icons,其团队表示这是有史以来第一次拥有自己的图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在 ...

  4. vant组件搜索并选择_Vant Weapp - 有赞出品的免费开源微信小程序组件库

    轻量可靠的小程序UI组件库,主流移动组件库 Vant 的微信小程序版本. Vant Weapp 和 Vant 的区别 之前推荐过的移动端web组件库 Vant 是 Vue.js 版本的,其对内承载了有 ...

  5. bootstrap 点击图片放大查看_Bootstrap 开源 SVG 图标库 Bootstrap Icons

    (给程序员的那些事加星标) 转自:开源中国 Bootstrap 开源了首套 SVG 图标库 Bootstrap Icons,其团队表示这是有史以来第一次拥有自己的图标库,此图标库起初专门针对其从表单控 ...

  6. WeUI - 微信官方推出的免费开源 UI 组件库,上手简单,风格简约,在微信生态开发轻量项目的绝佳选择

    微信早年发布的 UI 框架,对想要创建让微信用户感到熟悉的应用来说,是一个好选择. 关于 WeUI WeUI 一款由腾讯微信团队开发的 UI 组件库,是一套同微信原生视觉体验一致的基础样式库,由微信官 ...

  7. 如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中,拿走不谢

    登录Iconfont-阿里巴巴矢量图标库 官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...

  8. iconfont在ionic中的使用(阿里图标库)

    iconfont在ionic中的使用: 1.进入iconfont官方网址后 2.搜索你想要的图标,添加到购物车(前提:是已经登录,这里可以使用github注册登录) 3.点击购物车创建项目并下载到本地 ...

  9. java怎么引入矢量图标库_java web开发怎样调用visual graph的图库

    展开全部 第一步:安装Visual Graph 首先点击Visual Graph目录上的注册e69da5e6ba90323131333532363134313032313635333133336339 ...

  10. 盘点那些免费开源、无比精致的图标库,无论是设计还是开发,都很好用

    之前分享过很多好看精致的图标库,这对日常设计和开发工作,都很方便,欢迎大家尝试. css.gg 详细介绍:https://www.thosefree.com/css-gg 一套漂亮的纯 CSS 实现的 ...

最新文章

  1. 企业网站着手准备网站推广前如何识别目标用户需求?
  2. S5PV210的启动过程
  3. OpenResty-Nginx安装目录介绍
  4. MYSQL:如何正确高效的使用 MySQL 索引?
  5. 创建下标为1-10的整形数组
  6. 文件描述符和fcntl及阻塞非阻塞
  7. Centos7完全分布式搭建Hadoop2.7.3
  8. mvc 扫描jar jsp_SpringBoot+jsp项目启动出现404
  9. gcd 最大公约数 和 lcm 最小公倍数
  10. react package.json 修改proxy进行前端跨域,通过修改homepage,更改打包路径
  11. 使用VS Code插件Code Runner一键运行ANSYS命令流
  12. 微信公众号网页授权登录
  13. php中怎样添加文字水印,php给图片添加文字水印
  14. Unity笔记-05
  15. centos在图形界面和命令行之间切换的快捷键是什么?
  16. office2010专业版
  17. Proteus做C51最小系统的仿真
  18. excel操作技巧:“自定义名称”应用基础篇
  19. 2022-我的秋招之旅
  20. [转载]穿透还原卡和还原软件

热门文章

  1. ISAPI_Rewrite
  2. python获得字符串长度的函数_python字符串函数
  3. MFC 对话框常用控件详解
  4. 利尔达芯智行智能BMS系统方案,让电池的“大脑”更聪明
  5. 税务会计实务【19】
  6. html网页在线加密解密工具源码
  7. eBay月入五万以上大卖家请进,解决你的提现和结汇问题!
  8. chrome浏览器安装油猴插件全过程
  9. 全自动高清录播服务器,全自动高清录播服务器 高清录播系统
  10. E1--千兆以太网接口测试应用2022-09-07