Перейти к содержанию

FISYCO

Публичная бета

Настройки генерации иконок

Обновлено 8 ноября 2026 г.

На этой странице показано, что меняет в коде каждая настройка вкладки Генерация. Значения можно выбирать, сразу видя результат.

Где находятся настройки и когда они применяются

Откройте библиотеку иконок, затем Настройки и Генерация. Когда вы что-то меняете, появляется панель сохранения, и кнопка Сохранить записывает изменения. Та же форма служит шагом Генерация при создании библиотеки.

Файлы собираются при экспорте или когда вы создаёте pull request, а не при синхронизации. Сохранение только записывает настройки. После него библиотека показывает Есть изменения: нажмите Синхронизировать, и новые файлы попадут в репозиторий со следующим pull request. FISYCO каждый раз заново генерирует все активные иконки библиотеки, а не только изменившиеся.

Иконки в примерах

Две иконки ниже служат образцами и устроены как настоящие экспорты из Figma. Каждый блок с результатом на этой странице генератор выдал именно для них. Директория вывода везде src/icons, если в примере не указано другое.

Arrow Right, на странице Figma Filled, в секции Arrows:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M4 11H16.17L10.59 5.41L12 4L20 12L12 20L10.59 18.59L16.17 13H4V11Z"
    fill="#000000"
  />
</svg>

Search, на странице Outline, в секции General UI:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle cx="11" cy="11" r="7" stroke="#25314C" stroke-width="1.5" />
  <path
    d="M20 20L16 16"
    stroke="#25314C"
    stroke-width="1.5"
    stroke-linecap="round"
  />
</svg>

Со всеми настройками компонентов по умолчанию они дают такие два файла. Примеры отформатированы для чтения, а генератор пишет JSX каждого компонента в одну строку.

src/icons/arrow-right.tsx

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

src/icons/search.tsx

import * as React from "react";
import type { SVGProps } from "react";
const Search = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <circle cx={11} cy={11} r={7} stroke="#25314c" strokeWidth={1.5} />
    <path
      stroke="#25314c"
      strokeLinecap="round"
      strokeWidth={1.5}
      d="m20 20-4-4"
    />
  </svg>
);
export { Search };

Компоненты проходят через svgo, отсюда и отличия от исходника. #000000 становится #000, #25314C становится #25314c, а данные пути укорачиваются. xmlns и viewBox сохраняются.

Директория вывода

Директория вывода задаёт базовый путь всех сгенерированных файлов. Впишите путь или нажмите Выбрать папку. Если папки ещё нет, её создаст первый коммит с сгенерированными файлами. Директория вывода находится в репозитории, подключённом к проекту.

Поле обязательное, значения по умолчанию у него нет. Допускается до 256 символов: латинские буквы, цифры, _, ., /, - и @, без ...

Режим генерации

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

Компоненты генерируются под React. Для другого фреймворка возьмите спрайт или пакет.

Как имя из Figma становится файлом, компонентом и symbol id

При синхронизации FISYCO нормализует имя из Figma: переводит его в нижний регистр, а пробельные символы заменяет на -. Символы вроде /, _, = и , удаляются. Имя, заданное через Применить переименование, используется вместо нормализованного. Для компонента и symbol id имя без латинских букв и цифр заменяется на node id из Figma.

Эта таблица взята из настоящего запуска с паттерном {section}/{name}, секцией Arrows и префиксом symbol id icon.

Слэш в имени из Figma никогда не создаёт папку. Папки берутся из страниц и секций Figma через {page} и {section}.

Когда у нескольких иконок получается один и тот же путь к файлу, следующие получают номер. С паттерном по умолчанию три иконки с именем Arrow Right станут arrow-right.tsx, arrow-right-2.tsx и arrow-right-3.tsx, а их компоненты будут называться ArrowRight, ArrowRight2 и ArrowRight3. С паттерном {section}/{name} иконки из разных секций сохранят одинаковые имена файла и компонента, каждая в своей папке. Id в спрайте и файлы пакета нумеруются только по имени, каким бы ни был паттерн.

