Question 45704 in CSS Question posted in
Some basic documentation can be found here.

Changing svg color in react – CSS

I have a list of SVG icons in my navbar, I want when I’m hovering one to change its color, for now nothing happens on hover

Main component

import React, { useState } from "react";

import twitchLogo from "images/socials/icons8-twitch.svg";

export default function NavDesktopSocials() {
  return (
    <div className="flex items-center social-links">
      <div className="flex justify-center my-6">
          <a href="/twitch" rel="noopener noreferrer" target="_blank">
            <img src={twitchLogo} className="w-8 mx-1" />
          </a>
      </div>
    </div>
  );
}

Exemple of svg file

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="96px" height="96px" fill-rule="nonzero"><g fill="#89867e" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M19.98,5.69c-1.68,-1.34 -4.08,-1.71 -5.12,-1.82h-0.04c-0.16,0 -0.31,0.09 -0.36,0.24c-0.09,0.23 0.05,0.48 0.28,0.52c1.17,0.24 2.52,0.66 3.75,1.43c0.25,0.15 0.31,0.49 0.11,0.72c-0.16,0.18 -0.43,0.2 -0.64,0.08c-2.4,-1.48 -5.38,-1.56 -5.96,-1.56c-0.58,0 -3.56,0.08 -5.96,1.56c-0.21,0.12 -0.48,0.1 -0.64,-0.08c-0.2,-0.23 -0.14,-0.57 0.11,-0.72c1.23,-0.77 2.58,-1.19 3.75,-1.43c0.23,-0.04 0.37,-0.29 0.28,-0.52c-0.05,-0.15 -0.2,-0.24 -0.36,-0.24h-0.04c-1.04,0.11 -3.44,0.48 -5.12,1.82c-0.98,0.91 -2.93,6.14 -3.02,10.77c0,0.31 0.08,0.62 0.26,0.87c1.17,1.65 3.71,2.64 5.63,2.78c0.29,0.02 0.57,-0.11 0.74,-0.35c0.01,0 0.01,-0.01 0.02,-0.02c0.35,-0.48 0.14,-1.16 -0.42,-1.37c-1.6,-0.59 -2.42,-1.29 -2.47,-1.34c-0.2,-0.18 -0.22,-0.48 -0.05,-0.68c0.18,-0.2 0.48,-0.22 0.68,-0.04c0.03,0.02 2.25,1.91 6.61,1.91c4.36,0 6.58,-1.89 6.61,-1.91c0.2,-0.18 0.5,-0.16 0.68,0.04c0.17,0.2 0.15,0.5 -0.05,0.68c-0.05,0.05 -0.87,0.75 -2.47,1.34c-0.56,0.21 -0.77,0.89 -0.42,1.37c0.01,0.01 0.01,0.02 0.02,0.02c0.17,0.24 0.45,0.37 0.74,0.35c1.92,-0.14 4.46,-1.13 5.63,-2.78c0.18,-0.25 0.26,-0.56 0.26,-0.87c-0.09,-4.63 -2.04,-9.86 -3.02,-10.77zM8.89,14.87c-0.92,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.75,-1.92 1.67,-1.92c0.93,0 1.67,0.86 1.67,1.92c0,1.05 -0.74,1.91 -1.67,1.91zM15.11,14.87c-0.93,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.74,-1.92 1.67,-1.92c0.92,0 1.67,0.86 1.67,1.92c0,1.05 -0.75,1.91 -1.67,1.91z"></path></g></g></svg>
Tags:

2

Answers


  1. 0

    You can change the SVG color on hover by using CSS in your React project. First, you’ll need to modify your SVG files slightly to make the color changeable.

    Example of an SVG file with changeable color:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="96px" height="96px" fill-rule="nonzero">
  <g fill="currentColor" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
    <!-- Rest of your SVG content -->
  </g>
</svg>

    Notice the change from fill="#89867e" to fill="currentColor".

    Now, update your CSS with a rule for the hover.
    Add the following CSS rules to your project:

    .social-links a svg {
  fill: #89867e;
  transition: fill 0.3s ease;
}

.social-links a:hover svg {
  fill: #YOUR_DESIRED_HOVER_COLOR;
}

    Replace #YOUR_DESIRED_HOVER_COLOR with the color you want when hovering over the SVG icons.

    Then, update the img tags in your NavDesktopSocials component to use the new component instead:

    import React from "react";
