refactor: update CIcons

src/_nav.js

@@ -1,12 +1,24 @@
 import React from 'react'
 import CIcon from '@coreui/icons-react'
+import {
+  cilBell,
+  cilCalculator,
+  cilChartPie,
+  cilCursor,
+  cilDrop,
+  cilNotes,
+  cilPencil,
+  cilPuzzle,
+  cilSpeedometer,
+  cilStar,
+} from '@coreui/icons'
 
 const _nav = [
   {
     component: 'CNavItem',
     name: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon icon="cil-speedometer" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -20,13 +32,13 @@ const _nav = [
     component: 'CNavItem',
     name: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon icon="cil-drop" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
   },
   {
     component: 'CNavItem',
     name: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon icon="cil-pencil" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
   },
   {
     component: 'CNavTitle',
@@ -36,17 +48,15 @@ const _nav = [
     component: 'CNavGroup',
     name: 'Base',
     to: '/base',
-    icon: 'cil-puzzle',
+    icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
-
         name: 'Accordion',
         to: '/base/accordion',
       },
       {
         component: 'CNavItem',
-
         name: 'Breadcrumb',
         to: '/base/breadcrumbs',
       },
@@ -122,7 +132,7 @@ const _nav = [
     component: 'CNavGroup',
     name: 'Buttons',
     to: '/buttons',
-    icon: <CIcon icon="cil-cursor" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -147,7 +157,7 @@ const _nav = [
   {
     component: 'CNavGroup',
     name: 'Forms',
-    icon: <CIcon icon="cil-notes" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -203,12 +213,12 @@ const _nav = [
     component: 'CNavItem',
     name: 'Charts',
     to: '/charts',
-    icon: <CIcon icon="cil-chart-pie" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
   },
   {
     component: 'CNavGroup',
     name: 'Icons',
-    icon: <CIcon icon="cil-star" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -237,7 +247,7 @@ const _nav = [
   {
     component: 'CNavGroup',
     name: 'Notifications',
-    icon: <CIcon icon="cil-bell" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',
@@ -269,7 +279,7 @@ const _nav = [
     component: 'CNavItem',
     name: 'Widgets',
     to: '/widgets',
-    icon: <CIcon icon="cil-calculator" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -282,7 +292,7 @@ const _nav = [
   {
     component: 'CNavGroup',
     name: 'Pages',
-    icon: <CIcon icon="cil-star" customClassName="nav-icon" />,
+    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
     items: [
       {
         component: 'CNavItem',

src/assets/icons/index.js

@@ -1,259 +0,0 @@
-import {
-  cibSkype,
-  cibFacebook,
-  cibTwitter,
-  cibLinkedin,
-  cibFlickr,
-  cibTumblr,
-  cibXing,
-  cibGithub,
-  cibStackoverflow,
-  cibYoutube,
-  cibDribbble,
-  cibInstagram,
-  cibPinterest,
-  cibVk,
-  cibYahoo,
-  cibBehance,
-  cibReddit,
-  cibVimeo,
-  cibCcMastercard,
-  cibCcVisa,
-  cibCcStripe,
-  cibCcPaypal,
-  cibCcApplePay,
-  cibCcAmex,
-  cibGoogle,
-} from '@coreui/icons'
-import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
-import {
-  cilAlignCenter,
-  cilAlignLeft,
-  cilAlignRight,
-  cilApplicationsSettings,
-  cilArrowBottom,
-  cilArrowRight,
-  cilArrowTop,
-  cilAsterisk,
-  cilBan,
-  cilBasket,
-  cilBell,
-  cilBold,
-  cilBookmark,
-  cilCalculator,
-  cilCalendar,
-  cilCloudDownload,
-  cilChartPie,
-  cilCheck,
-  cilChevronBottom,
-  cilChevronLeft,
-  cilChevronRight,
-  cilChevronTop,
-  cilCircle,
-  cilCheckCircle,
-  cilCode,
-  cilCommentSquare,
-  cilCreditCard,
-  cilCursor,
-  cilCursorMove,
-  cilDrop,
-  cilDollar,
-  cilEnvelopeClosed,
-  cilEnvelopeLetter,
-  cilEnvelopeOpen,
-  cilEuro,
-  cilGlobeAlt,
-  cilGrid,
-  cilFile,
-  cilFullscreen,
-  cilFullscreenExit,
-  cilGraph,
-  cilHome,
-  cilInbox,
-  cilIndentDecrease,
-  cilIndentIncrease,
-  cilInputPower,
-  cilItalic,
-  cilJustifyCenter,
-  cilJustifyLeft,
-  cilLaptop,
-  cilLayers,
-  cilLightbulb,
-  cilList,
-  cilListNumbered,
-  cilListRich,
-  cilLocationPin,
-  cilLockLocked,
-  cilMagnifyingGlass,
-  cilMap,
-  cilMediaPlay,
-  cilMenu,
-  cilMoon,
-  cilNotes,
-  cilOptions,
-  cilPaperclip,
-  cilPaperPlane,
-  cilPencil,
-  cilPeople,
-  cilPhone,
-  cilPrint,
-  cilPuzzle,
-  cilSave,
-  cilScrubber,
-  cilSettings,
-  cilShare,
-  cilShareAll,
-  cilShareBoxed,
-  cilShieldAlt,
-  cilSpeech,
-  cilSpeedometer,
-  cilSpreadsheet,
-  cilStar,
-  cilSun,
-  cilTags,
-  cilTask,
-  cilTrash,
-  cilUnderline,
-  cilUser,
-  cilUserFemale,
-  cilUserFollow,
-  cilUserUnfollow,
-  cilX,
-  cilXCircle,
-  cilWarning,
-} from '@coreui/icons'
-
-export const icons = Object.assign(
-  {},
-  {
-    cilAlignCenter,
-    cilAlignLeft,
-    cilAlignRight,
-    cilApplicationsSettings,
-    cilArrowBottom,
-    cilArrowRight,
-    cilArrowTop,
-    cilAsterisk,
-    cilBan,
-    cilBasket,
-    cilBell,
-    cilBold,
-    cilBookmark,
-    cilCalculator,
-    cilCalendar,
-    cilCloudDownload,
-    cilChartPie,
-    cilCheck,
-    cilChevronBottom,
-    cilChevronLeft,
-    cilChevronRight,
-    cilChevronTop,
-    cilCircle,
-    cilCheckCircle,
-    cilCode,
-    cilCommentSquare,
-    cilCreditCard,
-    cilCursor,
-    cilCursorMove,
-    cilDrop,
-    cilDollar,
-    cilEnvelopeClosed,
-    cilEnvelopeLetter,
-    cilEnvelopeOpen,
-    cilEuro,
-    cilGlobeAlt,
-    cilGrid,
-    cilFile,
-    cilFullscreen,
-    cilFullscreenExit,
-    cilGraph,
-    cilHome,
-    cilInbox,
-    cilIndentDecrease,
-    cilIndentIncrease,
-    cilInputPower,
-    cilItalic,
-    cilJustifyCenter,
-    cilJustifyLeft,
-    cilLaptop,
-    cilLayers,
-    cilLightbulb,
-    cilList,
-    cilListNumbered,
-    cilListRich,
-    cilLocationPin,
-    cilLockLocked,
-    cilMagnifyingGlass,
-    cilMap,
-    cilMediaPlay,
-    cilMenu,
-    cilMoon,
-    cilNotes,
-    cilOptions,
-    cilPaperclip,
-    cilPaperPlane,
-    cilPencil,
-    cilPeople,
-    cilPhone,
-    cilPrint,
-    cilPuzzle,
-    cilSave,
-    cilScrubber,
-    cilSettings,
-    cilShare,
-    cilShareAll,
-    cilShareBoxed,
-    cilShieldAlt,
-    cilSpeech,
-    cilSpeedometer,
-    cilSpreadsheet,
-    cilStar,
-    cilSun,
-    cilTags,
-    cilTask,
-    cilTrash,
-    cilUnderline,
-    cilUser,
-    cilUserFemale,
-    cilUserFollow,
-    cilUserUnfollow,
-    cilX,
-    cilXCircle,
-    cilWarning,
-  },
-  {
-    cifUs,
-    cifBr,
-    cifIn,
-    cifFr,
-    cifEs,
-    cifPl,
-  },
-  {
-    cibSkype,
-    cibFacebook,
-    cibTwitter,
-    cibLinkedin,
-    cibFlickr,
-    cibTumblr,
-    cibXing,
-    cibGithub,
-    cibStackoverflow,
-    cibYoutube,
-    cibDribbble,
-    cibInstagram,
-    cibPinterest,
-    cibVk,
-    cibYahoo,
-    cibBehance,
-    cibReddit,
-    cibVimeo,
-    cibCcMastercard,
-    cibCcVisa,
-    cibCcStripe,
-    cibCcPaypal,
-    cibCcApplePay,
-    cibCcAmex,
-    cibGoogle,
-  },
-)

src/components/AppHeader.js

@@ -12,6 +12,7 @@ import {
   CNavItem,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
 
 import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
@@ -28,7 +29,7 @@ const AppHeader = () => {
           className="ps-1"
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
         >
-          <CIcon icon="cil-menu" size="lg" />
+          <CIcon icon={cilMenu} size="lg" />
         </CHeaderToggler>
         <CHeaderBrand className="mx-auto d-md-none" to="/">
           <CIcon icon={logo} height={48} alt="Logo" />
@@ -49,17 +50,17 @@ const AppHeader = () => {
         <CHeaderNav>
           <CNavItem>
             <CNavLink href="#">
-              <CIcon icon="cil-bell" size="lg" />
+              <CIcon icon={cilBell} size="lg" />
             </CNavLink>
           </CNavItem>
           <CNavItem>
             <CNavLink href="#">
-              <CIcon icon="cil-list" size="lg" />
+              <CIcon icon={cilList} size="lg" />
             </CNavLink>
           </CNavItem>
           <CNavItem>
             <CNavLink href="#">
-              <CIcon icon="cil-envelope-open" size="lg" />
+              <CIcon icon={cilEnvelopeOpen} size="lg" />
             </CNavLink>
           </CNavItem>
         </CHeaderNav>

src/components/AppSidebarNav.js

@@ -3,7 +3,6 @@ import { NavLink, useLocation } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import { CBadge, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle } from '@coreui/react'
-import CIcon from '@coreui/icons-react'
 
 export const AppSidebarNav = ({ items }) => {
   const components = { CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }
@@ -12,7 +11,7 @@ export const AppSidebarNav = ({ items }) => {
   const navLink = (name, icon, badge) => {
     return (
       <>
-        {icon && typeof icon === 'string' ? <CIcon icon={icon} customClassName="nav-icon" /> : icon}
+        {icon && icon}
         {name && name}
         {badge && (
           <CBadge color={badge.color} className="ms-auto">

src/components/DocsExample.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cilCode, cilMediaPlay } from '@coreui/icons'
 
 import packageJson from '../../package.json'
 
@@ -15,13 +16,13 @@ const DocsExample = (props) => {
       <CNav variant="tabs">
         <CNavItem>
           <CNavLink href="#" active>
-            <CIcon icon="cil-media-play" className="me-2" />
+            <CIcon icon={cilMediaPlay} className="me-2" />
             Preview
           </CNavLink>
         </CNavItem>
         <CNavItem>
           <CNavLink href={_href} target="_blank">
-            <CIcon icon="cil-code" className="me-2" />
+            <CIcon icon={cilCode} className="me-2" />
             Code
           </CNavLink>
         </CNavItem>

src/components/header/AppHeaderDropdown.js

@@ -9,6 +9,16 @@ import {
   CDropdownMenu,
   CDropdownToggle,
 } from '@coreui/react'
+import {
+  cilBell,
+  cilCreditCard,
+  cilCommentSquare,
+  cilFile,
+  cilLockLocked,
+  cilSettings,
+  cilTask,
+  cilUser,
+} from '@coreui/icons'
 import CIcon from '@coreui/icons-react'
 
 const AppHeaderDropdown = () => {
@@ -20,28 +30,28 @@ const AppHeaderDropdown = () => {
       <CDropdownMenu className="pt-0" placement="bottom-end">
         <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
         <CDropdownItem href="#">
-          <CIcon icon="cil-bell" className="me-2" />
+          <CIcon name={cilBell} className="me-2" />
           Updates
           <CBadge color="info" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon icon="cil-envelope-open" className="me-2" />
+          <CIcon name="cil-envelope-open" className="me-2" />
           Messages
           <CBadge color="success" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon icon="cil-task" className="me-2" />
+          <CIcon name={cilTask} className="me-2" />
           Tasks
           <CBadge color="danger" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon icon="cil-comment-square" className="me-2" />
+          <CIcon name={cilCommentSquare} className="me-2" />
           Comments
           <CBadge color="warning" className="ms-2">
             42
@@ -49,22 +59,22 @@ const AppHeaderDropdown = () => {
         </CDropdownItem>
         <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
         <CDropdownItem href="#">
-          <CIcon icon="cil-user" className="me-2" />
+          <CIcon name={cilUser} className="me-2" />
           Profile
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon icon="cil-settings" className="me-2" />
+          <CIcon name={cilSettings} className="me-2" />
           Settings
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon icon="cil-credit-card" className="me-2" />
+          <CIcon name={cilCreditCard} className="me-2" />
           Payments
           <CBadge color="secondary" className="ms-2">
             42
           </CBadge>
         </CDropdownItem>
         <CDropdownItem href="#">
-          <CIcon icon="cil-file" className="me-2" />
+          <CIcon name={cilFile} className="me-2" />
           Projects
           <CBadge color="primary" className="ms-2">
             42
@@ -72,7 +82,7 @@ const AppHeaderDropdown = () => {
         </CDropdownItem>
         <CDropdownDivider />
         <CDropdownItem href="#">
-          <CIcon icon="cil-lock-locked" className="me-2" />
+          <CIcon name={cilLockLocked} className="me-2" />
           Lock Account
         </CDropdownItem>
       </CDropdownMenu>

src/index.js

@@ -4,14 +4,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
-
-import { icons } from './assets/icons'
-
 import { Provider } from 'react-redux'
 import store from './store'
 
-React.icons = icons
-
 ReactDOM.render(
   <Provider store={store}>
     <App />

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cilBell } from '@coreui/icons'
 import { DocsCallout, DocsExample } from 'src/components'
 
 const Buttons = () => {
@@ -87,12 +88,12 @@ const Buttons = () => {
                         active={state === 'active'}
                         disabled={state === 'disabled'}
                       >
-                        <CIcon icon="cil-bell" className="me-2" />
+                        <CIcon icon={cilBell} className="me-2" />
                         {color.charAt(0).toUpperCase() + color.slice(1)}
                       </CButton>
                     ))}
                     <CButton color="link">
-                      <CIcon icon="cil-bell" className="me-2" />
+                      <CIcon icon={cilBell} className="me-2" />
                       Link
                     </CButton>
                   </CCol>

src/views/components/widgets/Widgets.js

@@ -11,6 +11,20 @@ import {
 } from '@coreui/react'
 import { getStyle } from '@coreui/utils'
 import CIcon from '@coreui/icons-react'
+import {
+  cilArrowRight,
+  cilBasket,
+  cilBell,
+  cilChartPie,
+  cilMoon,
+  cilLaptop,
+  cilPeople,
+  cilSettings,
+  cilSpeech,
+  cilSpeedometer,
+  cilUser,
+  cilUserFollow,
+} from '@coreui/icons'
 import { CChartBar, CChartLine } from '@coreui/react-chartjs'
 
 import WidgetsBrand from './WidgetsBrand'
@@ -447,7 +461,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-settings" size="xl" />}
+            icon={<CIcon width={24} icon={cilSettings} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -457,7 +471,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-user" size="xl" />}
+            icon={<CIcon width={24} icon={cilUser} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -467,7 +481,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-moon" size="xl" />}
+            icon={<CIcon width={24} icon={cilMoon} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -477,7 +491,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-bell" size="xl" />}
+            icon={<CIcon width={24} icon={cilBell} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -487,7 +501,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-settings" size="xl" />}
+            icon={<CIcon width={24} icon={cilSettings} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -500,7 +514,7 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
+                <CIcon icon={cilArrowRight} className="float-end" width={16} />
               </CLink>
             }
           />
@@ -508,7 +522,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-laptop" size="xl" />}
+            icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -521,7 +535,7 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
+                <CIcon icon={cilArrowRight} className="float-end" width={16} />
               </CLink>
             }
           />
@@ -529,7 +543,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-moon" size="xl" />}
+            icon={<CIcon width={24} icon={cilMoon} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -542,7 +556,7 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
+                <CIcon icon={cilArrowRight} className="float-end" width={16} />
               </CLink>
             }
           />
@@ -550,7 +564,7 @@ const Widgets = () => {
         <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} icon="cil-bell" size="xl" />}
+            icon={<CIcon width={24} icon={cilBell} size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -563,7 +577,7 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-                <CIcon icon="cil-arrow-right" className="float-end" width={16} />
+                <CIcon icon={cilArrowRight} className="float-end" width={16} />
               </CLink>
             }
           />
@@ -572,7 +586,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} icon="cil-settings" size="xl" />}
+            icon={<CIcon width={24} icon={cilSettings} size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -583,7 +597,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} icon="cil-user" size="xl" />}
+            icon={<CIcon width={24} icon={cilUser} size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -594,7 +608,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} icon="cil-moon" size="xl" />}
+            icon={<CIcon width={24} icon={cilMoon} size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -605,7 +619,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} icon="cil-bell" size="xl" />}
+            icon={<CIcon width={24} icon={cilBell} size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -617,34 +631,34 @@ const Widgets = () => {
       <WidgetsBrand withCharts />
       <CCardGroup className="mb-4">
         <CWidgetProgressIcon
-          icon={<CIcon icon="cil-people" height={36} />}
+          icon={<CIcon icon={cilPeople} height={36} />}
           value="87.500"
           title="Visitors"
           progressColor="info"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon icon="cil-userFollow" height={36} />}
+          icon={<CIcon icon={cilUserFollow} height={36} />}
           value="385"
           title="New Clients"
           progressColor="success"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon icon="cil-basket" height={36} />}
+          icon={<CIcon icon={cilBasket} height={36} />}
           value="1238"
           title="Products sold"
           progressColor="warning"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon icon="cil-chartPie" height={36} />}
+          icon={<CIcon icon={cilChartPie} height={36} />}
           value="28%"
           title="Returning Visitors"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon icon="cil-speedometer" height={36} />}
+          icon={<CIcon icon={cilSpeedometer} height={36} />}
           value="5:34:11"
           title="Avg. Time"
           progressColor="danger"
@@ -654,7 +668,7 @@ const Widgets = () => {
       <CRow>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon icon="cil-people" height={36} />}
+            icon={<CIcon icon={cilPeople} height={36} />}
             value="87.500"
             title="Visitors"
             progressColor="info"
@@ -664,7 +678,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon icon="cil-userFollow" height={36} />}
+            icon={<CIcon icon={cilUserFollow} height={36} />}
             value="385"
             title="New Clients"
             progressColor="success"
@@ -674,7 +688,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon icon="cil-basket" height={36} />}
+            icon={<CIcon icon={cilBasket} height={36} />}
             value="1238"
             title="Products sold"
             progressColor="warning"
@@ -684,7 +698,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon icon="cil-chartPie" height={36} />}
+            icon={<CIcon icon={cilChartPie} height={36} />}
             value="28%"
             title="Returning Visitors"
             progressColor="primary"
@@ -694,7 +708,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon icon="cil-speedometer" height={36} />}
+            icon={<CIcon icon={cilSpeedometer} height={36} />}
             value="5:34:11"
             title="Avg. Time"
             progressColor="danger"
@@ -704,7 +718,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
-            icon={<CIcon icon="cil-speech" height={36} />}
+            icon={<CIcon icon={cilSpeech} height={36} />}
             value="972"
             title="comments"
             progressColor="info"
@@ -717,7 +731,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="info"
-            icon={<CIcon icon="cil-people" height={36} />}
+            icon={<CIcon icon={cilPeople} height={36} />}
             value="87.500"
             title="Visitors"
             progressValue={75}
@@ -728,7 +742,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="success"
-            icon={<CIcon icon="cil-userFollow" height={36} />}
+            icon={<CIcon icon={cilUserFollow} height={36} />}
             value="385"
             title="New Clients"
             progressValue={75}
@@ -739,7 +753,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="warning"
-            icon={<CIcon icon="cil-basket" height={36} />}
+            icon={<CIcon icon={cilBasket} height={36} />}
             value="1238"
             title="Products sold"
             progressValue={75}
@@ -750,7 +764,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="primary"
-            icon={<CIcon icon="cil-chartPie" height={36} />}
+            icon={<CIcon icon={cilChartPie} height={36} />}
             value="28%"
             title="Returning Visitors"
             progressValue={75}
@@ -761,7 +775,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="danger"
-            icon={<CIcon icon="cil-speedometer" height={36} />}
+            icon={<CIcon icon={cilSpeedometer} height={36} />}
             value="5:34:11"
             title="Avg. Time"
             progressValue={75}
@@ -772,7 +786,7 @@ const Widgets = () => {
         <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="info"
-            icon={<CIcon icon="cil-speech" height={36} />}
+            icon={<CIcon icon={cilSpeech} height={36} />}
             value="972"
             title="comments"
             progressValue={75}

src/views/components/widgets/WidgetsBrand.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { CWidgetBrand, CRow, CCol } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
 import { CChart } from '@coreui/react-chartjs'
 
 const WidgetsBrand = ({ withCharts }) => {
@@ -40,7 +41,7 @@ const WidgetsBrand = ({ withCharts }) => {
           className="mb-4"
           headerChildren={
             <>
-              <CIcon icon="cib-facebook" height={52} className="my-4 text-white" />
+              <CIcon icon={cibFacebook} height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"
@@ -78,7 +79,7 @@ const WidgetsBrand = ({ withCharts }) => {
           className="mb-4"
           headerChildren={
             <>
-              <CIcon icon="cib-twitter" height={52} className="my-4 text-white" />
+              <CIcon icon={cibTwitter} height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"
@@ -116,7 +117,7 @@ const WidgetsBrand = ({ withCharts }) => {
           className="mb-4"
           headerChildren={
             <>
-              <CIcon icon="cib-linkedin" height={52} className="my-4 text-white" />
+              <CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"
@@ -155,7 +156,7 @@ const WidgetsBrand = ({ withCharts }) => {
           color="warning"
           headerChildren={
             <>
-              <CIcon icon="cil-calendar" height={52} className="my-4 text-white" />
+              <CIcon icon={cilCalendar} height={52} className="my-4 text-white" />
               {withCharts && (
                 <CChart
                   className="position-absolute w-100 h-100"

src/views/components/widgets/WidgetsDropdown.js

@@ -11,6 +11,7 @@ import {
 import { getStyle } from '@coreui/utils'
 import { CChartBar, CChartLine } from '@coreui/react-chartjs'
 import CIcon from '@coreui/icons-react'
+import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
 
 const WidgetsDropdown = () => {
   return (
@@ -22,14 +23,14 @@ const WidgetsDropdown = () => {
           value="26K"
           change={
             <>
-              (-12.4% <CIcon icon="cil-arrow-bottom" />)
+              (-12.4% <CIcon icon={cilArrowBottom} />)
             </>
           }
           title="Users"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -107,14 +108,14 @@ const WidgetsDropdown = () => {
           value="$6.200"
           change={
             <>
-              (40.9% <CIcon icon="cil-arrow-top" />)
+              (40.9% <CIcon icon={cilArrowTop} />)
             </>
           }
           title="Income"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -191,14 +192,14 @@ const WidgetsDropdown = () => {
           value="2.49%"
           change={
             <>
-              (84.7% <CIcon icon="cil-arrow-top" />)
+              (84.7% <CIcon icon={cilArrowTop} />)
             </>
           }
           title="Conversion Rate"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -262,14 +263,14 @@ const WidgetsDropdown = () => {
           value="44K"
           change={
             <>
-              (-23.6% <CIcon icon="cil-arrow-bottom" />)
+              (-23.6% <CIcon icon={cilArrowBottom} />)
             </>
           }
           title="Sessions"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon="cil-options" className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>

src/views/dashboard/Dashboard.js

@@ -21,6 +21,28 @@ import {
 import { CChartLine } from '@coreui/react-chartjs'
 import { getStyle, hexToRgba } from '@coreui/utils'
 import CIcon from '@coreui/icons-react'
+import {
+  cibCcAmex,
+  cibCcApplePay,
+  cibCcMastercard,
+  cibCcPaypal,
+  cibCcStripe,
+  cibCcVisa,
+  cibGoogle,
+  cibFacebook,
+  cibLinkedin,
+  cifBr,
+  cifEs,
+  cifFr,
+  cifIn,
+  cifPl,
+  cifUs,
+  cibTwitter,
+  cilCloudDownload,
+  cilPeople,
+  cilUser,
+  cilUserFemale,
+} from '@coreui/icons'
 
 const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
 const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
@@ -44,7 +66,7 @@ const Dashboard = () => {
             </CCol>
             <CCol sm={7} className="d-none d-md-block">
               <CButton color="primary" className="float-end">
-                <CIcon icon="cil-cloud-download" />
+                <CIcon icon={cilCloudDownload} />
               </CButton>
               <CButtonGroup className="float-end me-3">
                 {['Day', 'Month', 'Year'].map((value) => (
@@ -287,7 +309,7 @@ const Dashboard = () => {
 
                   <div className="progress-group mb-4">
                     <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon="cil-user" />
+                      <CIcon className="icon icon-lg me-2" icon={cilUser} />
                       <span>Male</span>
                       <span className="ms-auto font-semibold">43%</span>
                     </div>
@@ -297,7 +319,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-5">
                     <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon="cil-user-female" />
+                      <CIcon className="icon icon-lg me-2" icon={cilUserFemale} />
                       <span>Female</span>
                       <span className="ms-auto font-semibold">37%</span>
                     </div>
@@ -308,7 +330,7 @@ const Dashboard = () => {
 
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon className="icon icon-lg me-2" icon="cib-google" />
+                      <CIcon className="icon icon-lg me-2" icon={cibGoogle} />
                       <span>Organic Search</span>
                       <span className="ms-auto font-semibold">
                         191,235 <span className="text-medium-emphasis small">(56%)</span>
@@ -320,7 +342,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon icon="cib-facebook" className="icon icon-lg me-2" />
+                      <CIcon className="icon icon-lg me-2" icon={cibFacebook} />
                       <span>Facebook</span>
                       <span className="ms-auto font-semibold">
                         51,223 <span className="text-medium-emphasis small">(15%)</span>
@@ -332,7 +354,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon icon="cib-twitter" className="icon icon-lg me-2" />
+                      <CIcon className="icon icon-lg me-2" icon={cibTwitter} />
                       <span>Twitter</span>
                       <span className="ms-auto font-semibold">
                         37,564 <span className="text-medium-emphasis small">(11%)</span>
@@ -344,7 +366,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon icon="cib-linkedin" className="icon icon-lg me-2" />
+                      <CIcon className="icon icon-lg me-2" icon={cibLinkedin} />
                       <span>LinkedIn</span>
                       <span className="ms-auto font-semibold">
                         27,319 <span className="text-medium-emphasis small">(8%)</span>
@@ -363,7 +385,7 @@ const Dashboard = () => {
                 <CTableHead color="light">
                   <CTableRow>
                     <CTableHeaderCell className="text-center">
-                      <CIcon icon="cil-people" />
+                      <CIcon icon={cilPeople} />
                     </CTableHeaderCell>
                     <CTableHeaderCell>User</CTableHeaderCell>
                     <CTableHeaderCell className="text-center">Country</CTableHeaderCell>
@@ -384,7 +406,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cif-us" title="us" id="us" />
+                      <CIcon size="xl" icon={cifUs} title="us" id="us" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -400,7 +422,7 @@ const Dashboard = () => {
                       <CProgress thin color="success" value={50} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cib-cc-mastercard" />
+                      <CIcon size="xl" icon={cibCcMastercard} />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -418,7 +440,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cif-br" title="br" id="br" />
+                      <CIcon size="xl" icon={cifBr} title="br" id="br" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -434,7 +456,7 @@ const Dashboard = () => {
                       <CProgress thin color="info" value={10} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cib-cc-visa" />
+                      <CIcon size="xl" icon={cibCcVisa} />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -452,7 +474,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cif-in" title="in" id="in" />
+                      <CIcon size="xl" icon={cifIn} title="in" id="in" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -468,7 +490,7 @@ const Dashboard = () => {
                       <CProgress thin color="warning" value={74} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cib-cc-stripe" />
+                      <CIcon size="xl" icon={cibCcStripe} />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -486,7 +508,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cif-fr" title="fr" id="fr" />
+                      <CIcon size="xl" icon={cifFr} title="fr" id="fr" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -502,7 +524,7 @@ const Dashboard = () => {
                       <CProgress thin color="danger" value={98} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cib-cc-paypal" />
+                      <CIcon size="xl" icon={cibCcPaypal} />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -520,7 +542,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cif-es" title="es" id="es" />
+                      <CIcon size="xl" icon={cifEs} title="es" id="es" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -536,7 +558,7 @@ const Dashboard = () => {
                       <CProgress thin color="info" value={22} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cib-cc-apple-pay" />
+                      <CIcon size="xl" icon={cibCcApplePay} />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>
@@ -554,7 +576,7 @@ const Dashboard = () => {
                       </div>
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cif-pl" title="pl" id="pl" />
+                      <CIcon size="xl" icon={cifPl} title="pl" id="pl" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="clearfix">
@@ -570,7 +592,7 @@ const Dashboard = () => {
                       <CProgress thin color="success" value={43} />
                     </CTableDataCell>
                     <CTableDataCell className="text-center">
-                      <CIcon size="xl" icon="cib-cc-amex" />
+                      <CIcon size="xl" icon={cibCcAmex} />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div className="small text-medium-emphasis">Last login</div>

src/views/pages/login/Login.js

@@ -14,6 +14,7 @@ import {
   CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cilLockLocked, cilUser } from '@coreui/icons'
 
 const Login = () => {
   return (
@@ -29,13 +30,13 @@ const Login = () => {
                     <p className="text-medium-emphasis">Sign In to your account</p>
                     <CInputGroup className="mb-3">
                       <CInputGroupText>
-                        <CIcon icon="cil-user" />
+                        <CIcon icon={cilUser} />
                       </CInputGroupText>
                       <CFormInput placeholder="Username" autoComplete="username" />
                     </CInputGroup>
                     <CInputGroup className="mb-4">
                       <CInputGroupText>
-                        <CIcon icon="cil-lock-locked" />
+                        <CIcon icon={cilLockLocked} />
                       </CInputGroupText>
                       <CFormInput
                         type="password"

src/views/pages/page404/Page404.js

@@ -9,6 +9,7 @@ import {
   CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cilMagnifyingGlass } from '@coreui/icons'
 
 const Page404 = () => {
   return (
@@ -25,7 +26,7 @@ const Page404 = () => {
             </div>
             <CInputGroup className="input-prepend">
               <CInputGroupText>
-                <CIcon icon="cil-magnifying-glass" />
+                <CIcon icon={cilMagnifyingGlass} />
               </CInputGroupText>
               <CFormInput size="16" type="text" placeholder="What are you looking for?" />
               <CButton color="info">Search</CButton>

src/views/pages/page500/Page500.js

@@ -9,6 +9,7 @@ import {
   CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cilMagnifyingGlass } from '@coreui/icons'
 
 const Page500 = () => {
   return (
@@ -25,7 +26,7 @@ const Page500 = () => {
             </span>
             <CInputGroup className="input-prepend">
               <CInputGroupText>
-                <CIcon icon="cil-magnifying-glass" />
+                <CIcon icon={cilMagnifyingGlass} />
               </CInputGroupText>
               <CFormInput size="16" type="text" placeholder="What are you looking for?" />
               <CButton color="info">Search</CButton>

src/views/pages/register/Register.js

@@ -12,6 +12,7 @@ import {
   CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { cilLockLocked, cilUser } from '@coreui/icons'
 
 const Register = () => {
   return (
@@ -26,7 +27,7 @@ const Register = () => {
                   <p className="text-medium-emphasis">Create your account</p>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
-                      <CIcon icon="cil-user" />
+                      <CIcon icon={cilUser} />
                     </CInputGroupText>
                     <CFormInput placeholder="Username" autoComplete="username" />
                   </CInputGroup>
@@ -36,7 +37,7 @@ const Register = () => {
                   </CInputGroup>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
-                      <CIcon icon="cil-lock-locked" />
+                      <CIcon icon={cilLockLocked} />
                     </CInputGroupText>
                     <CFormInput
                       type="password"
@@ -46,7 +47,7 @@ const Register = () => {
                   </CInputGroup>
                   <CInputGroup className="mb-4">
                     <CInputGroupText>
-                      <CIcon icon="cil-lock-locked" />
+                      <CIcon icon={cilLockLocked} />
                     </CInputGroupText>
                     <CFormInput
                       type="password"