Как импортировать десятки файлов SVG в Vue / Nuxt - PullRequest
Новая
       59

Как импортировать десятки файлов SVG в Vue / Nuxt

0 голосов
/ 23 марта 2020

В настоящее время я импортирую множество SVG-файлов, используя обычный оператор импорта, подобный следующему.

index. vue

<script>
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"

export default {
  components: {
    danalock,
    smartlock,
    light,
    clicker,
    battery100,
    environmental,
    batter25charge,
    ...
  },

Я уже искал некоторые обходные пути, такие как создание папки в таких компонентах, как компоненты / изображения /, и создал изображение. js и поместил туда все операторы импорта, как следующие

компоненты / изображения / изображения. js

import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"


export default {
  danalock,
  smartlock,
  light,
  clicker,
  ...
}

и попытался получить доступ к нему в моем vue файле, как показано ниже, но не смог найти хороших результатов

index. vue

<script>
import { danalock, smartlock } from "~/components/images/images.js"

export default {
  components: {
    danalock,
    smartlock,
    ...
  }

шаблон моего индекса. vue

<template>
  <smartlock />
</template>

выдает следующую ошибку 

Unknown custom element: <smartlock> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
...