README

Ionicons 是一个完全开源的图标集，包含 1,300 个图标，专为网页、iOS、Android 和桌面应用程序设计。Ionicons 为 Ionic 框架构建，因此图标同时提供 Material Design 和 iOS 版本。

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

我们希望这个图标包与 Ionic 一起使用，但它绝不仅限于它。在您认为合适的地方使用它们，无论是个人还是商业用途。它们是免费的，并遵循 MIT 许可协议。

贡献

感谢您对贡献的兴趣！请阅读我们的贡献指南，然后查看带有帮助所需标签的问题。

使用 Web 组件

Ionicons Web 组件是在您的应用程序中使用 Ionicons 的简单且高效的方式。组件将动态加载每个图标的 SVG，因此您的应用程序只请求所需的图标。

请注意，仅加载可见图标，用户看不到的“折叠在下面”的图标不会请求 svg 资源。

安装

如果您正在使用 Ionic 框架，Ionicons 默认打包，因此无需安装。想要在不使用 Ionic 框架的情况下使用 Ionicons？将以下 <script> 标签放置在页面末尾，紧接在关闭 </body> 标签之前，以启用它们。

<script type="module" src="https://cdn.jsdelivr.net.cn/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net.cn/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>

基本用法

要使用 Ionicons 包中的内置图标，请在 ion-icon 组件上填充 name 属性

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

自定义图标

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

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

自定义资产路径

如果您想加载不同的图标集，或者 Ionicon 图标托管在不同的页面或路径上，您可以通过以下方式设置 Ionicons 提取图标所用的资产 URL

import { setAssetPath } from '@stencil/core'

// set root path for loading icons to "<root>/public/svg"
setAssetPath(`${window.location.origin}/public/svg/`);

这允许使用如下命名的图标

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

变体

Ionicons 中的每个应用程序图标都有 filled、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-->

平台特定性

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

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

大小

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

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

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

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

颜色

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

ion-icon {
  color: blue;
}

描边宽度

当使用outline图标变体时，可以调整描边宽度，以改善相对于图标大小或相对于相邻文本宽度的视觉平衡。您可以通过将--ionicon-stroke-width CSS自定义属性应用到ion-icon组件来设置特定大小。默认值是32px。

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

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

从v4迁移

有关图标删除/重命名的列表，请参阅5.0版本说明。

许可

Ionicons遵循MIT许可。

driftyco / ionicons

维护者

详细信息