Define icons as React components to eliminate SVG -> JSX build step a…

…nd allow testing

.gitignore

@@ -53,6 +53,4 @@ spec/css/regressionRunner.js
 
 # unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
 .rvmrc
-vendor/ruby
-
-src/react/iconography/icons.js
+vendor/ruby

package.json

@@ -75,7 +75,6 @@
     "sass-loader": "^7.1.0",
     "stringifier": "^2.0.0",
     "style-loader": "^0.23.1",
-    "svg-to-jsx": "^1.0.0",
     "url-loader": "^1.1.2",
     "webpack": "^4.28.1",
     "webpack-cli": "^3.2.1",

spec/pivotal-ui-react/iconography/iconography.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Icon} from '../../../src/react/iconography';
+import * as Icons from '../../../src/react/iconography/icons';
 
 describe('iconography', () => {
   afterEach(() => {
@@ -18,6 +19,47 @@ describe('iconography', () => {
     expect('.icon').toHaveAttr('id', 'bar');
   });
 
+  Object.keys(Icons).filter(iconName => {
+    return !iconName.startsWith('_') && !iconName.includes('spinner');
+  }).forEach(iconName => {
+    it(`works with src "${iconName}"`, () => {
+      ReactDOM.render(<Icon src={iconName} className="foo" id="bar"/>, root);
+      expect('.icon svg').toHaveClass(`icon-${iconName}`);
+    });
+  });
+
+  describe('spinner icons', () => {
+    it('works with src "spinner_lg"', () => {
+      ReactDOM.render(<Icon src="spinner_lg" className="foo" id="bar"/>, root);
+      expect('.icon svg').toHaveClass('icon-spinner-lg');
+    });
+
+    it('works with src "spinner-lg" (for backwards compatibility)', () => {
+      ReactDOM.render(<Icon src="spinner-lg" className="foo" id="bar"/>, root);
+      expect('.icon svg').toHaveClass('icon-spinner-lg');
+    });
+
+    it('works with src "spinner_md"', () => {
+      ReactDOM.render(<Icon src="spinner_md" className="foo" id="bar"/>, root);
+      expect('.icon svg').toHaveClass('icon-spinner-md');
+    });
+
+    it('works with src "spinner-md" (for backwards compatibility)', () => {
+      ReactDOM.render(<Icon src="spinner-md" className="foo" id="bar"/>, root);
+      expect('.icon svg').toHaveClass('icon-spinner-md');
+    });
+
+    it('works with src "spinner_sm"', () => {
+      ReactDOM.render(<Icon src="spinner_sm" className="foo" id="bar"/>, root);
+      expect('.icon svg').toHaveClass('icon-spinner-sm');
+    });
+
+    it('works with src "spinner-sm" (for backwards compatibility)', () => {
+      ReactDOM.render(<Icon src="spinner-sm" className="foo" id="bar"/>, root);
+      expect('.icon svg').toHaveClass('icon-spinner-sm');
+    });
+  });
+
   describe('verticalAlign', () => {
     it('if verticalAlign is not specified it applies the .icon-middle', () => {
       ReactDOM.render(<Icon src="add"/>, root);