Quiero mostrar un ícono incluso con más de una ruta. Sé que puedo hacer que esto suceda fusionando todas las rutas a 2 rutas como mínimo donde puedo usar el antes y el después para mostrar el ícono usando un elemento HTML donde solo necesito pasar el nombre de la clase y con el iframe, puedo hacer visible en mi pantalla.

Así que tengo todos estos caminos solo para un ícono. Cómo hacer que el ícono sea visible incluso con todas estas rutas.

 .icon-claus-santa-xmas-christmas-svgrepo-com .path1:before { content: "\e900"; color: rgb(255, 96, 150); } .icon-claus-santa-xmas-christmas-svgrepo-com .path2:before { content: "\e901"; margin-left: -1em; color: rgb(255, 255, 255); } .icon-claus-santa-xmas-christmas-svgrepo-com .path3:before { content: "\e902"; margin-left: -1em; color: rgb(255, 64, 129); } .icon-claus-santa-xmas-christmas-svgrepo-com .path4:before { content: "\e903"; margin-left: -1em; color: rgb(252, 228, 236); } .icon-claus-santa-xmas-christmas-svgrepo-com .path5:before { content: "\e904"; margin-left: -1em; color: rgb(240, 250, 255); } .icon-claus-santa-xmas-christmas-svgrepo-com .path6:before { content: "\e905"; margin-left: -1em; color: none; } .icon-claus-santa-xmas-christmas-svgrepo-com .path7:before { content: "\e906"; margin-left: -1em; color: none; }

Estaba pensando en hacerlo con Vanilla JavaScript y construir el ícono capa por capa obteniendo el nombre del ícono dinámicamente y buscando el CSS en todas estas rutas.

¿Es eso posible? Si no, ¿cuál sería el mejor camino (:D) a seguir?