@instructure/ui-avatar 7.12.0 → 7.13.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.13.0](https://github.com/instructure/instructure-ui/compare/v7.12.0...v7.13.0) (2021-11-18)
+
+### Features
+
+- **ui-avatar:** add `renderIcon` and `hasInverseColor` props to Avatar ([bb492d7](https://github.com/instructure/instructure-ui/commit/bb492d7)), backports [#781](https://github.com/instructure/instructure-ui/issues/781)
+
 # [7.12.0](https://github.com/instructure/instructure-ui/compare/v7.11.0...v7.12.0) (2021-10-15)
 
 **Note:** Version bump only for package @instructure/ui-avatar

package/es/Avatar/__examples__/Avatar.examples.js

@@ -21,13 +21,37 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import React from 'react';
+import { IconGroupLine } from '@instructure/ui-icons';
 export default {
   excludeProps: ['inline', 'variant'],
   sectionProp: 'shape',
   propValues: {
-    src: [null, require('./testImage.jpg')]
+    src: [null, require('./testImage.jpg')],
+    renderIcon: [void 0, /*#__PURE__*/React.createElement(IconGroupLine, {
+      key: "icon"
+    })]
   },
-  getComponentProps: function getComponentProps(props) {
+  filter: function filter(props) {
+    if (props.color !== 'default' && props.size !== 'medium') {
+      return true;
+    }
+
+    if (props.renderIcon && props.src) {
+      return true;
+    }
+
+    if (props.src && props.color !== 'default') {
+      return true;
+    }
+
+    if (props.hasInverseColor && (props.size !== 'medium' || props.display !== 'block')) {
+      return true;
+    }
+
+    return false;
+  },
+  getComponentProps: function getComponentProps() {
     return {
       name: 'Kyle Montgomery'
     };

package/es/Avatar/index.js

@@ -35,34 +35,36 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { View } from '@instructure/ui-view';
 import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable';
-import { passthroughProps, deprecated } from '@instructure/ui-react-utils';
+import { passthroughProps, deprecated, callRenderProp } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 var styles = {
-  componentId: 'dsJBj',
+  componentId: 'elMgC',
   template: function template(theme) {
-    return "\n\n.dsJBj_bGBk{background-clip:content-box;background-color:".concat(theme.background || 'inherit', ";background-position:50%;background-repeat:no-repeat;background-size:cover;box-sizing:border-box;height:2.5em;line-height:0;overflow:hidden;text-align:center}\n\n[dir=ltr] .dsJBj_bGBk,[dir=rtl] .dsJBj_bGBk{text-align:center}\n\n.dsJBj_bGBk.dsJBj_uUeq{font-size:inherit}\n\n.dsJBj_bGBk.dsJBj_uUeq,.dsJBj_bGBk.dsJBj_UKsG{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_UKsG{font-size:0.5rem}\n\n.dsJBj_bGBk.dsJBj_dfBC{font-size:0.75rem}\n\n.dsJBj_bGBk.dsJBj_doqw,.dsJBj_bGBk.dsJBj_dfBC{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_doqw{font-size:1rem}\n\n.dsJBj_bGBk.dsJBj_ycrn{font-size:1.25rem}\n\n.dsJBj_bGBk.dsJBj_cMDj,.dsJBj_bGBk.dsJBj_ycrn{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_cMDj{font-size:1.5rem}\n\n.dsJBj_bGBk.dsJBj_eoMd{font-size:1.75rem}\n\n.dsJBj_bGBk.dsJBj_eoMd,.dsJBj_bGBk.dsJBj_fdca{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_fdca{font-size:2rem}\n\n.dsJBj_bGBk.dsJBj_cHTY{border:0;box-shadow:inset 0 0 ").concat(theme.boxShadowBlur || 'inherit', " 0 ").concat(theme.boxShadowColor || 'inherit', "}\n\n.dsJBj_bGBk:not(.dsJBj_cHTY){border-color:").concat(theme.borderColor || 'inherit', ";border-style:solid}\n\n.dsJBj_eYKj{font-family:").concat(theme.fontFamily || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";letter-spacing:0.0313em;line-height:2.375em}\n\n.dsJBj_ddES .dsJBj_eYKj{color:").concat(theme.color || 'inherit', "}\n\n.dsJBj_ekuM .dsJBj_eYKj{color:").concat(theme.colorShamrock || 'inherit', "}\n\n.dsJBj_bXnN .dsJBj_eYKj{color:").concat(theme.colorBarney || 'inherit', "}\n\n.dsJBj_byip .dsJBj_eYKj{color:").concat(theme.colorCrimson || 'inherit', "}\n\n.dsJBj_dKVo .dsJBj_eYKj{color:").concat(theme.colorFire || 'inherit', "}\n\n.dsJBj_eaOe .dsJBj_eYKj{color:").concat(theme.colorLicorice || 'inherit', "}\n\n.dsJBj_fuVp .dsJBj_eYKj{color:").concat(theme.colorAsh || 'inherit', "}\n\n.dsJBj_MrJH{display:none}\n\n.dsJBj_cJVF{border-radius:100%;overflow:hidden;position:relative;width:2.5em}\n\n.dsJBj_bRWf{width:3em}");
+    return "\n\n.elMgC_bGBk{background-clip:content-box;background-color:".concat(theme.background || 'inherit', ";background-position:50%;background-repeat:no-repeat;background-size:cover;box-sizing:border-box;height:2.5em;line-height:0;overflow:hidden;text-align:center}\n\n[dir=ltr] .elMgC_bGBk,[dir=rtl] .elMgC_bGBk{text-align:center}\n\n.elMgC_bGBk.elMgC_uUeq{font-size:inherit}\n\n.elMgC_bGBk.elMgC_uUeq,.elMgC_bGBk.elMgC_UKsG{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.elMgC_bGBk.elMgC_UKsG{font-size:0.5rem}\n\n.elMgC_bGBk.elMgC_dfBC{font-size:0.75rem}\n\n.elMgC_bGBk.elMgC_doqw,.elMgC_bGBk.elMgC_dfBC{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.elMgC_bGBk.elMgC_doqw{font-size:1rem}\n\n.elMgC_bGBk.elMgC_ycrn{font-size:1.25rem}\n\n.elMgC_bGBk.elMgC_cMDj,.elMgC_bGBk.elMgC_ycrn{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.elMgC_bGBk.elMgC_cMDj{font-size:1.5rem}\n\n.elMgC_bGBk.elMgC_eoMd{font-size:1.75rem}\n\n.elMgC_bGBk.elMgC_eoMd,.elMgC_bGBk.elMgC_fdca{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.elMgC_bGBk.elMgC_fdca{font-size:2rem}\n\n.elMgC_bGBk.elMgC_cHTY{border:0;box-shadow:inset 0 0 ").concat(theme.boxShadowBlur || 'inherit', " 0 ").concat(theme.boxShadowColor || 'inherit', "}\n\n.elMgC_bGBk:not(.elMgC_cHTY){border-color:").concat(theme.borderColor || 'inherit', ";border-style:solid}\n\n.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA{background-clip:border-box;border:0;padding:0}\n\n.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_uUeq,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_doqw,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_dfBC,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_UKsG{padding:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_cMDj,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_ycrn,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_eoMd,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_fdca{padding:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.elMgC_eYKj{font-family:").concat(theme.fontFamily || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";letter-spacing:0.0313em;line-height:2.375em}\n\n.elMgC_ddES{color:").concat(theme.color || 'inherit', "}\n\n.elMgC_ekuM{color:").concat(theme.colorShamrock || 'inherit', "}\n\n.elMgC_bXnN{color:").concat(theme.colorBarney || 'inherit', "}\n\n.elMgC_byip{color:").concat(theme.colorCrimson || 'inherit', "}\n\n.elMgC_dKVo{color:").concat(theme.colorFire || 'inherit', "}\n\n.elMgC_eaOe{color:").concat(theme.colorLicorice || 'inherit', "}\n\n.elMgC_fuVp{color:").concat(theme.colorAsh || 'inherit', "}\n\n.elMgC_fKgA{color:").concat(theme.background || 'inherit', "}\n\n.elMgC_fKgA.elMgC_ddES{background-color:").concat(theme.color || 'inherit', "}\n\n.elMgC_fKgA.elMgC_ekuM{background-color:").concat(theme.colorShamrock || 'inherit', "}\n\n.elMgC_fKgA.elMgC_bXnN{background-color:").concat(theme.colorBarney || 'inherit', "}\n\n.elMgC_fKgA.elMgC_byip{background-color:").concat(theme.colorCrimson || 'inherit', "}\n\n.elMgC_fKgA.elMgC_dKVo{background-color:").concat(theme.colorFire || 'inherit', "}\n\n.elMgC_fKgA.elMgC_eaOe{background-color:").concat(theme.colorLicorice || 'inherit', "}\n\n.elMgC_fKgA.elMgC_fuVp{background-color:").concat(theme.colorAsh || 'inherit', "}\n\n.elMgC_MrJH{display:none}\n\n.elMgC_cJVF{border-radius:100%;overflow:hidden;position:relative;width:2.5em}\n\n.elMgC_bRWf{width:3em}\n\n.elMgC_eoCh{align-items:center;display:flex;height:100%;justify-content:center;width:100%}\n\n.elMgC_eoCh svg{fill:currentColor;height:1em;width:1em}");
   },
-  'root': 'dsJBj_bGBk',
-  'auto': 'dsJBj_uUeq',
-  'xx-small': 'dsJBj_UKsG',
-  'x-small': 'dsJBj_dfBC',
-  'small': 'dsJBj_doqw',
-  'medium': 'dsJBj_ycrn',
-  'large': 'dsJBj_cMDj',
-  'x-large': 'dsJBj_eoMd',
-  'xx-large': 'dsJBj_fdca',
-  'loaded': 'dsJBj_cHTY',
-  'initials': 'dsJBj_eYKj',
-  'default': 'dsJBj_ddES',
-  'shamrock': 'dsJBj_ekuM',
-  'barney': 'dsJBj_bXnN',
-  'crimson': 'dsJBj_byip',
-  'fire': 'dsJBj_dKVo',
-  'licorice': 'dsJBj_eaOe',
-  'ash': 'dsJBj_fuVp',
-  'loadImage': 'dsJBj_MrJH',
-  'circle': 'dsJBj_cJVF',
-  'rectangle': 'dsJBj_bRWf'
+  'root': 'elMgC_bGBk',
+  'auto': 'elMgC_uUeq',
+  'xx-small': 'elMgC_UKsG',
+  'x-small': 'elMgC_dfBC',
+  'small': 'elMgC_doqw',
+  'medium': 'elMgC_ycrn',
+  'large': 'elMgC_cMDj',
+  'x-large': 'elMgC_eoMd',
+  'xx-large': 'elMgC_fdca',
+  'loaded': 'elMgC_cHTY',
+  'hasInverseColor': 'elMgC_fKgA',
+  'initials': 'elMgC_eYKj',
+  'default': 'elMgC_ddES',
+  'shamrock': 'elMgC_ekuM',
+  'barney': 'elMgC_bXnN',
+  'crimson': 'elMgC_byip',
+  'fire': 'elMgC_dKVo',
+  'licorice': 'elMgC_eaOe',
+  'ash': 'elMgC_fuVp',
+  'loadImage': 'elMgC_MrJH',
+  'circle': 'elMgC_cJVF',
+  'rectangle': 'elMgC_bRWf',
+  'iconSVG': 'elMgC_eoCh'
 };
 import theme from "./theme.js";
 /**
@@ -105,6 +107,16 @@ var Avatar = (_dec = testable(), _dec2 = deprecated('8.0.0', {
   }
 
   _createClass(Avatar, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // in case the image is unset in an update, show icons/initials again
+      if (this.state.loaded && !this.props.src) {
+        this.setState({
+          loaded: false
+        });
+      }
+    }
+  }, {
     key: "makeInitialsFromName",
     value: function makeInitialsFromName() {
       var name = this.props.name;
@@ -146,6 +158,19 @@ var Avatar = (_dec = testable(), _dec2 = deprecated('8.0.0', {
         "aria-hidden": "true"
       }, this.makeInitialsFromName());
     }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      var renderIcon = this.props.renderIcon;
+
+      if (!renderIcon) {
+        return this.renderInitials();
+      }
+
+      return /*#__PURE__*/React.createElement("span", {
+        className: styles.iconSVG
+      }, callRenderProp(renderIcon));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -160,14 +185,14 @@ var Avatar = (_dec = testable(), _dec2 = deprecated('8.0.0', {
         style: {
           backgroundImage: loaded ? "url('".concat(this.props.src, "')") : void 0
         },
-        className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles[this.props.size], true), _defineProperty(_classnames, styles[this.props.variant || this.props.shape], true), _defineProperty(_classnames, styles[this.props.color], true), _defineProperty(_classnames, styles.loaded, loaded), _classnames)),
+        className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles[this.props.size], true), _defineProperty(_classnames, styles[this.props.variant || this.props.shape], true), _defineProperty(_classnames, styles[this.props.color], true), _defineProperty(_classnames, styles.loaded, loaded), _defineProperty(_classnames, styles.hasInverseColor, this.props.hasInverseColor), _classnames)),
         "aria-label": this.props.alt ? this.props.alt : null,
         role: this.props.alt ? 'img' : null,
         as: this.props.as,
         elementRef: this.props.elementRef,
         margin: this.props.margin,
         display: this.props.display === 'block' || this.props.inline === false ? 'block' : 'inline-block'
-      }), this.renderLoadImage(), !loaded && this.renderInitials());
+      }), this.renderLoadImage(), !loaded && this.renderContent());
     }
   }]);
 
