I am trying to make an Icon component that loads in a js file that contains an array of objects with the svg values inside it.
My Icon component looks like this:
<template>
<div class="icon"></div>
</template>
<script>
import icons from "~/assets/icons.js"
export default {
mounted() {
console.log(icons)
}
}
</script>My icons.js looks like this:
[
{
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>`,
},
]When I try to read the icons with the console.log it returns an empty object. I've tried changing my icons.js to see if it was because of these things: ``
But even when I change it to this it returns an empty object:
[
{name: "foo"},
{name: "bar"}
]My project has been newly made and has no other content besides this, could it be possible i selected a wrong setting while creating the nuxt project? Or am I looking at this all wrong?
You need to export your data. BTW, I don't see any reason for using an array in your case. It seems like your data should be an object like this:
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