expand Icon component and use it in HelpIcon, .is-icon class is redundant

scm-ui-components/packages/ui-components/src/HelpIcon.js

@@ -1,22 +1,24 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
-import classNames from "classnames";
+import Icon from "./Icon";
 
 type Props = {
   classes: any
 };
 
 const styles = {
-    textinfo: {
+  textinfo: {
-      color: "#98d8f3 !important" 
+    color: "#98d8f3 !important"
-    }
+  }
 };
 
 class HelpIcon extends React.Component<Props> {
   render() {
     const { classes } = this.props;
-    return <i className={classNames("fa fa-question-circle has-text-info", classes.textinfo)}></i>;
+    return (
+      <Icon className={classes.textinfo} name="question-circle" />
+    );
   }
 }
 

scm-ui-components/packages/ui-components/src/Icon.js

@@ -4,22 +4,26 @@ import classNames from "classnames";
 
 type Props = {
   title?: string,
-  name: string
+  name: string,
-}
+  color: string,
+  className?: string
+};
 
 export default class Icon extends React.Component<Props> {
+  static defaultProps = {
+    color: "grey-light"
+  };
 
   render() {
-    const { title, name } = this.props;
+    const { title, name, color, className } = this.props;
-    if(title) {
+    if (title) {
       return (
-        <i title={title} className={classNames("is-icon", "fas", "fa-fw", "fa-" + name)}/>
+        <i
+          title={title}
+          className={classNames("fas", "fa-fw", "fa-" + name, `has-text-${color}`, className)}
+        />
       );
     }
-    return (
+    return <i className={classNames("fas", "fa-" + name, `has-text-${color}`)} />;
-      <i className={classNames("is-icon", "fas", "fa-" + name)}/>
-    );
   }
-
 }
-

scm-ui-components/packages/ui-components/src/Tag.js

@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 type Props = {
   className?: string,
-  color?: string,
+  color: string,
   icon?: string,
   label: string,
   title?: string,

scm-ui/styles/scm.scss

@@ -819,10 +819,6 @@ form .field:not(.is-grouped) {
   }
 }
 
-.is-icon {
-  color: $grey-light;
-}
-
 // label with help-icon compensation
 .label-icon-spacing {
   margin-top: 30px;