After the version 3.1.0 using only a fontIcon in CSidebarNavItem is not possible.

[Nelias]

To use an icon property in React + TypeScript one has to do: React.icons = icons from exported icons object in an index.tsx file but it is not possible in TypeScript.

Then the only option that is left in CSidebarNavItem is to use a fontIcon prop instead of icon prop to generate an icon with a string (for example 'cil-memory'). After updating to 3.1.0 the <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="c-sidebar-nav-icon" role="img">undefined</svg> element is generated even if the icon prop is not specified. Setting icon to undefined or null does not fix this issue. This creates a problem with a display of sidebar items and it is pushing them to the right.

Doing import { cilQrCode } from '@coreui/icons' on top of a file and then passing icon={cilQrCode} does not work too.

In general I think you should adjust the setting of an icon in some easier manner while using React + TypeScript. Maybe exactly how fontIcon prop worked in previous versions or how icon is set in a CIcon component.

[woothu]

Thank you for this report. Issue fixed in 5fd72b0

---

It is possible to use React.icons in typescript. In src add icons.d.ts file:

import React from 'react'

declare module 'react' {
  let icons: { [key: string]: string | Array<string> }
}

(We have coreui-pro-react-admin-template-ts starter showing integration with typescript in version PRO.)