在项目中添加图标的最简单方法：使用 Unpkg

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

互联网在过去几年里取得了长足的进步，但仍然存在一些不直观易懂的地方。使用图标就是其中之一。

图标字体、内联 SVG、SVG 符号——它们各自都有各自的问题。例如，内联 SVG 虽然很好用，但会使代码变得混乱，而且无法缓存。此外，复制粘贴 SVG 本身也相当耗时且麻烦。

使用图标应该更简单。我一直想要的是：看到想要使用的图标，就能立即使用。无需复制粘贴；只需知道图标名称即可。无需费力配置 Webpack/Grunt 流程。无需为每个图标创建新的 SVG 文件/组件。

幸运的是，我找到了办法。请继续往下看！

svg-loader：从 CDN 加载 SVG

svg-loader是一个简单的库，允许你将托管在外部源上的 SVG 嵌入到代码中。我写了一篇更详细的文章介绍它，但简单来说，它的用法如下：

<script type="text/javascript" src="https://unpkg.com/external-svg-loader@1.0.0/svg-loader.min.js" async></script>

<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" 
    width="50"
    height="50" 
    fill="purple"></svg>

该库会使用 XHR 获取 SVG 并将其内联插入。这样做的好处是什么？现在您可以自定义填充、继承颜色，并使用诸如悬停之类的状态，而这些在之前的 `<div>`<img>和 ` <div>`<object>标签中是无法实现的。

这个概念并不新鲜，svg-inject 的功能类似。不过，svg-loader 让这一切变得极其便捷。你只需要在代码中引入脚本即可，其余一切都由它自动处理。而且它还与框架无关（支持 React、Vue、Angular 等）。

svg-loader + unpkg = 绝佳组合

最近，我发现可以使用库和unpkg快速包含 Github 上提供的图标。

以MDI 图标库为例。据我所知，它是 GitHub 上最大的图标库，拥有超过 5000 个图标。

由于该仓库有一个 NPM 包，我们可以在 unpkg 上浏览它：https://unpkg.com/@mdi/svg/。

如果您点击任何文件并使用“查看原始文件”，您会看到任何图标的永久链接类似于这样：https://unpkg.com/@mdi/svg@5.9.55/svg/__ICON__.svg。

我们可以用它来开始在项目中使用该图标。例如：

太棒了！现在，如果您需要使用该cog图标，无需再费力寻找 SVG 代码或下载它，只需使用即可cog.svg。

注意：首次加载可能会有轻微延迟，因为 Unpkg 需要获取软件包并提取文件，但首次请求之后，文件将被缓存并从 Cloudflare CDN 提供服务。

关于此方法的问答

关于这种方法可能会有很多疑问，所以我将尝试回答其中最常见的问题。

如果代码库发生更改（例如，重命名文件）怎么办？这会不会影响我的图标显示？

不。使用 unpkg，您很可能会使用版本化的 URL（而不是@latest），这将确保无论存储库发生什么变化，内容都保持不变。

为每个图标都触发 XHR 请求，而不是将它们打包在一起，岂不是效率低下吗？

不。使用 HTTP/2，开销非常低。对于异步加载的非阻塞资源，开销几乎可以忽略不计。以下是我使用相同方法加载 50 个图标的示例。

此外，图标在首次加载时也会被缓存，因此后续加载速度非常快。

如果 unpkg 功能消失了怎么办？

不会的。这是一个由 Cloudflare官方支持的项目，每天处理超过 30 亿次请求。

如果我想使用一套没有 npm 包的图标集怎么办？

您可以使用jsDeliver，它具有类似的 API，并且也支持原始 Github 仓库。

我觉得这种图标处理方法非常巧妙。你可以使用Font Awesome、Octicons或 GitHub 上任何其他优秀的图标集。

它速度快、非常可靠，而且能保持代码简洁。