Vue-svg-loader: Change attribute 'fill' from .svg

[Huooo]

Hello, your plugin is perfect. Then, I want to dynamically change value of fill from .svg file, but it doesn't work. I see your example can support change width and height. So, is my code has problem or the plugin cannot support change fill?

First, my config file can work and my .svg has show in browser.
Then, my code is:

<div class="vue-svg-loader">
  <p>vue-svg-loader</p>
  <svg-close class="close" />
</div>

import SvgClose from '../assets/svg/close.svg'

export default {
  name: 'VueSvgLoader',
  components: {
    'svg-close': SvgClose
  },
  data () {
    return {}
  }
}

.close{
  fill: #f00;
}

Thanks very much.

[visualfanatic]

@Huooo could you share your SVG file? Sometimes you have to target the path etc. instead of just the svg.

[Huooo]

close.svg

@visualfanatic I'm so sorry, maybe need you download the file by yourself.
And if need to work on path , what can I do to achieve it. Thank you for your time.

[visualfanatic]

Try this:

.close path {
  fill: #f00;
}

[Huooo]

I have been try your way, but still cannot work.
Sir, I am a new svg learner, so, some knowledge is't known. According to your first response, I try to remove some from my .svg file, and then I can change value of fill. Maybe you have some ideas.

code of old .svg file:

<svg xmlns="http://www.w3.org/2000/svg" width="26.62" height="27.532" viewBox="0 0 26.62 27.532">
  <defs>
    <style>
      .cls-1 {
        fill: #05c5cd;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path id="X" class="cls-1" d="M1698.47,307.65q-0.165-.195-3.91-4.317-3.195-3.516-3.19-3.847a39.1,39.1,0,0,1,3.62-4.161q3.615-3.925,3.62-4.433v-4.746c0-.222-0.27-0.332-0.82-0.332h-5.58q-0.42,0-3.25,3.613a29.232,29.232,0,0,1-3.45,3.984,45.444,45.444,0,0,1-3.18-3.8q-3.03-3.8-3.41-3.8c-0.29,0-.75.013-1.36,0.039s-1.07.039-1.38,0.039c-0.34,0-.87-0.02-1.57-0.059s-1.23-.058-1.59-0.058c-0.55,0-.82.123-0.82,0.371a11.611,11.611,0,0,0,.08,1.211c0.05,0.546.08,0.95,0.08,1.211,0,0.065-.02.377-0.07,0.937q-0.015.7,0,1.113a1.508,1.508,0,0,0,.26.84q1.95,2.109,3.91,4.2,3.12,3.38,3.12,3.868t-3.12,3.925q-3.84,4.258-3.86,4.278a6.132,6.132,0,0,0-.36,2.851c0,0.248.02,0.625,0.06,1.133s0.06,0.9.06,1.172,1.6,0.41,4.81.41a10.868,10.868,0,0,0,1.75-.078c0.32-.078,1.39-1.27,3.24-3.574a37.411,37.411,0,0,1,3.37-3.946q0.12,0.021,3.12,3.77t3.38,3.75q0.465,0,1.41.039c0.64,0.026,1.11.039,1.43,0.039s0.72,0.007,1.19.02h0.93a1.9,1.9,0,0,0,1.6-.43,6.544,6.544,0,0,0,.21-2.266,7.091,7.091,0,0,0-.33-2.968h0Z" transform="translate(-1672.19 -285.781)"/>
</svg>

code of new .svg file:

<svg xmlns="http://www.w3.org/2000/svg" width="26.62" height="27.532" viewBox="0 0 26.62 27.532">
  <path id="X" class="cls-1" d="M1698.47,307.65q-0.165-.195-3.91-4.317-3.195-3.516-3.19-3.847a39.1,39.1,0,0,1,3.62-4.161q3.615-3.925,3.62-4.433v-4.746c0-.222-0.27-0.332-0.82-0.332h-5.58q-0.42,0-3.25,3.613a29.232,29.232,0,0,1-3.45,3.984,45.444,45.444,0,0,1-3.18-3.8q-3.03-3.8-3.41-3.8c-0.29,0-.75.013-1.36,0.039s-1.07.039-1.38,0.039c-0.34,0-.87-0.02-1.57-0.059s-1.23-.058-1.59-0.058c-0.55,0-.82.123-0.82,0.371a11.611,11.611,0,0,0,.08,1.211c0.05,0.546.08,0.95,0.08,1.211,0,0.065-.02.377-0.07,0.937q-0.015.7,0,1.113a1.508,1.508,0,0,0,.26.84q1.95,2.109,3.91,4.2,3.12,3.38,3.12,3.868t-3.12,3.925q-3.84,4.258-3.86,4.278a6.132,6.132,0,0,0-.36,2.851c0,0.248.02,0.625,0.06,1.133s0.06,0.9.06,1.172,1.6,0.41,4.81.41a10.868,10.868,0,0,0,1.75-.078c0.32-.078,1.39-1.27,3.24-3.574a37.411,37.411,0,0,1,3.37-3.946q0.12,0.021,3.12,3.77t3.38,3.75q0.465,0,1.41.039c0.64,0.026,1.11.039,1.43,0.039s0.72,0.007,1.19.02h0.93a1.9,1.9,0,0,0,1.6-.43,6.544,6.544,0,0,0,.21-2.266,7.091,7.091,0,0,0-.33-2.968h0Z" transform="translate(-1672.19 -285.781)"/>
</svg>

[FBI23]

I ran into the same problem, I was able to update the color by binding a style prop on the component like so <PersonViewIcon :style="{fill: '#fff'}" /> .

However, you have to make sure the svg file doesn't have any fill properties set inline.
This way the children inherit from the svg component.

[luckydonald]

This doesn't really work for multicolored svgs.

I was thinking maybe a 'search-and-replace' like feature on fill and stroke could be possible?

For example:

<svg ...>
  <path fill="#123" stroke="foobar" ... />
</svg>

<template>
  <TheSvgFile :replacements="{
    '#123': 'hotpink',
    foobar: '#c0ffee',
  }" />
</template>

Resulting in something like

<svg ...>
  <path fill="hotpink" stroke="#c0ffee" ... />
</svg>

[Huooo]

Hi, it is so interesting between this plugin and me. After almost a year, I still need this plugin to code, and meet the same problem. But I had forgot how to resolve the last question, it's so sorry. But this time, I deal with similar problem as follows:

examples:

svg file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve">
<style type="text/css">
  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FE597F;stroke-width:2;stroke-miterlimit:10;}
  .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FE597F;}
</style>
<path class="st0 test1" d="M13,1c6.6,0,12,5.4,12,12s-5.4,12-12,12S1,19.6,1,13S6.4,1,13,1z"/>
<g>
  <g>
    <path class="st1 test2" d="M22.2,4.5C15.2,8,10.8,18.4,10.8,18.4l-2.7-5.1l-5.6,3.3c2.4,0.8,5.8,3.5,8.6,6.9c2-3.6,8.3-11.1,11.4-11.7C21.3,9.1,22,7,22.2,4.5z"/>
  </g>
</g>
</svg>

You can define your class in your svg files if this svg is complicated.
And then:

code:

<Checkbox class="test" />

.test {
  .test1 {
    stroke: #f00;
  }
  .test2 {
    fill: #f00;
  }
}

The downside is you need to define some class in svg file, but can resolve some situations. Beacuse no matter how smart the author is, he can't control your designers‘ svg file.

Thank you author.

[luckydonald]

I don't think the problem is fixed, as this is only a workaround.

[itsukiuehara]

I agree it would be better if we can dynamically change the path's attribute in the parent component.