14：SVG 图标系统 – 构建 Defs

<use> 元素对于整个内联 SVG 图标系统来说是关键。我们已经了解到，一种简洁的做法是将所有你打算稍后绘制的内容放入 <defs> 块中，这样它就不会渲染，我们可以稍后引用它们（告诉浏览器绘制该图标）。

在这个视频中，我们将花一些时间手动构建自己的 <defs> 块。它并不特别困难，我认为，它可以让你更清楚地了解所有这些是如何运作的。

我们将从我们在网上不同地方找到的 SVG 中创建它。我们从 The Noun Project、IcoMoon 和 Shutterstock 中获取了一个。我们会认真地打开 SVG，修复任何奇怪的形状，调整画布大小等等。这里对这些矢量信息来自哪里没有限制。这三个来源只是为了向你展示 SVG 可以来自任何矢量源。

稍后，我们希望简化这个过程，但是了解它的工作原理始终是有用的。你永远不知道什么时候需要深入挖掘（例如，找出为什么某些东西无法正常工作）。