Компоненты

Эти настройки появляются в режиме Компоненты. Каждый пример меняет только названные в нём настройки, а остальные оставляет по умолчанию, как показано выше.

Паттерн вывода

Паттерн вывода собирает путь каждого файла внутри директории вывода. Плейсхолдеров три: {page} для страницы Figma, {section} для фрейма на ней и {name} для иконки. По умолчанию значение {name}.

{name} обязателен. Без него форма отмечает поле как ошибочное и не сохраняет настройки, потому что у каждой иконки должен быть свой файл.

{page} и {section} приводятся к kebab case, поэтому секция General UI становится папкой general-ui. У иконки, лежащей прямо на странице, секции нет, и этот пустой сегмент отбрасывается.

В таблице показаны сгенерированные пути для Arrow Right и для третьей иконки-образца, Plate, которая лежит прямо на странице Filled.

FISYCO добавляет .tsx или .jsx, только если путь ещё не заканчивается расширением. Поэтому паттерн {name}.icon даёт src/icons/arrow-right.icon, без .tsx.

Существуют только эти три плейсхолдера. Любой другой остаётся текстом, а его фигурные скобки превращаются в подчёркивания: {category}/{name} даёт src/icons/_category_/arrow-right.tsx.

TypeScript

TypeScript включён по умолчанию и генерирует файлы .tsx с типизированными props. Если его выключить, генерируются нетипизированные файлы .jsx.

src/icons/arrow-right.jsx

import * as React from "react";
const ArrowRight = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

Тип экспорта

Тип экспорта по умолчанию Именованный экспорт, второй вариант Экспорт по умолчанию. Меняется только последняя строка.

src/icons/arrow-right.tsx с вариантом Экспорт по умолчанию:

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export default ArrowRight;

Стиль объявления

Стиль объявления по умолчанию Стрелочная функция, второй вариант Объявление функции.

src/icons/arrow-right.tsx с вариантом Объявление функции:

import * as React from "react";
import type { SVGProps } from "react";
function ArrowRight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      fill="none"
      viewBox="0 0 24 24"
      {...props}
    >
      <path
        fill="#000"
        d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
      />
    </svg>
  );
}
export { ArrowRight };

Пока Шаблон компонента остаётся на варианте По умолчанию (стрелочная), шаблон не сохраняется, и действует Стиль объявления. Пресет Объявление функции или кастомный шаблон его перекрывает.

Позиция props

Позиция props задаёт, где на <svg> окажется {...props}. В JSX побеждает атрибут, идущий позже.

С вариантом До {...props} переходит в начало <svg>. src/icons/arrow-right.tsx:

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

С вариантом Нет {...props} исчезает из <svg>, а props остаётся в сигнатуре. src/icons/arrow-right.tsx:

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

Режим иконки и оригинальные размеры

Режим иконки (размер 1em) и Сохранять оригинальные размеры по умолчанию включены. Они меняют только корневой <svg>, а viewBox сохраняется всегда.

Сохранять оригинальные размеры влияет на результат, только когда Режим иконки выключен.

Если Режим иконки выключен, а Сохранять оригинальные размеры включено, корневой <svg> сохраняет width={24} height={24}. src/icons/arrow-right.tsx:

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

Если выключены оба параметра, у корневого <svg> нет ни width, ни height. src/icons/arrow-right.tsx:

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

SVG-атрибуты по умолчанию

SVG-атрибуты по умолчанию содержат три поля, изначально пустых: ширина, высота и Цвет. Они применяются к каждому сгенерированному компоненту.

Ширина и высота задают width и height корня. Они применяются после настройки Режим иконки, поэтому перекрывают 1em.

