Cant change color

[major697]

I sending icon and color to component:

<IconComponent name="comment.svg" color="#ffffff" />

In IconComponent I get props:

    <simple-svg
        :src="image"
        fill-class-name="fill-to-change"
        :fill="color"
        stroke-class-name="stroke-to-change"
        :stroke="color"
        custom-id="my-id"
        custom-class-name="my-class"
    />

    props: {
        image: {
            type: String,
            required: true,
        },
        color: {
            type: String,
            required: true,
        },
    },

But color not change to #ffffff.

So I trying change color using CSS:

I have structure svg file with color:

svg => g => g

I have class .my-class, and I write code:

    .my-class g g {
       fill: #ffffff;
       stroke: #ffffff;
    }

I tryimg using:

    .fill-to-change {
       fill: #ffffff;
    }
    .stroke-to-change {
       stroke: #ffffff;
    }

but color not change to white.

[seiyable]

Hi major697, Did you set a class "fill-to-change" to the tag in your source .svg file? The :fill color value set to the component is only applied to the elements in the source .svg file with the class name specified as :fill-class-name.

[major697]

@seiyable Hi, I added class to my file svg now work when I added fill in html, for example:

<simple-svg v-if="image" :src="image" fill-class-name="fill-image-svg" fill="#ffffff" />

but not working when I want change color using CSS:

.fill-image-svg { fill: #ffffff; }

Now not change color to #ffffff.

My file SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 59.1 (101010) - https://sketch.com -->
    <title>5bcbe89a-70d8-4896-b54b-91beaaf5ee68@1.00x</title>
    <desc>Created with sketchtool.</desc>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
        <g class="fill-image-svg" id="Icons-/-Arrow-/-back" fill="#000000">
            <path d="M4.70710678,16 L7.85355339,19.1464466 C8.04881554,19.3417088 8.04881554,19.6582912 7.85355339,19.8535534 C7.65829124,20.0488155 7.34170876,20.0488155 7.14644661,19.8535534 L3.14644661,15.8535534 C2.95118446,15.6582912 2.95118446,15.3417088 3.14644661,15.1464466 L7.14644661,11.1464466 C7.34170876,10.9511845 7.65829124,10.9511845 7.85355339,11.1464466 C8.04881554,11.3417088 8.04881554,11.6582912 7.85355339,11.8535534 L4.70710678,15 L18.5,15 C19.3284271,15 20,14.3284271 20,13.5 L20,7.5 C20,6.67157288 19.3284271,6 18.5,6 L3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,5.22385763 3.22385763,5 3.5,5 L18.5,5 C19.8807119,5 21,6.11928813 21,7.5 L21,13.5 C21,14.8807119 19.8807119,16 18.5,16 L4.70710678,16 Z" id="Combined-Shape"></path>
        </g>
    </g>
</svg>