如何使用 SVG 制作数组

Question

我正在尝试制作一个加载到 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 的图标时，它 returns 是一个空对象。我试过更改我的 icons.js 看看是不是因为这些：``

但即使我将其更改为这个 returns 一个空对象：

[
  {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

如何使用 SVG 制作数组

How to make array with SVG's

javascript

svg

import

nuxt.js

icons