How to make array with SVG's-CodePudding

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 ></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?

CodePudding user response：

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