htmlcssreactjsreact-typescriptionicons

How to change 'react-ionicons' color on hover effect with React


I have a component with a list of icons using react-ionicons like so:

export default function SocialIconsViewer() {

    return ( 
        <ul className="socials">
            <li><a href="www.twitter.com"><LogoTwitter/></a>
            </li>
            <li><a href="www.twitter.com"><LogoFacebook
                    title={'Facebook'}
                    /></a>
            </li><li><a href="www.twitter.com"><LogoInstagram 
                    title={'Instagram'}
                    /></a>
            </li><li><a href="www.twitter.com"><LogoYoutube 
                    title={'Youtube'}
                    /></a>
            </li><li><a href="www.twitter.com"><Mail 
                    title={'E-mail'}
                    /></a>
            </li>
        </ul>
    );
}

I am trying to create a hover effect over these icons in the css file that imported here:

.socials {
  position: absolute;
  right: 100px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.socials li {
  list-style: none;
}
.socials li a {
  text-decoration: none;
  color: var(--black);
  font-size: 1.75em;
  transition: 300ms;
}
.socials li a:hover {
  color: crimson;
}

However, this doesn't seem to work and I am having a hard time finding information to work with react-ionicons.


Solution

  • There are no imports in your component code.

    import {
      LogoTwitter,
      LogoFacebook,
      LogoInstagram,
      LogoYoutube,
      Mail,
    } from "react-ionicons";
    

    This is a very strange situation, because hover with background-color works fine with your Code but color hover doesn't! ?? Maybe it's the package's fault, I don't know for sure.

    I spent a lot of time on it.... and found an alternative approach. I hope you will like it.


    You could use react-icons you need to properly install them and import them.

    npm install react-icons --save
    

    Example

    import { FaBeer } from 'react-icons/fa';
    
    export default function Question() {
        render() {
            return <h3> Lets go for a <FaBeer />? </h3>
        }
    }
    

    Your component after the changes

    import { FaFacebook, FaTwitter, FaYoutube, FaInstagram } from "react-icons/fa";
    
    export default function SocialIconsViewer() {
      return (
        <ul className="socials">
          <li>
            <a href="https:://facebook.com" target="_blank" rel="noreferrer">
              <FaFacebook />
            </a>
          </li>
          <li>
            <a href="https://instagram.com" target="_blank" rel="noreferrer">
              <FaInstagram />
            </a>
          </li>
          <li>
            <a href="https://twitter.com" target="_blank" rel="noreferrer">
              <FaTwitter />
            </a>
          </li>
          <li>
            <a href="https://youtube.com" target="_blank" rel="noreferrer">
              <FaYoutube />
            </a>
          </li>
        </ul>
      );
    }
    

    Your Css styles works properly (hover effect) if we use global.css file.

    .socials {
      position: absolute;
      right: 100px;
      bottom: 30px;
      z-index: 4;
      display: flex;
      flex-direction: column;
    }
    .socials li {
      list-style: none;
    }
    .socials li a {
      text-decoration: none;
      color: var(--black);
      font-size: 1.75em;
      transition: 300ms;
    }
    .socials li a:hover {
      color: crimson;
    }