How to change color of svg icon elements on theme change in ReactJS?

Question

React

How to change color of svg icon elements on theme change in ReactJS?
I use styled-components to be able to pass props.
What is the best way to accomplish this task, I will be grateful for the help

Answer 1

You can do as i described below to dynamically customize size, fill, stroke (and any svg attribute you want):
Put some svg file in your profect:
ic-some-svg-ic.svg file:

<!-- Delete width and height of <svg> tag, only viewBox is needed -->
<!-- If you specify there fill or stroke, they will be default -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     fill="#C4C4C4">

    <!--
        Delete all fill and stroke in children
        in order them to take fill and stroke from parent <svg> tag
    -->
    <rect x="16" y="57" width="68" height="16" stroke="none" />
    <circle cx="25.5" cy="40.5" r="9.5" stroke="none" />
    <circle cx="50.5" cy="40.5" r="9.5" stroke="none" />
    <circle cx="74.5" cy="40.5" r="9.5" stroke="none" />

</svg>

Create SVG React Component from this file:
SomeSvgIc.tsx file:

import React from 'react'
import { ReactComponent as SomeSvgSvg } from '../../assets/icons/ic-some-svg-ic.svg'

const SomeSvgIc = ({color, size}: {color:string, size?:number}) => {
    return <SomeSvgSvg
        width={size??'100%'}
        height={size??'100%'}
        stroke={color}
        fill={color}
    />
}
export default SomeSvgIc

Test it:

import SomeSvgIc from "../components/SvgIcons/SomeSvgIc";


const SvgTest = () => {
    return <div>
        <div style={{width:400, height:200, border: '1px solid red' }}>
            <SomeSvgIc color={"blue"} size={50}/>
        </div>

        <div style={{width:200, height:400, border: '1px solid red' }}>
            <SomeSvgIc color={"blue"}/>
        </div>

        <div style={{display: 'flex', flexFlow: 'row nowrap'}}>
            <div style={{width:200, height:200, background: 'red'}} />
            <div style={{height:200, background: 'yellow'}}>
                <SomeSvgIc color={"blue"}/>
            </div>
        </div>

    </div>
}
export default SvgTest

FULLY CUSTOMISE:
SomeSvgIc2.tsx file:

import React from 'react'

const SomeSvgIc2 = ({color1, color2, color3, color4, size}: {color1:string, color2:string, color3:string, color4:string, size?:number}) => {
    return <svg xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 100 100"
                width={size??'100%'} height={size??'100%'} >

        <rect x="16" y="57" width="68" height="16" stroke="none" fill={color1} />
        <circle cx="25.5" cy="40.5" r="9.5" stroke="none" fill={color2} />
        <circle cx="50.5" cy="40.5" r="9.5" stroke="none" fill={color3} />
        <circle cx="74.5" cy="40.5" r="9.5" stroke="none" fill={color4} />

    </svg>
}
export default SomeSvgIc2

And use in component jsx/tsx markup:

<SomeSvgIc2 color1={"blue"} color2={"red"} color3={"black"} color4={"green"} size={50}/>

You can easily create your own SVG icons in Figma (it is free)