图标
在 React.js 中管理图标的“最佳”方法图标渲染技术
在构建用户界面中,图标无处不在。在过去的 7 年里,我一直使用 React 构建 UI,并且尝试了许多不同的技术来管理图标。每种技术都有不同的权衡。我使用的主要技术是:
- 图像 + SVG
<img src="icon.svg" />
- 内联 SVG
const icon = (
<svg viewBox="0 0 24 24" width={16} height={16}>
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
);
- 使用 SVG Sprites 的内联 SVG
const icon = (
<svg viewBox="0 0 24 24" width={16} height={16}>
<use href="sprite.svg#icon" />
</svg>
);
使用 Sprites 的内联 SVG 提供最佳性能以体验权衡。
权衡
我们正在评估的主要权衡是性能与用户体验。在你对我说“好吧,性能是用户体验的一部分”之前,我知道(我同意),让我们继续前进。
技术1:图像 + SVG
当使用我提到的第一种方法时,图像标签引用图像资源(png、svg 等),第一次下载页面时,图标渲染之前会出现闪烁。发生这种情况是因为请求瀑布。首先,浏览器下载 HTML 文档。然后,它发出后续请求以获取页面的所有资源(图像、脚本、样式表等)。引用外部资产的好处是缓存。浏览器(或 CDN)可以缓存资产并在后续请求中引用它。该技术针对后续请求进行了优化,但初始加载体验并不理想。这种技术的另一个缺点是,当在图像标签中引用 svg 时,我们无法使用 CSS 设置 svg 的样式。
技术 2:内联 SVG
第二种技术通常用于解决我刚才提到的问题,即将 svg 内联到 HTML 文档中。当浏览器下载 HTML 文档时,不需要对图像资源进行二次请求,它会立即出现(无闪烁)。另一个好处是现在可以使用 CSS (win + win) 访问内容并设置样式。但这种方法并非没有缺陷。将 SVG 内联到 HTML 文档中会使文档明显变大,并向页面添加元素(这会降低内存性能)。谷歌的优秀人员写了一篇关于这个主题的好文章。
第二个陷阱是 SVG 会使 JavaScript 包的大小变得臃肿。在渲染任何内容之前,浏览器必须下载、解析和评估页面上的 JavaScript。将 SVG 包含在您的捆绑包中会让您支付两次费用。您有一个更大的包需要下载和解析(对于某些图标来说,路径数据可能很大,特别是当它们更复杂时),然后渲染的 HTML 会向页面添加大量附加元素(减慢 DOM 遍历)。绝大多数 React 应用程序都使用第二种技术(我过去一直是它的大力支持者),但是在与 react-icons
膨胀相对简单页面的包大小进行斗争之后,我知道必须是一个更好的方式。
注意:有一些方法可以将未使用的图标从捆绑包中删除,但如果你不小心 react-icons 开箱即用,会给你一个 5mb 的 JavaScript 捆绑包。
使用 SVG Sprites 渲染图标
好吧,如果你已经走到这一步,恭喜你,你的生活即将改变。还有第三种选择:SVG Sprites,它可以解决我在这两种方法中提到的大部分问题。
您可能还不够老,无法记住图像精灵(您可能不诚实),但本质上您会将所有图像资源放入单个图像中,然后使用坐标引用特定图像(用于放置图标的位置)在精灵上)。这是一种用于避免大量图像请求的性能技术(HTTP 2 现在已经很大程度上解决了这个问题)。这种技术相似,但又不同。
符号元素
让我向您介绍 <symbol>
元素。符号元素 “用于定义可由 <use>
元素实例化的图形模板对象。” -MDN。当与 <defs>
元素 结合使用时,我们可以用我们的图标构建一个 svg 精灵。
首先,我们创建一个文件 sprite.svg,并添加一个包含 defs 元素和 <symbol>
的 <svg>
元素。接下来,我们获取图标(我们将内联的图标),将 svg 替换为符号元素,并为其指定一个 id。身份证很重要!最后,我们将通过将其添加为符号来向精灵添加第二个图标。
例子:
<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 24 24" id="icon-1">
<path
d="M6.84 5.76L8.4 7.68H5.28l-.72 2.88H2.64l.72-2.88H1.44L0 13.44h3.84l-.48 1.92h3.36L4.2 18.24h2.82l2.34-2.88h5.28l2.34 2.88h2.82l-2.52-2.88h3.36l-.48-1.92H24l-1.44-5.76h-1.92l.72 2.88h-1.92l-.72-2.88H15.6l1.56-1.92h-2.04l-1.68 1.92h-2.88L8.88 5.76zm.24 3.84H9v1.92H7.08zm7.925 0h1.92v1.92h-1.92Z"
/>
</symbol>
<symbol viewBox="0 0 24 24" id="icon-2">
<path
d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"
/>
</symbol>
</defs>
</svg>
您可以继续将所有图标定义为该文件中的符号(尽管要注意文件大小,即保持在 125kb 以下)。接下来,我们将创建一个引用我们的精灵的 React 组件。
import { render } from "react-dom";
// keep a list of the icon ids we put in the symbol
const icons = ["icon-1", "icon-2"];
// then define an Icon component that references the
function Icon({ id, ...props }) {
return (
<svg {...props}>
<use href={`/sprite.svg#${id}`} />
</svg>
);
}
// In your App, you can now render the icons
function App() {
return (
<div className="App">
{icons.map((id) => {
return <Icon key={id} id={id} />;
})}
</div>
);
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);
使用元素
在上面的示例中,神奇之处发生在链接到“片段标识符”(也称为我们在符号上定义的 id)的 <use>
元素中。现在,我们有了一个图标组件,可以让我们使用内联 SVG 执行所有操作(例如定义图标的高度、宽度和颜色),但所有路径数据都存在于外部资源中(而不是存在于外部资源中)。 JavaScript 包)。
额外提示
您可以 preload sprite.svg 文件(然后缓存它)来提高性能。 “通过预加载某个资源,您可以告诉浏览器您希望比浏览器发现它更早地获取它,因为您确定它对当前页面很重要。” - web.dev。
要预加载精灵,您可以将链接标签添加到文档的头部。
<head>
<link rel="preload" as="image/svg+xml" href="sprite.svg" />
</head>
根据服务器的配置,您可能需要确保在 sprite.svg 上设置正确的缓存标头,以便浏览器可以适当地缓存它。