Icon name does not exist

[jaylucas]

When playing with _nav.js, I noticed that most of the icons do not work out of the box.

CIcon component: icon name 'cil3d' does not exist in React.icons object. To use icons by 'name' prop you need to make them available globally by adding them to React.icons object. CIcon component docs: https://coreui.io/react/docs/components/CIcon 

Examples include:

{
    _tag: 'CSidebarNavItem',
    name: "Test1",
    to: "/test1",
    icon: <CIcon name="cil-face-dead" customClasses="c-sidebar-nav-icon"/>,
  },
  {
    _tag: 'CSidebarNavItem',
    name: "test2",
    to: "/test2",
    icon: <CIcon name="cil-gradient" customClasses="c-sidebar-nav-icon"/>,
  },
  {
      _tag: 'CSidebarNavItem',
      name: "test3",
      to: "/test3",
      icon: "cil-apple"
  },
  {
    _tag: 'CSidebarNavDropdown',
    name: "test4",
    route: "/test4",
    icon: 'cil-3d',
  }

None of these seemed to work for the sidebar. I attempted to write out all the names of the icons via:

// views/icons/brands/Brands.js

export const getIconsView = iconset => {
  return Object.entries(iconset).map(([name, value]) => {
    console.log(name) // <------------------------------------------ printing out all the icon names
    return (
      <CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
        <CIcon content={value} size="2xl"/>
        <div>{toKebabCase(name)}</div>
      </CCol>
    )
  })
}

And its seems to be present, with the same names. What is going on here?

[jvanhamlin]

I too experienced this frustrating issue that is not documented. Apparently, not all of the free icons are set globally to React.icons. To see where this is accomplished, see this line in src/index.js:
React.icons = icons

You can add any icons you need to the import in the src/assets/icons/index.js:
import { cilApple, cil3d, cilGradient } from '@coreui/icons' export const icons = Object.assign({}, { cilApple, cil3d, cilGradient })

After that, you should be able to use the icons by name.

The answers here could be useful as well:
https://stackoverflow.com/questions/62840344/coreui-icon-doesnt-appear-in-my-react-js-app

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions