Как бы ты подошла к организации SVG-иконок при построении системы с нуля?

При организации SVG-иконок с нуля важно обеспечить удобство использования, масштабируемость и производительность.

Основные подходы:

• Сприт-спрайт SVG: объединить все иконки в один SVG-файл с символами <symbol>, затем использовать <use> для вставки нужной иконки. Это уменьшает количество HTTP-запросов.
• Компоненты: создать React/Vue/Angular компоненты для каждой иконки, что упрощает управление и стилизацию.
• Оптимизация: использовать инструменты вроде SVGO для минимизации размера файлов.
• Кэширование: хранить иконки в отдельном файле или CDN для кэширования.

Пример использования SVG-спрайта:

<svg style="display:none;">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#icon-search"></use>
</svg>