CODEWITHSUNDEEP
cssvue.jssvg
major697
major697

Reputation: 1862

Change color svg file using css

I using vue-simple-svg package and Vue. 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

enter image description here

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.

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>[email protected]</title>
    <desc>Created with sketchtool.</desc>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
        <g id="Icons-/-Interfaces-/-user-plus" fill="#000000">
            <path d="M17,19 L17,16.5 C17,16.2238576 17.2238576,16 17.5,16 C17.7761424,16 18,16.2238576 18,16.5 L18,19 L20.5,19 C20.7761424,19 21,19.2238576 21,19.5 C21,19.7761424 20.7761424,20 20.5,20 L18,20 L18,22.5 C18,22.7761424 17.7761424,23 17.5,23 C17.2238576,23 17,22.7761424 17,22.5 L17,20 L14.5,20 C14.2238576,20 14,19.7761424 14,19.5 C14,19.2238576 14.2238576,19 14.5,19 L17,19 Z M14.0425135,13.5651442 C13.4188979,13.8445863 12.7275984,14 12,14 C11.2738711,14 10.5838946,13.8452135 9.96126583,13.5668358 L5.87929558,15.4222768 C5.34380416,15.665682 5,16.1996113 5,16.7878265 L5,17.5 C5,18.3284271 5.67157288,19 6.5,19 L11.5,19 C11.7761424,19 12,19.2238576 12,19.5 C12,19.7761424 11.7761424,20 11.5,20 L6.5,20 C5.11928813,20 4,18.8807119 4,17.5 L4,16.7878265 C4,15.8074678 4.57300693,14.9175857 5.46549264,14.5119103 L8.92215823,12.9406987 C7.75209123,12.0255364 7,10.6005984 7,9 C7,6.23857625 9.23857625,4 12,4 C14.7614237,4 17,6.23857625 17,9 C17,10.5929224 16.2551051,12.0118652 15.0946468,12.927497 L17.6966094,14.0402775 C17.9505071,14.1488619 18.0683068,14.4427117 17.9597225,14.6966094 C17.8511381,14.9505071 17.5572883,15.0683068 17.3033906,14.9597225 L14.0425135,13.5651442 L14.0425135,13.5651442 Z M12,13 C14.209139,13 16,11.209139 16,9 C16,6.790861 14.209139,5 12,5 C9.790861,5 8,6.790861 8,9 C8,11.209139 9.790861,13 12,13 Z" id="Combined-Shape"></path>
        </g>
    </g>
</svg>

Upvotes: 0

Views: 18545

Answers (5)

Lepy
Lepy

Reputation: 194

The best thing you can do is to bind to attribute

<path v-bind:fill="this.skinColorContent"


export default {
    data() {
        return {
            skinColorContent: 'red',
        }
    },
}

Upvotes: 0

major697
major697

Reputation: 1862

I have other solution. I added to scss file filter for example:

&__image {
    filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg) brightness(104%) contrast(88%);
}

To convert the color to the filter format (for example: #ef4f10) use CSS filter generator to convert from black to target hex color.

The best effest is when default color in SVG file is black: fill="#000000".

Upvotes: 1

Kishor Namdeo
Kishor Namdeo

Reputation: 109

@michal Remove 'fill=""' property from all tag inside svg tag, then you will get result.

Upvotes: 2

Shirish Maharjan
Shirish Maharjan

Reputation: 502

add !important at the end of style. eg

.class g g{
fill:#fff!important;
}

Upvotes: 0

Aman
Aman

Reputation: 1550

Use CSS On SVG

svg{
    fill: #fff;
    stroke: #fff;
}

Hope it will work for you

Upvotes: 0

Related Questions