Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

In first component I send using props source to image svg:

<IconComponent :imgIcon="'../../assets/img/icon-example.svg'" />
Next I have second component when I get props:
<img svg-inline :src="imgIcon" alt="icon">
export default {
   name: 'IconComponent',
   props: {
      imgIcon: {
         type: String,
         required: true
But library vue-svg-inline-loader can't conver img to svg.
I have:
When in second component I change to:
<img svg-inline src="../../assets/img/icon-example.svg" alt="icon">
then image convert correctly to svg.
EDIT:
I added:
<object :data="require(`@/assets/img/${this.name}.svg`)" type="image/svg+xml"></object>
and image convert to svg, I have this structure in DOM.
And now I need change color using SASS. I write code:

.icon {
   margin: 0 map-get($margins, m1);
   display: flex;
   align-items: center;
   height: 100%;
   object svg g g {
      fill: red;
But not change color to red.
According to this issue, it's not possible to have vue bindings like :src, when using this library: https://github.com/oliverfindl/vue-svg-inline-loader/issues/2
This comment suggests to use this library instead: https://vue-svg-loader.js.org/
In my humble opinion, a library that does not support VueJS bindings, is not useful. Can you switch to other library. This one seems promising: https://github.com/seiyable/vue-simple-svg
                Yes, I saw this repository. But I don't know how I can send props. In this repo images svg are get by import ... from ...
– michal
                Nov 30, 2019 at 14:45
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.