What's the best way to update the fill color of an SVG dynamically?

Question

What's the best way to update the fill color of an SVG dynamically?

Is it possible to change the color of an SVG image dynamically without using inline SVG tags? I want to create a code that allows users to specify the source for the SVG tag and a hexadecimal color value, enabling them to customize any SVG image with their preferred colors.

The idea is to have a component where users can input the SVG source and color, and the code will automatically adjust the fill colors of the SVG based on these parameters. Any ideas on how to achieve this would be greatly appreciated. Thank you!

Here is an example of how the user interaction might look:

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

This is my suggested 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 />
};

Sample content of Frame.svg file:

<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"/>
...
</g>
<defs>
<clipPath id="clip0">
<rect width="73" height="71" fill="white"/>
</clipPath>
</defs>
</svg>

javascript html css reactjs svg

Answer 1

Answer №1

Here is a demonstration of how to apply a color to an SVG element:

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

export default function App() {
  const [selectedColor, setSelectedColor] = useState("blue");

  return (
    <div>
      <h1>Greetings from Stack Overflow!</h1>
      <StyledSVG 
        color={selectedColor} 
        src={'https://example.com/svg_image'}
        />
    </div>
  );
}

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

The default color is blue, but you can customize it with RGB or hex values using sliders for the styled <svg />.

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

The original poster mentioned they wanted to modify the children's color. You can achieve this by:

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

export default function App() {
  const [chosenColor, setChosenColor] = useState("purple");

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

const Frame = () => {

  // This logic could be moved to a separate 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.334…
  </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};
  }
`;

Answer 2

Here is a demonstration of how to apply a color to an SVG element:

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

export default function App() {
  const [selectedColor, setSelectedColor] = useState("blue");

  return (
    <div>
      <h1>Greetings from Stack Overflow!</h1>
      <StyledSVG 
        color={selectedColor} 
        src={'https://example.com/svg_image'}
        />
    </div>
  );
}

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

The default color is blue, but you can customize it with RGB or hex values using sliders for the styled <svg />.

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

The original poster mentioned they wanted to modify the children's color. You can achieve this by:

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

export default function App() {
  const [chosenColor, setChosenColor] = useState("purple");

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

const Frame = () => {

  // This logic could be moved to a separate 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.334…
  </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};
  }
`;

What's the best way to update the fill color of an SVG dynamically?

Answer №1

Similar questions

Error encountered: Unable to locate module 'psl'

What are the best practices for preloading images, JavaScript, and CSS files?

How to sort WordPress RSS feed in alphabetical order using JavaScript

What is the best method for transmitting all parameters via a URL?

Verify if the screen is in full view by monitoring document.fullscreenElement within Vue3

Is it possible to utilize a JavaScript variable in this particular scenario and if so, what is the

Using Vuetify to display text fields in a single row

Transforming a jQuery menu into an active selection with Vue JS

Enhance your webpage design with stylish CSS formatting using Bulma cards

Javascript function to deselect all items

Next.js App encounters a missing API route (The requested page is not found)

Effortless navigation through the document in both directions with seamless scrolling

Customizing the appearance of an input button in Internet Explorer 8

The Next Js API is experiencing difficulties resolving

Jquery: Pressing Enter will cause the input field to lose

What is the proper way to encode image URLs for use in CSS?

JavaScript class with callback function commonly used

Issue encountered: When attempting to submit a form, an error is thrown stating "TypeError:

deliver a promise with a function's value

What is the best way to transfer my saved bookmarks and import them into a database?