How to dynamically change SVG fill color?

Question

I want to dynamically change a SVG image's color without inline SVG tags (having to statically put in <svg> , <path="..."> , etc) so the consumer has the freedom to use any SVG image and color they want.

All the user has to do is pass in the src for the SVG tag and a color hexadecimal, and my code should dynamically apply those color fills into the SVG tag.

Do you have any suggestions? Thank you!

What the consumer sees:

import Frame from './Frame.svg';
...
<Icon src={Frame} color='purple' />

My attempt for the UI component code:

import React from 'react';
import styled from 'styled-components';

const Icon = ({ src, color }) => {
  const StyledSVGIcon = styled(src)`
    width: 67px;
    height: 72px; 
    fill: ${color};
  `;
  return <StyledSVGIcon />
};

Frame.svg

<svg width="73" height="71" viewBox="0 0 73 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.3346L69.0931 45.6152L65.0169 41.6071L42.2584 63.9858V67.9939Z" fill="#4B286D"/>
<path d="M64.2117 52.8725C63.8737 52.8725 63.1978 52.8725 62.8598 52.5305L56.7765 46.3739C56.1005 45.6898 56.1005 45.0058 56.7765 44.3217C57.4524 43.6376 58.1283 43.6376 58.8043 44.3217L64.8876 50.4783C65.5635 51.1623 65.5635 51.8464 64.8876 52.5305C65.2255 52.8725 64.5496 52.8725 64.2117 52.8725Z" fill="#4B286D"/>
<path d="M33.4287 65.4711H2.31425C1.32124 65.4711 0.990234 64.8064 0.990234 64.1417V19.2757C0.990234 18.9434 1.32124 18.2787 1.32124 17.9464L19.1955 0C19.1955 0.33234 19.8575 0 20.1885 0H52.958C53.951 0 54.282 0.664681 54.282 1.32936V43.2043C54.282 44.2013 53.62 44.5336 52.958 44.5336C52.296 44.5336 51.634 43.8689 51.634 43.2043V2.99106H21.1815L3.96928 19.9404V62.48H33.7597C34.7527 62.48 35.0837 63.1447 35.0837 63.8094C35.0837 64.474 34.4217 65.4711 33.4287 65.4711Z" fill="#4B286D"/>
<path d="M20.1885 20.9374H2.31425C1.32124 20.9374 0.990234 20.2728 0.990234 19.6081C0.990234 18.6111 1.65224 18.2787 2.31425 18.2787H18.5335V1.32936C18.5335 0.33234 19.1955 0 19.8575 0C20.5195 0 21.1815 0.664681 21.1815 1.32936V19.2757C21.5125 20.2728 21.1815 20.9374 20.1885 20.9374Z" fill="#4B286D"/>
<path d="M38.1892 30.2127C34.1336 30.2127 30.754 28.2953 30.754 25.7389C30.754 24.7802 31.4299 24.4606 32.1058 24.4606C33.1197 24.1411 33.7956 24.7802 33.7956 25.7389C33.7956 26.6975 35.8234 27.6562 38.1892 27.6562C40.5549 27.6562 42.5827 26.378 42.5827 25.4193C42.5827 24.7802 41.5688 23.8215 38.1892 23.5019H37.8512C36.1614 23.1824 30.416 22.2237 30.416 18.7086C30.416 15.8325 33.7956 13.5956 37.8512 13.5956C41.9068 13.5956 45.2864 15.513 45.2864 18.0695C45.2864 19.0281 44.6105 19.3477 43.9345 19.3477C42.9206 19.6672 42.2447 19.0281 42.2447 18.0695C42.2447 17.1108 40.2169 16.1521 37.8512 16.1521C35.4855 16.1521 33.4577 17.4303 33.4577 18.389C33.4577 19.0281 34.4716 19.9868 37.8512 20.3064H38.1892C40.2169 20.6259 45.6243 21.5846 45.6243 25.0997C45.6243 27.6562 42.2447 30.2127 38.1892 30.2127Z" fill="#4B286D"/>
<path d="M22.9547 32.9327H7.45939C6.42637 32.9327 6.08203 32.3285 6.08203 31.7242C6.08203 31.1199 6.77071 30.5157 7.45939 30.5157H22.9547C23.9877 30.5157 24.332 31.1199 24.332 31.7242C24.332 32.3285 23.9877 32.9327 22.9547 32.9327Z" fill="#4B286D"/>
<path d="M41.275 45.017H8.91115C7.93042 45.017 7.60352 44.4128 7.60352 43.8085C7.60352 43.2042 8.25733 42.6 8.91115 42.6H41.275C42.2558 42.6 42.5827 43.2042 42.5827 43.8085C42.5827 44.4128 41.9289 45.017 41.275 45.017Z" fill="#4B286D"/>
<path d="M19.9078 57.1024H7.46461C6.42768 57.1024 6.08203 56.4981 6.08203 55.8939C6.08203 55.2896 6.77332 54.6854 7.46461 54.6854H19.9078C20.9447 54.6854 21.2904 55.2896 21.2904 55.8939C21.2904 56.4981 20.9447 57.1024 19.9078 57.1024Z" fill="#4B286D"/>
<path d="M38.0175 33.2346C37.1049 33.2346 36.8008 32.5632 36.8008 31.8918V10.4071C36.8008 9.40003 37.4091 9.06433 38.0175 9.06433C38.6258 9.06433 39.2341 9.73573 39.2341 10.4071V31.5561C39.2341 32.5632 38.6258 33.2346 38.0175 33.2346Z" fill="#4B286D"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="73" height="71" fill="white"/>
</clipPath>
</defs>
</svg>

