@shopify/polaris/dist/esm/components/Icon/Icon.js

Shopify’s product component library

import React$1 from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames, variationName } from '../../utilities/css.js';
import { isNewDesignLanguageColor } from '../../utilities/color-new-design-language.js';
import styles from './Icon.scss.js';

const COLORS_WITH_BACKDROPS = ['blueDark', 'teal', 'tealDark', 'greenDark', 'redDark', 'yellowDark', 'ink', 'inkLighter']; // This is needed for the polaris
// styleguide to generate the props explorer

function Icon({
  source,
  color,
  backdrop,
  accessibilityLabel
}) {
  const i18n = useI18n();
  const {
    newDesignLanguage
  } = useFeatures();
  let sourceType;

  if (typeof source === 'function') {
    sourceType = 'function';
  } else if (source === 'placeholder') {
    sourceType = 'placeholder';
  } else {
    sourceType = 'external';
  }

  if (color && backdrop && !COLORS_WITH_BACKDROPS.includes(color)) {
    // eslint-disable-next-line no-console
    console.warn(i18n.translate('Polaris.Icon.backdropWarning', {
      color,
      colorsWithBackDrops: COLORS_WITH_BACKDROPS.join(', ')
    }));
  }

  if (color && !newDesignLanguage && isNewDesignLanguageColor(color)) {
    // eslint-disable-next-line no-console
    console.warn('You have selected a color meant to be used in the new design language but new design language is not enabled.');
  }

  if (color && sourceType === 'external' && newDesignLanguage === true && isNewDesignLanguageColor(color)) {
    // eslint-disable-next-line no-console
    console.warn('Recoloring external SVGs is not supported with colors in the new design language. Set the intended color on your SVG instead.');
  }

  const className = classNames(styles.Icon, color && styles[variationName('color', color)], color && color !== 'white' && styles.isColored, backdrop && styles.hasBackdrop, newDesignLanguage && styles.newDesignLanguage);
  const SourceComponent = source;
  const contentMarkup = {
    function: /*#__PURE__*/React$1.createElement(SourceComponent, {
      className: styles.Svg,
      focusable: "false",
      "aria-hidden": "true"
    }),
    placeholder: /*#__PURE__*/React$1.createElement("div", {
      className: styles.Placeholder
    }),
    external: /*#__PURE__*/React$1.createElement("img", {
      className: styles.Img,
      src: `data:image/svg+xml;utf8,${source}`,
      alt: "",
      "aria-hidden": "true"
    })
  };
  return /*#__PURE__*/React$1.createElement("span", {
    className: className,
    "aria-label": accessibilityLabel
  }, contentMarkup[sourceType]);
}

export { Icon };