React-icons not working as expected with chakra-ui

Get Help and Help Others
1

For a new redwood typescript project with chakra-ui, react-icons appear not to be working as expected.

Example:

import { Icon } from '@chakra-ui/react'
import { MdSettings } from 'react-icons/md'

function Example() {
  return <Icon as={MdSettings} />
}

Results in Module not found: Error: Can't resolve 'react-icons/md'

I have tried for several react-icon modules (e.g. ‘react-icons/fa’, ‘react-icons/gr’, etc.) and get the same result: Module not found: ...

Has anyone else experience this issue?

2

Nevermind, this resolved it yarn workspace web add react-icons. From my reading of the chakra-ui docs, I got them impression react-icons was included in the chakra-ui install but that’s not the case.

3

I agree the wording on Icon - Chakra UI is slightly unclear.

I think, “Using a third-party icon library” implies that the icon library is not part of the first party ( chakra-ui in this case ). If you click through the react-icon link on their docs there is an install step.

Might want to update their docs chakra-ui-docs/content/docs/components/icon/usage.mdx at main · chakra-ui/chakra-ui-docs · GitHub to aid the next person?

1 Like
4

Thanks @bitshift. Yes, planning to update their docs… I also plan on updating for the second point in this thread: Configure Storybook... fails with new typescript project when setting-up chakra-ui

1 Like