ionicons

# Ionicons [Ionicons](http://ionicons.com/) 是一个完全开源的图标集，包含 1300 个为 Web、iOS、Android 和桌面应用设计的图标。Ionicons 是为 [Ionic Framework](https://ionicframework.com/) 构建的，因此图标同时提供 Material Design 和 iOS 两种版本。 注意：所有品牌图标均为其各自所有者的商标。使用这些商标并不表示 Ionic 认可商标持有人，反之亦然。 我们打算将此图标包与 [Ionic](http://ionicframework.com/) 一起使用，但并不仅限于此。您可以在任何地方使用它们，无论是个人还是商业用途。它们免费使用，并根据 [MIT](http://opensource.org/licenses/MIT) 许可证授权。 ## 贡献 感谢您有兴趣贡献！请阅读我们的 [贡献指南](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md)，然后查看我们带有 [help wanted](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) 标签的问题。 ## 使用 Web 组件 Ionicons Web 组件是在您的应用中使用 Ionicons 的一种简单且高效的方式。该组件会为每个图标动态加载 SVG，因此您的应用只会请求所需的图标。 另请注意，只有可见的图标才会被加载，而"折叠下方"且对用户隐藏的图标不会发起 SVG 资源的获取请求。 ### 安装 如果您使用 [Ionic Framework](https://ionicframework.com/)，Ionicons 已默认打包，因此无需安装。想在没有 Ionic Framework 的情况下使用 Ionicons？将以下 `<script>` 放在页面末尾、`</body>` 标签之前，即可启用。 ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` 您可以将 `latest` 替换为任何 Ionicons 版本，例如： ```html <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 包中的内置图标，请在 ion-icon 组件上填充 `name` 属性： ```html <ion-icon name="heart"></ion-icon> ``` ### 自定义图标 要使用自定义 SVG，请在 `src` 属性中提供其 URL 以请求外部 SVG 文件。`src` 属性的工作方式与 `<img src="...">` 相同，即 URL 必须可从发起图像请求的网页访问。此外，外部文件只能是有效的 SVG，并且不允许在 SVG 元素内包含脚本或事件。 ```html <ion-icon src="/path/to/external/file.svg"></ion-icon> ``` #### 自定义资源路径 如果您有另一组要加载的图标，或者 Ionicon 图标托管在不同的页面或路径上，您可以通过以下方式设置 Ionicons 获取图标的资源 URL： ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // 将加载图标的根路径设置为 "<root>/public/svg" setAssetPath(`${window.location.origin}/public/svg/`); // 仅加载特定图标 addIcons({ add, logoIonic, save }); ``` 这允许使用如下命名图标： ```html <!-- 现在从 "<root>/public/svg/heart.svg" 获取 SVG --> <ion-icon name="heart"></ion-icon> ``` ## 变体 Ionicons 中的每个应用图标都有 `filled`、`outline` 和 `sharp` 变体。提供这些不同的变体是为了让您的应用在各种平台上感觉更原生。filled 变体使用不带后缀的默认名称。注意：Logo 图标没有 outline 或 sharp 变体。 ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### 平台特定性 在 Ionic Framework 中使用图标时，您可以为每个平台指定不同的图标。使用 `md` 和 `ios` 属性并提供特定于平台的图标/变体名称。 ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## 尺寸 要指定图标大小，您可以使用 size 属性来使用我们预定义的字体大小。 ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` 或者您可以通过在 `ion-icon` 组件上应用 `font-size` CSS 属性来设置特定大小。建议使用 8 的倍数（8、16、32、64 等）的像素大小。 ```css ion-icon { font-size: 64px; } ``` ## 颜色 通过在 `ion-icon` 组件上应用 `color` CSS 属性来指定图标颜色。 ```css ion-icon { color: blue; } ``` ## 描边宽度 使用 `outline` 图标变体时，可以调整描边宽度，以改善相对于图标大小或相邻文本宽度的视觉平衡。您可以通过在 `ion-icon` 组件上应用 `--ionicon-stroke-width` CSS 自定义属性来设置特定大小。默认值为 32px。 ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## 从 v4 迁移 有关图标删除/重命名的列表，请参阅 [5.0 发布说明](https://github.com/ionic-team/ionicons/releases/tag/5.0.0)。 ## 许可证 Ionicons 根据 [MIT 许可证](http://opensource.org/licenses/MIT) 授权。 ## 相关链接 * [Ionicons 主页](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Ionic 论坛](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)