Icon animation not showing?-CodePudding

well i have a SVG icon that i made using Photoshop and i do have the code but when i put it in my navbar using this Bootstrap template (https://getbootstrap.com/docs/5.1/examples/product/#) the icon don't glow or have the same properties how can i solve this?

My SVG icon

<svg xmlns="http://www.w3.org/2000/svg"
 width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1465 9480 c-500 -106 -877 -501 -954 -1000 -9 -56 -11 -942 -9
-3525 l3 -3450 26 -96 c123 -444 434 -755 878 -878 l96 -26 3495 0 3495 0 96
26 c465 129 795 477 889 938 20 98 20 130 20 3531 0 3401 0 3433 -20 3531 -94
461 -424 809 -889 938 l-96 26 -3470 2 c-3372 2 -3473 1 -3560 -17z m3740
-2030 c706 -81 1213 -495 1375 -1123 44 -170 54 -255 54 -452 0 -138 -4 -200
-18 -265 -97 -447 -410 -832 -863 -1063 -96 -49 -103 -54 -103 -82 0 -23 142
-233 645 -950 526 -752 644 -926 645 -952 l0 -33 -619 0 -619 0 -623 890 -623
890 -148 0 -148 0 0 -890 0 -890 -540 0 -540 0 0 2465 0 2465 1018 0 c630 0
1051 -4 1107 -10z"/>
<path d="M4160 5885 l0 -587 453 5 c504 5 521 7 651 75 128 67 229 191 272
337 22 74 25 245 5 325 -23 96 -80 200 -146 265 -72 71 -136 108 -242 137 -73
20 -106 22 -535 26 l-458 4 0 -587z"/>
</g>
</svg>

The SVG icon of the navbar mentioned:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"  role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>

CodePudding user response：

They use the value currentColor on the stroke and fill of the icon. It will change both stroke and fill of the SVG matching the context. In this example the context is the <a> that changes color on hover.

nav {
  background-color: black;
  padding: .2em;
}

a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}

a:hover {
  color: #FFF;
}

<nav>
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 1000.000000 1000.000000" preserveAspectRatio="xMidYMid meet">
      <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
fill="currentColor" stroke="none">
        <path d="M1465 9480 c-500 -106 -877 -501 -954 -1000 -9 -56 -11 -942 -9
-3525 l3 -3450 26 -96 c123 -444 434 -755 878 -878 l96 -26 3495 0 3495 0 96
26 c465 129 795 477 889 938 20 98 20 130 20 3531 0 3401 0 3433 -20 3531 -94
461 -424 809 -889 938 l-96 26 -3470 2 c-3372 2 -3473 1 -3560 -17z m3740
-2030 c706 -81 1213 -495 1375 -1123 44 -170 54 -255 54 -452 0 -138 -4 -200
-18 -265 -97 -447 -410 -832 -863 -1063 -96 -49 -103 -54 -103 -82 0 -23 142
-233 645 -950 526 -752 644 -926 645 -952 l0 -33 -619 0 -619 0 -623 890 -623
890 -148 0 -148 0 0 -890 0 -890 -540 0 -540 0 0 2465 0 2465 1018 0 c630 0
1051 -4 1107 -10z"/>
        <path d="M4160 5885 l0 -587 453 5 c504 5 521 7 651 75 128 67 229 191 272
337 22 74 25 245 5 325 -23 96 -80 200 -146 265 -72 71 -136 108 -242 137 -73
20 -106 22 -535 26 l-458 4 0 -587z"/>
      </g>
    </svg>
  </a>
</nav>

Update

In the first example there is space under the icon that is not supposed to be there... In the below example the SVG has the CSS property display: block;. Now it behaves... I also did a more simple path for the icon (just for the fun of it and not perfect).

nav {
  background-color: black;
  padding: .2em;
}

a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}

svg {
  display: block;
}

a:hover {
  color: #FFF;
}

<nav>
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 45 45">
      <path fill="currentColor" stroke="none" d="M 4 0 A 5 5 90 0 0 0 5 L 0 40 A 5 5 90 0 0 4 45 L 40 45 A 5 5 90 0 0 45 40 L 45 4 A 5 5 90 0 0 41 0 Z M 22 10 C 32 10 34 22 25 25 C 31 33 32 34 32 34 L 32 34 L 26 34 L 19 25 L 18 25 L 18 34 L 13 34 L 13 10 L 22 10 M 18 15 L 18 21 L 22 21 A 1 1 90 0 0 22 15 Z"/>
    </svg>
  </a>
</nav>