Цвет заменяет цвета заливки и обводки во всей иконке, и в атрибутах, и в style.

  • none, transparent и url(...) остаются как есть, поэтому градиенты сохраняют свои цвета.
  • Содержимое <mask> не меняется.
  • Корневой <svg> без fill получает этот цвет, и фигуры, которые его наследуют, окрашиваются вместе с ним.
  • Цвет применяется после правил замены, поэтому последнее слово за ним. Правило, дающее none, всё равно работает: Цвет не трогает none.

Пример со значениями 32, 32 и currentColor. Корень получает width={32} height={32}, а fill пути становится currentColor.

src/icons/arrow-right.tsx

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={32}
    height={32}
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="currentColor"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

src/icons/search.tsx

import * as React from "react";
import type { SVGProps } from "react";
const Search = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={32}
    height={32}
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <circle cx={11} cy={11} r={7} stroke="currentColor" strokeWidth={1.5} />
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={1.5}
      d="m20 20-4-4"
    />
  </svg>
);
export { Search };

Корень сохраняет fill="none", поэтому контурная иконка остаётся контурной.

Замена значений атрибутов

Замена значений атрибутов подменяет указанные значения при генерации, чаще всего жёстко заданный цвет на currentColor. Кнопка Добавить правило добавляет строку, где во втором поле уже стоит currentColor. Строки с незаполненной половиной отбрасываются.

Правило срабатывает на значение целиком: всё значение атрибута или всё значение свойства в style. #000000 не затронет #000000AA.

Hex-значения в правиле совпадают в любом регистре и в короткой или длинной форме. Поэтому #000000 находит #000, который оставляет svgo. Всё остальное сравнивается точно, с учётом регистра. Кроме того, svgo заранее превращает black в #000, так что правило для black в компонентах ничего не делает. Используйте hex-значение.

До замены у пути fill="#000", как в файле по умолчанию выше.

После правила #000000 → currentColor значение fill у пути становится currentColor. src/icons/arrow-right.tsx:

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="currentColor"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

Search не меняется, потому что его цвет #25314C. Для каждого цвета нужно своё правило.

Правила выполняются в порядке списка, каждое над результатом предыдущего. С правилами #000 → red и затем red → blue значение fill у пути в итоге становится blue:

src/icons/arrow-right.tsx

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="blue"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

Если у двух правил совпадает первое значение, побеждает более позднее.

Правила работают с любым атрибутом, а не только с цветами. 1.5 → 2 меняет stroke-width в Search. Числовое правило меняет каждый атрибут, значение которого целиком равно этому числу, поэтому 11 → 99 сдвигает круг, меняя cx и cy.

Шаблон компонента

Шаблон компонента задаёт форму файла. В списке есть По умолчанию (стрелочная), Объявление функции и Использовать кастомный шаблон. Пресеты доступны только для чтения, а кастомный вариант открывает редактор.

Сохранённый кастомный шаблон никуда не исчезает и при возвращении на вкладку показывается как кастомный. Нетронутый шаблон остаётся пустым, и тогда действует Стиль объявления. Пресет, отличный от стандартного, или кастомный шаблон перекрывает Стиль объявления.

Пробелы внутри скобок допустимы, и заменяется каждое вхождение. Шаблон должен содержать {{componentName}} и {{jsx}}, а неизвестный плейсхолдер отклоняется при сохранении. Лимит составляет 5000 символов.

Пример кастомного шаблона:

{{imports}}
import { memo } from "react";

const {{ componentName }}Base = ({{props}}) => {{jsx}};
{{componentName}}Base.displayName = "{{componentName}}";

export const {{componentName}} = memo({{componentName}}Base);

Файл, который он генерирует, src/icons/arrow-right.tsx:

import * as React from "react";
import type { SVGProps } from "react";
import { memo } from "react";

const ArrowRightBase = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="#000"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
ArrowRightBase.displayName = "ArrowRight";

export const ArrowRight = memo(ArrowRightBase);

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

