gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update CIcons

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-13 19:59:49 +02:00
parent 9b847ae268
commit fcbf9b804d
18 changed files with 136 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

20
src/_nav.js
View File

@ -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',

10
src/components/AppHeader.js
View File

@ -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>

4
src/components/AppSidebar.js
View File

@ -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-narrow" name="sygnet" height={35} />
<CIcon className="sidebar-brand-full" icon="logo-negative" height={35} />
<CIcon className="sidebar-brand-narrow" icon="sygnet" height={35} />
</CSidebarBrand>
<CSidebarNav>
<SimpleBar>

2
src/components/AppSidebarNav.js
View File

@ -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">

4
src/components/DocsExample.js
View File

@ -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>

18
src/components/header/AppHeaderDropdown.js
View File

@ -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>

4
src/views/components/buttons/buttons/Buttons.js
View File

@ -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>

2
src/views/components/icons/brands/Brands.js
View File

@ -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>
))

74
src/views/components/widgets/Widgets.js
View File

@ -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}

8
src/views/components/widgets/WidgetsBrand.js
View File

@ -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"

16
src/views/components/widgets/WidgetsDropdown.js
View File

@ -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>

40
src/views/dashboard/Dashboard.js
View File

@ -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>

4
src/views/pages/login/Login.js
View File

@ -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"

2
src/views/pages/page404/Page404.js
View File

@ -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>

2
src/views/pages/page500/Page500.js
View File

@ -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>

6
src/views/pages/register/Register.js
View File

@ -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"

59
yarn.lock
View File

@ -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":
version "2.0.0-rc.0"
resolved "https://registry.yarnpkg.com/@coreui/icons-react/-/icons-react-2.0.0-rc.0.tgz#5eb4d082a9306c6a2126c61766dcfec503a8a4e1"
integrity sha512-QIayiRpe/ZR7G1GdE1KziE4xgIYRmiG9kmHjo5DhKdE5JjTRuO/Cs5Z3F6WVAaqARwUu1aNWXUbLuKb3kKOaxQ==
"@coreui/icons-react@^2.0.0-rc.5":
version "2.0.0-rc.5"
resolved "https://registry.yarnpkg.com/@coreui/icons-react/-/icons-react-2.0.0-rc.5.tgz#2adb4973b78f565302a4f3295922beccd76c5dda"
integrity sha512-yqKUq2+sXPCIKXHbIFChd3Ku6VVYUdjKpE9kyxK93WLdZmACJphFQP9+qwPGxgmcyfSq2EeTjfN6Zp69AqcXcA==
dependencies:
"@typescript-eslint/eslint-plugin" "^4.28.1"
"@typescript-eslint/parser" "^4.28.1"
"@typescript-eslint/eslint-plugin" "^4.29.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":
version "0.9.0-alpha.1"
resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.9.0-alpha.1.tgz#f48bd162e185ec7f9f222273a282d10e52fe52f7"
integrity sha512-Clxxc0PwpISoYYBibA+1L2qFJ7gvFVhI2Hos87S06K+Q0cXdOhZQJNKWuaQGPAeHjZEuUB/YoWOfwjuF2wirqA==
"@es-joy/jsdoccomment@0.10.7":
version "0.10.7"
resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.10.7.tgz#bdb5dfcaa5cff8b5435f0c9f2777b533075a9c52"
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:
version "1.1.6-beta.0"
resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.1.6-beta.0.tgz#57e503b18d0a5bd008632dcc54b1f95c2fffe8f6"
integrity sha512-q3cA8TSMyqW7wcPSYWzbO/rMahnXgzs4SLG/UIWXdEsnXTFPZkEkWAdNgPiHig2OzxgpPLOh4WwsmClDxndwHw==
comment-parser@1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.2.3.tgz#303a7eb99c9b2632efd594e183ccbd32042caf69"
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:
version "35.5.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-35.5.1.tgz#45932ee22669bbe06c97b82b936d56361efad370"
integrity sha512-pPYPWtsykwVEue1tYEyoppBj4dgF7XicF67tLLLraY6RQYBq7qMKjUHji19+hfiTtYKKBD0YfeK8hgjPAE5viw==
eslint-plugin-jsdoc@^36.0.7:
version "36.0.7"
resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-36.0.7.tgz#6e6f9897fc2ff3b3934b09c2748b998bc03d2bf6"
integrity sha512-x73l/WCRQ1qCjLq46Ca7csuGd5o3y3vbJIa3cktg11tdf3UZleBdIXKN9Cf0xjs3tXYPEy2SoNXowT8ydnjNDQ==
dependencies:
"@es-joy/jsdoccomment" "0.9.0-alpha.1"
comment-parser "1.1.6-beta.0"
"@es-joy/jsdoccomment" "0.10.7"
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:
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:
jsdoc-type-pratt-parser@1.1.1, jsdoc-type-pratt-parser@^1.1.1:
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==