Ionicons是一個完全開源的圖標(biāo)集，其中包含1100多個圖標(biāo)，這些圖標(biāo)是專為Web，iOS，Android和桌面應(yīng)用程序而設(shè)計的。Ionicons是為Ionic Framework構(gòu)建的，因此圖標(biāo)同時具有Material Design和iOS版本

我們打算將此圖標(biāo)包與Ionic一起使用，但絕不僅限于此。無論您是個人還是商業(yè)用戶，都可以在合適的地方使用它們。它們是免費使用的，并根據(jù)MIT許可。

注意：所有品牌圖標(biāo)均為其各自所有者的商標(biāo)。這些商標(biāo)的使用并不表示愛奧尼亞克對該商標(biāo)持有人的認(rèn)可，反之亦然。

使用Web組件

Ionicons Web組件是在應(yīng)用程序中使用Ionicon的一種簡單且性能的方法。該組件將為每個圖標(biāo)動態(tài)加載SVG，因此您的應(yīng)用僅請求您需要的圖標(biāo)。

另請注意，僅加載可見圖標(biāo)，并且“折疊下方”并從用戶視圖中隱藏的圖標(biāo)不會提出SVG資源的提取請求。

安裝

如果您使用的是離子框架，則默認(rèn)情況下會包裝Ionicons，因此無需安裝。是否需要使用離子框架的離子子？將以下內(nèi)容放在<script>頁面末端，直接在關(guān)閉</body>標(biāo)簽之前，以啟用它們。

<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軟件包中的內(nèi)置圖標(biāo)，請name在Ion-Icon組件上填充屬性：

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

自定義圖標(biāo)

要使用自定義SVG，請在src屬性中提供其URL，以請求外部SVG文件。該屬性的工作原理與必須從向圖像請求的網(wǎng)頁訪問URLsrc相同。<img src="...">此外，外部文件只能是有效的SVG，并且不允許SVG元素中的腳本或事件。

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

自定義資產(chǎn)路徑

如果您要加載一組不同的圖標(biāo)，或者Ionicon圖標(biāo)托管在不同的頁面或路徑上，則可以設(shè)置Ionicons通過以下方式從中拔出圖標(biāo)的資產(chǎn)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 });

這允許使用這樣的命名圖標(biāo)：

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

變體

Ionicons中的每個應(yīng)用圖標(biāo)都有Afilled且outline變sharp體。提供了這些不同的變體，以使您的應(yīng)用程序感覺到各種平臺。填充變體使用沒有后綴的默認(rèn)名稱。注意：徽標(biāo)圖標(biāo)沒有大綱或尖銳的變體。

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

平臺特異性

在離子框架中使用圖標(biāo)時，您可以每個平臺指定不同的圖標(biāo)。使用md和ios屬性并提供特定于平臺的圖標(biāo)/變體名稱。

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

尺寸

要指定圖標(biāo)尺寸，您可以為我們的預(yù)定義字體尺寸使用大小屬性。

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

font-size或者，您可以通過在組件上應(yīng)用CSS屬性來設(shè)置特定尺寸ion-icon。建議使用8（8、16、32、64等）的像素尺寸

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

顏色

color通過在組件上應(yīng)用CSS屬性來指定圖標(biāo)顏色ion-icon。

ion-icon {
  color: blue;
}

中風(fēng)寬度

當(dāng)使用outline圖標(biāo)變體時，可以調(diào)整中風(fēng)寬度，以改善相對于圖標(biāo)的大小或相對于相鄰文本的寬度的改進(jìn)。您可以通過將--ionicon-stroke-widthCSS自定義屬性應(yīng)用于組件來設(shè)置特定尺寸ion-icon。默認(rèn)值為32px。

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

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

發(fā)生了什么變化

文檔（readme）：通過更改錯誤的模塊URL@KenTandrian在＃1454中

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

新貢獻(xiàn)者

@KenTandrian在＃1454做出了第一次貢獻(xiàn)

@rdlabo在＃1456中做出了第一次貢獻(xiàn)