10 个可用于下一个项目的开源 SVG 图标库

上周，我在 Reddit 上发起了一个帖子，向其他开发者问了一个简单的问题：你最喜欢的图标库是哪个？这个帖子很快就火了，我还发现了许多其他我从未听说过的优秀开源图标库。我决定根据这个 Reddit 帖子，写一篇博文，列出 10 个最佳开源图标库。

请注意，我已检查过许可条款和条件，因此下面列出的所有库都是完全开源的。以下库的另一个条件是，它们需要具有现代且最新的设计。那么，让我们开始吧：

字体真棒

我相信我们大多数人都至少使用过一次 Font Awesome 图标，因为它是最早发布的热门开源图标库之一。截至目前，他们的图标库中共有1,588 个免费图标和7,842 个专业图标。

Font Awesome 至今仍被广泛使用的主要原因之一，或许是因为它提供了丰富的图标库。我们的网站实际上使用了 Font Awesome Pro 的双色调图标，我们相信这会让我们的网站比其他同类网站更加突出。

Font Awesome 提供的另一个有趣的功能是个性化的 CDN 链接，您可以在创建帐户后生成该链接。通过此功能，您可以有条件地排除常规图标，而只使用双色调图标。

当然，您也可以选择通过直接复制粘贴 SVG 代码来仅包含几个图标，如果您的网站上使用的图标不超过 20-30 个，我建议您这样做。

总而言之，使用 Font Awesome 的方法有很多，例如复制单个图标的 SVG 源、下载库或使用公共或自有的 CDN。他们有一个很棒的页面，可以帮助你开始使用 Font Awesome。

离子图标

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>

您可以从他们的官方网站阅读有关基本用法的更多信息。

CSS.gg

如果您是 Reddit 开发者社区的活跃成员，或许您已经注意到一个新发布的图标库，它仅使用 CSS 进行样式设计。目前，它包含超过 704 个独立图标，涵盖警报、箭头、代码、设计等类别。

关于在性能方面使用 CSS 还是 SVG 更好存在一些争论，但该库的创建者@astritmalsija后来发布了版本 2 的 SVG、SVG Sprite、Figma 和 Adobe XD 格式，以提供更广泛的实现。

开始使用 CSS.gg 非常简单，只需运行npm -i css.gg命令，然后在 head 标签内包含以下样式表即可：

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

当然也有 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'>

您可以在 repo 的官方入门说明中阅读有关开始使用 CSS.gg 的更多信息。

羽毛图标

Feathericons 是另一个非常美观且简洁的图标库，包含 282 个 SVG 图标。默认情况下，它只支持 SVG 作为主要格式，但这也没关系，因为目前它是推荐的图标使用方式，而且速度最快。

我喜欢在下载图标之前可以配置其大小、描边宽度和颜色。你还可以通过点击网站右上角的月亮图标来切换暗色和亮色模式。

开始使用 Feathericons 非常简单，只需下载 SVG 文件并将其包含在标记中（使用src或将其用作内联 SVG 对象）。

Eva 图标 ❤️

Eva Icons 是一套包含 480 个精美开源图标的图标库，提供 SVG 和 PNG 两种格式。它主要提供两种轮廓和填充样式，而且我很喜欢它提供的悬停动画，可以自定义缩放、脉动或抖动效果。

使用 Eva Icons 非常简单，选择要使用的图标后，下载 SVG 或 PNG 文件即可，或者直接下载整套图标即可。你还可以通过安装 NPM 包来包含 Eva Icons，如下所示：

npm i eva-icons

英雄图标

Heroicons 是另一个很棒的开源图标库，由 Tailwind CSS 的创建者打造。它包含超过 165 个独立图标，不仅包含填充和轮廓样式，还为每个元素提供了深色和白色版本。图标外观精美，制作精良。

开始使用这些图标非常简单，只需点击其中一个图标并复制内联 SVG 代码即可立即在项目中使用。我喜欢他们在 Figma 中也提供这个库。如果您想包含所有图标，可以从公共仓库下载所有 SVG 文件。

Bootstrap 图标

几周前，我写了一篇关于Bootstrap 5 图标的文章，并将其与 Font Awesome 进行了比较。目前，Bootstrap 5 拥有超过 600 个自定义 SVG 图标，我认为它在设计方面确实脱颖而出。如果您喜欢使用 Bootstrap 作为 CSS 框架，那么在下一个项目中，您真的应该考虑使用 Bootstrap 5 图标。

Bootstrap 5 图标的入门非常简单，只需复制 SVG 代码即可，然后您可以根据自己的喜好随意使用，无论是内联使用、将其作为图像源，还是在 CSS 中创建伪代码类。无论哪种方式，他们的网站都清晰地解释了实现方法。

混音图标

Remix Icon 是一个基于 Apache 许可证的大型精美开源图标库，包含 2149 个图标。图标类别丰富，包括商业、通信、金融、地图等等，绝对值得一看。

Remix Icon 的入门非常简单，您可以下载 SVG 或 PNG 版本，或者直接将内联 SVG 代码复制到剪贴板。您也可以选择将整个包下载为单个 .svg 文件或 SVG 精灵文件。

八角形

Octicons 是一套包含 100 多个开源图标的库，Github 也将其用于其主网站。显然，他们已经在开发该库的第二个版本，旨在改进图标的设计和多样性。

Octicons 的一大优势在于，它可以直接在 React、Ruby、Rails、Jekyll 和 JavaScript 中使用。以下列出了所有可用于 Octicons 的软件包。

伊科纳特

最后但同样重要的是，Ikonate 是另一个很棒的开源图标库，其中包含约 100 个基于扁平设计的高级图标。它遵循非常宽松的 MIT 许可证。

您可以在导出前轻松配置图标的大小、边框宽度、边框大小、边角以及颜色。导出的 ZIP 文件中会包含一个包含所有选定内联图标的 HTML 文件，以及一个包含独立 SVG 文件和精灵图表的文件夹。

最后，请支持这些库，在 Github 上点个星，让它们知道它们做得有多棒。如果您还没有决定在下一个项目中使用哪个图标库，可以考虑与您的朋友或同事分享此列表。

文章来源：https://dev.to/themesberg/10-open-source-svg-icon-libraries-that-you-can-use-for-your-next-project-44n8