@@ -187,6 +212,11 @@ var Avatar = (_dec = testable(), _dec2 = deprecated('8.0.0', {
   alt: PropTypes.string,
   size: PropTypes.oneOf(['auto', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
   color: PropTypes.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash']),
+
+  /**
+   * In inverse color mode the background and text/icon colors are inverted
+   */
+  hasInverseColor: PropTypes.bool,
   shape: PropTypes.oneOf(['circle', 'rectangle']),
 
   /**
@@ -213,6 +243,11 @@ var Avatar = (_dec = testable(), _dec2 = deprecated('8.0.0', {
    */
   elementRef: PropTypes.func,
 
+  /**
+   * An icon, or function that returns an icon that gets displayed. If the `src` prop is provided, `src` will have priority.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
   /* eslint-disable react/require-default-props */
 
   /**
@@ -233,9 +268,11 @@ var Avatar = (_dec = testable(), _dec2 = deprecated('8.0.0', {
   elementRef: void 0,
   size: 'medium',
   color: 'default',
+  hasInverseColor: false,
   shape: 'circle',
   display: 'inline-block',
-  onImageLoaded: function onImageLoaded(event) {}
+  onImageLoaded: function onImageLoaded(event) {},
+  renderIcon: null
 }, _temp)) || _class) || _class) || _class);
 export default Avatar;
 export { Avatar };

package/lib/Avatar/__examples__/Avatar.examples.js

@@ -1,10 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
+var _IconGroupLine = require("@instructure/ui-icons/lib/IconGroupLine.js");
+
 /*
  * The MIT License (MIT)
  *
@@ -32,9 +38,31 @@ var _default = {
   excludeProps: ['inline', 'variant'],
   sectionProp: 'shape',
   propValues: {
-    src: [null, require('./testImage.jpg')]
+    src: [null, require('./testImage.jpg')],
+    renderIcon: [void 0, /*#__PURE__*/_react.default.createElement(_IconGroupLine.IconGroupLine, {
+      key: "icon"
+    })]
+  },
+  filter: function filter(props) {
+    if (props.color !== 'default' && props.size !== 'medium') {
+      return true;
+    }
+
+    if (props.renderIcon && props.src) {
+      return true;
+    }
+
+    if (props.src && props.color !== 'default') {
+      return true;
+    }
+
+    if (props.hasInverseColor && (props.size !== 'medium' || props.display !== 'block')) {
+      return true;
+    }
+
+    return false;
   },
-  getComponentProps: function getComponentProps(props) {
+  getComponentProps: function getComponentProps() {
     return {
       name: 'Kyle Montgomery'
     };

package/lib/Avatar/index.js

@@ -37,6 +37,8 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 
 var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
 
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
@@ -44,31 +46,33 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'dsJBj',
+  componentId: 'elMgC',
   template: function template(theme) {
-    return "\n\n.dsJBj_bGBk{background-clip:content-box;background-color:".concat(theme.background || 'inherit', ";background-position:50%;background-repeat:no-repeat;background-size:cover;box-sizing:border-box;height:2.5em;line-height:0;overflow:hidden;text-align:center}\n\n[dir=ltr] .dsJBj_bGBk,[dir=rtl] .dsJBj_bGBk{text-align:center}\n\n.dsJBj_bGBk.dsJBj_uUeq{font-size:inherit}\n\n.dsJBj_bGBk.dsJBj_uUeq,.dsJBj_bGBk.dsJBj_UKsG{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_UKsG{font-size:0.5rem}\n\n.dsJBj_bGBk.dsJBj_dfBC{font-size:0.75rem}\n\n.dsJBj_bGBk.dsJBj_doqw,.dsJBj_bGBk.dsJBj_dfBC{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_doqw{font-size:1rem}\n\n.dsJBj_bGBk.dsJBj_ycrn{font-size:1.25rem}\n\n.dsJBj_bGBk.dsJBj_cMDj,.dsJBj_bGBk.dsJBj_ycrn{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_cMDj{font-size:1.5rem}\n\n.dsJBj_bGBk.dsJBj_eoMd{font-size:1.75rem}\n\n.dsJBj_bGBk.dsJBj_eoMd,.dsJBj_bGBk.dsJBj_fdca{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.dsJBj_bGBk.dsJBj_fdca{font-size:2rem}\n\n.dsJBj_bGBk.dsJBj_cHTY{border:0;box-shadow:inset 0 0 ").concat(theme.boxShadowBlur || 'inherit', " 0 ").concat(theme.boxShadowColor || 'inherit', "}\n\n.dsJBj_bGBk:not(.dsJBj_cHTY){border-color:").concat(theme.borderColor || 'inherit', ";border-style:solid}\n\n.dsJBj_eYKj{font-family:").concat(theme.fontFamily || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";letter-spacing:0.0313em;line-height:2.375em}\n\n.dsJBj_ddES .dsJBj_eYKj{color:").concat(theme.color || 'inherit', "}\n\n.dsJBj_ekuM .dsJBj_eYKj{color:").concat(theme.colorShamrock || 'inherit', "}\n\n.dsJBj_bXnN .dsJBj_eYKj{color:").concat(theme.colorBarney || 'inherit', "}\n\n.dsJBj_byip .dsJBj_eYKj{color:").concat(theme.colorCrimson || 'inherit', "}\n\n.dsJBj_dKVo .dsJBj_eYKj{color:").concat(theme.colorFire || 'inherit', "}\n\n.dsJBj_eaOe .dsJBj_eYKj{color:").concat(theme.colorLicorice || 'inherit', "}\n\n.dsJBj_fuVp .dsJBj_eYKj{color:").concat(theme.colorAsh || 'inherit', "}\n\n.dsJBj_MrJH{display:none}\n\n.dsJBj_cJVF{border-radius:100%;overflow:hidden;position:relative;width:2.5em}\n\n.dsJBj_bRWf{width:3em}");
+    return "\n\n.elMgC_bGBk{background-clip:content-box;background-color:".concat(theme.background || 'inherit', ";background-position:50%;background-repeat:no-repeat;background-size:cover;box-sizing:border-box;height:2.5em;line-height:0;overflow:hidden;text-align:center}\n\n[dir=ltr] .elMgC_bGBk,[dir=rtl] .elMgC_bGBk{text-align:center}\n\n.elMgC_bGBk.elMgC_uUeq{font-size:inherit}\n\n.elMgC_bGBk.elMgC_uUeq,.elMgC_bGBk.elMgC_UKsG{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.elMgC_bGBk.elMgC_UKsG{font-size:0.5rem}\n\n.elMgC_bGBk.elMgC_dfBC{font-size:0.75rem}\n\n.elMgC_bGBk.elMgC_doqw,.elMgC_bGBk.elMgC_dfBC{border-width:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.elMgC_bGBk.elMgC_doqw{font-size:1rem}\n\n.elMgC_bGBk.elMgC_ycrn{font-size:1.25rem}\n\n.elMgC_bGBk.elMgC_cMDj,.elMgC_bGBk.elMgC_ycrn{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.elMgC_bGBk.elMgC_cMDj{font-size:1.5rem}\n\n.elMgC_bGBk.elMgC_eoMd{font-size:1.75rem}\n\n.elMgC_bGBk.elMgC_eoMd,.elMgC_bGBk.elMgC_fdca{border-width:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.elMgC_bGBk.elMgC_fdca{font-size:2rem}\n\n.elMgC_bGBk.elMgC_cHTY{border:0;box-shadow:inset 0 0 ").concat(theme.boxShadowBlur || 'inherit', " 0 ").concat(theme.boxShadowColor || 'inherit', "}\n\n.elMgC_bGBk:not(.elMgC_cHTY){border-color:").concat(theme.borderColor || 'inherit', ";border-style:solid}\n\n.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA{background-clip:border-box;border:0;padding:0}\n\n.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_uUeq,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_doqw,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_dfBC,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_UKsG{padding:").concat(theme.borderWidthSmall || 'inherit', "}\n\n.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_cMDj,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_ycrn,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_eoMd,.elMgC_bGBk:not(.elMgC_cHTY).elMgC_fKgA.elMgC_fdca{padding:").concat(theme.borderWidthMedium || 'inherit', "}\n\n.elMgC_eYKj{font-family:").concat(theme.fontFamily || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";letter-spacing:0.0313em;line-height:2.375em}\n\n.elMgC_ddES{color:").concat(theme.color || 'inherit', "}\n\n.elMgC_ekuM{color:").concat(theme.colorShamrock || 'inherit', "}\n\n.elMgC_bXnN{color:").concat(theme.colorBarney || 'inherit', "}\n\n.elMgC_byip{color:").concat(theme.colorCrimson || 'inherit', "}\n\n.elMgC_dKVo{color:").concat(theme.colorFire || 'inherit', "}\n\n.elMgC_eaOe{color:").concat(theme.colorLicorice || 'inherit', "}\n\n.elMgC_fuVp{color:").concat(theme.colorAsh || 'inherit', "}\n\n.elMgC_fKgA{color:").concat(theme.background || 'inherit', "}\n\n.elMgC_fKgA.elMgC_ddES{background-color:").concat(theme.color || 'inherit', "}\n\n.elMgC_fKgA.elMgC_ekuM{background-color:").concat(theme.colorShamrock || 'inherit', "}\n\n.elMgC_fKgA.elMgC_bXnN{background-color:").concat(theme.colorBarney || 'inherit', "}\n\n.elMgC_fKgA.elMgC_byip{background-color:").concat(theme.colorCrimson || 'inherit', "}\n\n.elMgC_fKgA.elMgC_dKVo{background-color:").concat(theme.colorFire || 'inherit', "}\n\n.elMgC_fKgA.elMgC_eaOe{background-color:").concat(theme.colorLicorice || 'inherit', "}\n\n.elMgC_fKgA.elMgC_fuVp{background-color:").concat(theme.colorAsh || 'inherit', "}\n\n.elMgC_MrJH{display:none}\n\n.elMgC_cJVF{border-radius:100%;overflow:hidden;position:relative;width:2.5em}\n\n.elMgC_bRWf{width:3em}\n\n.elMgC_eoCh{align-items:center;display:flex;height:100%;justify-content:center;width:100%}\n\n.elMgC_eoCh svg{fill:currentColor;height:1em;width:1em}");
   },
-  'root': 'dsJBj_bGBk',
-  'auto': 'dsJBj_uUeq',
-  'xx-small': 'dsJBj_UKsG',
-  'x-small': 'dsJBj_dfBC',
-  'small': 'dsJBj_doqw',
-  'medium': 'dsJBj_ycrn',
-  'large': 'dsJBj_cMDj',
-  'x-large': 'dsJBj_eoMd',
-  'xx-large': 'dsJBj_fdca',
-  'loaded': 'dsJBj_cHTY',
-  'initials': 'dsJBj_eYKj',
-  'default': 'dsJBj_ddES',
-  'shamrock': 'dsJBj_ekuM',
-  'barney': 'dsJBj_bXnN',
-  'crimson': 'dsJBj_byip',
-  'fire': 'dsJBj_dKVo',
-  'licorice': 'dsJBj_eaOe',
-  'ash': 'dsJBj_fuVp',
-  'loadImage': 'dsJBj_MrJH',
-  'circle': 'dsJBj_cJVF',
-  'rectangle': 'dsJBj_bRWf'
+  'root': 'elMgC_bGBk',
+  'auto': 'elMgC_uUeq',
+  'xx-small': 'elMgC_UKsG',
+  'x-small': 'elMgC_dfBC',
+  'small': 'elMgC_doqw',
+  'medium': 'elMgC_ycrn',
+  'large': 'elMgC_cMDj',
+  'x-large': 'elMgC_eoMd',
+  'xx-large': 'elMgC_fdca',
+  'loaded': 'elMgC_cHTY',
+  'hasInverseColor': 'elMgC_fKgA',
+  'initials': 'elMgC_eYKj',
+  'default': 'elMgC_ddES',
+  'shamrock': 'elMgC_ekuM',
+  'barney': 'elMgC_bXnN',
+  'crimson': 'elMgC_byip',
+  'fire': 'elMgC_dKVo',
+  'licorice': 'elMgC_eaOe',
+  'ash': 'elMgC_fuVp',
+  'loadImage': 'elMgC_MrJH',
+  'circle': 'elMgC_cJVF',
+  'rectangle': 'elMgC_bRWf',
+  'iconSVG': 'elMgC_eoCh'
 };
 
 /**
@@ -110,6 +114,16 @@ var Avatar = (_dec = (0, _testable.testable)(), _dec2 = (0, _deprecated.deprecat
   }
 
   (0, _createClass2.default)(Avatar, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // in case the image is unset in an update, show icons/initials again
+      if (this.state.loaded && !this.props.src) {
+        this.setState({
+          loaded: false
+        });
+      }
+    }
+  }, {
     key: "makeInitialsFromName",
     value: function makeInitialsFromName() {
       var name = this.props.name;
@@ -151,6 +165,19 @@ var Avatar = (_dec = (0, _testable.testable)(), _dec2 = (0, _deprecated.deprecat
         "aria-hidden": "true"
       }, this.makeInitialsFromName());
     }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      var renderIcon = this.props.renderIcon;
+
+      if (!renderIcon) {
+        return this.renderInitials();
+      }
+
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.iconSVG
+      }, (0, _callRenderProp.callRenderProp)(renderIcon));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -164,14 +191,14 @@ var Avatar = (_dec = (0, _testable.testable)(), _dec2 = (0, _deprecated.deprecat
         style: {
           backgroundImage: loaded ? "url('".concat(this.props.src, "')") : void 0
         },
-        className: (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.root, true), (0, _defineProperty2.default)(_classnames, styles[this.props.size], true), (0, _defineProperty2.default)(_classnames, styles[this.props.variant || this.props.shape], true), (0, _defineProperty2.default)(_classnames, styles[this.props.color], true), (0, _defineProperty2.default)(_classnames, styles.loaded, loaded), _classnames)),
+        className: (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.root, true), (0, _defineProperty2.default)(_classnames, styles[this.props.size], true), (0, _defineProperty2.default)(_classnames, styles[this.props.variant || this.props.shape], true), (0, _defineProperty2.default)(_classnames, styles[this.props.color], true), (0, _defineProperty2.default)(_classnames, styles.loaded, loaded), (0, _defineProperty2.default)(_classnames, styles.hasInverseColor, this.props.hasInverseColor), _classnames)),
         "aria-label": this.props.alt ? this.props.alt : null,
         role: this.props.alt ? 'img' : null,
         as: this.props.as,
         elementRef: this.props.elementRef,
         margin: this.props.margin,
         display: this.props.display === 'block' || this.props.inline === false ? 'block' : 'inline-block'
-      }), this.renderLoadImage(), !loaded && this.renderInitials());
+      }), this.renderLoadImage(), !loaded && this.renderContent());
     }
   }]);
   Avatar.displayName = "Avatar";
@@ -190,6 +217,11 @@ var Avatar = (_dec = (0, _testable.testable)(), _dec2 = (0, _deprecated.deprecat
   alt: _propTypes.default.string,
   size: _propTypes.default.oneOf(['auto', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
   color: _propTypes.default.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash']),
+
+  /**
+   * In inverse color mode the background and text/icon colors are inverted
+   */
+  hasInverseColor: _propTypes.default.bool,
   shape: _propTypes.default.oneOf(['circle', 'rectangle']),
 
   /**
@@ -216,6 +248,11 @@ var Avatar = (_dec = (0, _testable.testable)(), _dec2 = (0, _deprecated.deprecat
    */
   elementRef: _propTypes.default.func,
 
+  /**
+   * An icon, or function that returns an icon that gets displayed. If the `src` prop is provided, `src` will have priority.
+   */
+  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+
   /* eslint-disable react/require-default-props */
 
   /**
@@ -236,9 +273,11 @@ var Avatar = (_dec = (0, _testable.testable)(), _dec2 = (0, _deprecated.deprecat
   elementRef: void 0,
   size: 'medium',
   color: 'default',
+  hasInverseColor: false,
   shape: 'circle',
   display: 'inline-block',
-  onImageLoaded: function onImageLoaded(event) {}
+  onImageLoaded: function onImageLoaded(event) {},
+  renderIcon: null
 }, _temp)) || _class) || _class) || _class);
 exports.Avatar = Avatar;
 var _default = Avatar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-avatar",
-  "version": "7.12.0",
+  "version": "7.13.0",
   "description": "An image or letters that represents a user.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,19 +24,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "^7.12.0",
-    "@instructure/ui-react-utils": "^7.12.0",
-    "@instructure/ui-testable": "^7.12.0",
-    "@instructure/ui-themeable": "^7.12.0",
-    "@instructure/ui-view": "^7.12.0",
+    "@instructure/console": "^7.13.0",
+    "@instructure/ui-icons": "^7.13.0",
+    "@instructure/ui-react-utils": "^7.13.0",
+    "@instructure/ui-testable": "^7.13.0",
+    "@instructure/ui-themeable": "^7.13.0",
+    "@instructure/ui-view": "^7.13.0",
     "classnames": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.12.0",
-    "@instructure/ui-color-utils": "^7.12.0",
-    "@instructure/ui-test-locator": "^7.12.0",
-    "@instructure/ui-test-utils": "^7.12.0"
+    "@instructure/ui-babel-preset": "^7.13.0",
+    "@instructure/ui-color-utils": "^7.13.0",
+    "@instructure/ui-test-locator": "^7.13.0",
+    "@instructure/ui-test-utils": "^7.13.0"
   },
   "peerDependencies": {
     "react": "^16.8"

package/src/Avatar/README.md

@@ -15,7 +15,11 @@ guidelines: true
 </Guidelines>
 ```
 
-When an image src is not supplied the user's initials will display. The avatar can be `circle` _(default)_ or `rectangle`. Use the `margin` prop to add space between Avatar and other content.
+The avatar component can be used to display a user's avatar. When an image src is not supplied the user's initials will display.
+
+Instead of the initials, an SVG icon can be displayed with the `renderIcon` property.
+
+The avatar can be `circle` _(default)_ or `rectangle`. Use the `margin` prop to add space between Avatar and other content.
 
 ```js
 ---
@@ -24,8 +28,9 @@ example: true
 <div>
   <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" />
   <Avatar name="Sarah Robinson" margin="0 small 0 0" />
-  <Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 small 0 0" />
-  <Avatar name="Kyle Montgomery" shape="rectangle" />
+  <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" />
+  <Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 small 0 0" />  <Avatar name="Kyle Montgomery" shape="rectangle" margin="0 small 0 0" />
+  <Avatar name="Kyle Montgomery" renderIcon={<IconGroupLine />} shape="rectangle" />
 </div>
 ```
 
@@ -56,25 +61,75 @@ example: true
     <Avatar name="David Herbert" size="x-large" margin="0 small 0 0"  src={avatarSquare} />
     <Avatar name="Isaac Asimov" size="xx-large"  src={avatarSquare} />
   </View>
+  <View display="block" padding="small medium">
+    <Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="0 small 0 0" />
+    <Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="0 small 0 0" />
+    <Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="0 small 0 0" />
+    <Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="0 small 0 0" />
+    <Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="0 small 0 0" />
+    <Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="0 small 0 0" />
+    <Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" />
+  </View>
+</div>
+```
+
+### Colors
+
+The color of the initials and icons can be set with the `color` prop, and it allows you to select from `default`, `shamrock`, `barney`, `crimson`, `fire`, `licorice` and `ash`.
+
+```js
+---
+example: true
+---
+<div>
+  <View display="block" padding="small medium">
+    <Avatar name="Arthur C. Clarke" margin="0 small 0 0" />
+    <Avatar name="James Arias" color="shamrock" margin="0 small 0 0" />
+    <Avatar name="Charles Kimball" color="barney" margin="0 small 0 0" />
+    <Avatar name="Melissa Reed" color="crimson" margin="0 small 0 0" />
+    <Avatar name="Heather Wheeler" color="fire" margin="0 small 0 0" />
+    <Avatar name="David Herbert" color="licorice" margin="0 small 0 0" />
+    <Avatar name="Isaac Asimov" color="ash" />
+  </View>
+  <View display="block" padding="small medium">
+    <Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" />
+  </View>
 </div>
 ```
 
-### Color of the initials
+The `hasInverseColor` prop inverts the background color and the text/icon color.
 
-The color of the initials can be set with the `color` prop, and it allows you to select from `default`, `shamrock`, `barney`, `crimson`, `fire`, `licorice` and `ash`.
+Inverted Avatars have **no border**.
 
 ```js
 ---
 example: true
 ---
 <div>
-  <Avatar name="Arthur C. Clarke" margin="0 small 0 0" />
-  <Avatar name="James Arias" color="shamrock" margin="0 small 0 0" />
-  <Avatar name="Charles Kimball" color="barney" margin="0 small 0 0" />
-  <Avatar name="Melissa Reed" color="crimson" margin="0 small 0 0" />
-  <Avatar name="Heather Wheeler" color="fire" margin="0 small 0 0" />
-  <Avatar name="David Herbert" color="licorice" margin="0 small 0 0" />
-  <Avatar name="Isaac Asimov" color="ash" />
+  <View display="block" padding="small medium" background="primary">
+    <Avatar name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
+    <Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
+    <Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
+    <Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
+    <Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
+    <Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
+    <Avatar name="Isaac Asimov" color="ash" hasInverseColor />
+  </View>
+  <View display="block" padding="small medium" background="primary">
+    <Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
+    <Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" hasInverseColor />
+  </View>
 </div>
 ```
 
@@ -85,8 +140,10 @@ In case you need more control over the color, feel free to use the `theme` prop,
 example: true
 ---
 <div>
-  <Avatar name="Isaac Asimov" theme={{ color: '#efb410' }} margin="0 small 0 0" />
-  <Avatar name="Heather Wheeler" color="fire" theme={{ colorFire: 'magenta' }} />
+  <Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} theme={{ color: '#efb410' }} margin="0 small 0 0" />
+  <Avatar name="Heather Wheeler" color="fire" theme={{ colorFire: 'magenta' }} margin="0 small 0 0" />
+  <Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor theme={{ color: 'lightblue', background: 'black' }} margin="0 small 0 0" />
+  <Avatar name="David Herbert" hasInverseColor color="fire" theme={{ colorFire: '#efb410' }} />
 </div>
 ```
 

package/src/Avatar/__examples__/Avatar.examples.js

@@ -21,13 +21,41 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+import React from 'react'
+
+import { IconGroupLine } from '@instructure/ui-icons'
+
 export default {
   excludeProps: ['inline', 'variant'],
   sectionProp: 'shape',
   propValues: {
-    src: [null, require('./testImage.jpg')]
+    src: [null, require('./testImage.jpg')],
+    renderIcon: [undefined, <IconGroupLine key="icon" />]
   },
-  getComponentProps: (props) => {
+  filter: (props) => {
+    if (props.color !== 'default' && props.size !== 'medium') {
+      return true
+    }
+
+    if (props.renderIcon && props.src) {
+      return true
+    }
+
+    if (props.src && props.color !== 'default') {
+      return true
+    }
+
+    if (
+      props.hasInverseColor &&
+      (props.size !== 'medium' || props.display !== 'block')
+    ) {
+      return true
+    }
+
+    return false
+  },
+  getComponentProps: () => {
     return {
       name: 'Kyle Montgomery'
     }

package/src/Avatar/index.js

@@ -27,7 +27,11 @@ import classnames from 'classnames'
 
 import { View } from '@instructure/ui-view'
 import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable'
-import { passthroughProps, deprecated } from '@instructure/ui-react-utils'
+import {
+  passthroughProps,
+  deprecated,
+  callRenderProp
+} from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 
 import styles from './styles.css'
@@ -75,6 +79,10 @@ class Avatar extends Component {
       'licorice',
       'ash'
     ]),
+    /**
+     * In inverse color mode the background and text/icon colors are inverted
+     */
+    hasInverseColor: PropTypes.bool,
     shape: PropTypes.oneOf(['circle', 'rectangle']),
     /**
      * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
@@ -95,6 +103,11 @@ class Avatar extends Component {
      * provides a reference to the underlying html element
      */
     elementRef: PropTypes.func,
+    /**
+     * An icon, or function that returns an icon that gets displayed. If the `src` prop is provided, `src` will have priority.
+     */
+    renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
     /* eslint-disable react/require-default-props */
     /**
      * __Deprecated - use `display`__
@@ -114,13 +127,22 @@ class Avatar extends Component {
     elementRef: undefined,
     size: 'medium',
     color: 'default',
+    hasInverseColor: false,
     shape: 'circle',
     display: 'inline-block',
-    onImageLoaded: (event) => {}
+    onImageLoaded: (event) => {},
+    renderIcon: null
   }
 
   state = { loaded: false }
 
+  componentDidUpdate() {
+    // in case the image is unset in an update, show icons/initials again
+    if (this.state.loaded && !this.props.src) {
+      this.setState({ loaded: false })
+    }
+  }
+
   makeInitialsFromName() {
     let name = this.props.name
 
@@ -166,6 +188,16 @@ class Avatar extends Component {
     )
   }
 
+  renderContent() {
+    const { renderIcon } = this.props
+
+    if (!renderIcon) {
+      return this.renderInitials()
+    }
+
+    return <span className={styles.iconSVG}>{callRenderProp(renderIcon)}</span>
+  }
+
   render() {
     const { onImageLoaded, ...props } = this.props
     const { loaded } = this.state
@@ -181,7 +213,8 @@ class Avatar extends Component {
           [styles[this.props.size]]: true,
           [styles[this.props.variant || this.props.shape]]: true,
           [styles[this.props.color]]: true,
-          [styles.loaded]: loaded
+          [styles.loaded]: loaded,
+          [styles.hasInverseColor]: this.props.hasInverseColor
         })}
         aria-label={this.props.alt ? this.props.alt : null}
         role={this.props.alt ? 'img' : null}
@@ -195,7 +228,7 @@ class Avatar extends Component {
         }
       >
         {this.renderLoadImage()}
-        {!loaded && this.renderInitials()}
+        {!loaded && this.renderContent()}
       </View>
     )
   }

package/src/Avatar/styles.css

@@ -79,44 +79,118 @@
     box-shadow: inset 0 0 var(--boxShadowBlur) 0 var(--boxShadowColor);
   }
 
+  /* stylelint-disable max-nesting-depth, selector-max-class */
+
   &:not(.loaded) {
     border-style: solid;
     border-color: var(--borderColor);
+
+    &.hasInverseColor {
+      border: 0;
+      padding: 0;
+      background-clip: border-box;
+
+      &.auto {
+        padding: var(--borderWidthSmall);
+      }
+
+      &.xx-small {
+        padding: var(--borderWidthSmall);
+      }
+
+      &.x-small {
+        padding: var(--borderWidthSmall);
+      }
+
+      &.small {
+        padding: var(--borderWidthSmall);
+      }
+
+      &.medium {
+        padding: var(--borderWidthMedium);
+      }
+
+      &.large {
+        padding: var(--borderWidthMedium);
+      }
+
+      &.x-large {
+        padding: var(--borderWidthMedium);
+      }
+
+      &.xx-large {
+        padding: var(--borderWidthMedium);
+      }
+    }
   }
 }
 
+/* stylelint-enable max-nesting-depth, selector-max-class */
+
 .initials {
   line-height: 2.375em;
   font-family: var(--fontFamily);
   font-weight: var(--fontWeight);
   letter-spacing: 0.0313em;
+}
+
+.default {
+  color: var(--color);
+}
+
+.shamrock {
+  color: var(--colorShamrock);
+}
 
-  .default & {
-    color: var(--color);
+.barney {
+  color: var(--colorBarney);
+}
+
+.crimson {
+  color: var(--colorCrimson);
+}
+
+.fire {
+  color: var(--colorFire);
+}
+
+.licorice {
+  color: var(--colorLicorice);
+}
+
+.ash {
+  color: var(--colorAsh);
+}
+
+.hasInverseColor {
+  color: var(--background);
+
+  &.default {
+    background-color: var(--color);
   }
 
-  .shamrock & {
-    color: var(--colorShamrock);
+  &.shamrock {
+    background-color: var(--colorShamrock);
   }
 
-  .barney & {
-    color: var(--colorBarney);
+  &.barney {
+    background-color: var(--colorBarney);
   }
 
-  .crimson & {
-    color: var(--colorCrimson);
+  &.crimson {
+    background-color: var(--colorCrimson);
   }
 
-  .fire & {
-    color: var(--colorFire);
+  &.fire {
+    background-color: var(--colorFire);
   }
 
-  .licorice & {
-    color: var(--colorLicorice);
+  &.licorice {
+    background-color: var(--colorLicorice);
   }
 
-  .ash & {
-    color: var(--colorAsh);
+  &.ash {
+    background-color: var(--colorAsh);
   }
 }
 
@@ -134,3 +208,18 @@
 .rectangle {
   width: 3em;
 }
+
+.iconSVG {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+
+  /* stylelint-disable-next-line selector-max-type */
+  svg {
+    fill: currentColor;
+    height: 1em;
+    width: 1em;
+  }
+}

package/types/index.d.ts

@@ -8,6 +8,8 @@ export type AvatarShape = "circle" | "rectangle";
 
 export type AvatarDisplay = "inline-block" | "block";
 
+export type AvatarRenderIcon = React.ReactNode | ((...args: any[])=>any);
+
 export type AvatarVariant = "circle" | "rectangle";
 
 export interface AvatarProps {
@@ -22,6 +24,10 @@ export interface AvatarProps {
     alt?: string;
     size?: AvatarSize;
     color?: AvatarColor;
+    /**
+     * In inverse color mode the background and text/icon colors are inverted
+     */
+    hasInverseColor?: boolean;
     shape?: AvatarShape;
     /**
      * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
@@ -39,6 +45,10 @@ export interface AvatarProps {
      */
     as?: any;
     elementRef?: (...args: any[])=>any;
+    /**
+     * An icon, or function that returns an icon that gets displayed. If the `src` prop is provided, `src` will have priority.
+     */
+    renderIcon?: AvatarRenderIcon;
     /**
      * eslint-disable react/require-default-props
      */