Introducing react icons!

package.json

@@ -143,13 +143,15 @@
     "mkdirp": "0.5.1",
     "moment": "2.13.0",
     "moment-timezone": "0.5.4",
+    "ngreact": "0.3.0",
     "no-ui-slider": "1.2.0",
     "node-fetch": "1.3.2",
     "node-uuid": "1.4.7",
     "pegjs": "0.9.0",
     "postcss-loader": "1.2.1",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
+    "react": "15.2.0",
     "request": "2.61.0",
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
@@ -225,7 +227,6 @@
     "npm": "3.10.10",
     "portscanner": "1.0.0",
     "proxyquire": "1.7.10",
-    "react": "15.2.0",
     "react-addons-test-utils": "15.2.0",
     "react-dom": "15.2.0",
     "react-redux": "4.4.5",

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

@@ -39,7 +39,7 @@
           ng-click="listingController.deleteSelectedItems()"
           tooltip="Delete selected visualizations"
         >
-          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
+          <react-component name="TrashIcon"></react-component>
         </button>
 
         <!-- Create visualization button -->
@@ -50,7 +50,7 @@
           ng-if="listingController.getSelectedItemsCount() === 0"
           tooltip="Create new visualization"
         >
-          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
+          <react-component name="PlusIcon"></react-component>
         </a>
       </div>
 

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

@@ -2,6 +2,15 @@ import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry'
 import 'ui/pager_control';
 import 'ui/pager';
 import _ from 'lodash';
+import 'ngreact';
+
+import { PlusIcon } from 'ui_framework/components/icon/plus_icon';
+import { TrashIcon } from 'ui_framework/components/icon/trash_icon';
+
+import uiModules from 'ui/modules';
+const app = uiModules.get('app/visualize', ['react']);
+app.value('PlusIcon', PlusIcon);
+app.value('TrashIcon', TrashIcon);
 
 export function VisualizeListingController($injector, $scope) {
   const $filter = $injector.get('$filter');

ui_framework/components/icon/kui_icon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export function KuiIcon({ className }) {
+  const classNames = ['kuiButton__icon', 'kuiIcon', className];
+  return <span aria-hidden="true" className={ classNames.join(' ') }/>;
+}

ui_framework/components/icon/plus_icon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KuiIcon } from './kui_icon';
+
+export function PlusIcon() {
+  return <KuiIcon className="fa-plus"/>;
+}

ui_framework/components/icon/trash_icon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KuiIcon } from './kui_icon';
+
+export function TrashIcon() {
+  return <KuiIcon className="fa-trash"/>;
+}