0

I have been trying to fill the color of an SVG component in React, but it won't work.

I've tried using an image tag to React. However, I read on the React docs that CSS with the img tag isn't supported.

//css
.dotSvg{
  position: relative;
  fill: #5AE2EB;
}
//React
//import
import { ReactComponent as Dot } from './dot.svg';

//code itself
<div className="home">
  <Dot className="dotSvg"/>
  <h3>Home</h3>
</div>

I would like to be able to use fill and other kinds of SVG modifiable attributes.

update:This is my css file code setup. .dotSvg is a item of .container class. Still need help

.container{ display: grid;
 text-align: center; 
grid-template-columns: auto auto auto auto auto; 
position: sticky; 
top: 0; 
}

 .dotSvg{ cursor: pointer; 
position: r
elative; 
fill: #5AE2EB; 
}

///svg file
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><circle cx="1" cy="1" r="1" style="fill-opacity:0;"/></svg>

Solved! I found out that the svg had a fill-opacity: 0; style on it so I removed it or you could put it to one to fix this.

3 Answers 3

0

Most common case is that .svg file is converted/edited or not properly exported, without that file the easiest way to change e.g. color is to open that file in any text/code editor, copy code without xml tag so from svg tag..to closing /svg tag and paste directly into code.

Then you can easly style whole element or some parts of it e.g.

.yourSvgWrapperDivClass svg g {
    fill: #0000FF;
}

You can also refer directly to some elements of the svg file/code (just inspect it) and try style g/path or rect elements.

1
  • I tried this and it had the same result. It has a wrapper around it such as .container{ display: grid; text-align: center; grid-template-columns: auto auto auto auto auto; /* grid-template-rows: 100px 300px; */ position: sticky; top: 0; } .dotSvg{ cursor: pointer; position: relative; fill: #5AE2EB; }
    – Misterjoe
    Jul 14, 2019 at 0:58
0

It looks like the best way to handle this would be to use the SVG code itself as a component, then use props to pass in the fill colors as needed.

// App
const App = React.createClass({
  render() {
    return (
      <div>
        <div className="switcher">
          <IconOffice />
        </div>
        <IconOffice bookfill="orange" bookside="#39B39B" bookfront="#76CEBD" />
        <IconOffice width="200" height="200" />
      </div>
    )
  }
});

// Icon
const IconOffice = React.createClass({
  getDefaultProps() {
    return {
      width: '100',
      height: '200',
      bookfill: '#f77b55',
      bookside: '#353f49',
      bookfront: '#474f59'
    };
  },
 render() {
   return (
     <svg className="office" xmlns="http://www.w3.org/2000/svg" width={this.props.width} height={this.props.height} viewBox="0 0 188.5 188.5" aria-labelledby="title">
        <title id="title">Office Icon</title>
        <g className="cls-2">
          <circle id="background" className="cls-3" cx="94.2" cy="94.2" r="94.2"/>
          <path className="cls-4" d="M50.3 69.8h10.4v72.51H50.3z"/>
          <path fill={this.props.bookside} d="M50.3 77.5h10.4v57.18H50.3z"/>
          <path fill={this.props.bookfront} d="M60.7 77.5h38.9v57.19H60.7z"/>
          <path className="cls-7" d="M60.7 69.8h38.9v7.66H60.7z"/>
          <path className="cls-5" d="M60.7 134.7h38.9v7.66H60.7z"/>
          ...
      </svg>
   )
 }
});

ReactDOM.render(<App />, document.querySelector("#main"));

https://css-tricks.com/creating-svg-icon-system-react/

0

I removed the svg style fill-opacity:0 from the svg file itself. You could also change the 0 to 1 if you that works for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.