Refactor icon code to share more code between Angular/React and support...

Refactor icon code to share more code between Angular/React and support setting attributes in the definition file; update header icon sizes

resources/frontend_client/app/components/icons/icons.js

 'use strict';
 
-import { ICON_PATHS } from 'metabase/icon_paths';
+import { loadIcon } from 'metabase/icon_paths';
 
 // TODO: support ICON_SVGS
 
@@ -22,15 +22,25 @@ angular.module('corvus.components')
                 width: '@?',  // a value in PX to define the width of the icon
                 height: '@?', // a value in PX to define the height of the icon
                 name: '@',    // the name of the icon to be referended from the ICON_PATHS object
-                path: '@'
+                path: '@',
+                'class': '@',
+                viewBox: '@',
+                fill: '@'
             },
             compile: function (element, attrs) {
-                var icon = ICON_PATHS[attrs.name];
+                var icon = loadIcon(attrs.name);
 
-                // set defaults for width/height in case no width or height are specified
-                attrs.width = attrs.width || '32px';
-                attrs.height = attrs.height || '32px';
-                attrs.path = icon;
+                if (icon.svg) {
+                    console.warn("mbIcon does not yet support raw SVG");
+                } else if (icon.path) {
+                    attrs.path = attrs.path || icon.path;
+                }
+
+                for (var attr in icon.attrs) {
+                    if (attrs[attr] == undefined) {
+                        attrs[attr] = icon.attrs[attr];
+                    }
+                }
             }
         };
     });

resources/frontend_client/app/query_builder/add_to_dashboard.react.js

@@ -52,7 +52,7 @@ export default React.createClass({
         return (
             <span>
                 <a className="mx1 text-grey-4 text-brand-hover" href="#" title="Add this data to a dashboard" onClick={this.toggleModal}>
-                    <Icon name='addtodash' />
+                    <Icon name='addtodash' width="16px" height="16px"/>
                 </a>
                 {this.addToDash()}
             </span>

resources/frontend_client/app/query_builder/card_favorite_button.react.js

@@ -84,7 +84,7 @@ export default React.createClass({
 
         return (
             <a className={iconClasses} href="#" onClick={this.toggleFavorite}>
-                <Icon name="star"></Icon>
+                <Icon name="star" width="16px" height="16px"></Icon>
             </a>
         );
     }

resources/frontend_client/app/query_builder/header.react.js

@@ -199,7 +199,7 @@ export default React.createClass({
         if (this.props.downloadLink) {
             downloadButton = (
                 <a className="mx1" href={this.props.downloadLink} title="Download this data" target="_blank">
-                    <Icon name='download'>
+                    <Icon name='download' width="16px" height="16px">
                         <Popover>
                             <span>Download data</span>
                         </Popover>
@@ -212,7 +212,7 @@ export default React.createClass({
         if (this.props.card.id) {
             cloneButton = (
                 <a href="#" className="mx1 text-grey-4 text-brand-hover">
-                    <Icon name='clone' onClick={this.cloneCard}></Icon>
+                    <Icon name='clone' width="16px" height="16px" onClick={this.cloneCard}></Icon>
                 </a>
             );
         }
@@ -252,7 +252,7 @@ export default React.createClass({
         });
         var dataReferenceButton = (
             <a href="#" className={dataReferenceButtonClasses}>
-                <Icon name='reference' onClick={this.toggleDataReference}></Icon>
+                <Icon name='reference' width="16px" height="16px" onClick={this.toggleDataReference}></Icon>
             </a>
         );
 
@@ -272,12 +272,12 @@ export default React.createClass({
 
         var dividerLeft;
         if (hasLeft && (hasMiddle || hasRight)) {
-            dividerLeft = <div className="border-right border-dark">&nbsp;</div>
+            dividerLeft = <div className="border-right border-dark mx1">&nbsp;</div>
         }
 
         var dividerRight;
         if (hasRight && hasMiddle) {
-            dividerRight = <div className="border-right border-dark">&nbsp;</div>
+            dividerRight = <div className="border-right border-dark mx1">&nbsp;</div>
         }
 
         return (

resources/frontend_client/app/query_builder/icon.react.js

 'use strict';
 
-import { ICON_PATHS, ICON_SVGS } from 'metabase/icon_paths';
+import { loadIcon } from 'metabase/icon_paths';
 
 export default React.createClass({
     displayName: 'Icon',
-    getDefaultProps: function () {
-       return {
-          width: '32px',
-          height: '32px',
-          fill: 'currentcolor'
-       };
-    },
     render: function () {
-        if (ICON_PATHS[this.props.name] != undefined) {
-            var iconPath = ICON_PATHS[this.props.name],
-                path;
+        var icon = loadIcon(this.props.name);
 
-            // handle multi path icons which appear as non strings
-            if(typeof(iconPath) != 'string') {
-                // create a path for each path present
-                path = iconPath.map(function (path) {
-                   return (<path d={path} /> );
-                });
-            } else {
-                path = (<path d={iconPath} />);
-            }
+        // react uses "className" instead of "class"
+        icon.attrs.className = icon.attrs['class'];
+        delete icon.attrs['class'];
 
-            return (
-                <svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
-                    {path}
-                </svg>
-            );
-        } else if (ICON_SVGS[this.props.name] != undefined) {
-            var html = ICON_SVGS[this.props.name];
-            return (
-                <svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name} dangerouslySetInnerHTML={{__html: html}}></svg>
-            );
+        if (icon.svg) {
+            return (<svg {... icon.attrs} {... this.props} dangerouslySetInnerHTML={{__html: icon.svg}}></svg>);
+        } else {
+            return (<svg {... icon.attrs} {... this.props}><path d={icon.path} /></svg>);
         }
-        return (
-            <svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
-            </svg>
-        );
     }
 });