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

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

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

使用Web組件

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

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

安裝

如果您使用的是離子框架，則默認(rèn)情況下會(huì)包裝Ionicons，因此無(wú)需安裝。是否需要使用離子框架的離子子？將以下內(nèi)容放在<script>頁(yè)面末端，直接在關(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)，請(qǐng)name在Ion-Icon組件上填充屬性：

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

自定義圖標(biāo)

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

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

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

如果您要加載一組不同的圖標(biāo)，或者Ionicon圖標(biāo)托管在不同的頁(yè)面或路徑上，則可以設(shè)置Ionicons通過(guò)以下方式從中拔出圖標(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中的每個(gè)應(yīng)用圖標(biāo)都有Afilled且outline變sharp體。提供了這些不同的變體，以使您的應(yīng)用程序感覺(jué)到各種平臺(tái)。填充變體使用沒(méi)有后綴的默認(rèn)名稱(chēng)。注意：徽標(biāo)圖標(biāo)沒(méi)有大綱或尖銳的變體。

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

平臺(tái)特異性

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

<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或者，您可以通過(guò)在組件上應(yīng)用CSS屬性來(lái)設(shè)置特定尺寸ion-icon。建議使用8（8、16、32、64等）的像素尺寸

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

顏色

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

ion-icon {
  color: blue;
}

中風(fēng)寬度

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

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

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

發(fā)生了什么變化

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

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

新貢獻(xiàn)者

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

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