From 7108efcc88e62a5c66dff3c5221cbfadd90e53a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 16 Aug 2021 19:20:26 +0200 Subject: [PATCH] refactor: update `CIcon`s --- src/_nav.js | 36 ++- src/assets/icons/index.js | 259 ------------------ src/components/AppHeader.js | 9 +- src/components/AppSidebarNav.js | 3 +- src/components/DocsExample.js | 5 +- src/components/header/AppHeaderDropdown.js | 28 +- src/index.js | 5 - .../components/buttons/buttons/Buttons.js | 5 +- src/views/components/widgets/Widgets.js | 80 +++--- src/views/components/widgets/WidgetsBrand.js | 9 +- .../components/widgets/WidgetsDropdown.js | 17 +- src/views/dashboard/Dashboard.js | 62 +++-- src/views/pages/login/Login.js | 5 +- src/views/pages/page404/Page404.js | 3 +- src/views/pages/page500/Page500.js | 3 +- src/views/pages/register/Register.js | 7 +- 16 files changed, 168 insertions(+), 368 deletions(-) delete mode 100644 src/assets/icons/index.js diff --git a/src/_nav.js b/src/_nav.js index 5041115..dd413f1 100644 --- a/src/_nav.js +++ b/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: , + icon: , badge: { color: 'info', text: 'NEW', @@ -20,13 +32,13 @@ const _nav = [ component: 'CNavItem', name: 'Colors', to: '/theme/colors', - icon: , + icon: , }, { component: 'CNavItem', name: 'Typography', to: '/theme/typography', - icon: , + icon: , }, { component: 'CNavTitle', @@ -36,17 +48,15 @@ const _nav = [ component: 'CNavGroup', name: 'Base', to: '/base', - icon: 'cil-puzzle', + 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: , + icon: , items: [ { component: 'CNavItem', @@ -147,7 +157,7 @@ const _nav = [ { component: 'CNavGroup', name: 'Forms', - icon: , + icon: , items: [ { component: 'CNavItem', @@ -203,12 +213,12 @@ const _nav = [ component: 'CNavItem', name: 'Charts', to: '/charts', - icon: , + icon: , }, { component: 'CNavGroup', name: 'Icons', - icon: , + icon: , items: [ { component: 'CNavItem', @@ -237,7 +247,7 @@ const _nav = [ { component: 'CNavGroup', name: 'Notifications', - icon: , + icon: , items: [ { component: 'CNavItem', @@ -269,7 +279,7 @@ const _nav = [ component: 'CNavItem', name: 'Widgets', to: '/widgets', - icon: , + icon: , badge: { color: 'info', text: 'NEW', @@ -282,7 +292,7 @@ const _nav = [ { component: 'CNavGroup', name: 'Pages', - icon: , + icon: , items: [ { component: 'CNavItem', diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js deleted file mode 100644 index 3cfed9a..0000000 --- a/src/assets/icons/index.js +++ /dev/null @@ -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, - }, -) diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index fb1df44..7b9f89e 100644 --- a/src/components/AppHeader.js +++ b/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 })} > - + @@ -49,17 +50,17 @@ const AppHeader = () => { - + - + - + diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js index 5f4d9b4..1fc32d1 100644 --- a/src/components/AppSidebarNav.js +++ b/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' ? : icon} + {icon && icon} {name && name} {badge && ( diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js index 8aed0f0..5636da7 100644 --- a/src/components/DocsExample.js +++ b/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) => { - + Preview - + Code diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js index 424a309..030c5c4 100644 --- a/src/components/header/AppHeaderDropdown.js +++ b/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 = () => { Account - + Updates 42 - + Messages 42 - + Tasks 42 - + Comments 42 @@ -49,22 +59,22 @@ const AppHeaderDropdown = () => { Settings - + Profile - + Settings - + Payments 42 - + Projects 42 @@ -72,7 +82,7 @@ const AppHeaderDropdown = () => { - + Lock Account diff --git a/src/index.js b/src/index.js index 16faf75..8aa227b 100644 --- a/src/index.js +++ b/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( diff --git a/src/views/components/buttons/buttons/Buttons.js b/src/views/components/buttons/buttons/Buttons.js index b19f305..d7b9e74 100644 --- a/src/views/components/buttons/buttons/Buttons.js +++ b/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'} > - + {color.charAt(0).toUpperCase() + color.slice(1)} ))} - + Link diff --git a/src/views/components/widgets/Widgets.js b/src/views/components/widgets/Widgets.js index 6f54bd7..a8160b4 100644 --- a/src/views/components/widgets/Widgets.js +++ b/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 = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -457,7 +471,7 @@ const Widgets = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -467,7 +481,7 @@ const Widgets = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -477,7 +491,7 @@ const Widgets = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -487,7 +501,7 @@ const Widgets = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -500,7 +514,7 @@ const Widgets = () => { target="_blank" > View more - + } /> @@ -508,7 +522,7 @@ const Widgets = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -521,7 +535,7 @@ const Widgets = () => { target="_blank" > View more - + } /> @@ -529,7 +543,7 @@ const Widgets = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -542,7 +556,7 @@ const Widgets = () => { target="_blank" > View more - + } /> @@ -550,7 +564,7 @@ const Widgets = () => { } + icon={} iconPadding={3} title="income" value="$1.999,50" @@ -563,7 +577,7 @@ const Widgets = () => { target="_blank" > View more - + } /> @@ -572,7 +586,7 @@ const Widgets = () => { } + icon={} iconPadding={4} title="income" value="$1.999,50" @@ -583,7 +597,7 @@ const Widgets = () => { } + icon={} iconPadding={4} title="income" value="$1.999,50" @@ -594,7 +608,7 @@ const Widgets = () => { } + icon={} iconPadding={4} title="income" value="$1.999,50" @@ -605,7 +619,7 @@ const Widgets = () => { } + icon={} iconPadding={4} title="income" value="$1.999,50" @@ -617,34 +631,34 @@ const Widgets = () => { } + icon={} value="87.500" title="Visitors" progressColor="info" progressValue={75} /> } + icon={} value="385" title="New Clients" progressColor="success" progressValue={75} /> } + icon={} value="1238" title="Products sold" progressColor="warning" progressValue={75} /> } + icon={} value="28%" title="Returning Visitors" progressValue={75} /> } + icon={} value="5:34:11" title="Avg. Time" progressColor="danger" @@ -654,7 +668,7 @@ const Widgets = () => { } + icon={} value="87.500" title="Visitors" progressColor="info" @@ -664,7 +678,7 @@ const Widgets = () => { } + icon={} value="385" title="New Clients" progressColor="success" @@ -674,7 +688,7 @@ const Widgets = () => { } + icon={} value="1238" title="Products sold" progressColor="warning" @@ -684,7 +698,7 @@ const Widgets = () => { } + icon={} value="28%" title="Returning Visitors" progressColor="primary" @@ -694,7 +708,7 @@ const Widgets = () => { } + icon={} value="5:34:11" title="Avg. Time" progressColor="danger" @@ -704,7 +718,7 @@ const Widgets = () => { } + icon={} value="972" title="comments" progressColor="info" @@ -717,7 +731,7 @@ const Widgets = () => { } + icon={} value="87.500" title="Visitors" progressValue={75} @@ -728,7 +742,7 @@ const Widgets = () => { } + icon={} value="385" title="New Clients" progressValue={75} @@ -739,7 +753,7 @@ const Widgets = () => { } + icon={} value="1238" title="Products sold" progressValue={75} @@ -750,7 +764,7 @@ const Widgets = () => { } + icon={} value="28%" title="Returning Visitors" progressValue={75} @@ -761,7 +775,7 @@ const Widgets = () => { } + icon={} value="5:34:11" title="Avg. Time" progressValue={75} @@ -772,7 +786,7 @@ const Widgets = () => { } + icon={} value="972" title="comments" progressValue={75} diff --git a/src/views/components/widgets/WidgetsBrand.js b/src/views/components/widgets/WidgetsBrand.js index eea5f60..45b6be1 100644 --- a/src/views/components/widgets/WidgetsBrand.js +++ b/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={ <> - + {withCharts && ( { className="mb-4" headerChildren={ <> - + {withCharts && ( { className="mb-4" headerChildren={ <> - + {withCharts && ( { color="warning" headerChildren={ <> - + {withCharts && ( { return ( @@ -22,14 +23,14 @@ const WidgetsDropdown = () => { value="26K" change={ <> - (-12.4% ) + (-12.4% ) } title="Users" action={ - + Action @@ -107,14 +108,14 @@ const WidgetsDropdown = () => { value="$6.200" change={ <> - (40.9% ) + (40.9% ) } title="Income" action={ - + Action @@ -191,14 +192,14 @@ const WidgetsDropdown = () => { value="2.49%" change={ <> - (84.7% ) + (84.7% ) } title="Conversion Rate" action={ - + Action @@ -262,14 +263,14 @@ const WidgetsDropdown = () => { value="44K" change={ <> - (-23.6% ) + (-23.6% ) } title="Sessions" action={ - + Action diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 1fd49ac..ef9783a 100644 --- a/src/views/dashboard/Dashboard.js +++ b/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 = () => { - + {['Day', 'Month', 'Year'].map((value) => ( @@ -287,7 +309,7 @@ const Dashboard = () => {
- + Male 43%
@@ -297,7 +319,7 @@ const Dashboard = () => {
- + Female 37%
@@ -308,7 +330,7 @@ const Dashboard = () => {
- + Organic Search 191,235 (56%) @@ -320,7 +342,7 @@ const Dashboard = () => {
- + Facebook 51,223 (15%) @@ -332,7 +354,7 @@ const Dashboard = () => {
- + Twitter 37,564 (11%) @@ -344,7 +366,7 @@ const Dashboard = () => {
- + LinkedIn 27,319 (8%) @@ -363,7 +385,7 @@ const Dashboard = () => { - + User Country @@ -384,7 +406,7 @@ const Dashboard = () => {
- +
@@ -400,7 +422,7 @@ const Dashboard = () => { - +
Last login
@@ -418,7 +440,7 @@ const Dashboard = () => {
- +
@@ -434,7 +456,7 @@ const Dashboard = () => { - +
Last login
@@ -452,7 +474,7 @@ const Dashboard = () => {
- +
@@ -468,7 +490,7 @@ const Dashboard = () => { - +
Last login
@@ -486,7 +508,7 @@ const Dashboard = () => {
- +
@@ -502,7 +524,7 @@ const Dashboard = () => { - +
Last login
@@ -520,7 +542,7 @@ const Dashboard = () => {
- +
@@ -536,7 +558,7 @@ const Dashboard = () => { - +
Last login
@@ -554,7 +576,7 @@ const Dashboard = () => {
- +
@@ -570,7 +592,7 @@ const Dashboard = () => { - +
Last login
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js index 7e81d37..6b889d5 100644 --- a/src/views/pages/login/Login.js +++ b/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 = () => {

Sign In to your account

- + - + { return ( @@ -25,7 +26,7 @@ const Page404 = () => {
- + Search diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js index 40bf55e..ff3e466 100644 --- a/src/views/pages/page500/Page500.js +++ b/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 = () => { - + Search diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js index 7609d84..0a2a038 100644 --- a/src/views/pages/register/Register.js +++ b/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 = () => {

Create your account

- + @@ -36,7 +37,7 @@ const Register = () => { - + { - +