Добрый день
может быть, кто-то сталкивался...
Необходимо использовать иконки 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 (иконки будут использоваться для фильтрации и навигации так, что их отображение критично).