免费开源、高性能的图标库:Ionicons
原文链接:https://cloud.tencent.com/developer/article/2184178
它适用于web、APP和桌面应用。
关于 Ionicons
Ionicons
是一个国外知名混合开发框架 Ionic Framework
内置的图标库。 它包含 1300 个为 Web
、iOS
、Android
和桌面应用程序
专门定制的图标。
同时 Ionicons
这套图标库是一个独立的项目,完全可以单独使用。
Ionicons
亮点盘点
- 包含
1300+个
、图标,能满足大多数的业务场景 - 具有高性能的
按需加载
机制,只加载需要的图标资源,无需手动配置 - 提供
filled
、outline
、sharp
三种不同风格的变体,类型丰富 -
-
开发上手
安装
在自己项目中使用
Ionicons
这套图标库,只需要引入script
标签即可: -
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
图标使用
给
<ion-icon />
标签设置对应的name 属性
即可: -
<ion-icon name="heart"></ion-icon>
我们还可以用
不同变体
适合各种平台: -
< ion-icon name = "heart" > </ ion-icon > <!--filled--> < ion-icon name = "heart-outline" > </ ion-icon > <!--outline--> < ion-icon name = "heart-sharp" > </ ion-icon > <!--sharp-->
设置图标大小和颜色:
<!-- 通过属性设置图标大小 --> <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> <!-- 通过css设置图标大小和颜色 --> ion-icon { font-size: 64px; color: blue; }
<!-- 通过属性设置图标大小 -->
<ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon>
<!-- 通过css设置图标大小和颜色 -->
ion-icon { font-size: 64px; color: blue; }
< ion-icon src = "/path/to/external/file.svg" > </ ion-icon >
二开使用
Ionicons
官网的右上角为设计师提供了所有图标打包下载的功能,图标源文件格式为通用的 SVG 格式,满足了设计师学习临摹和二次修改的需求。
其他
Ionicons
的图标数量不仅多,覆盖也很全面。使用起来简单、快捷、方便,自动按需加载的机制也让开发者很省心。有兴趣的小伙伴们,可以查看下它的官网。
Ionicons
官方文档 https://ionic.io/ionicons
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
2023-11-20 xls和xlsx的文件有什么区别
2023-11-20 功能“合并赋值”在 C 7.3 中不可用。请使用 8.0 或更高的语言版本。
2023-11-20 未安装项目的目标框架
2023-11-20 项目的默认 XML 命名空间必须为 MSBuild XML 命名空间。如果项目是用 MSBuild 2003 格式---.Net_C#_若依.Net版Web框架使用及改造001
2022-11-20 怎么打开SQL server配置管理器
2022-11-20 数据库热备和冷备的区别是什么