How would you approach organizing SVG icons when building a system from scratch?

When organizing SVG icons from scratch, it is important to ensure ease of use, scalability, and performance.

Main approaches:

• SVG Sprite: combine all icons into a single SVG file with <symbol> elements, then use <use> to insert the desired icon. This reduces the number of HTTP requests.

• Components: create React/Vue/Angular components for each icon, which simplifies management and styling.

• Optimization: use tools like SVGO to minimize file sizes.

• Caching: store icons in a separate file or CDN for caching.

Example of using an SVG sprite:

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