React-icons makes SVG handling stress-free

Adding new images into project is not always easy, specially if there is no designer that delivers the assets you need. In those cases, you rely just on the power of Internet and its free resources. Learn how react-icons library has tons of free resources that you can use instead of spending hour searching for free SVGs

Preface

There is not much pretext in this post. I was just building this website and wanted to add some section with links in the homepage, so anyone that wants to ping me know how. I didn’t want to add all my social networks, but just the main ones like LinkedIn, Github and my contact email, a quite easy task you may think. In fact it is, but my OCD with image formats just showed up and started to wonder about things like the image size, how it scales among different screen sizes, ...

So I decided to avoid downloading and using a PNG or JPG image and look for some SVGs which are more lightweight and scale better. But then I realised that is not always trivial to Of course it didn’t took me very long to find react-icons and search finished immediately

Code

It’s amazing how you can have all the icons you need by installing a single npm package.

In just a few lines of code I am importing the SVG icons that I need from react-icons, and adding custom styles to them without any struggle.

import { IconType } from 'react-icons'
import { FaGithubSquare } from 'react-icons/fa'
import { FaLinkedin } from 'react-icons/fa'
import { GrMail } from 'react-icons/gr'
import { IconContext } from 'react-icons'

const socialLinks = [
  {
    href: 'https://github.com/SergioMD15',
    icon: FaGithubSquare
  },
  {
    href: 'https://linkedin.com/in/sergio-mosquera-dopico',
    icon: FaLinkedin
  },
  {
    href: 'mailto:sergiomosquera@gmail.com',
    icon: GrMail
  }
]

const SocialIcon = ({ href, icon } : SocialIconProps) => {
  return (
    <Link href={href} passHref>
      <a>
        <IconContext.Provider value={{ size: '36px', color: '#111827' }}>
          {React.createElement(icon, null)}
        </IconContext.Provider>
      </a>
    </Link>
  )
}

Credits

I want to thank all the contributors to react-icons repository for making such an easy to use and helpful library.