Не могу придумать как менять цвет иконок при переключении вкладок.
Тоесть если активная первая вкладка то она синего цвета, а остальные по дефолту и тд...
class Nav extends React.Component {
render() {
return (
<div className='double-header'>
<div className="menu">
<nav className="container">
<ul className="menu-list">
<li className="list-item" title='Главная'>
<NavLink to="/" >
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 1 511 511.999" width="30px"><g><path d="m498.699219 222.695312c-.015625-.011718-.027344-.027343-.039063-.039062l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.808594-33.328126-13.808594-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.144532.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.441406 13.234375 31.273437 13.746093.484375.046876.96875.070313 1.457031.070313h8.320313v153.695313c0 30.417968 24.75 55.164062 55.167969 55.164062h81.710937c8.285157 0 15-6.71875 15-15v-120.5c0-13.878906 11.292969-25.167969 25.171875-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.28125 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.164062v-153.695313h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.8125 18.359375-18.367187 18.367187-48.253906.027344-66.632813zm-21.242188 45.421876c-3.238281 3.238281-7.542969 5.023437-12.117187 5.023437h-22.71875c-8.285156 0-15 6.714844-15 15v168.695313c0 13.875-11.289063 25.164062-25.167969 25.164062h-66.710937v-105.5c0-30.417969-24.746094-55.167969-55.167969-55.167969h-48.195313c-30.421875 0-55.171875 24.75-55.171875 55.167969v105.5h-66.710937c-13.875 0-25.167969-11.289062-25.167969-25.164062v-168.695313c0-8.285156-6.714844-15-15-15h-22.328125c-.234375-.015625-.464844-.027344-.703125-.03125-4.46875-.078125-8.660156-1.851563-11.800781-4.996094-6.679688-6.679687-6.679688-17.550781 0-24.234375.003906 0 .003906-.003906.007812-.007812l.011719-.011719 208.847656-208.839844c3.234375-3.238281 7.535157-5.019531 12.113281-5.019531 4.574219 0 8.875 1.78125 12.113282 5.019531l208.800781 208.796875c.03125.03125.066406.0625.097656.09375 6.644531 6.691406 6.632813 17.539063-.03125 24.207032zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#65676B"/></g> </svg>
</NavLink>
</li>
<li className="list-item" title='Информация'>
<NavLink to="/ex">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" enable-background="new 0 0 512 512" height="30px" viewBox="0 0 512 512" width="30px" class=""><g><g><path d="m256 512c-44.112 0-80-35.888-80-80v-160c0-44.112 35.888-80 80-80s80 35.888 80 80v160c0 44.112-35.888 80-80 80zm0-288c-26.467 0-48 21.533-48 48v160c0 26.467 21.533 48 48 48 26.468 0 48-21.533 48-48v-160c0-26.467-21.532-48-48-48z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#65676B"/><path d="m256 160c-44.112 0-80-35.888-80-80s35.888-80 80-80 80 35.888 80 80-35.888 80-80 80zm0-128c-26.467 0-48 21.533-48 48s21.533 48 48 48 48-21.533 48-48-21.533-48-48-48z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#65676B"/></g></g> </svg>
</NavLink>
</li>
<li className="list-item" title='Контакты'>
<NavLink to="/contacts" activeClassName='active'>
<svg xmlns="http://www.w3.org/2000/svg"
xmlnsXxlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1"
x="0px" y="0px" viewBox="0 0 384 384"
xmlSspace="preserve"
width="30" height="30" className=""><g><g>
<g>
<path
d="M300.232,209.52c-0.832-0.68-1.704-1.264-2.632-1.752c-13.192-8.728-27.52-15.848-42.712-21.128 C279.816,167.616,296,137.704,296,104C296,46.656,249.344,0,192,0S88,46.656,88,104c0,33.704,16.184,63.616,41.104,82.632 c-15.192,5.28-29.52,12.408-42.712,21.128c-0.92,0.488-1.8,1.072-2.632,1.752C33.232,244.136,0,302.248,0,368 c0,8.832,7.168,16,16,16c8.832,0,16-7.168,16-16c0-50.568,23.648-95.648,60.384-124.992l88.304,88.304 c3,3,7.072,4.688,11.312,4.688s8.312-1.688,11.312-4.688l88.304-88.304C328.352,272.352,352,317.432,352,368 c0,8.832,7.168,16,16,16c8.832,0,16-7.168,16-16C384,302.248,350.768,244.136,300.232,209.52z M120,104c0-39.696,32.296-72,72-72 s72,32.304,72,72s-32.296,72-72,72C152.296,176,120,143.696,120,104z M192,297.368l-72.04-72.04 C141.64,214.336,166.072,208,192,208s50.36,6.336,72.04,17.328L192,297.368z"
data-original="#000000" className="" data-old_color="#000000" fill="#65676B" />
</g>
</g><g>
<g>
<path
d="M96,328c-8.832,0-16,7.168-16,16v24c0,8.832,7.168,16,16,16c8.832,0,16-7.168,16-16v-24C112,335.168,104.832,328,96,328z"
data-original="#000000" className="" data-old_color="#000000" fill="#65676B" />
</g>
</g><g>
<g>
<path
d="M296,328c-8.832,0-16,7.168-16,16v24c0,8.832,7.168,16,16,16c8.832,0,16-7.168,16-16v-24C312,335.168,304.832,328,296,328 z"
data-original="#000000" className="" data-old_color="#000000" fill="#65676B" />
</g>
</g></g> </svg>
</NavLink>
</li>
</ul>
</nav>
</div>
</div>
);
}
}
Средний
