如何使用 SVG 制作数组

Question

我正在尝试制作一个Icon组件，该组件加载在一个js文件中，该文件包含一个包含svg值的对象数组。

我的图标组件如下所示：

<template>
<div class="icon"></div>
</template>
<script>
import icons from "~/assets/icons.js"
export default {
mounted() {
console.log(icons)
}
}
</script>

我的icons.js看起来像这样：

[
{
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>`,
},
]

当我尝试用console.log读取图标时，它会返回一个空对象。我试着更改我的icon.js，看看是不是因为这些原因：``

但即使我把它改成这个，它也会返回一个空对象：

[
{name: "foo"},
{name: "bar"}
]

我的项目是新制作的，除此之外没有其他内容，我在创建nuxt项目时可能选择了错误的设置吗？还是我认为这一切都错了？

Answer 1

您需要导出数据。顺便说一句，我看不出有任何理由在你的情况下使用数组。看起来你的数据应该是这样的对象：

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