在Vue中使用Vue- svg -内联加载程序发送道具并将图像转换为svg。
在Vue中使用Vue- svg -内联加载程序发送道具并将图像转换为svg。
提问于 2019-11-30 13:42:32
在第一个组件中，我使用道具源发送到图像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;
}
}但不能把颜色改成红色。
回答 1
Stack Overflow用户
发布于 2019-11-30 14:35:06
根据这个问题，当使用这个库：:src时，不可能有像https://github.com/oliverfindl/vue-svg-inline-loader/issues/2这样的vue绑定
这个评论建议使用这个库：https://vue-svg-loader.js.org/
编辑
在我看来，一个不支持VueJS绑定的库是没用的。你能转到其他图书馆吗。这个看起来很有希望：https://github.com/seiyable/vue-simple-svg
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59116732
复制相关文章
相似问题
腾讯云开发者
