Change icons color with className

[ruiaraujo012]

I'm using react and I want to change the icon color on hover but I can't find how to do this.

Any help?

[rendinjast]

Hi. you can use onMouseEnter and onMouseLeave to set a state then change color depends on that state.

example:

import { useState } from 'react';
import { Happyemoji } from 'iconsax-react';

function App() {
  const [hover, setHover] = useState(false);
  return (
    <div className='App'>
      <Happyemoji
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        color={hover ? '#ff0000' : '#0000ff'}
      />
    </div>
  );
}

[ruiaraujo012]

Hi @rendinjast

The problem is, I'm rendering a list of services that has a name and a time, to the time I'm using an icon.

My goal is when the user do the mouse hover on the card, all inside it need to change color.

Example: Card is white and text/icons are black, on hover, card is brown and text/icons need to be white.

[rendinjast]

You can implement onMouseEnter onMouseLeave on that card.

[ruiaraujo012]

Yes, but, there is no option to do this with CSS?

[pushpender-singh-ap]

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div class="container">
        <div class="card">
          <h3 class="header">This is option</h3>
          <p class="small">
            Card description with lots of great facts and interesting details.
          </p>
        </div>
      </div>
    </div>
  );
}

Paste this in styles.css

* {
  transition: all 0.3s ease-out;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

h3 {
  color: #262626;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

p {
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  color: #666666;
}

p.small {
  font-size: 14px;
}

.card {
  display: block;
  top: 0px;
  position: relative;
  max-width: 262px;
  background-color: #FFF;
  border-radius: 4px;
  padding: 32px 24px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  border: 1px solid #f2f8f9;
}

.card:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
    border: 1px solid #cccccc;
    background-color: white;
  }

.card:hover:before{
  transform: scale(2.15);
}

.card:hover {
  background-color: #CD7F32;
}

.card:hover .header{
  transition: all 0.3s ease-out;
  color: #ffffff;
}

.card:hover .small{
  transition: all 0.3s ease-out;
    color: rgba(255, 255, 255, 0.8);
  }

Preview:-

https://user-images.githubusercontent.com/73298854/147575753-ab4d5610-fe17-42ff-ac27-8017628e1ac4.mov

[ruiaraujo012]

Hi @pushpender-singh-ap this I already have, the problem is that I can't change the color of the icons via CSS, at least, preserving the appearance. Normal:

Hover:

my code: (I'm using material-ui v4)

card: {
    '& :hover $changeColor': {
      backgroundColor: 'transparent',
      // backgroundColor: theme.palette.primary.main,
      color: theme.palette.text.hover || theme.palette.getContrastText(theme.palette.primary.main),
      transition: '0.4s',
    },
    '&> :hover': {
      backgroundColor: theme.palette.primary.main,
      transition: '0.4s',
    },
    '&> :not(:hover)': {
      // FIXME: Search for one alternative to this. (avoid :not(:hover))
      transition: '0.4s',
    },
    backgroundColor: theme.palette.secondary.main,
    borderRadius: 10,
    margin: 8,
  },
  changeColor: {
    backgroundColor: 'transparent',
    color: theme.palette.text.main || theme.palette.getContrastText(theme.palette.secondary.main),
    cursor: 'pointer',
    fontWeight: 'bold',
    transition: '0.4s',
  },

With material UI icons or react-feather this code changes the icon color too.

[pushpender-singh-ap]

@ruiaraujo012

App.js

import "./styles.css";
import { Camera } from 'react-feather';

export default function App() {
  return (
    <div className="App">
      <div class="container">
        <div class="card">
          <h3 class="header">This is option</h3>
          <p class="small">
            Card description with lots of great facts and interesting details.
          </p>
          <Camera class="a" />
        </div>
      </div>
    </div>
  );
}

Paste this in styles.css

* {
  transition: all 0.3s ease-out;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

h3 {
  color: #262626;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

p {
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  color: #666666;
}

p.small {
  font-size: 14px;
}

.card {
  display: block;
  top: 0px;
  position: relative;
  max-width: 262px;
  background-color: #fff;
  border-radius: 4px;
  padding: 32px 24px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  border: 1px solid #f2f8f9;
}

.card:hover {
  transition: all 0.2s ease-out;
  box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
  top: -4px;
  border: 1px solid #cccccc;
  background-color: white;
}

.card:hover:before {
  transform: scale(2.15);
}

.card:hover {
  background-color: #cd7f32;
}

.card:hover .header {
  transition: all 0.3s ease-out;
  color: #ffffff;
}

.card:hover .small {
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

.card:hover .a{
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

Preview:-

https://user-images.githubusercontent.com/73298854/147579041-e388fef2-e466-45ef-aaf9-b3ce5ad7403c.mov

[rendinjast]

I can't change the color of the icons via CSS,

set color to currentColor

    <div className='App'>
      <Happyemoji color='currentColor' />
    </div>

in css:

.App {
  color: blue;
}
/* more specific */
.App svg {
  color: red;
}

currentColor will be default color in next version

[ruiaraujo012]

I will try your suggestions @pushpender-singh-ap and @rendinjast, but for now, none of them works, I need to spend more time on this.

I think is because this is a subcomponent of the Chip component.

[rendinjast]

update v0.0.8 => now currentColor is default color

[ruiaraujo012]

Thank you @rendinjast, this works like a charm.

Maybe "inherit" be a better name, it is used in other libraries like material-ui. It is just a suggestion.