Estoy usando la API de OpenWeather para mostrar el pronóstico actual y de cinco días en el sitio web de mi cliente.
Tengo algunos íconos SVG personalizados que quiero usar en lugar de los íconos proporcionados por OpenWeather. Implementé la siguiente declaración de cambio para mostrar un ícono diferente según las condiciones climáticas.
let dailyCondition = value.weather[0].description; let dailyCondtionIcon = ""; switch (dailyCondition) { case "clear sky": dailyConditionIcon = `<svg>icon</svg>`; break; case "few clouds": dailyConditionIcon = `<svg>icon</svg>`; break; case "thunderstorm": dailyConditionIcon = `<svg>icon</svg>`; break; case "light rain": dailyConditionIcon = `<svg>icon</svg>`; break; }Acceder a los íconos desde el código literal de la plantilla funciona, pero con muchas condiciones climáticas en la declaración de cambio, el código está muy inflado. Me gustaría tener los íconos SVG almacenados en un archivo externo y cargados desde allí.
¿Cómo haría para cargar los íconos SVG externos en mi archivo JavaScript estándar?
Si prefiere archivos svg externos, puede cargarlos en un elemento <use> .
Véase también use de SVG con fuente externa
Puede combinar todos los íconos svg en un solo archivo svg de biblioteca de activos/sprites y luego cargar cada ícono individualmente por un identificador de fragmento:
Sus definiciones js podrían verse así:
dailyConditionIcon = '<svg class="svgInline" fill="red" ><use href="sprite.svg#circle" /></svg>' .svgAssets{ display:none } .svgInline{ display:inline-block; width:1em; height:1em; font-size:32px; } <!-- this would be the content of your "sprite.svg" --> <svg class="svgAssets" xmlns="http://www.w3.org/2000/svg"> <symbol viewBox="0 0 100 100" id="circle"> <circle cx="50%" cy="50%" r="50%"></circle> </symbol> <symbol viewBox="0 0 100 100" id="rect"> <rect x="0" y="0" width="100" height="100"></rect> </symbol> <symbol viewBox="0 0 100 100" id="rectFixedStyle"> <rect x="0" y="0" width="100" height="100" fill="#ccc"></rect> </symbol> </svg> <!-- for demonstration the filenames are dropped. The href of a hosted version would be eg <use href="sprite.svg#circle" /> --> <p> <svg class="svgInline" fill="red" > <use href="#circle" /> </svg> <svg class="svgInline" fill="green" > <use href="#rect" /> </svg> <svg class="svgInline" fill="green" > <use href="#rectFixedStyle" /> </svg> </p> Como puede ver, también tiene algunas habilidades de estilo, como cambiar el color de relleno.
Sin embargo, las opciones de estilo son limitadas (en comparación con svg totalmente en línea) y también dependen de su estructura svg:
Por ejemplo, los estilos definidos previamente en sus elementos svg no pueden ser anulados por un estilo establecido en la etiqueta use/svg.
Para la creación de sprites utilicé: svgsprit.es