Description
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.