Как включить встроенный .svg в приложение Nuxt - PullRequest
Новая
       3

Как включить встроенный .svg в приложение Nuxt

1 голос
/ 03 февраля 2020

Я хочу сделать что-то общее - динамически включить svg HTML в Vue приложение Nuxt, которое я смогу стилизовать. Для этого я создал компонент, но вместо изображения я получаю текст data: image / svg + x html ... .

Как заставить его работать? 

<template>
   <div v-html="src"></div>
</template>
<script>
export default {
    name: 'Icon',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    computed: {
        src() {
            const src = require(`assets/icons/${this.name}.svg`)
            return src
        }
    }
}
</script>

Ответы [ 2 ]

2 голосов
/ 03 февраля 2020

Кажется, что @nuxtjs/svg сделает то, что вы пытаетесь сделать. После установки попробуйте: 

<template>
   <div v-html="src"></div>
</template>
<script>
export default {
    name: 'Icon',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    computed: {
        src() {
            const src = require(`assets/icons/${this.name}.svg?raw`)
            return src
        }
    }
}
</script>
0 голосов
/ 03 февраля 2020

Это непросто, и я попробовал несколько разных решений, которые «казались» такими, как будто они должны работать.

Насколько я понимаю, все сводится к тому, как Webpack работает с «имиджевыми» активами и использует их как встроенные по сравнению с автономный вид изменений в определении.

У меня есть библиотека значков SVG, для которых требовался доступ к коду (например, изменение цвета после выполнения), поэтому я должен был иметь встроенный SVG. Вот где я приземлился. Это не идеальный вариант, но он работает.

Создайте новый компонент с прорезью для имени SVG. Внутри этого компонента добавьте все ваши svg как код. Оберните каждый в v-if. 

<template>
   <div class="svgIcon">
      <svg v-if="icon == 'name1'">...</svg>
      <svg v-if="icon == 'name2'">...</svg>
      <svg v-if="icon == 'name3'">...</svg>
      <svg v-if="icon == 'name4'">...</svg>
   </div>
</template>
<script>
  export default {
    props: ['icon']
  }
</script>

Затем используйте компонент, заполнив нужное имя в слоте 

<template>
   <div>
      <svgIcons :icon="name1"></svgIcons>
   </div>
</template>
<script>
  import svgIcons from '../path/to/iconsComponent.vue'
  export default {
    components: { svgIcons },
    ...
  }
</script>
...