@salesforce/design-system-react/module/components/icon/index.js

Salesforce Lightning Design System for React

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// # Icon Component
import React from 'react';
import PropTypes from 'prop-types';
import checkProps from './check-props';
import componentDoc from './component.json'; // ### classNames
// [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
// A simple javascript utility for conditionally joining classNames together.

import classNames from '../../utilities/class-names'; // ## Children

import UtilityIcon from '../utilities/utility-icon';
import IconBackgrounds from '../../utilities/product-tokens/icon-backgrounds';
import { ICON } from '../../utilities/constants';
var defaultProps = {
  assistiveText: {},
  category: 'standard',
  colorVariant: 'default',
  size: 'medium'
};
/**
 * The Icon component is the Lightning Design System Icon component and should be used for naked icons. For icons that are buttons, use the <a href='/components/buttons/'>Button component</a> component with <code>variant='icon'</code>.
 */

var Icon = function Icon(_ref) {
  var _ref$category = _ref.category,
      category = _ref$category === void 0 ? defaultProps.category : _ref$category,
      className = _ref.className,
      _ref$colorVariant = _ref.colorVariant,
      colorVariant = _ref$colorVariant === void 0 ? defaultProps.colorVariant : _ref$colorVariant,
      containerClassName = _ref.containerClassName,
      containerStyle = _ref.containerStyle,
      icon = _ref.icon,
      inverse = _ref.inverse,
      name = _ref.name,
      path = _ref.path,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? defaultProps.size : _ref$size,
      title = _ref.title,
      productTheme = _ref.productTheme,
      _ref$assistiveText = _ref.assistiveText,
      assistiveText = _ref$assistiveText === void 0 ? defaultProps.assistiveText : _ref$assistiveText,
      style = _ref.style,
      rest = _objectWithoutProperties(_ref, ["category", "className", "colorVariant", "containerClassName", "containerStyle", "icon", "inverse", "name", "path", "size", "title", "productTheme", "assistiveText", "style"]);

  checkProps(ICON, _objectSpread({
    category: category,
    className: className,
    colorVariant: colorVariant,
    containerClassName: containerClassName,
    containerStyle: containerStyle,
    icon: icon,
    inverse: inverse,
    name: name,
    path: path,
    size: size,
    title: title,
    productTheme: productTheme,
    assistiveText: assistiveText,
    style: style
  }, rest), componentDoc);
  var styleOverride = style;

  if (productTheme) {
    styleOverride = _objectSpread({
      backgroundColor: IconBackgrounds[productTheme]
    }, style);
  }

  var mergedAssistiveText = typeof assistiveText === 'string' ? assistiveText : _objectSpread(_objectSpread({}, defaultProps.assistiveText), assistiveText).label;
  var kababCaseName = name ? name.replace(/_/g, '-') : '';
  return /*#__PURE__*/React.createElement("span", {
    className: classNames(_defineProperty({
      'slds-icon_container': category !== 'utility',
      'slds-icon_container_circle': category === 'action'
    }, "slds-icon-".concat(category, "-").concat(kababCaseName), category !== 'utility' && category !== 'doctype' && !path), containerClassName),
    style: containerStyle,
    title: title
  }, /*#__PURE__*/React.createElement(UtilityIcon, {
    "aria-hidden": "true",
    category: category,
    className: classNames(className, 'slds-icon', {
      'slds-icon_xx-small': size === 'xx-small',
      'slds-icon_x-small': size === 'x-small',
      'slds-icon_small': size === 'small',
      // medium intentially not present
      'slds-icon_large': size === 'large',
      // if category is `utility` and `inverse` is false (default), icon will be dark // return true
      // if category is `utility` and `inverse` is true, icon will be light // return false
      // if category is NOT `utility` and `inverse` is false (default), icon will be light // return false
      // if category is NOT `utility` and `inverse` is true, icon will be dark // return true
      'slds-icon-text-default': colorVariant === 'default' && category === 'utility' ? !inverse : inverse,
      'slds-icon-text-success': colorVariant === 'success',
      'slds-icon-text-warning': colorVariant === 'warning',
      'slds-icon-text-error': colorVariant === 'error',
      'slds-icon-text-light': colorVariant === 'light'
    }),
    icon: icon,
    name: name,
    path: path,
    style: styleOverride
  }), mergedAssistiveText ? /*#__PURE__*/React.createElement("span", {
    className: "slds-assistive-text"
  }, mergedAssistiveText) : '');
}; // ### Display Name
// Always use the canonical component name as the React display name.


Icon.displayName = ICON; // ### Prop Types

Icon.propTypes = {
  /**
   * **Assistive text for accessibility.**
   * This object is merged with the default props object on every render.
   * * `label`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. Naked icons must have assistive text, however, if you also have visible descriptive text with the icon, declare this prop as <code>assistiveText=''</code>.
   */
  assistiveText: PropTypes.shape({
    label: PropTypes.string
  }),

  /**
   * Icon category from [lightningdesignsystem.com/icons/](https://www.lightningdesignsystem.com/icons/)
   */
  category: PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']),

  /**
   * CSS classes that are applied to the SVG.
   */
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

  /**
   * CSS classes that are applied to the span.
   */
  containerClassName: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

  /**
   * Styles that are applied to the span.
   */
  containerStyle: PropTypes.object,

  /**
   * Icon color variants
   */
  colorVariant: PropTypes.oneOf(['base', 'default', 'error', 'light', 'warning', 'success']),

  /**
   * A custom SVG object to use instead of the supplied SLDS icons, look in `design-system-react/icons` for examples and syntax.
   */
  icon: PropTypes.object,

  /**
   * Setting `inverse` to true will switch the color of the icon: light to dark, dark to light.
   */
  inverse: PropTypes.bool,

  /**
   * Name of the icon. Visit <a href='http://www.lightningdesignsystem.com/resources/icons'>Lightning Design System Icons</a> to reference icon names.
   */
  name: PropTypes.string,

  /**
   * Path to the icon. This will override any global icon settings
   */
  path: PropTypes.string,

  /**
   * Background theme color for the icon. **Only compatible with icon category `standard`**
   */
  productTheme: PropTypes.oneOf(['global-setup', 'service-cloud', 'industry-cloud', 'sales-cloud', 'commerce-cloud', 'community-cloud', 'marketing-cloud', 'quip']),

  /**
   * Size of the icon. Visit [lightningdesignsystem.com/components/icons/#flavor-sizes](https://www.lightningdesignsystem.com/components/icons/#flavor-sizes)
   */
  size: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'medium', 'large']),

  /**
   * Custom styles to be passed to the SVG. Could be used to change icon or background color.
   */
  style: PropTypes.object,

  /**
   * Title attribute for the icon container
   */
  title: PropTypes.string
};
export default Icon;
//# sourceMappingURL=index.js.map