SVG 符号
想要使用 SVG + JS 方法获取您的图标雪碧图，从而在您的页面上提高重复图标的性能吗？我们帮您搞定。
我们将介绍何时以及如何使用 SVG 雪碧图来提高重复使用相同图标的网站的加载时间。
您可能想知道使用 JavaScript 渲染图标会如何影响性能。您并非唯一一个有这种疑问。我们在开发它时也对此感到担忧，甚至采取了一些特殊措施来确保 它尽可能快.
我们的测试表明，对于大多数人在网站上使用的典型图标数量，SVG+JS 方法的加载和渲染速度比网页字体更快.
SVG 符号的优势
以下案例非常适合使用 SVG 符号 - 页面上重复了许多相同的图标，因此您可以通过使用以下分步方法仅加载一次每个图标来大幅提高性能。
分步指南
我们将把这些图标定义为符号：铅笔、垃圾桶和星形。
<!-- Define the icon symbols, these are invisible on the page --> <i data-fa-symbol="truck" class="fa-solid fa-truck fa-fw"></i> <i data-fa-symbol="truck-bolt" class="fa-regular fa-truck-bolt fa-fw"></i> <i data-fa-symbol="truck-container" class="fa-light fa-truck-container fa-fw"></i> <i data-fa-symbol="truck-droplet" class="fa-thin fa-truck-droplet fa-fw"></i> <i data-fa-symbol="truck-field" class="fa-duotone fa-truck-field fa-fw"></i> <i data-fa-symbol="truck-flatbed" class="fa-sharp fa-solid fa-truck-flatbed fa-fw"></i>
<!-- Use the defined symbols --> <svg><use href="#truck"></use></svg> <svg><use href="#truck-bolt"></use></svg> <svg><use href="#truck-container"></use></svg> <svg><use href="#truck-droplet"></use></svg> <svg><use href="#truck-field"></use></svg> <svg><use href="#truck-flatbed"></use></svg> <!-- Define the symbols, these are invisible on the page --> <i data-fa-symbol="delete" class="fa-solid fa-trash fa-fw"></i> <i data-fa-symbol="edit" class="fa-solid fa-pencil fa-fw"></i> <i data-fa-symbol="favorite" class="fa-solid fa-star fa-fw"></i>
<!-- Use the defined symbols --> <svg><use href="#edit"></use></svg> <svg><use href="#delete"></use></svg> <svg><use href="#favorite"></use></svg>使用 data-fa-symbol 通知 Font Awesome SVG with JavaScript 创建符号。此属性的值将成为名称。
<!-- Name symbols with the value of data-fa-symbol --><i data-fa-symbol="picture-taker" class="fas fa-camera"></i>
<!-- Use the defined name --><svg><use href="#picture-taker"></use></svg>确保添加了一些 CSS
SVG 雪碧图的缺点之一是需要额外的样式才能使其正常工作。使用符号时，您需要自己处理这个问题。
<!-- A quick, reasonable place to start with styling your symbols --><style> .icon { width: 1em; height: 1em; vertical-align: -0.125em; }</style>
<!-- Name symbols with the value of data-fa-symbol --><i data-fa-symbol="picture-taker" class="fas fa-camera"></i>
<!-- Use the defined name --><svg class="icon"><use href="#picture-taker"></use></svg> Say Cheese!xlink:href 怎么样？它发生了什么？
MDN 文档告诉我们，对于现代浏览器，不再需要 xlink:。
SVG 2 移除了对 xlink 命名空间的需要，因此您应该使用 href 而不是 xlink:href。
但是，如果您确实需要支持需要它的旧浏览器，建议同时使用 href 和 xlink:href。这样，当现代浏览器最终删除对 xlink:href 的支持时，一切仍将正常运行。
<!-- Name symbols with the value of data-fa-symbol --><i data-fa-symbol="picture-taker" class="fas fa-camera"></i>
<!-- Use the defined name -->
<svg class="icon"> <use href="#picture-taker" xlink:href="#picture-taker"></use></svg>Say Cheese!