Add avatar initials prop

playground/examples/AvatarExample.jsx

@@ -9,6 +9,9 @@ const AvatarExample = () => (
     <h1>Avatar</h1>
     <div>
       <h4>X-Small</h4>
+      <Avatar initials="JW" size="x-small" src="" />
+      <Avatar initials="EJF" name="Jon Wahlström" size="x-small" src="" />
+
       <Avatar name="Jon Wahlström" size="x-small" src="" />
       <Avatar name="Jon Wahlström" size="x-small" src="http://via.placeholder.com/400x400" />
 

src/components/Avatar/Avatar.jsx

@@ -5,6 +5,7 @@ import * as styles from './Avatar.css';
 
 const propTypes = {
   className: PropTypes.string,
+  initials: PropTypes.string,
   name: PropTypes.string,
   size: PropTypes.oneOf([
     'x-small',
@@ -19,6 +20,7 @@ const propTypes = {
 
 const defaultProps = {
   className: undefined,
+  initials: undefined,
   name: undefined,
   size: 'medium',
   src: undefined,
@@ -29,7 +31,6 @@ class Avatar extends React.Component {
   constructor(props) {
     super(props);
     this.handleError = this.handleError.bind(this);
-    this.getInitials = this.getInitials.bind(this);
     this.state = { error: false };
   }
 
@@ -38,22 +39,13 @@ class Avatar extends React.Component {
     this.setState({ error: false });
   }
 
-  getInitials() {
-    const { name } = this.props;
-    const parts = name.split(' ');
-    let result = '';
-    for (let i = 0; i < parts.length; i++) {
-      result += parts[i].substr(0, 1).toUpperCase();
-    }
-
-    return result.slice(0, 2);
-  }
-
   handleError() {
     this.setState({ error: true });
   }
 
   render() {
+    const { error } = this.state;
+    let { initials } = this.props;
     const {
       className,
       name,
@@ -62,24 +54,34 @@ class Avatar extends React.Component {
       ...other
     } = this.props;
 
+
     const classes = classNames(
       className,
       styles.avatar,
       styles[`avatar-${size}`],
     );
 
-    if (this.state.error) {
+    if (name) {
+      const parts = name.split(' ');
+      let result = '';
+      for (let i = 0; i < parts.length; i++) {
+        result += parts[i].substr(0, 1).toUpperCase();
+      }
+
+      initials = result.slice(0, 2);
+    }
+
+    if (error) {
       return (
         <div className={classes}>
-          <span>{this.getInitials()}</span>
+          <span>{initials}</span>
         </div>
       );
     }
 
     return (
       <Tag
         {...other}
-        alt={name}
         className={classes}
         onError={this.handleError}
       />