¿Cuál es la mejor forma de servir iconos SVG en front-end?

Muy buenas, betas!

Vengo para conocer, entre frontends, cual consideráis la mejor manera para servir iconos en SVG. Obviamente me refiero a assets propios, no a frameworks ni librerías como Font Awesome.

Mi interés viene por el hecho de que yo, desde hace años, cogí la costumbre de usar elementos <i> con clase .icon para servir iconos. Al cualquier i.icon les paso estilos básicos como un formato y tamaño de background estándar, y luego a clases como .whatsapp les paso un background-image con el asset de whatsapp. Esto con SASS usando listas y foreach es super útil y práctico. Pero también he visto que a veces algunos iconos no se veían (al recargar sí), y por otro lado, semánticamente es incorrecto usar <i> para este tipo de cosas.

¿Vosotros cómo servis los iconos? ¿Es mejor usar imagenes frontales (<img>), backgrounds, o crear una librería propia con font-family? Os leo.

En el trabajo utilizamos sprites SVG usando <symbol>, que luego llamamos y mostramos con <use>.

Esto porque en ocasiones requerimos cambiar los colores de fill o stroke con CSS, cosa que no podríamos hacer tan fácilmente si los usáramos como fondo con background-image.

En CSS Tricks tienen un artículo al respecto:

- https://css-tricks.com/svg-symbol-good-choice-icons/
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

En otros componentes utilizamos la biblioteca Iconify, que utiliza <span> en lugar de <i>, aunque se vuelve irrelevante porque lo transforma en un tag <svg>.