Custom react icon context wrapper

React icons are cool and all but tey do have that pesky issue of hvving to wrap them in an <IconContext.provider> in order to be able to resize them or change their colors so i made this wrapper

typescript

1import React from 'react'
2import { IconContext, IconType } from "react-icons";
3
4type MyProps = {
5  // using `interface` is also ok
6  Icon: IconType;
7  size: string;
8  color: string;
9  iconstyle?:string;
10  iconAction?: () => any;
11};
12type MyState = {
13  iconstyle: string;
14};
15export class TheIcon extends React.Component<MyProps, MyState> {
16   constructor(props:MyProps) {
17    super(props)
18    this.state = { iconstyle:this.props?.iconstyle?this.props?.iconstyle:"" };
19    this.clickAction = this.clickAction.bind(this); 
20    }
21    clickAction(){
22      if(this.props.iconAction){
23      console.log("click action")
24      return this.props.iconAction()
25      }
26      return console.log("")
27      }
28     render() {
29    return (
30
31      <div>
32        <IconContext.Provider value={{ size:this.props.size,color:this.props.color,
33          className:this.state.iconstyle}}>
34            <this.props.Icon onClick={()=>this.clickAction()}/>
35        </IconContext.Provider>
36    
37      </div>
38    );
39  }
40}
41
42

example usage

typescript

1import { FaTimes} from "react-icons/fa";
2import { TheIcon } from './../Shared/TheIcon';
3
4<TheIcon Icon={ FaTimes } size={"34"} color={"green"} />
5

full project live demo

Custom react icon context wrapper

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

Custom react icon context wrapper

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider