把网页导入 Figma 时图标为什么会消失

什么都到了，就是图标没到。空盒子、黑方块，或者原本箭头位置上的小长方形。原因有四种，是哪一种决定了能不能修。

你把一个页面搬进 Figma，什么都到了，就是图标没到。原本箭头、放大镜和外链小标记的位置，剩下空方块、黑块，或者什么都没有。

这不是一个 bug。网页上画图标有四种完全不同的做法，每一种坏的方式也不一样。弄清楚你面对的是哪一种，就知道能不能修、怎么修。

四种图标，四种失败方式

1. 内联 SVG

最容易的一种。图标直接写在 HTML 里，是一个 <svg> 元素，path 就在里面。任何读 DOM 的转换器都能看到几何形状，直接交给 Figma 一个矢量。

这种情况失败，通常是转换器压平了什么东西：用 <use> 引用了别处定义的 symbol、挂着 CSS filter、或者用 currentColor 填充但脱离了继承环境后没了颜色。

2. SVG 雪碧图

一个文件把所有图标存成 <symbol>，用到图标的地方只放一个引用。

<svg class="icon"><use href="/icons.svg#chevron-down" /></svg>

在网页上很高效，对天真的转换器却是隐形的。DOM 里那个元素内部没有 path。照字面读，得到的是一个空的 <svg>，所以雪碧图常常变成尺寸正确的空白盒子。

要解决它，得顺着引用去取雪碧图文件，按 id 找到 symbol，再把几何形状内嵌进来。如果雪碧图在另一个源上，这个请求本身还得先被允许。

3. 图标字体

图标是字体里的一个字符。Font Awesome、Material Icons 以及各家自建的图标字体都是这么做的：一个带 class 的元素、一个 ::before 伪元素，以及一个装着 Unicode 私用区码位的 content 属性。

.fa-search::before { content: "\f002"; }

有两件事会出错。第一，图标住在伪元素里，而伪元素不在 DOM 中——元素树怎么遍历都找不到它。第二，就算转换器把它当成文本抓到了，进到 Figma 也是那个字符本身，而如果你机器上没装这套图标字体，Figma 就画它的后备字形：一个空方框，或者某个不相干的字。

导入的页面里满是小长方形，这个经典症状就是这么来的。

4. CSS 遮罩图标

值得单独讲，因为它越来越常见，而且失败的样子看起来像成功。元素完全没有内容，只有背景色和一个遮罩。

.icon {
  background-color: currentColor;
  -webkit-mask-image: url(/icons/search.svg);
  mask-size: contain;
}

形状在遮罩图里，颜色在元素上。读背景的转换器拿到的是一个图标颜色的实心矩形。所以这类往往变成黑色或彩色的方块，而不是什么都没有：颜色对了，形状没了。

用 VitePress 做的文档站大量使用这个模式。我们最早就是这么撞上的：有人反馈某个文档站的图标全都被导成了黑方块。

转换器为什么会漏掉

因为要覆盖这四种，得做四件不同的事，其中三件都不止于读 DOM。

• 雪碧图需要把被引用的文件取回来，再把 symbol 提取出来。
• 图标字体需要读伪元素的样式、解析码位，把字形画成矢量，而不是当作文本传下去。
• 遮罩图标需要取回遮罩图，并把元素的颜色应用到得到的形状上，而不是应用到一个矩形上。

只顺着 DOM 走一遍、把找到的东西复制下来的转换器，能搞定第一种，其余三种会静默失败。这是常态，不是特例。

怎么判断自己是哪一种

打开页面，右键点图标，检查。三十秒就能看出来。

Snapture 分别怎么处理

四种都处理。"我们支持图标"这话每个工具都会说，所以具体写清楚怎么做的。

• 内联 SVG 按矢量几何原样通过。如果某个 SVG 复杂到 Figma 的导入器会卡住——嵌套遮罩、滤镜、foreignObject——就改为栅格化。这是有意的降级，不是静默失败。
• 雪碧图 通过顺着 <use> 引用、取回雪碧图、把被引用 symbol 的几何形状连同正确的 viewBox 一起内嵌来解决。
• 图标字体 通过读伪元素的计算 content 来识别，并把字形画成图形，而不是当作字符交给 Figma。结果不依赖你有没有装那套图标字体。
• CSS 遮罩图标 通过取回遮罩图、把元素自身的颜色应用到得到的形状上来解决，所以遮罩图标是以真实颜色的图标形态进来的，而不是一个填色矩形。

在实测页面公布的那次测量里，Linear 的首页产出了 215 个矢量节点，Stripe 是 153 个。其中大部分都是图标的活儿，能不能编辑和文件上有没有窟窿，差别就在这儿。

如果文件里的图标已经坏了

栅格化的黑方块没法修，形状信息压根没进到文件里。用能解决你这一类情况的工具重新导入。

唯一的例外是图标字体。如果它们是以文本字符进来的，而你本机装了那套字体，Figma 在你这儿会画得没问题——但对任何没装这套字体的人来说，文件就是坏的。与其交出一个只有你自己看着正常的文件，还是重新导入更好。

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia