👌 improve IconButton implementation

Author: ghalestrilo

client/components/mobile/IconButton.jsx

@@ -11,14 +11,20 @@ width: 3rem;
 }
 `;
 
-const IconButton = props => (<ButtonWrapper
-  iconBefore={props.element}
-  kind={Button.kinds.inline}
-  {...props}
-/>);
+const IconButton = (props) => {
+  const { icon, ...otherProps } = props;
+  const Icon = icon;
+
+  return (<ButtonWrapper
+    iconBefore={<Icon />}
+    kind={Button.kinds.inline}
+    focusable="false"
+    {...otherProps}
+  />);
+};
 
 IconButton.propTypes = {
-  element: PropTypes.element.isRequired
+  icon: PropTypes.func.isRequired
 };
 
 export default IconButton;

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -20,9 +20,7 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { ExitIcon } from '../../../common/icons';
-
-import { PreferencesIcon, PlayIcon } from '../../../common/icons';
+import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -53,17 +51,19 @@ const IDEViewMobile = (props) => {
   return (
     <Screen>
       <Header>
-        <IconButton to="/mobile" aria-label="Return to original editor">
-          <ExitIcon viewBox="0 0 16 16" />
-        </IconButton>
+        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
         <div style={{ marginLeft: '1rem' }}>
           <h2>{project.name}</h2>
           <h3>{selectedFile.name}</h3>
         </div>
 
         <IconContainer>
-          <IconButton onClick={() => setOverlay('preferences')} element={<PreferencesIcon focusable="false" aria-hidden="true" />} />
-          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} element={<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />} />
+          <IconButton
+            onClick={() => setOverlay('preferences')}
+            icon={PreferencesIcon}
+            aria-label="Open preferences menu"
+          />
+          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
         </IconContainer>
       </Header>
 

client/modules/Mobile/MobileSketchView.jsx

@@ -50,7 +50,7 @@ const MobileSketchView = (props) => {
   return (
     <Screen>
       <Header>
-        <IconButton to="/mobile" element={<ExitIcon />} width={12} height={12} aria-label="Return to original editor" />
+        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
         <div style={{ marginLeft: '1rem' }}>
           <h2>{projectName}</h2>
           <h3><br /></h3>