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

Question

我使用vue-svg-inline-loader

在第一个组件中，我使用道具源发送到图像 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