4

I've installed the react-icons module correctly with npm, and everything is working great. I can import icons without any errors, but sadly whenever I try and import an icon with Io before it like

  • IoSettingsSharp
  • IoSettingsOutline etc.

    simply like:

    import { IoSettingsOutline } from 'react-icons/io'
    class Home extends Component{
        render(){
            return (
                <div className="app">
                    <Link to='/settings'>
                    <IoSettingsOutline className="settings-icon"/>
                    </Link>
                </div>
           )
        }
    };
    

    I get the error:

    ./src/Home.js Attempted import error: 'IoSettingsOutline' is not exported from 'react-icons/io'.

    And what's funny about this is, I've imported every other icon just like this, switching out the name and the ending of 'react-icons/io'

    What is happening and how can I fix this?

  • Buddy Bob
    • 5,829
    • 1
    • 13
    • 44
    • 2
      There are different `Ionicons` [versions](https://github.com/react-icons/react-icons#icons). You'll either want to import from [io](https://react-icons.github.io/react-icons/icons?name=io) (which is `Ionicons v4`) or [io5](https://react-icons.github.io/react-icons/icons?name=io5). Click on the links provided to see which icons are supported for each version. In your case, `IoSettingsOutline` comes from `io5`. – Matt Carlotta Jul 13 '21 at 21:24
    • Ok that makes sense! – Buddy Bob Jul 13 '21 at 21:35

    2 Answers2

    8

    as @Matt Carlotta said: "There are different Ionicons Ionicons v4 io5"

    try:

    import { IoSettingsOutline } from 'react-icons/io5'
    
    Amr Eraky
    • 1,423
    • 7
    • 13
    0

    The below import worked for me,

    import { IoSettingsOutline } from 'react-icons/io5'
    
    jabs
    • 1