使用源代码上的v-bind特性内联Vue中的SVG文件

Question

最终目标:包含文件中的SVG图标，并且可以在其上使用CSS (主要是在fill参数上)。这似乎意味着有一种方法可以在Vue模板中内联SVG文件。

我已经找到了很多涉及到webpack加载器(vue-svg-inline-loader、vue-svg-loader和其他两三个)的解决方案，但我也希望能够通过在source参数上使用v-bind指令来动态选择要加载的文件。类似于：

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

或

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

而似乎所有的webpack装载器都不允许这样做。我没有找到具有此功能的vue插件。

我的项目是一个quasar-framework项目，如果这对我有帮助的话。

Answer 1

你可以这样做：

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

但是你也需要配置你的webpack来输出你的svg作为原始的html。使用一些插件，如svg-inline-loader或任何你想要的。See more

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