Ionicons图标库技术文档

最新推荐文章于 2024-11-06 10:25:34 发布

姬柯南Forrest

最新推荐文章于 2024-11-06 10:25:34 发布

阅读量661

点赞数 19

本文链接：https://blog.csdn.net/gitblog_01225/article/details/143039753

版权

Ionicons图标库技术文档

ionicons Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎 项目地址: https://gitcode.com/gh_mirrors/io/ionicons

Ionicons是一款开源的图标集，内含1,300个精工打造的图标，专为网页、iOS、安卓以及桌面应用设计。它最初为Ionic框架所生，但其通用性远超于此，既能融入Ionic环境，也能独立应用于各类项目中。

安装指南

与Ionic Framework集成

如果你的项目基于Ionic Framework，那么无需额外步骤，因为Ionicons已经默认包含其中。对于非Ionic项目，可以通过以下HTML代码将其引入到页面底部：

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

项目使用说明

基本用法

要使用Ionicons中的内置图标，只需在ion-icon组件上设置name属性：

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

使用自定义SVG图标

若需要插入特定的SVG图标，则可以利用src属性指定外部SVG文件路径：

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

自定义图标资产路径

对于加载自定义图标集合或改变图标库位置，可通过 TypeScript 引入并调用 setAssetPath 方法来设定：

import { setAssetPath } from '@stencil/core';

// 设置图标路径前缀为当前域名下的特定目录
setAssetPath(`${window.location.origin}/custom-icons/`);

图标变体

每个图标都有filled（填充）、outline（轮廓）和sharp（锐利）三种风格，以适配不同平台的原生感：

<!-- 不带后缀即为填充版 -->
<ion-icon name="heart"></ion-icon>

<!-- 轮廓版 -->
<ion-icon name="heart-outline"></ion-icon>

<!-- 锐利版 -->
<ion-icon name="heart-sharp"></ion-icon>

平台特异性图标

在Ionic框架内，可按平台指定不同的图标：

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

图标大小与颜色

使用size属性快速调整大小，如small、large等预设值。
通过CSS设置精确大小或调整颜色：

ion-icon {
  font-size: 64px; /* 指定大小 */
  color: blue;     /* 设置颜色 */
}

/* 可调整轮廓图标的笔触宽度 */
ion-icon[name*="outline"] {
  --ionicon-stroke-width: 16px;
}