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; 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 /> 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.
Top comments (3)
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-filesicons 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.Oh wow! Tell me more about this!
Hello @raajaryan. Okay, I will do.