diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index f3ed1b70..f6813b69 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -1,24 +1,27 @@
import React, {PropTypes} from 'react';
+import { themr } from 'react-css-themr';
import FontIcon from '../font_icon';
-import style from './style';
-const Avatar = ({children, className, icon, image, title, ...other}) => {
- return (
-
- {children}
- {typeof image === 'string' ?
: image}
- {typeof icon === 'string' ?
: icon}
- {title ?
{title[0]} : null}
-
- );
-};
+const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
+
+ {children}
+ {typeof image === 'string' ?
: image}
+ {typeof icon === 'string' ?
: icon}
+ {title ?
{title[0]} : null}
+
+);
Avatar.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ theme: React.PropTypes.shape({
+ avatar: React.PropTypes.string.isRequired,
+ image: React.PropTypes.string.isRequired,
+ letter: React.PropTypes.string.isRequired
+ }),
title: PropTypes.string
};
-export default Avatar;
+export default themr('ToolboxAvatar')(Avatar);
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index c7a8b64b..031bff8f 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -5,6 +5,7 @@ Avatars can be used to represent people. This offer users the ability to persona
```jsx
import Avatar from 'react-toolbox/lib/avatar';
+import theme from 'react-toolbox/lib/avatar/theme';
const GithubIcon = () => (