feat: add interactive prop to icon

src/components/icon/Icon.css

@@ -8,6 +8,10 @@
     transition: fill 0.2s ease, fill-opacity 0.2s ease;
     fill: currentColor;
 
+    &.interactive {
+        cursor: pointer;
+    }
+
     & svg {
         width: inherit;
         height: inherit;

src/components/icon/Icon.js

@@ -27,10 +27,12 @@ InlineIcon.propTypes = {
 };
 
 const Icon = (props) => {
-    const { svg, className } = props;
+    const { svg, interactive, className, ...rest } = props;
     const finalProps = {
-        ...props,
-        className: classNames(styles.icon, className),
+        tabIndex: interactive ? 0 : undefined,
+        ...rest,
+        svg,
+        className: classNames(styles.icon, interactive && styles.interactive, className),
     };
 
     return typeof svg === 'string' ?
@@ -40,6 +42,7 @@ const Icon = (props) => {
 
 Icon.propTypes = {
     svg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+    interactive: PropTypes.bool,
     className: PropTypes.string,
 };
 

src/components/icon/README.md

@@ -54,5 +54,6 @@ Alternatively you may change the `width` and `height` CSS properties.
 | name | type | default | description |
 | ---- | ---- | ------- | ----------- |
 | svg | string, object | | The svg contents or the object exported by [external-svg-sprite-loader](https://github.com/Karify/external-svg-sprite-loader) |
+| interactive | boolean | false | True will make the icon behave similarly to a button |
 
 Any other properties supplied will be spread to the root element.

stories/icon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withReadme } from 'storybook-readme';
-import { withKnobs, object } from '@storybook/addon-knobs';
+import { withKnobs, boolean, object } from '@storybook/addon-knobs';
 import * as components from '../src';
 import readme from '../src/components/icon/README.md';
 
@@ -61,6 +61,7 @@ storiesOf('Icon', module)
 ))
 .add('Knobs playground ⚽', () => {
     const style = object('style', { fill: 'red', fillOpacity: 1, fontSize: '4.8rem' });
+    const interactive = boolean('interactive');
 
-    return <ReplyIcon style={ style } />;
+    return <ReplyIcon style={ style } interactive={ interactive } />;
 });