typescript correct type for svg component passed as prop

user_13417861 0
Viewed 401

I am building a button component:

interface ButtonProps {
   startIcon?: ... <-- what type?
}

const Button = ({startIcon: StartIcon}) => {
   return <button>{StartIcon && <StartIcon/>}</button>
}

// usage
<Button startIcon={SomeIcon}/>

I am using react-icons library, what type should I declare in interface? Does it make a difference on type declaration if I pass svg element as startIcon prop?

react-icons typescript reactjs svg
1 Answers

The type of your icons is FunctionComponent so you can simply import it from react library:

import React, {FunctionComponent} from 'react';
// rest of the codes ...

interface ButtonProps {
  startIcon?: FunctionComponent 
}

Optional

You can check the type of your variables with a simple console.log and typeof method.

Assume this simple component:

const SampleComponent = () => <p>Hello</p>

Now check the type:

console.log(SampleComponent);
console.log(typeof SampleComponent) // function

Now, check the icons type (imported from react-icons), its is completely similar to above result.

user_57379500
Related