import { ReactComponent as TwitchLogo } from "images/socials/icons8-twitch.svg";

export default function NavDesktopSocials() {
  return (
    <div className="flex items-center social-links">
      <div className="flex justify-center my-6">
        <a href="/twitch" rel="noopener noreferrer" target="_blank">
          <TwitchLogo className="w-8 mx-1" />
        </a>
      </div>
    </div>
  );
}

    By using the ReactComponent import method, the svg tag is utilized, which allows for the fill property to be changed through CSS. The img tag doesn’t provide the same flexibility, so we need to replace it with the svg tag.

    If you’re using webpack, install @svgr/webpack package as a development dependency by running the following command in your terminal:

    npm install @svgr/webpack --save-dev

    Next, add a rule for SVG files in your webpack.config.js or webpack.config.dev.js file under the module.rules section:

    {
  test: /.svg$/,
  use: ['@svgr/webpack'],
}

    This rule will tell Webpack to use the @svgr/webpack loader when importing SVG files.

    With these changes, the SVG color should change on hover as desired.

    Let me know how did this go.

    Login or Signup to reply.
  2. 0

    You can change the fill value to currentColor and change the color with CSS like this:

    svg { color: grey }
svg:hover { color: blue }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="96px" height="96px" fill-rule="nonzero">
<g fill="currentColor" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="scale(10.66667,10.66667)"><path d="M19.98,5.69c-1.68,-1.34 -4.08,-1.71 -5.12,-1.82h-0.04c-0.16,0 -0.31,0.09 -0.36,0.24c-0.09,0.23 0.05,0.48 0.28,0.52c1.17,0.24 2.52,0.66 3.75,1.43c0.25,0.15 0.31,0.49 0.11,0.72c-0.16,0.18 -0.43,0.2 -0.64,0.08c-2.4,-1.48 -5.38,-1.56 -5.96,-1.56c-0.58,0 -3.56,0.08 -5.96,1.56c-0.21,0.12 -0.48,0.1 -0.64,-0.08c-0.2,-0.23 -0.14,-0.57 0.11,-0.72c1.23,-0.77 2.58,-1.19 3.75,-1.43c0.23,-0.04 0.37,-0.29 0.28,-0.52c-0.05,-0.15 -0.2,-0.24 -0.36,-0.24h-0.04c-1.04,0.11 -3.44,0.48 -5.12,1.82c-0.98,0.91 -2.93,6.14 -3.02,10.77c0,0.31 0.08,0.62 0.26,0.87c1.17,1.65 3.71,2.64 5.63,2.78c0.29,0.02 0.57,-0.11 0.74,-0.35c0.01,0 0.01,-0.01 0.02,-0.02c0.35,-0.48 0.14,-1.16 -0.42,-1.37c-1.6,-0.59 -2.42,-1.29 -2.47,-1.34c-0.2,-0.18 -0.22,-0.48 -0.05,-0.68c0.18,-0.2 0.48,-0.22 0.68,-0.04c0.03,0.02 2.25,1.91 6.61,1.91c4.36,0 6.58,-1.89 6.61,-1.91c0.2,-0.18 0.5,-0.16 0.68,0.04c0.17,0.2 0.15,0.5 -0.05,0.68c-0.05,0.05 -0.87,0.75 -2.47,1.34c-0.56,0.21 -0.77,0.89 -0.42,1.37c0.01,0.01 0.01,0.02 0.02,0.02c0.17,0.24 0.45,0.37 0.74,0.35c1.92,-0.14 4.46,-1.13 5.63,-2.78c0.18,-0.25 0.26,-0.56 0.26,-0.87c-0.09,-4.63 -2.04,-9.86 -3.02,-10.77zM8.89,14.87c-0.92,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.75,-1.92 1.67,-1.92c0.93,0 1.67,0.86 1.67,1.92c0,1.05 -0.74,1.91 -1.67,1.91zM15.11,14.87c-0.93,0 -1.67,-0.86 -1.67,-1.91c0,-1.06 0.74,-1.92 1.67,-1.92c0.92,0 1.67,0.86 1.67,1.92c0,1.05 -0.75,1.91 -1.67,1.91z"></path>
</g>
</g>
</svg>

    However, you’ll need to make the SVGs inline.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search