使用Vue中的vue-svg-inline-loader发送道具并将图像转换为svg

Question

我使用vue-svg-inline-loader

在第一个组件中，我使用props源将其发送到svg图片：

<IconComponent :imgIcon="'../../assets/img/icon-example.svg'" />

接下来，当我获得道具时，我将拥有第二部分：

<img svg-inline :src="imgIcon" alt="icon">

export default {
   name: 'IconComponent',
   props: {
      imgIcon: {
         type: String,
         required: true
      }
   }
};

但是库vue-svg-inline-loader无法将img转换为svg。

我有：

在第二部分中，我更改为：

<img svg-inline src="../../assets/img/icon-example.svg" alt="icon">

然后将图像正确转换为svg。

编辑：

我添加了：

<object :data="require(`@/assets/img/${this.name}.svg`)" type="image/svg+xml"></object>

并将图像转换为svg，我在DOM中具有这种结构。

现在我需要使用SASS更改颜色。我写代码：

.icon {
   margin: 0 map-get($margins, m1);
   display: flex;
   align-items: center;
   height: 100%;

   object svg g g {
      fill: red;
   }
}

但不要将颜色更改为红色。

Answer 1

根据此问题，使用以下库时，不可能有像:src这样的vue绑定：https://github.com/oliverfindl/vue-svg-inline-loader/issues/2

此comment建议改用此库：https://vue-svg-loader.js.org/

编辑

以我的拙见，不支持VueJS绑定的库是没有用的。您可以切换到其他库吗？这个似乎很有希望：https://github.com/seiyable/vue-simple-svg