SVG-спрайт

В режиме SVG-спрайт FISYCO пишет один файл с <symbol> на каждую иконку. За основу берётся сохранённый SVG, без svgo. Подробнее о формате: SVG-спрайт иконок.

Имя файла спрайта по умолчанию icons-sprite.svg и должно заканчиваться на .svg. Файл ложится прямо в директорию вывода. Часть пути с папкой отбрасывается, а небезопасные символы заменяются на _, поэтому assets/My Icons.svg окажется в src/icons/My_Icons.svg.

Префикс symbol id по умолчанию пуст. Он приводится к kebab case и присоединяется через -, поэтому icon даёт icon-arrow-right, а Ds Icon_ даёт ds-icon-arrow-right.

С настройками по умолчанию, src/icons/icons-sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="arrow-right" viewBox="0 0 24 24">
    <g fill="none">
      <path
        d="M4 11H16.17L10.59 5.41L12 4L20 12L12 20L10.59 18.59L16.17 13H4V11Z"
        fill="#000000"
      />
    </g>
  </symbol>
  <symbol id="search" viewBox="0 0 24 24">
    <g fill="none">
      <circle cx="11" cy="11" r="7" stroke="#25314C" stroke-width="1.5" />
      <path
        d="M20 20L16 16"
        stroke="#25314C"
        stroke-width="1.5"
        stroke-linecap="round"
      />
    </g>
  </symbol>
</svg>

Атрибуты, которые фигуры наследуют от корневого <svg>, например fill и stroke-width, переносятся на <g> внутри каждого символа. Так контурные иконки остаются контурными.

Свой список замен у спрайта

У спрайта свой список Замена значений атрибутов. Совпадения работают так же, как у компонентов, но применяются к сохранённому SVG. Правила компонентов и Цвет здесь не действуют.

Без svgo названия цветов остаются как есть, поэтому правило #000000 не совпадёт с fill="black". Hex-значения по-прежнему совпадают в короткой и длинной форме и в любом регистре.

Пример: Имя файла спрайта sprite.svg, Префикс symbol id icon и правила #000000 → currentColor и #25314C → currentColor. src/icons/sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon-arrow-right" viewBox="0 0 24 24">
    <g fill="none">
      <path
        d="M4 11H16.17L10.59 5.41L12 4L20 12L12 20L10.59 18.59L16.17 13H4V11Z"
        fill="currentColor"
      />
    </g>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <g fill="none">
      <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.5" />
      <path
        d="M20 20L16 16"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
    </g>
  </symbol>
</svg>

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

Как использовать спрайт

Укажите в <use> файл и symbol id. Пример предполагает, что приложение отдаёт файл по адресу /icons/sprite.svg:

<svg width="1em" height="1em">
  <use href="/icons/sprite.svg#icon-arrow-right" />
</svg>
<svg width="1em" height="1em">
  <use href="/icons/sprite.svg#icon-search" />
</svg>

У символов есть только viewBox, поэтому размер задаёт внешний <svg>. Файл должно отдавать ваше приложение, так что выбирайте директорию вывода с учётом этого.

Браузеры не разрешают <use> обращаться к файлу с другого origin. Отдавайте спрайт с того же origin, что и страницу.

Пакет

Пакет записывает SVG-файлы, JSON-манифест и приватный package.json, чтобы разные приложения пользовались одним набором иконок. Это папка с файлами, а не собранный npm-пакет: здесь нет JavaScript, типов и шага сборки.

В примере ниже значения условные: директория вывода packages/icons, Имя пакета @acme/icons, Имя входного файла index, формат ESM, exports map включён. Записываются такие файлы:

packages/icons/icons/arrow-right.svg
packages/icons/icons/search.svg
packages/icons/index.json
packages/icons/package.json

Каждый SVG побайтно совпадает с файлом, сохранённым из Figma. Ни один из списков замен не применяется, как и Цвет, поэтому иконки в пакете сохраняют цвета, нарисованные в Figma.

