I can't modify my SVG component in my React Application

Question

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 CS

Answer 1

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.

Answer 2

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/

Answer 3

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.