DEV Community

Paul C. Ishaili
Paul C. Ishaili

Posted on

3

How I created reusable React Icon Component using react-icons library in an AstroJs Project.

In the past weeks lately, I have been focused on building clean landing page websites using AstroJs framework.

One of the difficulties I often face however is the limitation of the icon libraries available in the astro-icons, as compared to the react-icon library.

So here's what I decided to do:

import React from 'react';
import * as FaIcons from 'react-icons/fa';
import * as MdIcons from 'react-icons/md';
import * as AiIcons from 'react-icons/ai';
import * as GiIcons from 'react-icons/gi';
import * as IoIcons from 'react-icons/io';
import * as CiIcons from "react-icons/ci";
import * as FiIcons from "react-icons/fi";
import * as LuIcons from "react-icons/lu";

const iconSets = {
  fa: FaIcons,
  md: MdIcons,
  ai: AiIcons,
  gi: GiIcons,
  io: IoIcons,
  ci: CiIcons,
  fi: FiIcons,
  lu: LuIcons,
};

const Icon = ({ name, set = 'fa', size = 24, color = 'currentColor', className = '' }) => {
  const IconComponent = iconSets[set][name];

  if (!IconComponent) {
    console.warn(`Icon ${name} from set ${set} not found`);
    return null;
  }

  return <IconComponent size={size} color={color} className={className} />;
};

export default Icon;
Enter fullscreen mode Exit fullscreen mode

After which I imported this IconX (which I called it, that it doesn't conflict with the icon component from astro-icons) component into the components I would like to use it in.


<IconX size={24} set="ci" name={"CiSearch"} client:load />

Enter fullscreen mode Exit fullscreen mode

Now I have access to the thousand of icons provided by react-icons right in my AstroJs Project.

Do like, share and follow for more.

Enjoy the read.

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (4)

Collapse
 
miketalbot profile image
Mike Talbot ⭐ • Edited

I did something very similar to this in my last major project. I'm now using Iconify which I find to be exceptional - the challenge with the approach you are using here is that it includes all of the icons in your project, Iconify avoids this. You can also use the all-files icons version of React Icons, while this takes a long time to install but it will let you pick and choose specific ones and not include everything.

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Oh wow! Tell me more about this!

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Hello @raajaryan. Okay, I will do.

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay