Ionic Framework出品，简单、实用、省心!

2022-12-02 10:29:36 浏览数 (1)

大家好，我是前端实验室的大师兄!

今天再给大家分享一款免费开源、高性能的图标库：Ionicons

它适用于web、APP和桌面应用。

关于 Ionicons

Ionicons 是一个国外知名混合开发框架 Ionic Framework 内置的图标库。 它包含 1300 个为 Web、iOS、Android 和桌面应用程序专门定制的图标。

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

Ionicons 亮点盘点

  • 包含1300 个、图标，能满足大多数的业务场景
  • 具有高性能的按需加载机制，只加载需要的图标资源，无需手动配置
  • 提供filled、outline、sharp 三种不同风格的变体，类型丰富

开发上手

安装

在自己项目中使用 Ionicons 这套图标库，只需要引入 script 标签即可：

代码语言：javascript复制
<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 属性即可：

代码语言：javascript复制
<ion-icon name="heart"></ion-icon>

我们还可以用不同变体适合各种平台：

代码语言：javascript复制
< ion-icon  name = "heart" > </ ion-icon >  <!--filled--> 
< ion-icon  name = "heart-outline" > </ ion-icon >  <!--outline--> 
< ion-icon  name = "heart-sharp" > </ ion-icon >  <!--sharp-->

设置图标大小和颜色：

代码语言：javascript复制
<!-- 通过属性设置图标大小 -->
<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

<!-- 通过css设置图标大小和颜色 -->
ion-icon {
  font-size: 64px;
  color: blue;
}
自定义

可以使用外部SVG。在src属性中提供外部SVG 文件url地址。该src属性的作用与<img src="...">请求图像的网页访问相同。 注意：外部文件只能是有效的svg，并且不允许svg元素内存在脚本或事件。

代码语言：javascript复制
< ion-icon  src = "/path/to/external/file.svg" > </ ion-icon >

二开使用

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

其他

Ionicons 的图标数量不仅多，覆盖也很全面。使用起来简单、快捷、方便，自动按需加载的机制也让开发者很省心。有兴趣的小伙伴们，可以查看下它的官网。

Ionicons官方文档 https://ionic.io/ionicons

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复111，按提示操作即可进群。

svg 网站

0 人点赞