In React change colour of SVG element brought in as a component

Question

I have a basic SVG image which has a couple of paths to form a simple shape. What I would like to do is import the image via React and to be able to change the color of the image through the created react component.

The example code (noted below) works in drawing the SVG element and resizing the height and width. What I want to be able to do is to change the color of path1.

I've tried changing the fill to be equal to a variable (https://css-tricks.com/creating-svg-icon-system-react/) but that doesn't seem to work in its current form. If I copy my SVG element from the separate file into the code however it appears to work. If possible from the perspective of keeping my code neat and ease of updating images I would like to try to avoid this.

Am I missing something?

Many thanks for any response.

Below is my class

import Key from '~/resources/svg/key.svg'
import React, { Component } from 'react'

export default class KeyDisplay extends Component {

    render() {
        return (
            <div>
                <Key width="1000" height="500" />
            </div>
        )
    }
}

Below is the contents of key.svg

<svg id="svg" version="1.1" width="400" height="191.98140615920974" viewBox="0 0 400 191.98140615920974" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g id="svgg"><path id="path0" d="M286.606 25.563 C 257.685 26.993,230.957 47.417,223.017 74.154 L 222.741 75.084 142.147 75.084 L 61.553 75.084 50.315 86.317 L 39.078 97.550 53.048 111.521 L 67.018 125.491 74.844 117.666 C 79.149 113.363,82.757 109.842,82.862 109.843 C 82.967 109.843,86.632 113.431,91.006 117.816 C 98.916 125.743,98.962 125.785,99.360 125.430 C 99.786 125.049,117.133 110.548,117.827 109.992 C 118.285 109.626,116.968 108.585,132.181 121.337 L 137.527 125.818 139.191 124.215 C 140.774 122.690,146.312 117.391,151.856 112.096 L 154.409 109.658 155.244 110.278 C 155.960 110.809,157.680 112.122,165.242 117.910 C 169.648 121.281,171.649 122.807,173.488 124.195 L 175.590 125.780 200.853 125.785 L 226.116 125.790 226.692 127.081 C 229.129 132.538,234.457 140.102,239.556 145.343 C 269.965 176.596,320.661 173.295,346.845 138.358 C 364.337 115.019,365.502 82.599,349.728 58.089 C 335.916 36.628,312.007 24.308,286.606 25.563 M327.871 75.934 C 343.459 79.650,349.083 99.010,337.925 110.544 C 326.283 122.578,305.964 116.739,302.634 100.402 C 299.581 85.422,313.020 72.394,327.871 75.934 " stroke="none" fill="#fbfbfb" fill-rule="evenodd"></path><path id="path1" d="M1.728 96.111 L 1.728 190.494 199.904 190.494 L 398.080 190.494 398.080 96.111 L 398.080 1.728 199.904 1.728 L 1.728 1.728 1.728 96.111 M296.303 25.750 C 312.785 27.304,327.458 33.953,339.030 45.113 C 372.657 77.541,366.506 132.547,326.548 156.748 C 300.637 172.442,267.078 169.549,244.049 149.635 C 237.114 143.638,229.899 134.262,226.692 127.081 L 226.116 125.790 200.853 125.785 L 175.590 125.780 173.488 124.195 C 171.649 122.807,169.648 121.281,165.242 117.910 C 157.680 112.122,155.960 110.809,155.244 110.278 L 154.409 109.658 151.856 112.096 C 146.312 117.391,140.774 122.690,139.191 124.215 L 137.527 125.818 132.181 121.337 C 116.968 108.585,118.285 109.626,117.827 109.992 C 117.133 110.548,99.786 125.049,99.360 125.430 C 98.962 125.785,98.916 125.743,91.006 117.816 C 86.632 113.431,82.967 109.843,82.862 109.843 C 82.757 109.842,79.149 113.363,74.844 117.666 L 67.018 125.491 53.048 111.521 L 39.078 97.550 50.315 86.317 L 61.553 75.084 142.147 75.084 L 222.741 75.084 223.017 74.154 C 231.977 43.983,264.169 22.721,296.303 25.750 M320.691 75.403 C 303.175 77.793,295.969 98.804,308.467 111.044 C 322.658 124.941,346.438 112.664,343.553 92.931 C 341.988 82.232,331.209 73.968,320.691 75.403 " stroke="none" fill="#44ac64" fill-rule="evenodd"></path></g></svg>

