Merge pull request #76 from coreui/dev-v2-coreui-icons

feat: new CoreUI Icons set

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -14,7 +14,8 @@
   "dependencies": {
     "@coreui/coreui": "^2.0.0",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
-    "@coreui/react": "^2.0.0-rc.0",
+    "@coreui/icons": "^0.1.1",
+    "@coreui/react": "^2.0.0-rc.1",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.5",

src/App.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 import './App.css';
 // Styles
+// CoreUI Icons Set
+import '@coreui/icons/css/coreui-icons.min.css';
 // Import Flag Icons Set
 import 'flag-icon-css/css/flag-icon.min.css';
 // Import Font Awesome Icons Set
@@ -10,7 +12,6 @@ import 'font-awesome/css/font-awesome.min.css';
 import 'simple-line-icons/css/simple-line-icons.css';
 // Import Main styles for this application
 import './scss/style.css'
-// import '../node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
 
 // Containers
 import { DefaultLayout } from './containers';

src/_nav.js

@@ -160,14 +160,19 @@ export default {
       url: '/icons',
       icon: 'icon-star',
       children: [
+        {
+          name: 'CoreUI Icons',
+          url: '/icons/coreui-icons',
+          icon: 'icon-star',
+          badge: {
+            variant: 'info',
+            text: 'NEW',
+          },
+        },
         {
           name: 'Flags',
           url: '/icons/flags',
           icon: 'icon-star',
-          badge: {
-            variant: 'success',
-            text: 'NEW',
-          },
         },
         {
           name: 'Font Awesome',

src/routes.js

@@ -10,6 +10,7 @@ import {
   Charts,
   Collapses,
   Colors,
+  CoreUIIcons,
   Dashboard,
   Dropdowns,
   Flags,
@@ -48,11 +49,11 @@ const routes = [
   { path: '/base/tables', name: 'Tables', component: Tables },
   { path: '/base/tabs', name: 'Tabs', component: Tabs },
   { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
-  { path: '/base/carousels', name: 'Carousels', component: Carousels },
+  { path: '/base/carousels', name: 'Carousel', component: Carousels },
-  { path: '/base/collapses', name: 'Collapses', component: Collapses },
+  { path: '/base/collapses', name: 'Collapse', component: Collapses },
   { path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
   { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
-  { path: '/base/list-groups', name: 'ListGroups', component: ListGroups },
+  { path: '/base/list-groups', name: 'List Groups', component: ListGroups },
   { path: '/base/navbars', name: 'Navbars', component: Navbars },
   { path: '/base/navs', name: 'Navs', component: Navs },
   { path: '/base/paginations', name: 'Paginations', component: Paginations },
@@ -61,10 +62,11 @@ const routes = [
   { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
   { path: '/buttons', exact: true, name: 'Buttons', component: Buttons },
   { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
-  { path: '/buttons/button-dropdowns', name: 'ButtonDropdowns', component: ButtonDropdowns },
+  { path: '/buttons/button-dropdowns', name: 'Button Dropdowns', component: ButtonDropdowns },
-  { path: '/buttons/button-groups', name: 'ButtonGroups', component: ButtonGroups },
+  { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
   { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
   { path: '/icons', exact: true, name: 'Icons', component: Flags },
+  { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
   { path: '/icons/flags', name: 'Flags', component: Flags },
   { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
   { path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },

src/views/Icons/CoreUIIcons/CoreUIIcons.js

@@ -0,0 +1,183 @@
+import React, { Component } from 'react';
+import { Badge, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+
+class CoreUIIcons extends Component {
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Card>
+          <CardHeader>
+            <i className="fa fa-picture-o"></i>CoreUI Icons{' '} <Badge color={'info'}>New</Badge>
+            <div className="card-header-actions">
+              <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                <small className="text-muted">Github</small>
+              </a>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <Row className="text-center">
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-basket-loaded icons font-2xl d-block mt-4"></i>
+                <div>basket-loaded</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-bell icons font-2xl d-block mt-4"></i>
+                <div>bell</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-calculator icons font-2xl d-block mt-4"></i>
+                <div>calculator</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-calendar icons font-2xl d-block mt-4"></i>
+                <div>calendar</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-camera icons font-2xl d-block mt-4"></i>
+                <div>camera</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-chart icons font-2xl d-block mt-4"></i>
+                <div>chart</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-cloud-download icons font-2xl d-block mt-4"></i>
+                <div>cloud-download</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-cursor icons font-2xl d-block mt-4"></i>
+                <div>cursor</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-cursor-move icons font-2xl d-block mt-4"></i>
+                <div>cursor-move</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-drop icons font-2xl d-block mt-4"></i>
+                <div>drop</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-energy icons font-2xl d-block mt-4"></i>
+                <div>energy</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-envelope-letter icons font-2xl d-block mt-4"></i>
+                <div>envelope-letter</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-equalizer icons font-2xl d-block mt-4"></i>
+                <div>equalizer</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-globe icons font-2xl d-block mt-4"></i>
+                <div>globe</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-graph icons font-2xl d-block mt-4"></i>
+                <div>graph</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-home icons font-2xl d-block mt-4"></i>
+                <div>home</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-layers icons font-2xl d-block mt-4"></i>
+                <div>layers</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-list icons font-2xl d-block mt-4"></i>
+                <div>list</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-location-pin icons font-2xl d-block mt-4"></i>
+                <div>location-pin</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-map icons font-2xl d-block mt-4"></i>
+                <div>map</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-note icons font-2xl d-block mt-4"></i>
+                <div>note</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-options icons font-2xl d-block mt-4"></i>
+                <div>options</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-pencil icons font-2xl d-block mt-4"></i>
+                <div>pencil</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-people icons font-2xl d-block mt-4"></i>
+                <div>people</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-pie-chart icons font-2xl d-block mt-4"></i>
+                <div>pie-chart</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-puzzle icons font-2xl d-block mt-4"></i>
+                <div>puzzle</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-screen-desktop icons font-2xl d-block mt-4"></i>
+                <div>screen-desktop</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
+                <div>screen-smartphone</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-settings icons font-2xl d-block mt-4"></i>
+                <div>settings</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-social-facebook icons font-2xl d-block mt-4"></i>
+                <div>social-facebook</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-social-skype icons font-2xl d-block mt-4"></i>
+                <div>social-skype</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-social-twitter icons font-2xl d-block mt-4"></i>
+                <div>social-twitter</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-speech icons font-2xl d-block mt-4"></i>
+                <div>speech</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-speedometer icons font-2xl d-block mt-4"></i>
+                <div>speedometer</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-star icons font-2xl d-block mt-4"></i>
+                <div>star</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-user icons font-2xl d-block mt-4"></i>
+                <div>user</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-user-female icons font-2xl d-block mt-4"></i>
+                <div>user-female</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-user-follow icons font-2xl d-block mt-4"></i>
+                <div>user-follow</div>
+              </Col>
+              <Col xs="6" sm="4" md="3">
+                <i className="cui-user-unfollow icons font-2xl d-block mt-4"></i>
+                <div>user-unfollow</div>
+              </Col>
+            </Row>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default CoreUIIcons;

src/views/Icons/CoreUIIcons/CoreUIIcons.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import CoreUIIcons from './CoreUIIcons';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<CoreUIIcons />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/views/Icons/CoreUIIcons/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "CoreUIIcons",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CoreUIIcons.js"
+}

src/views/Icons/index.js

@@ -1,7 +1,8 @@
+import CoreUIIcons from './CoreUIIcons';
 import Flags from './Flags';
 import FontAwesome from './FontAwesome';
 import SimpleLineIcons from './SimpleLineIcons';
 
 export {
-  Flags, FontAwesome, SimpleLineIcons
+  CoreUIIcons, Flags, FontAwesome, SimpleLineIcons
 };

src/views/index.js

@@ -21,7 +21,7 @@ import {
 import { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons } from './Buttons';
 import Charts from './Charts';
 import Dashboard from './Dashboard';
-import { Flags, FontAwesome, SimpleLineIcons } from './Icons';
+import { CoreUIIcons, Flags, FontAwesome, SimpleLineIcons } from './Icons';
 import { Alerts, Badges, Modals } from './Notifications';
 import { Login, Page404, Page500, Register } from './Pages';
 import { Colors, Typography } from './Theme';
@@ -31,6 +31,7 @@ export {
   Badges,
   Typography,
   Colors,
+  CoreUIIcons,
   Page404,
   Page500,
   Register,