How to Export React Icons Using Functional Component?

Question

Error I am getting: ./src/components/IconsOne.js Attempted import error: 'TiHome' is not exported from 'react-icons/fa'.

IconsOne.js:

import { TiHome } from 'react-icons/fa';

const IconsOne = () => {
    return (
        <div className="homeIcon">
            <h3>
                <TiHome />
            </h3>
        </div>
    )
}

export default IconsOne

App.js

import './App.css';
import IconsOne from "./components/IconsOne";


function App() {
  return (
    <div className="App">
      <Router>
        <IconsOne />
      </Router>
    </div>
  );
}

export default App;

I am trying to build a navbar and the first step is to render a home icon. I used this page for documentation on importing icons for react: https://react-icons.github.io/react-icons/ and the name of the Icon that I'm trying to import is TiHome

The link to the icon is: https://react-icons.github.io/react-icons/search?q=tihome Thank you.

Is the icon really called "TiHome"? Because it says that the particular icon is not exported from the font awesome collection. — FireFighter
@FireFighter Yes, here is the link: react-icons.github.io/react-icons/search?q=tihome — Andrew Bregman
But then it is probably exported from 'react-icons' and not 'react-icons/fa'. — FireFighter
@FireFighter Okay thank you. I didn't know where to look to figure this out, but that makes sense. THank you. — Andrew Bregman

sntim sntim · Accepted Answer · 2021-04-10T18:45:39

The problem is fa, that is not the path for Typicons but for FontAwesome, so if you want TiHome from Typicons then according to react-icons you must use instead the ti path, so:

import { TiHome } from 'react-icons/ti';

const IconsOne = () => {
    return (
        <div className="homeIcon">
            <h3>
                <TiHome />
            </h3>
        </div>
    )
}

export default IconsOne

How to Export React Icons Using Functional Component?

1 Answers