feat(Icon): adds render prop.

src/components/Icon/Icon.js

@@ -20,29 +20,45 @@ export type IconProps = {
   title?: string,
   /** possible types of the css cursor property */
   cursor?: 'pointer' | 'default' | 'auto',
+  //** allow pass props to an Icon */
+  children?: (Glyph: React$Component<Object, null>) => React$Node,
 };
 
-const Icon = ({ name, className, ...rest }: IconProps) => {
-
+const Icon = ({ name, className, children, title, ...rest }: IconProps) => {
   return (
     <IconsConsumer>
       { ({ icons = {}}) => {
         const Glyph: any = icons[name] || glyphs[name];
 
+        if (typeof children === 'function') {
+          return (
+            <IconWrapperTag tagName="span" { ...rest }>
+              <IconSvgTag
+                tagName="i"
+                title={ title }
+                modifiers={ rest }
+                className={ className }
+              >
+                { children(Glyph) }
+              </IconSvgTag>
+            </IconWrapperTag>
+          );
+        }
+
         return (
           <IconWrapperTag tagName="span" { ...rest }>
             <Choose>
               <When condition={ !!className && !Glyph }>
                 <IconFontTag
                   tagName="i"
-                  title={ rest.title }
+                  title={ title }
                   modifiers={ rest }
                 />
               </When>
               <When condition={ !!Glyph }>
                 <IconSvgTag
                   tagName="i"
-                  title={ rest.title }
+                  title={ title }
                   modifiers={ rest }
                   className={ className }
                 >

src/components/Icon/__snapshots__/Icon.test.js.snap

@@ -11,25 +11,21 @@ exports[`<Icon /> should shallow input 1`] = `
     color="DANGER"
     size="md"
     tagName="span"
-    title="Alert icon"
   >
     <Tag
       className="emotion-0 emotion-1"
       color="DANGER"
       size="md"
       tagName="span"
-      title="Alert icon"
     >
       <span
         className="emotion-0 emotion-1"
-        title="Alert icon"
       >
         <Boost(iconSvg)
           modifiers={
             Object {
               "color": "DANGER",
               "size": "md",
-              "title": "Alert icon",
             }
           }
           tagName="i"
@@ -41,7 +37,6 @@ exports[`<Icon /> should shallow input 1`] = `
               Object {
                 "color": "DANGER",
                 "size": "md",
-                "title": "Alert icon",
               }
             }
             tagName="i"