请教 react 导航栏 的icon 图片变颜色 如何实现？？

#1

需要的效果是 点击那个菜单， 该菜单的图片和原色都变成金色，其他变成灰色。

我的代码如下， 无法实现， state中的index 无法改变

export default class Menu extends Component{

constructor (props) {
    super(props);
    this.state = {index: 0};
}

handleClick(i){
    console.log(i);
    console.log(this.state.index)
    this.setState({
        index: i
    })
}

render(){
    return(
        <nav>
            {
                menu.map((menu,index)=>{
                    return(
                        menu.path==='/' ?
                            <IndexLink to={menu.path} key={index} activeClassName="active" onClick={this.handleClick.bind(this,index)}>
                                <img
                                    src={this.state.index === index ? menu.activeImg : menu.img}
                                />
                                <i>{menu.menuName}</i>
                            </IndexLink>
                            :
                            <Link to={menu.path} key={index} activeClassName="active" onClick={this.handleClick.bind(this,index)}>
                                <img
                                    src={this.state.index === index ? menu.activeImg : menu.img}
                                />
                                <i>{menu.menuName}</i>
                            </Link>
                    )
                })
            }
        </nav>
    )
}

}

#2

难道这个不是通过改变icon的整个图片来实现的吗？

#3

文字 和 icon 图片分开的

#4

iconfont