refactor: update CIcons

package.json

@@ -29,7 +29,7 @@
     "@coreui/chartjs": "3.0.0",
     "@coreui/coreui": "4.0.1",
     "@coreui/icons": "^2.0.1",
-    "@coreui/icons-react": "^2.0.0-rc.0",
+    "@coreui/icons-react": "^2.0.0-rc.5",
     "@coreui/react": "4.0.0-beta.4",
     "@coreui/react-chartjs": "2.0.0-rc.0",
     "@coreui/utils": "^1.3.1",

src/_nav.js

@@ -6,7 +6,7 @@ const _nav = [
     component: 'CNavItem',
     name: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon name="cil-speedometer" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-speedometer" customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -20,13 +20,13 @@ const _nav = [
     component: 'CNavItem',
     name: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon name="cil-drop" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-drop" customClassName="nav-icon" />,
   },
   {
     component: 'CNavItem',
     name: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon name="cil-pencil" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-pencil" customClassName="nav-icon" />,
   },
   {
     component: 'CNavTitle',
@@ -122,7 +122,7 @@ const _nav = [
     component: 'CNavGroup',
     name: 'Buttons',
     to: '/buttons',
-    icon: <CIcon name="cil-cursor" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-cursor" customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -147,7 +147,7 @@ const _nav = [
   {
     component: 'CNavGroup',
     name: 'Forms',
-    icon: <CIcon name="cil-notes" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-notes" customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -203,12 +203,12 @@ const _nav = [
     component: 'CNavItem',
     name: 'Charts',
     to: '/charts',
-    icon: <CIcon name="cil-chart-pie" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-chart-pie" customClassName="nav-icon" />,
   },
   {
     component: 'CNavGroup',
     name: 'Icons',
-    icon: <CIcon name="cil-star" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-star" customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -237,7 +237,7 @@ const _nav = [
   {
     component: 'CNavGroup',
     name: 'Notifications',
-    icon: <CIcon name="cil-bell" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-bell" customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -269,7 +269,7 @@ const _nav = [
     component: 'CNavItem',
     name: 'Widgets',
     to: '/widgets',
-    icon: <CIcon name="cil-calculator" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-calculator" customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -282,7 +282,7 @@ const _nav = [
   {
     component: 'CNavGroup',
     name: 'Pages',
-    icon: <CIcon name="cil-star" customClassName="nav-icon" />,
+    icon: <CIcon icon="cil-star" customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',

src/components/AppHeader.js

@@ -28,10 +28,10 @@ const AppHeader = () => {
           className="ps-1"
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
         >
-          <CIcon name="cil-menu" size="lg" />
+          <CIcon icon="cil-menu" size="lg" />
         </CHeaderToggler>
         <CHeaderBrand className="mx-auto d-md-none" to="/">
-          <CIcon name="logo" height="48" alt="Logo" />
+          <CIcon icon="logo" height={48} alt="Logo" />
         </CHeaderBrand>
         <CHeaderNav className="d-none d-md-flex me-auto">
           <CNavItem>
@@ -49,17 +49,17 @@ const AppHeader = () => {
         <CHeaderNav>
           <CNavItem>
             <CNavLink href="#">
-              <CIcon name="cil-bell" size="lg" />
+              <CIcon icon="cil-bell" size="lg" />
             </CNavLink>
           </CNavItem>
           <CNavItem>
             <CNavLink href="#">
-              <CIcon name="cil-list" size="lg" />
+              <CIcon icon="cil-list" size="lg" />
             </CNavLink>
           </CNavItem>
           <CNavItem>
             <CNavLink href="#">
-              <CIcon name="cil-envelope-open" size="lg" />
+              <CIcon icon="cil-envelope-open" size="lg" />
             </CNavLink>
           </CNavItem>
         </CHeaderNav>

src/components/AppSidebar.js

@@ -29,8 +29,8 @@ const AppSidebar = () => {
       }}
     >
       <CSidebarBrand className="d-none d-md-flex" to="/">
-        <CIcon className="sidebar-brand-full" name="logo-negative" height={35} />
+        <CIcon className="sidebar-brand-full" icon="logo-negative" height={35} />
-        <CIcon className="sidebar-brand-narrow" name="sygnet" height={35} />
+        <CIcon className="sidebar-brand-narrow" icon="sygnet" height={35} />
       </CSidebarBrand>
       <CSidebarNav>
         <SimpleBar>

src/components/AppSidebarNav.js

@@ -12,7 +12,7 @@ export const AppSidebarNav = ({ items }) => {
   const navLink = (name, icon, badge) => {
     return (
       <>
-        {icon && typeof icon === 'string' ? <CIcon name={icon} customClassName="nav-icon" /> : icon}
+        {icon && typeof icon === 'string' ? <CIcon icon={icon} customClassName="nav-icon" /> : icon}
         {name && name}
         {badge && (
           <CBadge color={badge.color} className="ms-auto">

src/components/DocsExample.js

@@ -15,13 +15,13 @@ const DocsExample = (props) => {
       <CNav variant="tabs">
         <CNavItem>
           <CNavLink href="#" active>
-            <CIcon name="cil-media-play" className="me-2" />
+            <CIcon icon="cil-media-play" className="me-2" />
             Preview
           </CNavLink>
         </CNavItem>
         <CNavItem>
           <CNavLink href={_href} target="_blank">
-            <CIcon name="cil-code" className="me-2" />
+            <CIcon icon="cil-code" className="me-2" />
             Code
           </CNavLink>
         </CNavItem>

src/components/header/AppHeaderDropdown.js

@@ -20,28 +20,28 @@ const AppHeaderDropdown = () => {
       <CDropdownMenu className="pt-0" placement="bottom-end">
         <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
         <CDropdownItem href="#">
-          <CIcon name="cil-bell" className="me-2" />
+          <CIcon icon="cil-bell" className="me-2" />
           Updates
           <CBadge color="info" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon name="cil-envelope-open" className="me-2" />
+          <CIcon icon="cil-envelope-open" className="me-2" />
           Messages
           <CBadge color="success" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon name="cil-task" className="me-2" />
+          <CIcon icon="cil-task" className="me-2" />
           Tasks
           <CBadge color="danger" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon name="cil-comment-square" className="me-2" />
+          <CIcon icon="cil-comment-square" className="me-2" />
           Comments
           <CBadge color="warning" className="ms-2">
             42
@@ -49,22 +49,22 @@ const AppHeaderDropdown = () => {
         </CDropdownItem>
         <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
         <CDropdownItem href="#">
-          <CIcon name="cil-user" className="me-2" />
+          <CIcon icon="cil-user" className="me-2" />
           Profile
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon name="cil-settings" className="me-2" />
+          <CIcon icon="cil-settings" className="me-2" />
           Settings
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon name="cil-credit-card" className="me-2" />
+          <CIcon icon="cil-credit-card" className="me-2" />
           Payments
           <CBadge color="secondary" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon name="cil-file" className="me-2" />
+          <CIcon icon="cil-file" className="me-2" />
           Projects
           <CBadge color="primary" className="ms-2">
             42
@@ -72,7 +72,7 @@ const AppHeaderDropdown = () => {
         </CDropdownItem>
         <CDropdownDivider />
         <CDropdownItem href="#">
-          <CIcon name="cil-lock-locked" className="me-2" />
+          <CIcon icon="cil-lock-locked" className="me-2" />
           Lock Account
         </CDropdownItem>
       </CDropdownMenu>

src/views/components/buttons/buttons/Buttons.js

@@ -87,12 +87,12 @@ const Buttons = () => {
                         active={state === 'active'}
                         disabled={state === 'disabled'}
                       >
-                        <CIcon name="cil-bell" className="me-2" />
+                        <CIcon icon="cil-bell" className="me-2" />
                         {color.charAt(0).toUpperCase() + color.slice(1)}
                       </CButton>
                     ))}
                     <CButton color="link">
-                      <CIcon name="cil-bell" className="me-2" />
+                      <CIcon icon="cil-bell" className="me-2" />
                       Link
                     </CButton>
                   </CCol>

src/views/components/icons/brands/Brands.js

@@ -11,7 +11,7 @@ const toKebabCase = (str) => {
 export const getIconsView = (iconset) => {
   return Object.entries(iconset).map(([name, value]) => (
     <CCol className="mb-5" xs={6} sm={4} md={3} xl={2} key={name}>
-      <CIcon content={value} size="xxl" />
+      <CIcon icon={value} size="xxl" />
       <div>{toKebabCase(name)}</div>
     </CCol>
   ))

src/views/components/widgets/Widgets.js

@@ -447,7 +447,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-settings" size="xl" />}
+            icon={<CIcon width={24} icon="cil-settings" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -457,7 +457,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-user" size="xl" />}
+            icon={<CIcon width={24} icon="cil-user" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -467,7 +467,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-moon" size="xl" />}
+            icon={<CIcon width={24} icon="cil-moon" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -477,7 +477,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-bell" size="xl" />}
+            icon={<CIcon width={24} icon="cil-bell" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -487,20 +487,20 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-settings" size="xl" />}
+            icon={<CIcon width={24} icon="cil-settings" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
             color="primary"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-medium-emphasis"
+                className="font-weight-bold font-xs text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"
               >
                 View more
-                <CIcon name="cil-arrow-right" className="float-end" width="16" />
+                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
               </CLink>
             }
           />
@@ -508,20 +508,20 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-laptop" size="xl" />}
+            icon={<CIcon width={24} icon="cil-laptop" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
             color="info"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-medium-emphasis"
+                className="font-weight-bold font-xs text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"
               >
                 View more
-                <CIcon name="cil-arrow-right" className="float-end" width="16" />
+                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
               </CLink>
             }
           />
@@ -529,20 +529,20 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-moon" size="xl" />}
+            icon={<CIcon width={24} icon="cil-moon" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
             color="warning"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-medium-emphasis"
+                className="font-weight-bold font-xs text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"
               >
                 View more
-                <CIcon name="cil-arrow-right" className="float-end" width="16" />
+                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
               </CLink>
             }
           />
@@ -550,20 +550,20 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-bell" size="xl" />}
+            icon={<CIcon width={24} icon="cil-bell" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
             color="danger"
             footer={
               <CLink
-                className="font-weight-bold font-xs btn-block text-medium-emphasis"
+                className="font-weight-bold font-xs text-medium-emphasis"
                 href="https://coreui.io/"
                 rel="noopener norefferer"
                 target="_blank"
               >
                 View more
-                <CIcon name="cil-arrow-right" className="float-end" width="16" />
+                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
               </CLink>
             }
           />
@@ -572,7 +572,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-settings" size="xl" />}
+            icon={<CIcon width={24} icon="cil-settings" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -583,7 +583,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-user" size="xl" />}
+            icon={<CIcon width={24} icon="cil-user" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -594,7 +594,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-moon" size="xl" />}
+            icon={<CIcon width={24} icon="cil-moon" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -605,7 +605,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-bell" size="xl" />}
+            icon={<CIcon width={24} icon="cil-bell" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -617,34 +617,34 @@ const Widgets = () => {
       <WidgetsBrand withCharts />
       <CCardGroup className="mb-4">
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-people" height="36" />}
+          icon={<CIcon icon="cil-people" height={36} />}
           value="87.500"
           title="Visitors"
           progressColor="info"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-userFollow" height="36" />}
+          icon={<CIcon icon="cil-userFollow" height={36} />}
           value="385"
           title="New Clients"
           progressColor="success"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-basket" height="36" />}
+          icon={<CIcon icon="cil-basket" height={36} />}
           value="1238"
           title="Products sold"
           progressColor="warning"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-chartPie" height="36" />}
+          icon={<CIcon icon="cil-chartPie" height={36} />}
           value="28%"
           title="Returning Visitors"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-speedometer" height="36" />}
+          icon={<CIcon icon="cil-speedometer" height={36} />}
           value="5:34:11"
           title="Avg. Time"
           progressColor="danger"
@@ -654,7 +654,7 @@ const Widgets = () => {
       <CRow>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-people" height="36" />}
+            icon={<CIcon icon="cil-people" height={36} />}
             value="87.500"
             title="Visitors"
             progressColor="info"
@@ -664,7 +664,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-userFollow" height="36" />}
+            icon={<CIcon icon="cil-userFollow" height={36} />}
             value="385"
             title="New Clients"
             progressColor="success"
@@ -674,7 +674,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-basket" height="36" />}
+            icon={<CIcon icon="cil-basket" height={36} />}
             value="1238"
             title="Products sold"
             progressColor="warning"
@@ -684,7 +684,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-chartPie" height="36" />}
+            icon={<CIcon icon="cil-chartPie" height={36} />}
             value="28%"
             title="Returning Visitors"
             progressColor="primary"
@@ -694,7 +694,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-speedometer" height="36" />}
+            icon={<CIcon icon="cil-speedometer" height={36} />}
             value="5:34:11"
             title="Avg. Time"
             progressColor="danger"
@@ -704,7 +704,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-speech" height="36" />}
+            icon={<CIcon icon="cil-speech" height={36} />}
             value="972"
             title="comments"
             progressColor="info"
@@ -717,7 +717,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="info"
-            icon={<CIcon name="cil-people" height="36" />}
+            icon={<CIcon icon="cil-people" height={36} />}
             value="87.500"
             title="Visitors"
             progressValue={75}
@@ -728,7 +728,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="success"
-            icon={<CIcon name="cil-userFollow" height="36" />}
+            icon={<CIcon icon="cil-userFollow" height={36} />}
             value="385"
             title="New Clients"
             progressValue={75}
@@ -739,7 +739,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="warning"
-            icon={<CIcon name="cil-basket" height="36" />}
+            icon={<CIcon icon="cil-basket" height={36} />}
             value="1238"
             title="Products sold"
             progressValue={75}
@@ -750,7 +750,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="primary"
-            icon={<CIcon name="cil-chartPie" height="36" />}
+            icon={<CIcon icon="cil-chartPie" height={36} />}
             value="28%"
             title="Returning Visitors"
             progressValue={75}
@@ -761,7 +761,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="danger"
-            icon={<CIcon name="cil-speedometer" height="36" />}
+            icon={<CIcon icon="cil-speedometer" height={36} />}
             value="5:34:11"
             title="Avg. Time"
             progressValue={75}
@@ -772,7 +772,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="info"
-            icon={<CIcon name="cil-speech" height="36" />}
+            icon={<CIcon icon="cil-speech" height={36} />}
             value="972"
             title="comments"
             progressValue={75}

src/views/components/widgets/WidgetsBrand.js

@@ -40,7 +40,7 @@ const WidgetsBrand = ({ withCharts }) => {
           className="mb-4"
           headerChildren={
             <>
-              <CIcon name="cib-facebook" height="52" className="my-4 text-white" />
+              <CIcon icon="cib-facebook" height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"
@@ -78,7 +78,7 @@ const WidgetsBrand = ({ withCharts }) => {
           className="mb-4"
           headerChildren={
             <>
-              <CIcon name="cib-twitter" height="52" className="my-4 text-white" />
+              <CIcon icon="cib-twitter" height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"
@@ -116,7 +116,7 @@ const WidgetsBrand = ({ withCharts }) => {
           className="mb-4"
           headerChildren={
             <>
-              <CIcon name="cib-linkedin" height="52" className="my-4 text-white" />
+              <CIcon icon="cib-linkedin" height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"
@@ -155,7 +155,7 @@ const WidgetsBrand = ({ withCharts }) => {
           color="warning"
           headerChildren={
             <>
-              <CIcon name="cil-calendar" height="52" className="my-4 text-white" />
+              <CIcon icon="cil-calendar" height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"

src/views/components/widgets/WidgetsDropdown.js

@@ -22,14 +22,14 @@ const WidgetsDropdown = () => {
           value="26K"
           change={
             <>
-              (-12.4% <CIcon name="cil-arrow-bottom" />)
+              (-12.4% <CIcon icon="cil-arrow-bottom" />)
             </>
           }
           title="Users"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -107,14 +107,14 @@ const WidgetsDropdown = () => {
           value="$6.200"
           change={
             <>
-              (40.9% <CIcon name="cil-arrow-top" />)
+              (40.9% <CIcon icon="cil-arrow-top" />)
             </>
           }
           title="Income"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -191,14 +191,14 @@ const WidgetsDropdown = () => {
           value="2.49%"
           change={
             <>
-              (84.7% <CIcon name="cil-arrow-top" />)
+              (84.7% <CIcon icon="cil-arrow-top" />)
             </>
           }
           title="Conversion Rate"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -262,14 +262,14 @@ const WidgetsDropdown = () => {
           value="44K"
           change={
             <>
-              (-23.6% <CIcon name="cil-arrow-bottom" />)
+              (-23.6% <CIcon icon="cil-arrow-bottom" />)
             </>
           }
           title="Sessions"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>

src/views/dashboard/Dashboard.js

@@ -44,7 +44,7 @@ const Dashboard = () => {
             </CCol>
             <CCol sm={7} className="d-none d-md-block">
               <CButton color="primary" className="float-end">
-                <CIcon name="cil-cloud-download" />
+                <CIcon icon="cil-cloud-download" />
               </CButton>
               <CButtonGroup className="float-end me-3">
                 {['Day', 'Month', 'Year'].map((value) => (
@@ -287,7 +287,7 @@ const Dashboard = () => {
 
                   <div className="progress-group mb-4">
                     <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" name="cil-user" />
+                      <CIcon className="icon icon-lg me-2" icon="cil-user" />
                       <span>Male</span>
                       <span className="ms-auto font-semibold">43%</span>
                     </div>
@@ -297,7 +297,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-5">
                     <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" name="cil-user-female" />
+                      <CIcon className="icon icon-lg me-2" icon="cil-user-female" />
                       <span>Female</span>
                       <span className="ms-auto font-semibold">37%</span>
                     </div>
@@ -308,7 +308,7 @@ const Dashboard = () => {
 
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" name="cib-google" />
+                      <CIcon className="icon icon-lg me-2" icon="cib-google" />
                       <span>Organic Search</span>
                       <span className="ms-auto font-semibold">
                         191,235 <span className="text-medium-emphasis small">(56%)</span>
@@ -320,7 +320,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon name="cib-facebook" className="icon icon-lg me-2" />
+                      <CIcon icon="cib-facebook" className="icon icon-lg me-2" />
                       <span>Facebook</span>
                       <span className="ms-auto font-semibold">
                         51,223 <span className="text-medium-emphasis small">(15%)</span>
@@ -332,7 +332,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon name="cib-twitter" className="icon icon-lg me-2" />
+                      <CIcon icon="cib-twitter" className="icon icon-lg me-2" />
                       <span>Twitter</span>
                       <span className="ms-auto font-semibold">
                         37,564 <span className="text-medium-emphasis small">(11%)</span>
@@ -344,7 +344,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon name="cib-linkedin" className="icon icon-lg me-2" />
+                      <CIcon icon="cib-linkedin" className="icon icon-lg me-2" />
                       <span>LinkedIn</span>
                       <span className="ms-auto font-semibold">
                         27,319 <span className="text-medium-emphasis small">(8%)</span>
@@ -363,7 +363,7 @@ const Dashboard = () => {
                 <CTableHead color="light">
                   <CTableRow>
                     <CTableHeaderCell className="text-center">
-                      <CIcon name="cil-people" />
+                      <CIcon icon="cil-people" />
                     </CTableHeaderCell>
                     <CTableHeaderCell>User</CTableHeaderCell>
                     <CTableHeaderCell className="text-center">Country</CTableHeaderCell>
@@ -384,7 +384,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cif-us" title="us" id="us" />
+                      <CIcon size="xl" icon="cif-us" title="us" id="us" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -400,7 +400,7 @@ const Dashboard = () => {
                       <CProgress thin color="success" value={50} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cib-cc-mastercard" />
+                      <CIcon size="xl" icon="cib-cc-mastercard" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -418,7 +418,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cif-br" title="br" id="br" />
+                      <CIcon size="xl" icon="cif-br" title="br" id="br" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -434,7 +434,7 @@ const Dashboard = () => {
                       <CProgress thin color="info" value={10} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cib-cc-visa" />
+                      <CIcon size="xl" icon="cib-cc-visa" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -452,7 +452,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cif-in" title="in" id="in" />
+                      <CIcon size="xl" icon="cif-in" title="in" id="in" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -468,7 +468,7 @@ const Dashboard = () => {
                       <CProgress thin color="warning" value={74} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cib-cc-stripe" />
+                      <CIcon size="xl" icon="cib-cc-stripe" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -486,7 +486,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cif-fr" title="fr" id="fr" />
+                      <CIcon size="xl" icon="cif-fr" title="fr" id="fr" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -502,7 +502,7 @@ const Dashboard = () => {
                       <CProgress thin color="danger" value={98} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cib-cc-paypal" />
+                      <CIcon size="xl" icon="cib-cc-paypal" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -520,7 +520,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cif-es" title="es" id="es" />
+                      <CIcon size="xl" icon="cif-es" title="es" id="es" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -536,7 +536,7 @@ const Dashboard = () => {
                       <CProgress thin color="info" value={22} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cib-cc-apple-pay" />
+                      <CIcon size="xl" icon="cib-cc-apple-pay" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -554,7 +554,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cif-pl" title="pl" id="pl" />
+                      <CIcon size="xl" icon="cif-pl" title="pl" id="pl" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -570,7 +570,7 @@ const Dashboard = () => {
                       <CProgress thin color="success" value={43} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" name="cib-cc-amex" />
+                      <CIcon size="xl" icon="cib-cc-amex" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>

src/views/pages/login/Login.js

@@ -29,13 +29,13 @@ const Login = () => {
                     <p className="text-medium-emphasis">Sign In to your account</p>
                     <CInputGroup className="mb-3">
                       <CInputGroupText>
-                        <CIcon name="cil-user" />
+                        <CIcon icon="cil-user" />
                       </CInputGroupText>
                       <CFormInput placeholder="Username" autoComplete="username" />
                     </CInputGroup>
                     <CInputGroup className="mb-4">
                       <CInputGroupText>
-                        <CIcon name="cil-lock-locked" />
+                        <CIcon icon="cil-lock-locked" />
                       </CInputGroupText>
                       <CFormInput
                         type="password"

src/views/pages/page404/Page404.js

@@ -25,7 +25,7 @@ const Page404 = () => {
             </div>
             <CInputGroup className="input-prepend">
               <CInputGroupText>
-                <CIcon name="cil-magnifying-glass" />
+                <CIcon icon="cil-magnifying-glass" />
               </CInputGroupText>
               <CFormInput size="16" type="text" placeholder="What are you looking for?" />
               <CButton color="info">Search</CButton>

src/views/pages/page500/Page500.js

@@ -25,7 +25,7 @@ const Page500 = () => {
             </span>
             <CInputGroup className="input-prepend">
               <CInputGroupText>
-                <CIcon name="cil-magnifying-glass" />
+                <CIcon icon="cil-magnifying-glass" />
               </CInputGroupText>
               <CFormInput size="16" type="text" placeholder="What are you looking for?" />
               <CButton color="info">Search</CButton>

src/views/pages/register/Register.js

@@ -26,7 +26,7 @@ const Register = () => {
                   <p className="text-medium-emphasis">Create your account</p>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
-                      <CIcon name="cil-user" />
+                      <CIcon icon="cil-user" />
                     </CInputGroupText>
                     <CFormInput placeholder="Username" autoComplete="username" />
                   </CInputGroup>
@@ -36,7 +36,7 @@ const Register = () => {
                   </CInputGroup>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
-                      <CIcon name="cil-lock-locked" />
+                      <CIcon icon="cil-lock-locked" />
                     </CInputGroupText>
                     <CFormInput
                       type="password"
@@ -46,7 +46,7 @@ const Register = () => {
                   </CInputGroup>
                   <CInputGroup className="mb-4">
                     <CInputGroupText>
-                      <CIcon name="cil-lock-locked" />
+                      <CIcon icon="cil-lock-locked" />
                     </CInputGroupText>
                     <CFormInput
                       type="password"

yarn.lock

@@ -1227,15 +1227,15 @@
   resolved "https://registry.yarnpkg.com/@coreui/coreui/-/coreui-4.0.1.tgz#e5faf540aeea31b0cc8d428d73080a364e4bc6fd"
   integrity sha512-1mrWnbqoWb7+8ZAMUdlWt0AqVzDEkJglk7F3OaFsQtxienezFvlMNsd1YPPNo+taRzF7HZ8xSDIAItCvlOaMVg==
 
-"@coreui/icons-react@^2.0.0-rc.0":
+"@coreui/icons-react@^2.0.0-rc.5":
-  version "2.0.0-rc.0"
+  version "2.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/@coreui/icons-react/-/icons-react-2.0.0-rc.0.tgz#5eb4d082a9306c6a2126c61766dcfec503a8a4e1"
+  resolved "https://registry.yarnpkg.com/@coreui/icons-react/-/icons-react-2.0.0-rc.5.tgz#2adb4973b78f565302a4f3295922beccd76c5dda"
-  integrity sha512-QIayiRpe/ZR7G1GdE1KziE4xgIYRmiG9kmHjo5DhKdE5JjTRuO/Cs5Z3F6WVAaqARwUu1aNWXUbLuKb3kKOaxQ==
+  integrity sha512-yqKUq2+sXPCIKXHbIFChd3Ku6VVYUdjKpE9kyxK93WLdZmACJphFQP9+qwPGxgmcyfSq2EeTjfN6Zp69AqcXcA==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "^4.28.1"
+    "@typescript-eslint/eslint-plugin" "^4.29.1"
-    "@typescript-eslint/parser" "^4.28.1"
+    "@typescript-eslint/parser" "^4.29.1"
     eslint-config-prettier "^8.3.0"
-    eslint-plugin-jsdoc "^35.4.1"
+    eslint-plugin-jsdoc "^36.0.7"
     eslint-plugin-prettier "^3.4.0"
     prettier "^2.3.2"
 
@@ -1274,14 +1274,14 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@es-joy/jsdoccomment@0.9.0-alpha.1":
+"@es-joy/jsdoccomment@0.10.7":
-  version "0.9.0-alpha.1"
+  version "0.10.7"
-  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.9.0-alpha.1.tgz#f48bd162e185ec7f9f222273a282d10e52fe52f7"
+  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.10.7.tgz#bdb5dfcaa5cff8b5435f0c9f2777b533075a9c52"
-  integrity sha512-Clxxc0PwpISoYYBibA+1L2qFJ7gvFVhI2Hos87S06K+Q0cXdOhZQJNKWuaQGPAeHjZEuUB/YoWOfwjuF2wirqA==
+  integrity sha512-aNKZEoMESDzOBjKxCWrFuG50mcpMeKVBnBNko4+IZZ5t9zXYs8GT1KB0ZaOq1YUsKumDRc6YII/TQm309MJ0KQ==
   dependencies:
-    comment-parser "1.1.6-beta.0"
+    comment-parser "1.2.3"
     esquery "^1.4.0"
-    jsdoc-type-pratt-parser "1.0.4"
+    jsdoc-type-pratt-parser "1.1.1"
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -1959,7 +1959,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^4.28.1", "@typescript-eslint/eslint-plugin@^4.5.0":
+"@typescript-eslint/eslint-plugin@^4.29.1", "@typescript-eslint/eslint-plugin@^4.5.0":
   version "4.29.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.1.tgz#808d206e2278e809292b5de752a91105da85860b"
   integrity sha512-AHqIU+SqZZgBEiWOrtN94ldR3ZUABV5dUG94j8Nms9rQnHFc8fvDOue/58K4CFz6r8OtDDc35Pw9NQPWo0Ayrw==
@@ -1995,7 +1995,7 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^4.28.1", "@typescript-eslint/parser@^4.5.0":
+"@typescript-eslint/parser@^4.29.1", "@typescript-eslint/parser@^4.5.0":
   version "4.29.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.29.1.tgz#17dfbb45c9032ffa0fe15881d20fbc2a4bdeb02d"
   integrity sha512-3fL5iN20hzX3Q4OkG7QEPFjZV2qsVGiDhEwwh+EkmE/w7oteiOvUNzmpu5eSwGJX/anCryONltJ3WDmAzAoCMg==
@@ -3516,10 +3516,10 @@ commander@^5.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
-comment-parser@1.1.6-beta.0:
+comment-parser@1.2.3:
-  version "1.1.6-beta.0"
+  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.1.6-beta.0.tgz#57e503b18d0a5bd008632dcc54b1f95c2fffe8f6"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.2.3.tgz#303a7eb99c9b2632efd594e183ccbd32042caf69"
-  integrity sha512-q3cA8TSMyqW7wcPSYWzbO/rMahnXgzs4SLG/UIWXdEsnXTFPZkEkWAdNgPiHig2OzxgpPLOh4WwsmClDxndwHw==
+  integrity sha512-vnqDwBSXSsdAkGS5NjwMIPelE47q+UkEgWKHvCDNhVIIaQSUFY6sNnEYGzdoPGMdpV+7KR3ZkRd7oyWIjtuvJg==
 
 common-tags@^1.8.0:
   version "1.8.0"
@@ -4679,16 +4679,16 @@ eslint-plugin-jest@^24.1.0:
   dependencies:
     "@typescript-eslint/experimental-utils" "^4.0.1"
 
-eslint-plugin-jsdoc@^35.4.1:
+eslint-plugin-jsdoc@^36.0.7:
-  version "35.5.1"
+  version "36.0.7"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-35.5.1.tgz#45932ee22669bbe06c97b82b936d56361efad370"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-36.0.7.tgz#6e6f9897fc2ff3b3934b09c2748b998bc03d2bf6"
-  integrity sha512-pPYPWtsykwVEue1tYEyoppBj4dgF7XicF67tLLLraY6RQYBq7qMKjUHji19+hfiTtYKKBD0YfeK8hgjPAE5viw==
+  integrity sha512-x73l/WCRQ1qCjLq46Ca7csuGd5o3y3vbJIa3cktg11tdf3UZleBdIXKN9Cf0xjs3tXYPEy2SoNXowT8ydnjNDQ==
   dependencies:
-    "@es-joy/jsdoccomment" "0.9.0-alpha.1"
+    "@es-joy/jsdoccomment" "0.10.7"
-    comment-parser "1.1.6-beta.0"
+    comment-parser "1.2.3"
     debug "^4.3.2"
     esquery "^1.4.0"
-    jsdoc-type-pratt-parser "^1.0.4"
+    jsdoc-type-pratt-parser "^1.1.1"
     lodash "^4.17.21"
     regextras "^0.8.0"
     semver "^7.3.5"
@@ -6903,12 +6903,7 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsdoc-type-pratt-parser@1.0.4:
+jsdoc-type-pratt-parser@1.1.1, jsdoc-type-pratt-parser@^1.1.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-1.0.4.tgz#5750d2d32ffb001866537d3baaedea7cf84c7036"
-  integrity sha512-jzmW9gokeq9+bHPDR1nCeidMyFUikdZlbOhKzh9+/nJqB75XhpNKec1/UuxW5c4+O+Pi31Gc/dCboyfSm/pSpQ==
-
-jsdoc-type-pratt-parser@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-1.1.1.tgz#10fe5e409ba38de22a48b555598955a26ff0160f"
   integrity sha512-uelRmpghNwPBuZScwgBG/OzodaFk5RbO5xaivBdsAY70icWfShwZ7PCMO0x1zSkOa8T1FzHThmrdoyg/0AwV5g==