packages/icons/icons/arrow-right.svg

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M4 11H16.17L10.59 5.41L12 4L20 12L12 20L10.59 18.59L16.17 13H4V11Z"
    fill="#000000"
  />
</svg>

В манифесте перечислены все иконки, а в поле id указан node id из Figma.

packages/icons/index.json

[
  {
    "id": "1:2",
    "name": "arrow-right",
    "path": "./icons/arrow-right.svg"
  },
  {
    "id": "3:4",
    "name": "search",
    "path": "./icons/search.svg"
  }
]

packages/icons/package.json

{
  "name": "@acme/icons",
  "version": "0.0.0",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "files": ["icons", "index.json"],
  "module": "./index.json",
  "exports": {
    ".": "./index.json",
    "./icons/*": "./icons/*"
  }
}

Версия всегда 0.0.0. С "private": true npm откажется публиковать сгенерированный пакет. Поле module и запись . в exports указывают на JSON-манифест.

package.json записывается в директорию вывода, поэтому эта папка должна принадлежать пакету.

Рецепты

Пути, имена и цвета в этих рецептах условные. Результат сгенерирован для иконок-образцов.

React + TypeScript + currentColor

Подходит, если приложение на React и иконки должны брать цвет текста.

  • Директория вывода: src/components/icons
  • Режим генерации: Компоненты
  • Паттерн вывода: {section}/{name}
  • TypeScript: включён, остальные параметры по умолчанию
  • Замена значений атрибутов: #000000 → currentColor и #25314C → currentColor

src/components/icons/arrows/arrow-right.tsx

import * as React from "react";
import type { SVGProps } from "react";
const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="currentColor"
      d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"
    />
  </svg>
);
export { ArrowRight };

src/components/icons/general-ui/search.tsx

import * as React from "react";
import type { SVGProps } from "react";
const Search = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 24 24"
    {...props}
  >
    <circle cx={11} cy={11} r={7} stroke="currentColor" strokeWidth={1.5} />
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={1.5}
      d="m20 20-4-4"
    />
  </svg>
);
export { Search };

Если все иконки должны принимать один цвет, обойдитесь без правил и задайте для поля Цвет значение currentColor. Оба файла получатся такими же.

Спрайт для приложения не на React

Подходит, если код не на React или вы хотите отдавать один файл.

  • Директория вывода: public/icons
  • Режим генерации: SVG-спрайт
  • Имя файла спрайта: sprite.svg
  • Префикс symbol id: icon
  • Замена значений атрибутов: #000000 → currentColor и #25314C → currentColor

public/icons/sprite.svg

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon-arrow-right" viewBox="0 0 24 24">
    <g fill="none">
      <path
        d="M4 11H16.17L10.59 5.41L12 4L20 12L12 20L10.59 18.59L16.17 13H4V11Z"
        fill="currentColor"
      />
    </g>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <g fill="none">
      <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.5" />
      <path
        d="M20 20L16 16"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
      />
    </g>
  </symbol>
</svg>

Рисуйте иконки фрагментом из раздела Как использовать спрайт выше. Раздача public/ из корня сайта зависит от вашего приложения, FISYCO этим не управляет.

Общий пакет для нескольких приложений

Подходит, если несколько приложений в одном репозитории должны брать одни и те же SVG-файлы.

  • Директория вывода: packages/icons
  • Режим генерации: Пакет
  • Имя пакета: @acme/icons
  • Имя входного файла: index
  • Формат пакета: ESM
  • Добавить exports map в package.json: включено

Результат: дерево файлов, манифест и package.json из раздела Пакет выше. Такая папка воркспейса подходит приложениям, которые берут SVG-файлы через ./icons/*, и скриптам, читающим манифест. Способ импорта SVG зависит от сборки конкретного приложения, поэтому проверьте это в своём проекте.

См. также