[ShadCN] refactor(icons): use react-icons `IconBase` composition

[TylerAPfledderer]

Description

Related Issue

[netlify[bot]]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	ce1f2e9dba9366818c101e8bb39be5e4c8bdb11a
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/670e7859dc003400081f37e5
😎 Deploy Preview	https://deploy-preview-13970--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 44 (🔴 down 9 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pettinarip]

Hey @TylerAPfledderer would you need some help on this? its gaining priority now that we need to migrate a bunch of components that use these icons. Would be nice to have this in place to avoid converting all the icons to svgs.

I'll test it locally in the meantime.

[TylerAPfledderer]

@pettinarip yes, that would be helpful. Getting bogged down over here at the moment.

I would point out that when double-checking changes to the icons where rendered in components/pages, that if a color was added, it might need to be added to the fill css property instead of text color.

text-* => fill-*

[pettinarip]

Ok @TylerAPfledderer.

I've reverted the StakingHierarchy related icons to migrate them later as they are a bit related to that component logic. I don't think we need to address that in this PR.

[TylerAPfledderer]

@pettinarip I have not considered anything additional for this PR.