Changing the code to the following does work. However I'd like if possible to keep the images separate. (Noted differences: xmlns and xmlns:xlink have been removed. fill-rule has changed to fillRule at the behest of the compiler)

import Svg from '~/resources/svg/domain-credentials.svg'
import Svg2 from '~/resources/svg/domain-credentials2.svg'
import React, { Component } from 'react'

export default class DomainCredentials extends Component {

    render() {
        const color = "#645484" 
        return (
            <div>
                <svg id="svg" version="1.1" width="800" height="400" viewBox="0 0 400 191.98140615920974" ><g id="svgg"><path id="path0" d="M286.606 25.563 C 257.685 26.993,230.957 47.417,223.017 74.154 L 222.741 75.084 142.147 75.084 L 61.553 75.084 50.315 86.317 L 39.078 97.550 53.048 111.521 L 67.018 125.491 74.844 117.666 C 79.149 113.363,82.757 109.842,82.862 109.843 C 82.967 109.843,86.632 113.431,91.006 117.816 C 98.916 125.743,98.962 125.785,99.360 125.430 C 99.786 125.049,117.133 110.548,117.827 109.992 C 118.285 109.626,116.968 108.585,132.181 121.337 L 137.527 125.818 139.191 124.215 C 140.774 122.690,146.312 117.391,151.856 112.096 L 154.409 109.658 155.244 110.278 C 155.960 110.809,157.680 112.122,165.242 117.910 C 169.648 121.281,171.649 122.807,173.488 124.195 L 175.590 125.780 200.853 125.785 L 226.116 125.790 226.692 127.081 C 229.129 132.538,234.457 140.102,239.556 145.343 C 269.965 176.596,320.661 173.295,346.845 138.358 C 364.337 115.019,365.502 82.599,349.728 58.089 C 335.916 36.628,312.007 24.308,286.606 25.563 M327.871 75.934 C 343.459 79.650,349.083 99.010,337.925 110.544 C 326.283 122.578,305.964 116.739,302.634 100.402 C 299.581 85.422,313.020 72.394,327.871 75.934 " stroke="none" fill="#fbfbfb" fillRule="evenodd"></path><path id="path1" d="M1.728 96.111 L 1.728 190.494 199.904 190.494 L 398.080 190.494 398.080 96.111 L 398.080 1.728 199.904 1.728 L 1.728 1.728 1.728 96.111 M296.303 25.750 C 312.785 27.304,327.458 33.953,339.030 45.113 C 372.657 77.541,366.506 132.547,326.548 156.748 C 300.637 172.442,267.078 169.549,244.049 149.635 C 237.114 143.638,229.899 134.262,226.692 127.081 L 226.116 125.790 200.853 125.785 L 175.590 125.780 173.488 124.195 C 171.649 122.807,169.648 121.281,165.242 117.910 C 157.680 112.122,155.960 110.809,155.244 110.278 L 154.409 109.658 151.856 112.096 C 146.312 117.391,140.774 122.690,139.191 124.215 L 137.527 125.818 132.181 121.337 C 116.968 108.585,118.285 109.626,117.827 109.992 C 117.133 110.548,99.786 125.049,99.360 125.430 C 98.962 125.785,98.916 125.743,91.006 117.816 C 86.632 113.431,82.967 109.843,82.862 109.843 C 82.757 109.842,79.149 113.363,74.844 117.666 L 67.018 125.491 53.048 111.521 L 39.078 97.550 50.315 86.317 L 61.553 75.084 142.147 75.084 L 222.741 75.084 223.017 74.154 C 231.977 43.983,264.169 22.721,296.303 25.750 M320.691 75.403 C 303.175 77.793,295.969 98.804,308.467 111.044 C 322.658 124.941,346.438 112.664,343.553 92.931 C 341.988 82.232,331.209 73.968,320.691 75.403 " stroke="none" fill={color} fillRule="evenodd"></path></g></svg>

            </div>
        )
    }
}

EDIT What I would like to be able to do is to be able to create multiple Key or KeyDisplay objects of a variety of colours based on the users requirements else where in the code.

Answer 1

Instead of setting the fill attribute directly, set it through the style like this:

<rect style={{ fill: color }} x="15.7598" y="73.6634" width="107.914" height="139.841" transform="rotate(30 15.7598 73.6634)" />

Answer 2

you can try to use some css to achieve this. assign a class to the div (i.e. container) that contains the svg and then apply a css like this

.container #path1 {
  fill: #645484;
}