Answer 1

Here's an example of how to pass a colour to an SVG:

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [colorChosen, setColorChosen] = useState("red");

  return (
    <div>
      <h1>Hello Stack Overflow!</h1>
      <StyledSVG 
        color={colorChosen} 
        src={'https://lh3.googleusercontent.com/proxy/CWRs9ihXEx4EMOglFfeT70ir74KeyxILHB6Dkm7oLIufKfeI02Xi6YdNAEbaGwT8LecfPDe_7A6UrKXuyNOi_LpsTVO7jIrqxdPX2vQ2nq2W-re_1IrMZwxgAwoq6t_W5rNx6QEaU96ai2MmJsI'}
        />
    </div>
  );
}

const StyledSVG = styled.svg`
  width: 500px;
  height: 500px;
  background-color: ${(props) => props.color};
  background-image: url(${(props) => props.src});
`;

By default the color is set to red, but with some additional sliders you can pass rbg / hex values to the styled <svg /> .

CodeSandbox: https://codesandbox.io/s/stack-63910588-pass-color-to-svg-birthday-card-ievg7?file=/src/App.js

---

OP clarified that they wanted to change the children's color. In which case, this works:

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [colorChosen, setColorChosen] = useState("green");

  return (
    <Container>
      <StyledSVG color={colorChosen} width="73" height="71" viewBox="0 0 73 71">
        <Frame />
      </StyledSVG>
    </Container>
  );
}

