Change stroke and fill color of SVG on hover-CodePudding

I have an SVG that looks like this :

Which on hover /active must turn into

Normal Icon

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5002 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.5004 16.0002H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="18.4999" cy="13.75" r="2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Active Icon

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 2.99997V5.99997" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5002 2.99997V5.99997" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.5004 16.0002H10.5" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12H10.5" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" fill="#2D5BFF" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="18.4999" cy="13.75" r="2" fill="#2D5BFF" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Now instead of using 2 SVGs, I am trying to just change the colors on being selected. like this is react

import {ReactComponent as ContactsIcon from './contactsIcon.svg'}

Now I can go into this svg replace all the stroke="#6b7280" with stroke ="currentColor" and apply css on my SVG like this

<ContactsIcon classNames="isActive?text-blue:text-black"..../>

kinda thing.

This solves the lines turning blue from gray. But how can I achieve the part where the Human Profile Head and Body is filled ? Is there another property like currentColor that I can leverage to do this ?

I realise by problem here is logically :

I need 2 color for lines -> Gray & Blue I also need 2 colors for the Fill -> None/white AND Blue .

But trying to accomplish all this with one color state currentColor isn't possible. Because the fill may turn to gray rather than blue when active

Can this be achieved with only CSS? Or do I need to use 2 SVGs for this ?

CodePudding user response：

In this example I added the class name "fill" to the two elements (as I understand it) that need a fill on hover.

svg:hover path,
svg:hover circle {
  stroke: #2D5BFF;
}

svg:hover .fill {
  fill: #2D5BFF;
}

<svg width="200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M7.5 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M16.5002 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M11.5004 16.0002H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M13 12H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path  fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <circle  cx="18.4999" cy="13.75" r="2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Update

OP also asked for the use of currentColor. In the below example I replaced all the stroke values width currentColor. But still, when hovering the <a> a fill needs to be added to the two elements that need fill. currentColor is always the color defined for the context. In this case an <a> that has a hover effect.

a {
  color: #6B7280;
}

a:hover {
  color: #2D5BFF;
}

a:hover .fill {
  fill: currentColor;
}

<a href="#">
  <svg width="200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.5 2.99997V5.99997" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M16.5002 2.99997V5.99997" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M11.5004 16.0002H10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M13 12H10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path  fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <circle  cx="18.4999" cy="13.75" r="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</a>