Answer the question
In order to leave comments, you need to log in
A
A
Alex Ozerov2020-07-17 17:37:56
Alex Ozerov, 2020-07-17 17:37:56
How to change color of svg if it is active tab?
I can't figure out how to change the color of the icons when switching tabs.
That is, if the first tab is active, then it is blue, and the rest are by default, and so on ...
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>
);
}
}
Similar questions
_
C
I
D
K
KirSupi2020-11-24 01:01:08
How to change the content in react depending on the size of the block?
0Reply
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question