I Can't Modify My Svg Component In My React Application

May 31, 2023 Post a Comment

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 im

Solution 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.

Solution 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.

Baca Juga

// AppconstApp = React.createClass({
  render() {
    return (
      <div><divclassName="switcher"><IconOffice /></div><IconOfficebookfill="orange"bookside="#39B39B"bookfront="#76CEBD" /><IconOfficewidth="200"height="200" /></div>
    )
  }
});

// IconconstIconOffice = React.createClass({
  getDefaultProps() {
    return {
      width: '100',
      height: '200',
      bookfill: '#f77b55',
      bookside: '#353f49',
      bookfront: '#474f59'
    };
  },
 render() {
   return (
     <svgclassName="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"><titleid="title">Office Icon</title><gclassName="cls-2"><circleid="background"className="cls-3"cx="94.2"cy="94.2"r="94.2"/><pathclassName="cls-4"d="M50.3 69.8h10.4v72.51H50.3z"/><pathfill={this.props.bookside}d="M50.3 77.5h10.4v57.18H50.3z"/><pathfill={this.props.bookfront}d="M60.7 77.5h38.9v57.19H60.7z"/><pathclassName="cls-7"d="M60.7 69.8h38.9v7.66H60.7z"/><pathclassName="cls-5"d="M60.7 134.7h38.9v7.66H60.7z"/>
          ...
      </svg>
   )
 }
});

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