Appearance

渲染模式 ​

本教程是 Iconify Icon Web 组件教程 的一部分。

该 Web 组件支持多种图标渲染模式。

模式 ​

Web 组件支持 4 种模式：

  • "svg"：渲染 <svg> 元素。
  • "style"：根据图标调色板使用 "bg" 或 "mask" 模式。
  • "bg"：将图标作为背景图像渲染 <span> 元素。仅适用于带有调色板的图标。
  • "mask"：将图标作为遮罩图像渲染 <span> 元素。仅适用于不带调色板的图标。

演示使用 4 种模式渲染的 2 个图标（一个单色，一个带调色板）：

svg:

style:

bg:monotone icon shown as black

mask:icon with palette loses color

代码示例 ​

这些模式在 DOM 中实际上是什么样子的？

mdi:home（用于上述模式演示）图标的示例：

html<svg
   xmlns="http://www.w3.org/2000/svg"
   width="1em"
   height="1em"
   viewBox="0 0 24 24"
>
   <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z"></path>
</svg>
svg mode
html<span
   style="
       --svg: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'currentColor\' d=\'M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z\'/%3E%3C/svg%3E');
       width: 1em;
       height: 1em;
       background-color: transparent;
       background-image: var(--svg);
       background-repeat: no-repeat;
       background-size: 100% 100%;
   "
></span>
bg mode
html<span
   style="
       --svg: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'currentColor\' d=\'M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z\'/%3E%3C/svg%3E');
       width: 1em;
       height: 1em;
       background-color: currentcolor;
       -webkit-mask-image: var(--svg);
       -webkit-mask-repeat: no-repeat;
       -webkit-mask-size: 100% 100%;
       mask-image: var(--svg);
       mask-repeat: no-repeat;
       mask-size: 100% 100%;
   "
></span>
mask mode

为什么不直接渲染 SVG？ ​

你可能想知道，为什么需要这样做？难道 <svg> 还不够吗？

将图标渲染为 <svg> 对大多数图标都有效，但对于使用 SVG 动画的图标并不总是有效。

SVG 动画必须等到文档就绪后才能开始。这看起来可能微不足道，但动画渲染不够快会导致糟糕的用户体验。此问题可能由一些小问题引起，例如统计脚本加载失败或广告代码加载缓慢。如果页面加载资源的服务器中至少有一个无法访问，可能会破坏页面上所有动画 SVG。async 和 defer 属性也无济于事。该问题甚至可能由 iframe 中的脚本引起。

动画延迟演示 ​

下方是一个 <iframe>，展示了图标渲染问题。它包含一个动画图标，分别以 <svg> 和背景图像的形式渲染。两个图标都会立即渲染，但 <svg> 中的动画在几秒钟内不会开始，因为文档仍在加载。

Hover demo above to restart it.