Как перенести иконки в Figma: спрайты, иконочные шрифты, CSS-маски

Приходит всё, кроме иконок. Пустые квадраты, чёрные пятна или ничего.

Вы переносите страницу в Figma, и приходит всё, кроме иконок. Там, где были стрелки, лупа и значки внешних ссылок, — пустые квадраты, чёрные пятна или вообще ничего.

Это не один баг. В вебе иконки рисуют четырьмя совершенно разными способами, и каждый ломается по-своему. Понимание того, с каким вы имеете дело, сразу говорит, чинится это или нет и как именно.

Четыре вида иконок и способ, которым каждый подводит

1. Встроенный SVG

Лёгкий случай. Иконка написана прямо в HTML как элемент <svg> с путями внутри. Любой конвертер, читающий DOM, видит геометрию и отдаёт Figma вектор.

Когда это ломается, обычно конвертер что-то сплющил: ссылку <use> на символ, объявленный в другом месте, CSS-filter, или заливку currentColor, которая осталась без цвета за пределами своего каскада.

2. SVG-спрайты

В одном файле лежат все иконки в виде <symbol>, а в каждом месте, где иконка появляется, стоит только ссылка.

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

В вебе экономно, для наивного конвертера — невидимо. В элементе внутри DOM нет никаких путей. Прочитайте буквально — получите пустой <svg>, и поэтому спрайты так часто приходят пустыми коробками правильного размера.

Чтобы их разрешить, нужно пройти по ссылке, забрать файл спрайта, найти символ по id и подставить геометрию. А если спрайт лежит на другом источнике, сам этот запрос ещё должен быть разрешён.

3. Иконочные шрифты

Иконка — это символ в шрифте. Font Awesome, Material Icons и любой внутренний иконочный шрифт устроены так: элемент с классом, псевдоэлемент ::before и свойство content с кодовой точкой из области частного использования Unicode.

.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.

• Спрайтам нужно, чтобы файл по ссылке был загружен, а символ извлечён.
• Иконочным шрифтам нужно прочитать стили псевдоэлемента, разрешить кодовую точку и нарисовать глиф вектором, а не передать текстом.
• Иконкам на масках нужно загрузить изображение маски и применить цвет элемента к получившейся форме, а не к прямоугольнику.

Конвертер, который просто обходит DOM и копирует найденное, справится с первым случаем и молча провалит остальные. Это обычное поведение, а не редкость.

Как понять, что у вас

Откройте страницу, правой кнопкой по иконке, «Просмотреть код». Тридцати секунд хватит.

Что Snapture делает с каждым

Обрабатываются все четыре, и стоит сказать конкретно, потому что «мы поддерживаем иконки» говорит любой инструмент.

• Встроенный SVG проходит векторной геометрией. Там, где SVG настолько сложен, что импортёр Figma захлебнётся — вложенные маски, фильтры, foreignObject, — он растрируется. Это осознанное ухудшение, а не молчаливый провал.
• Спрайты разрешаются переходом по ссылке <use>, загрузкой спрайта и подстановкой геометрии нужного символа с правильным viewBox.
• Иконочные шрифты определяются по вычисленному content псевдоэлемента, и глиф рисуется как фигура, а не передаётся в Figma символом. Результат не зависит от того, установлен ли у вас этот шрифт.
• Иконки на CSS-масках разрешаются загрузкой изображения маски и применением собственного цвета элемента к полученной форме, так что такая иконка приходит в своём настоящем цвете, а не залитым прямоугольником.

В измерениях, опубликованных на странице измерений, главная Linear дала 215 векторных узлов, а Stripe — 153. Большая часть этого — работа с иконками, и именно здесь проходит граница между файлом, который можно править, и файлом с дырами.

Если в файле иконки уже сломаны

Растрированный чёрный квадрат не чинится: сведений о форме в файле никогда не было. Переимпортируйте инструментом, который разрешает именно ваш случай.

Единственное исключение — иконочные шрифты. Если иконки пришли текстовыми символами и шрифт у вас установлен, у вас Figma нарисует их правильно, но у любого, кто откроет файл без этого шрифта, всё сломается. Лучше всё-таки переимпортировать, чем отдавать файл, который работает только у вас.

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