make icon a prop

Author: Joe Seifi

01-react-css3/solution/components/Button.js

@@ -1,8 +1,10 @@
 import React, { Component, PropTypes } from 'react'
 import classnames from 'classnames'
 import '../../../public/workshop/css/button.css'
+import '../../../public/workshop/css/button-icons.css'
 
 export const Button = ({
+  icon,
   classNames, 
   depressed, 
   disabled,
@@ -11,8 +13,9 @@ export const Button = ({
   ...otherProps
 }) => {
 
-  const buttonClassNames = classnames('btn', classNames, 
-    { 
+  const buttonClassNames = classnames('btn', classNames,
+    {
+      [`icon icon-${icon}`]: icon,
       'depressed': depressed, 
       'disabled': disabled
     }

01-react-css3/solution/components/ButtonAddToCart.js

@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react'
 import { Button } from './index'
-import '../../../public/workshop/css/button-icons.css'
 import '../../../public/workshop/css/button-add-to-cart.css'
 
 export class ButtonAddToCart extends Component {
@@ -29,7 +28,8 @@ export class ButtonAddToCart extends Component {
 
     return (
       <Button 
-        classNames="icon icon-add button_add_to_cart"
+        icon="add"
+        classNames="button_add_to_cart"
         depressed={ depressed }
         disabled={ disabled }
         onClick={ this.onButtonClicked }