Estoy tratando de crear un componente Icon que se cargue en un archivo js que contenga una matriz de objetos con los valores svg dentro.
Mi componente Icon se ve así:
<template> <div class="icon"></div> </template> <script> import icons from "~/assets/icons.js" export default { mounted() { console.log(icons) } } </script>Mi icons.js se ve así:
[ { circle: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> <circle id="Ellipse_1" data-name="Ellipse 1" cx="25" cy="25" r="25" fill="red"/> </svg>`, }, { square: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> <rect id="Rectangle_1" data-name="Rectangle 1" width="50" height="50" fill="#02f"/> </svg>`, }, { triangle: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> <path id="Polygon_1" data-name="Polygon 1" d="M25,0,50,50H0Z" fill="#00ff3c"/> </svg>`, }, ]Cuando intento leer los íconos con el archivo console.log, devuelve un objeto vacío. Intenté cambiar mi icons.js para ver si se debía a estas cosas: ``
Pero incluso cuando lo cambio a esto, devuelve un objeto vacío:
[ {name: "foo"}, {name: "bar"} ]Mi proyecto se ha creado recientemente y no tiene otro contenido además de este, ¿podría ser posible que haya seleccionado una configuración incorrecta al crear el proyecto nuxt? ¿O estoy viendo todo esto mal?
Necesitas exportar tus datos. Por cierto, no veo ninguna razón para usar una matriz en su caso. Parece que sus datos deberían ser un objeto como este:
export default { circle: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> <circle id="Ellipse_1" data-name="Ellipse 1" cx="25" cy="25" r="25" fill="red"/> </svg>`, square: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> <rect id="Rectangle_1" data-name="Rectangle 1" width="50" height="50" fill="#02f"/> </svg>`, } //Then import like import icons from "~/assets/icons.js" // use it like icons.circle