沐鳴總代平台_10個開源SVG圖標庫

在國內,我想大家基本上都是用阿里的iconfont圖標庫,這裏介紹10個其他的開源圖標庫,下面列出的所有庫都是完全開源的,因為我已經檢查了許可條款和條件。

Font Awesome

我相信我們大多數人至少使用過一次Font Awesome圖標,直到現在為止,因為它們是最早發布的高度流行的開源圖標庫之一。截至目前,他們的圖庫中總共有1,588個免費圖標和7,842個專業圖標。

Font Awesome仍被廣泛使用的主要原因之一可能是因為它們提供大量的各種圖標。我們的網站實際上使用了Font Awesome Pro的雙色調圖標,我們相信,與其他類似網站相比,它使我們的網站更具特色。

另一個有趣的功能是Font Awesome提供了一個個性化的CDN鏈接,如果你創建一個帳戶,你可以生成一個個性化的CDN鏈接。這樣,你可以有條件地排除常規圖標,而僅使用雙色調圖標。

當然,你也可以通過直接複製粘貼SVG代碼來選擇僅包含幾個圖標,如果你在網站上使用的圖標不超過20-30個,我建議你這樣做。

總之,有很多使用Font Awesome的方法,例如複製單個圖標的SVG源代碼,下載庫或使用公共或自己的CDN。他們的頁面很棒,可以幫助你開始使用Font Awesome。

  • Demo:https://fontawesome.com/
  • Github:https://github.com/FortAwesom…

Ionicons

Ionicons.io是另一個由SVG驅動的開源圖標庫,具有457個獨立圖標,具有三種不同樣式:輪廓、填充和銳利。我特別喜歡輪廓和形狀設計的簡潔明快。我絕對建議你為下一個項目嘗試一下。

如果你想使用ionicons,而不是只使用獨立的SVG,你可以在頁腳中加入以下腳本。

<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

然後,只需在html模板中添加以下元素,然後更改 name 屬性以匹配要显示的圖標,如下所示:

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

你可以從他們的官方網站上閱讀有關基本用法的更多信息。

  • Demo:https://ionicons.com/
  • Github:https://github.com/ionic-team…

css.gg

如果你是Reddit開發人員社區的活躍成員,也許你會注意到一個新的圖標庫已發布,該庫僅使用css進行樣式設置。目前,它具有基於提醒,箭頭,代碼,設計等類別的704個獨立圖標。

關於使用css還是SVG在性能上更好,曾有過一些爭論,但庫的創建者@astritmalsija)後來發布了SVG、SVG Sprite、Figma和Adobe XD格式的第2版,以提供更廣泛的實現。

開始使用css.gg就像運行 npm -i css.gg 命令一樣容易,並且稍後在head標記中包含以下樣式表:

<link href='https://css.gg/css' rel='nofollow '>

當然,還有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'>

可以從倉庫的正式入門指南中了解有關CSS.gg入門的更多信息。

  • Demo:https://css.gg/
  • Github:https://github.com/astrit/css.gg

Feathericons

Feathericons是另一個非常漂亮和乾淨的圖標庫,包含282個SVG圖標。默認情況下,它僅以SVG為主要格式,但這也沒關係,因為這是目前推薦的圖標使用方式,因為它是最快的。

我喜歡在下載圖標之前配置圖標的大小、筆畫寬度和顏色。你還可以通過單擊網站右上角的月亮圖標來切換明暗模式。

Feathericons入門就像下載SVG文件並將其包含在標記中一樣容易,方法是使用src或將其用作嵌入式SVG對象。

  • Demo:https://feathericons.com/
  • Github:https://github.com/featherico…

Eva Icons

Eva Icons是一組480個精美製作的開源圖標,分別以SVG和PNG格式提供。有兩種主要的輪廓和填充風格,我喜歡的是,你可以在懸停時選擇框外縮放、脈動或搖動的動畫。

使用Eva Icons的入門方法很簡單,只需下載SVG或PNG文件后選擇使用的圖標或下載整套圖標即可。你還可以通過安裝npm軟件包來包括Eva Icons,如下所示:

npm i eva-icons
  • Demo:https://akveo.github.io/eva-i…
  • Github:https://github.com/akveo/eva-…

Heroicon

Heroicons是由Tailwind CSS的創建者構建的另一個很棒的開源圖標庫。它具有超過165個具有填充和輪廓樣式的獨立圖標,但每個元素也提供深色和白色版本。圖標的外觀非常優質且製作精良。

這些圖標的入門非常簡單,只需單擊其中一個圖標並複製可立即在項目中使用的內聯SVG代碼。我喜歡他們還提供了Figma中的庫。如果你想包含所有的圖標,你可以從公共資源庫中下載所有的SVG文件。

  • Demo:https://heroicons.dev/
  • Github:https://github.com/refactorin…

Bootstrap icons

幾周前,我通過將新的Bootstrap 5圖標與Font Awesome進行了比較。目前,它具有600多個由SVG驅動的自定義圖標,我認為它在設計方面確實很出色。如果你喜歡將Bootstrap用作CSS框架,則應該考慮為下一個項目使用Bootstrap 5圖標。

開始使用Bootstrap 5圖標就像複製SVG代碼一樣簡單,然後你可以用你認為合適的方式來使用它,無論是內聯使用,將其作為圖片的源碼,還是在CSS中創建偽代碼類。不管是哪種方式,他們的網站都清楚地解釋了實現方法。

  • Demo:https://icons.getbootstrap.com/
  • Github:https://github.com/twbs/icons

Remix Icon

Remix Icon是一個Apache License下的2149個漂亮的開源圖標大集合。有各種各樣的圖標可供選擇,例如業務,通訊,財務,地圖等等。絕對值得一看。

通過下載SVG或PNG版本,或者直接複製內嵌的SVG代碼到剪貼板上,Remix Icon的使用非常簡單。另外,您也可以選擇將整個軟件包下載為單個.svg文件或SVG Sprite文件。

  • Demo:https://remixicon.com/
  • Github:https://github.com/Remix-Desi…

Octicons

Octicons是一組超過100個開源圖標,Github也將其用於其主要網站。顯然,他們已經在通過改進圖標的設計和種類來開發庫的第二版。

Octicons的一個巨大優勢是,你還可以在react,Ruby,Rails,Jekyll和JavaScript中將它作為即用型軟件包獲得。這是你可以用來開始使用Octicons的所有軟件包。

  • Demo:https://primer.style/octicons/
  • Github:https://github.com/primer/oct…

Ikonate

最後但並非最不重要的是,Ikonate是另一個令人敬畏的開源圖標庫,它擁有約100個基於平面設計的高級圖標。它是根據非常寬鬆的MIT許可證慷慨授權的。

導出之前,你可以輕鬆配置圖標的大小,邊框寬度,邊框和邊角以及顏色。在導出ZIP文件中,你將獲得一個帶有所有選定內嵌圖標的html文件,還有一個包含單獨的SVG文件和一個雪碧圖的文件夾。

  • Demo:https://ikonate.com/
  • Github:https://github.com/mikolajdob…

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8873