Servir iconos SVG, ¿mejores prácticas?

adruiz

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
12 Abr 2021
Mensajes
94
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.
 

Alfredo Ramos

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
Usuario nuevo
¡Usuario con pocos negocios!
Desde
5 Abr 2022
Mensajes
61
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>.
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba