@vaskadogana
Frontend developer

Как использовать json от iconmoon в react как?

Добрый день
может быть, кто-то сталкивался...
Необходимо использовать иконки svg. Нашел сервис iconmoon, он генерирует JSON файл c данными про иконки. Ах да делаю все это на react (мой первый проект, вдобавок первый раз использую svg графику в большом объеме).
Мне необходимо его расспарсить и вытащить данные для моих компонентов. У иконки получается два состояния: активное/неактивное.
Ручками это делать чуть подустал, а познания в js слабоваты. + стойкое впечатление, что это корявое решение
сейчас делаю это примерно так:
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>
		)		
	}

});

Есть надежда, что подобная задача уже решена и кто-то поделится ее решением.

Не хочу использовать их как шрифт (типа awesome) из-за бага в OperaMobile (иконки будут использоваться для фильтрации и навигации так, что их отображение критично).
  • Вопрос задан
  • 156 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы