Ionicons开源图标集合 v8.0.9

Ionicons是一个完全开源的图标集，其中包含1100多个图标，这些图标是专为Web，iOS，Android和桌面应用程序而设计的。Ionicons是为Ionic Framework构建的，因此图标同时具有Material Design和iOS版本

我们打算将此图标包与Ionic一起使用，但绝不仅限于此。无论您是个人还是商业用户，都可以在合适的地方使用它们。它们是免费使用的，并根据MIT许可。

注意：所有品牌图标均为其各自所有者的商标。这些商标的使用并不表示爱奥尼亚克对该商标持有人的认可，反之亦然。

使用Web组件

Ionicons Web组件是在应用程序中使用Ionicon的一种简单且性能的方法。该组件将为每个图标动态加载SVG，因此您的应用仅请求您需要的图标。

另请注意，仅加载可见图标，并且“折叠下方”并从用户视图中隐藏的图标不会提出SVG资源的提取请求。

安装

如果您使用的是离子框架，则默认情况下会包装Ionicons，因此无需安装。是否需要使用离子框架的离子子？将以下内容放在<script>页面末端，直接在关闭</body>标签之前，以启用它们。

<script type="module" src="https://esm.sh/ionicons@latest/loader"></script>
<script nomodule src="https://esm.sh/ionicons@latest/loader"></script>

您可以替换latest以选择任何版本的Ionicon，例如：

<script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script>
<script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script>

基本用法

要使用Ionicons软件包中的内置图标，请name在Ion-Icon组件上填充属性：

<ion-icon name="heart"></ion-icon>

自定义图标

要使用自定义SVG，请在src属性中提供其URL，以请求外部SVG文件。该属性的工作原理与必须从向图像请求的网页访问URLsrc相同。<img src="...">此外，外部文件只能是有效的SVG，并且不允许SVG元素中的脚本或事件。

<ion-icon src="/path/to/external/file.svg"></ion-icon>

自定义资产路径

如果您要加载一组不同的图标，或者Ionicon图标托管在不同的页面或路径上，则可以设置Ionicons通过以下方式从中拔出图标的资产URL：

import { setAssetPath, addIcons } from 'ionicons';
import { add, logoIonic, save } from 'ionicons/icons';
// set root path for loading icons to "<root>/public/svg"
setAssetPath(`${window.location.origin}/public/svg/`);
// only load specific icons
addIcons({ add, logoIonic, save });

这允许使用这样的命名图标：

<!-- now pulls the svg from "<root>/public/svg/heart.svg" -->
<ion-icon name="heart"></ion-icon>

变体

Ionicons中的每个应用图标都有Afilled且outline变sharp体。提供了这些不同的变体，以使您的应用程序感觉到各种平台。填充变体使用没有后缀的默认名称。注意：徽标图标没有大纲或尖锐的变体。

<ion-icon name="heart"></ion-icon> <!--filled-->
<ion-icon name="heart-outline"></ion-icon> <!--outline-->
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->

平台特异性

在离子框架中使用图标时，您可以每个平台指定不同的图标。使用md和ios属性并提供特定于平台的图标/变体名称。

<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>

尺寸

要指定图标尺寸，您可以为我们的预定义字体尺寸使用大小属性。

<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

font-size或者，您可以通过在组件上应用CSS属性来设置特定尺寸ion-icon。建议使用8（8、16、32、64等）的像素尺寸

ion-icon {
  font-size: 64px;
}

颜色

color通过在组件上应用CSS属性来指定图标颜色ion-icon。

ion-icon {
  color: blue;
}

中风宽度

当使用outline图标变体时，可以调整中风宽度，以改善相对于图标的大小或相对于相邻文本的宽度的改进。您可以通过将--ionicon-stroke-widthCSS自定义属性应用于组件来设置特定尺寸ion-icon。默认值为32px。

<ion-icon name="heart-outline"></ion-icon>

ion-icon {
  --ionicon-stroke-width: 16px;
}

发生了什么变化

文档（readme）：通过更改错误的模块URL@KenTandrian在＃1454中

fix（）：包装出口中的ionicons.json。@rdlabo在＃1456中

新贡献者

@KenTandrian在＃1454做出了第一次贡献

@rdlabo在＃1456中做出了第一次贡献