Встроенный SVG-файл в Vue с функцией v-bind в исходном коде - PullRequest
Новая
       16

Встроенный SVG-файл в Vue с функцией v-bind в исходном коде

2 голосов
/ 19 марта 2019

Конечная цель: включить значки SVG из файлов с возможностью использования CSS (в основном это параметр fill).Похоже, это означает, что есть способ встроить файл SVG в шаблон Vue.

Я нашел множество решений, включающих загрузчики веб-пакетов (vue-svg-inline-loader, vue-svg-loader и еще 2 или 3), но ятакже хочу иметь возможность динамически выбирать, какой файл я загружаю, используя директиву v-bind для параметра source.Что-то вроде: 

<img :src="`path/to/${file}.svg`" />

или 

<custom-component :src="`path/to/${file}.svg`" />

И ни один из загрузчиков webpack, похоже, не позволяет этого.Я не нашел vue-плагина с этой функцией.

Мой проект - проект quasar-framework, если это может помочь.

1 Ответ

0 голосов
/ 19 марта 2019

Вы можете сделать так: 

<template v-html="svgFile"></template>
...
computed:{
  svgFile(){
    require(`path/to/${this.file}.svg`)
  }
}

Но вам также нужно сконфигурировать ваш веб-пакет, чтобы превратить svg в необработанный HTML. Используя какой-нибудь плагин, такой как svg-inline-loader или что угодно. Подробнее 

{ test: /\.svg$/, loader: 'svg-inline-loader' }
...