How to use json from iconmoon in react like?

Question

JSON

Good afternoon,
maybe someone came across ... You
need to use svg icons. I found the iconmoon service, it generates a JSON file with data about icons. Oh yes, I do all this on react (my first project, in addition, the first time I use svg graphics in a large volume).
I need to parse it and pull out the data for my components. The icon has two states: active/inactive.
I'm a little tired of doing this with pens, and knowledge in js is rather weak. + strong impression that this is a clumsy solution
now I do it like this:

const IconSpeed = React.createClass({
  getDefaultProps() {
    
  },
  getInitialState() {	
        return{
          active:false,
          fillone: svgicons.speedIcon.deactiv.firstpath,
          filltwo: svgicons.speedIcon.deactiv.secondpath,
          fillthree: svgicons.speedIcon.deactiv.thirdpath,
          fillfour: svgicons.speedIcon.deactiv.fourspath,
          event_counter: 35,
          
        }
  },
  updateImage(){
    if (this.state.active == false){
      			this.setState({
      				active: true,
      					fillone: svgicons.speedIcon.active.firstpath,
              filltwo: svgicons.speedIcon.active.secondpath,
              fillthree: svgicons.speedIcon.active.thirdpath,
              fillfour: svgicons.speedIcon.active.fourspath,
      			});
    }
    if (this.state.active ==  true){
      			this.setState({
      				active: false,
              fillone: svgicons.speedIcon.deactiv.firstpath,
              filltwo: svgicons.speedIcon.deactiv.secondpath,
              fillthree: svgicons.speedIcon.deactiv.thirdpath,
              fillfour: svgicons.speedIcon.deactiv.fourspath,
      			});		
  		}
  },

  render: function(){
    return(
      <div className="event">
        <p className={"tooltip " + this.state.class}>some text</p> 
        <span className='counter_events parking_counter'>{this.state.event_counter}</span>
        <svg 
          className="speed_icon"
          xmlns="http://www.w3.org/2000/svg" 
          viewBox="0 0 22 22"
          onMouseEnter={this.updateImage}
          onMouseLeave={this.updateImage}
        >
            <path d={this.state.fillone} fill="#FFF"/>
            <path d={this.state.filltwo} />
            <path d={this.state.fillthree} />
            <path d={this.state.fillfour}/>
        </svg>
        
      </div>
    )		
  }

});

There is hope that a similar problem has already been solved and someone will share its solution.
I don't want to use them as a font (like awesome) because of a bug in OperaMobile (icons will be used for filtering and navigation in such a way that their display is critical).