const Frame = () => {

  // This can also be abstracted to its own js file.

  return (
  <>
  <g clip-path="url(#clip0)">
  <path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.3346L69.0931 45.6152L65.0169 41.6071L42.2584 63.9858V67.9939Z" fill="#4B286D"/>
  <path d="M64.2117 52.8725C63.8737 52.8725 63.1978 52.8725 62.8598 52.5305L56.7765 46.3739C56.1005 45.6898 56.1005 45.0058 56.7765 44.3217C57.4524 43.6376 58.1283 43.6376 58.8043 44.3217L64.8876 50.4783C65.5635 51.1623 65.5635 51.8464 64.8876 52.5305C65.2255 52.8725 64.5496 52.8725 64.2117 52.8725Z" fill="#4B286D"/>
  <path d="M33.4287 65.4711H2.31425C1.32124 65.4711 0.990234 64.8064 0.990234 64.1417V19.2757C0.990234 18.9434 1.32124 18.2787 1.32124 17.9464L19.1955 0C19.1955 0.33234 19.8575 0 20.1885 0H52.958C53.951 0 54.282 0.664681 54.282 1.32936V43.2043C54.282 44.2013 53.62 44.5336 52.958 44.5336C52.296 44.5336 51.634 43.8689 51.634 43.2043V2.99106H21.1815L3.96928 19.9404V62.48H33.7597C34.7527 62.48 35.0837 63.1447 35.0837 63.8094C35.0837 64.474 34.4217 65.4711 33.4287 65.4711Z" fill="#4B286D"/>
  <path d="M20.1885 20.9374H2.31425C1.32124 20.9374 0.990234 20.2728 0.990234 19.6081C0.990234 18.6111 1.65224 18.2787 2.31425 18.2787H18.5335V1.32936C18.5335 0.33234 19.1955 0 19.8575 0C20.5195 0 21.1815 0.664681 21.1815 1.32936V19.2757C21.5125 20.2728 21.1815 20.9374 20.1885 20.9374Z" fill="#4B286D"/>
  <path d="M38.1892 30.2127C34.1336 30.2127 30.754 28.2953 30.754 25.7389C30.754 24.7802 31.4299 24.4606 32.1058 24.4606C33.1197 24.1411 33.7956 24.7802 33.7956 25.7389C33.7956 26.6975 35.8234 27.6562 38.1892 27.6562C40.5549 27.6562 42.5827 26.378 42.5827 25.4193C42.5827 24.7802 41.5688 23.8215 38.1892 23.5019H37.8512C36.1614 23.1824 30.416 22.2237 30.416 18.7086C30.416 15.8325 33.7956 13.5956 37.8512 13.5956C41.9068 13.5956 45.2864 15.513 45.2864 18.0695C45.2864 19.0281 44.6105 19.3477 43.9345 19.3477C42.9206 19.6672 42.2447 19.0281 42.2447 18.0695C42.2447 17.1108 40.2169 16.1521 37.8512 16.1521C35.4855 16.1521 33.4577 17.4303 33.4577 18.389C33.4577 19.0281 34.4716 19.9868 37.8512 20.3064H38.1892C40.2169 20.6259 45.6243 21.5846 45.6243 25.0997C45.6243 27.6562 42.2447 30.2127 38.1892 30.2127Z" fill="#FFFFFF"/>
  <path d="M22.9547 32.9327H7.45939C6.42637 32.9327 6.08203 32.3285 6.08203 31.7242C6.08203 31.1199 6.77071 30.5157 7.45939 30.5157H22.9547C23.9877 30.5157 24.332 31.1199 24.332 31.7242C24.332 32.3285 23.9877 32.9327 22.9547 32.9327Z" fill="#4B286D"/>
  <path d="M41.275 45.017H8.91115C7.93042 45.017 7.60352 44.4128 7.60352 43.8085C7.60352 43.2042 8.25733 42.6 8.91115 42.6H41.275C42.2558 42.6 42.5827 43.2042 42.5827 43.8085C42.5827 44.4128 41.9289 45.017 41.275 45.017Z" fill="#4B286D"/>
  <path d="M19.9078 57.1024H7.46461C6.42768 57.1024 6.08203 56.4981 6.08203 55.8939C6.08203 55.2896 6.77332 54.6854 7.46461 54.6854H19.9078C20.9447 54.6854 21.2904 55.2896 21.2904 55.8939C21.2904 56.4981 20.9447 57.1024 19.9078 57.1024Z" fill="#4B286D"/>
  <path d="M38.0175 33.2346C37.1049 33.2346 36.8008 32.5632 36.8008 31.8918V10.4071C36.8008 9.40003 37.4091 9.06433 38.0175 9.06433C38.6258 9.06433 39.2341 9.73573 39.2341 10.4071V31.5561C39.2341 32.5632 38.6258 33.2346 38.0175 33.2346Z" fill="#4B286D"/>
  </g>
  <defs>
  <clipPath id="clip0">
  <rect width="73" height="71" fill="white"/>
  </clipPath>
  </defs>
  </>
  );
  
};

const Container = styled.div`
  height: 500px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

`;

const StyledSVG = styled.svg`
  & path {
    fill: ${props => props.color};
  }
`;