除了iconfont，還有這10個(gè)開源SVG圖標(biāo)庫(kù)
在國(guó)內(nèi)，我想大家基本上都是用阿里的iconfont圖標(biāo)庫(kù)，這里介紹10個(gè)其他的開源圖標(biāo)庫(kù)，下面列出的所有庫(kù)都是完全開源的，因?yàn)槲乙呀?jīng)檢查了許可條款和條件。
Font Awesome
我相信我們大多數(shù)人至少使用過一次Font Awesome圖標(biāo)，直到現(xiàn)在為止，因?yàn)樗鼈兪亲钤绨l(fā)布的高度流行的開源圖標(biāo)庫(kù)之一。截至目前，他們的圖庫(kù)中總共有1,588個(gè)免費(fèi)圖標(biāo)和7,842個(gè)專業(yè)圖標(biāo)。
Font Awesome仍被廣泛使用的主要原因之一可能是因?yàn)樗鼈兲峁┐罅康母鞣N圖標(biāo)。我們的網(wǎng)站實(shí)際上使用了Font Awesome Pro的雙色調(diào)圖標(biāo)，我們相信，與其他類似網(wǎng)站相比，它使我們的網(wǎng)站更具特色。
另一個(gè)有趣的功能是Font Awesome提供了一個(gè)個(gè)性化的CDN鏈接，如果你創(chuàng)建一個(gè)帳戶，你可以生成一個(gè)個(gè)性化的CDN鏈接。這樣，你可以有條件地排除常規(guī)圖標(biāo)，而僅使用雙色調(diào)圖標(biāo)。
當(dāng)然，你也可以通過直接復(fù)制粘貼SVG代碼來(lái)選擇僅包含幾個(gè)圖標(biāo)，如果你在網(wǎng)站上使用的圖標(biāo)不超過20-30個(gè)，我建議你這樣做。
總之，有很多使用Font Awesome的方法，例如復(fù)制單個(gè)圖標(biāo)的SVG源代碼，下載庫(kù)或使用公共或自己的CDN。他們的頁(yè)面很棒，可以幫助你開始使用Font Awesome。
- Demo：https://fontawesome.com/
- Github：https://github.com/FortAwesome/Font-Awesome
Ionicons
Ionicons.io是另一個(gè)由SVG驅(qū)動(dòng)的開源圖標(biāo)庫(kù)，具有457個(gè)獨(dú)立圖標(biāo)，具有三種不同樣式：輪廓、填充和銳利。我特別喜歡輪廓和形狀設(shè)計(jì)的簡(jiǎn)潔明快。我絕對(duì)建議你為下一個(gè)項(xiàng)目嘗試一下。
如果你想使用ionicons，而不是只使用獨(dú)立的SVG，你可以在頁(yè)腳中加入以下腳本。
- <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
然后，只需在HTML模板中添加以下元素，然后更改 name 屬性以匹配要顯示的圖標(biāo)，如下所示：
- <ion-icon name="heart"></ion-icon>
你可以從他們的官方網(wǎng)站上閱讀有關(guān)基本用法的更多信息。
- Demo：https://ionicons.com/
- Github：https://github.com/ionic-team/ionicons
CSS.gg
如果你是Reddit開發(fā)人員社區(qū)的活躍成員，也許你會(huì)注意到一個(gè)新的圖標(biāo)庫(kù)已發(fā)布，該庫(kù)僅使用CSS進(jìn)行樣式設(shè)置。目前，它具有基于提醒，箭頭，代碼，設(shè)計(jì)等類別的704個(gè)獨(dú)立圖標(biāo)。
關(guān)于使用CSS還是SVG在性能上更好，曾有過一些爭(zhēng)論，但庫(kù)的創(chuàng)建者@astritmalsija后來(lái)發(fā)布了SVG、SVG Sprite、Figma和Adobe XD格式的第2版，以提供更廣泛的實(shí)現(xiàn)。
開始使用CSS.gg就像運(yùn)行 npm -i css.gg 命令一樣容易，并且稍后在head標(biāo)記中包含以下樣式表：
- <link href='https://css.gg/css' rel='stylesheet'>
當(dāng)然，還有CDN替代方案，例如使用UNPKG或JSDelivr，如下所示：
- <!-- UNPKG -->
- <link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>
- <!-- JSDelivr -->
- <link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>
可以從倉(cāng)庫(kù)的正式入門指南中了解有關(guān)CSS.gg入門的更多信息。
- Demo：https://css.gg/
- Github：https://github.com/astrit/css.gg
Feathericons
Feathericons是另一個(gè)非常漂亮和干凈的圖標(biāo)庫(kù)，包含282個(gè)SVG圖標(biāo)。默認(rèn)情況下，它僅以SVG為主要格式，但這也沒關(guān)系，因?yàn)檫@是目前推薦的圖標(biāo)使用方式，因?yàn)樗亲羁斓摹?/p>
我喜歡在下載圖標(biāo)之前配置圖標(biāo)的大小、筆畫寬度和顏色。你還可以通過單擊網(wǎng)站右上角的月亮圖標(biāo)來(lái)切換明暗模式。
Feathericons入門就像下載SVG文件并將其包含在標(biāo)記中一樣容易，方法是使用src或?qū)⑵溆米髑度胧絊VG對(duì)象。
- Demo：https://feathericons.com/
- Github：https://github.com/feathericons/feather
Eva Icons ❤️
Eva Icons是一組480個(gè)精美制作的開源圖標(biāo)，分別以SVG和PNG格式提供。有兩種主要的輪廓和填充風(fēng)格，我喜歡的是，你可以在懸停時(shí)選擇框外縮放、脈動(dòng)或搖動(dòng)的動(dòng)畫。
使用Eva Icons的入門方法很簡(jiǎn)單，只需下載SVG或PNG文件后選擇使用的圖標(biāo)或下載整套圖標(biāo)即可。你還可以通過安裝NPM軟件包來(lái)包括Eva Icons，如下所示：
- npm i eva-icons
- Demo：https://akveo.github.io/eva-icons/
- Github：https://github.com/akveo/eva-icons
Heroicon
Heroicons是由Tailwind CSS的創(chuàng)建者構(gòu)建的另一個(gè)很棒的開源圖標(biāo)庫(kù)。它具有超過165個(gè)具有填充和輪廓樣式的獨(dú)立圖標(biāo)，但每個(gè)元素也提供深色和白色版本。圖標(biāo)的外觀非常優(yōu)質(zhì)且制作精良。
這些圖標(biāo)的入門非常簡(jiǎn)單，只需單擊其中一個(gè)圖標(biāo)并復(fù)制可立即在項(xiàng)目中使用的內(nèi)聯(lián)SVG代碼。我喜歡他們還提供了Figma中的庫(kù)。如果你想包含所有的圖標(biāo)，你可以從公共資源庫(kù)中下載所有的SVG文件。
- Demo：https://heroicons.dev/
- Github：https://github.com/refactoringui/heroicons
Bootstrap icons
幾周前，我通過將新的Bootstrap 5圖標(biāo)與Font Awesome進(jìn)行了比較。目前，它具有600多個(gè)由SVG驅(qū)動(dòng)的自定義圖標(biāo)，我認(rèn)為它在設(shè)計(jì)方面確實(shí)很出色。如果你喜歡將Bootstrap用作CSS框架，則應(yīng)該考慮為下一個(gè)項(xiàng)目使用Bootstrap 5圖標(biāo)。
開始使用Bootstrap 5圖標(biāo)就像復(fù)制SVG代碼一樣簡(jiǎn)單，然后你可以用你認(rèn)為合適的方式來(lái)使用它，無(wú)論是內(nèi)聯(lián)使用，將其作為圖片的源碼，還是在CSS中創(chuàng)建偽代碼類。不管是哪種方式，他們的網(wǎng)站都清楚地解釋了實(shí)現(xiàn)方法。
- Demo：https://icons.getbootstrap.com/
- Github：https://github.com/twbs/icons
Remix Icon
Remix Icon是一個(gè)Apache License下的2149個(gè)漂亮的開源圖標(biāo)大集合。有各種各樣的圖標(biāo)可供選擇，例如業(yè)務(wù)，通訊，財(cái)務(wù)，地圖等等。絕對(duì)值得一看。
通過下載SVG或PNG版本，或者直接復(fù)制內(nèi)嵌的SVG代碼到剪貼板上，Remix Icon的使用非常簡(jiǎn)單。另外，您也可以選擇將整個(gè)軟件包下載為單個(gè).svg文件或SVG Sprite文件。
- Demo：https://remixicon.com/
- Github：https://github.com/Remix-Design/remixicon
Octicons
Octicons是一組超過100個(gè)開源圖標(biāo)，Github也將其用于其主要網(wǎng)站。顯然，他們已經(jīng)在通過改進(jìn)圖標(biāo)的設(shè)計(jì)和種類來(lái)開發(fā)庫(kù)的第二版。
Octicons的一個(gè)巨大優(yōu)勢(shì)是，你還可以在React，Ruby，Rails，Jekyll和Javascript中將它作為即用型軟件包獲得。
- Demo：https://primer.style/octicons/
- Github：https://github.com/primer/octicons
Ikonate
最后但并非最不重要的是，Ikonate是另一個(gè)令人敬畏的開源圖標(biāo)庫(kù)，它擁有約100個(gè)基于平面設(shè)計(jì)的高級(jí)圖標(biāo)。它是根據(jù)非常寬松的MIT許可證慷慨授權(quán)的。
導(dǎo)出之前，你可以輕松配置圖標(biāo)的大小，邊框?qū)挾?，邊框和邊角以及顏色。在?dǎo)出ZIP文件中，你將獲得一個(gè)帶有所有選定內(nèi)嵌圖標(biāo)的html文件，還有一個(gè)包含單獨(dú)的SVG文件和一個(gè)雪碧圖的文件夾。
- Demo：https://ikonate.com/
- Github：https://github.com/mikolajdobrucki/ikonate
最后，請(qǐng)給這些庫(kù)一個(gè)Github星，并讓他們知道他們所做的工作多么出色，以支持這些庫(kù)。如果你尚未決定在下一個(gè)項(xiàng)目中使用特定的圖標(biāo)庫(kù)，請(qǐng)考慮與你的朋友或同事共享此列表。
