score:8

Accepted answer

if you created your svg in illustrater, save it with css properties set to presentation attributes. this way, you won't end up with a css classes and you are able to directly alter all attributes.

i exported an svg that looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- generator: adobe illustrator 21.0.2, svg export plug-in . svg version: 6.00 build 0)  -->
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewbox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
    <rect x="15.5" y="15.5" fill="#ffffff" width="44" height="44"/>
    <path d="m59,16v43h16v16h59 m60,15h15v45h45v15l60,15z"/>
</g>
<g>
    <path fill="#ffffff" d="m60.5,81.5c-12.1,0-22-9.9-22-22s9.9-22,22-22s22,9.9,22,22s72.6,81.5,60.5,81.5z"/>
    <path d="m60.5,38c72.4,38,82,47.6,82,59.5s72.4,81,60.5,81s39,71.4,39,59.5s48.6,38,60.5,38 m60.5,37c48.1,37,38,47.1,38,59.5
        s48.1,82,60.5,82s83,71.9,83,59.5s72.9,37,60.5,37l60.5,37z"/>
</g>
</svg>

i then got rid of all unneeded markup and just used it inside my component:

const image = ( props ) => {
  const {
    hidesquare,
    hidecircle,
  } = props;
  
  const colorsquare = props.colorsquare || '#fff';
  const colorcircle = props.colorcircle || '#fff';
  
  return (
    <svg x="0px" y="0px" viewbox="0 0 100 100">
      { hidesquare ? null : (
        <g>
          <rect x="15.5" y="15.5" fill={ colorsquare } width="44" height="44"/>
          <path d="m59,16v43h16v16h59 m60,15h15v45h45v15l60,15z"/>
        </g>
      ) }
      { hidecircle ? null : (
        <g>
          <path fill={ colorcircle } d="m60.5,81.5c-12.1,0-22-9.9-22-22s9.9-22,22-22s22,9.9,22,22s72.6,81.5,60.5,81.5z"/>
          <path d="m60.5,38c72.4,38,82,47.6,82,59.5s72.4,81,60.5,81s39,71.4,39,59.5s48.6,38,60.5,38 m60.5,37c48.1,37,38,47.1,38,59.5
            s48.1,82,60.5,82s83,71.9,83,59.5s72.9,37,60.5,37l60.5,37z"/>
        </g>
      ) }
    </svg>
  );
};

class wrapper extends react.component {
  constructor( props ) {
    super( props );
    
    // set default state
    this.state = {
      selectedcolor: 'lightgreen',
      hidesquare: false,
      hidecircle: false,
    };
  }
  
  // oninput callback
  changecolor = ( e ) => {
    this.setstate( { selectedcolor: e.target.value } );
  }
  
  changevisibility = ( e ) => {
    const { name, checked } = e.target;
    this.setstate( { [ name ]: checked } );
  }
  
  render() {
    return (
      <div>
        <select oninput={ this.changecolor }>
          <option>lightgreen</option>
          <option>pink</option>
          <option>red</option>
        </select><br />
        <label><input type="checkbox" name="hidesquare" onchange={ this.changevisibility } /> hidesquare</label>
        <label><input type="checkbox" name="hidecircle" onchange={ this.changevisibility } /> hidecircle</label><br />
        <image
          hidesquare={ this.state.hidesquare }
          hidecircle={ this.state.hidecircle }
          colorsquare={ this.state.selectedcolor }
          colorcircle={ this.state.selectedcolor }
        />
      </div>
    );
  }
}

reactdom.render( <wrapper />, document.getelementbyid( 'app' ) );
svg {
  width: 200px;
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

score:14

you can preserve the styles without any conversion. for that wrap all the css classes inside the style tag with {` and `}. now your svg becomes like this

<svg ...>
  <defs>
    <style>{`.cls-1,.cls-7{fill:#b2488d;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#671f4d;}`}</style>
  </defs>
  ...
</svg>

this will render without any problem.


Related Query

More Query from same tag