@elastic/eui 59.1.0 → 60.1.0

package/optimize/es/components/icon/icon.js

@@ -7,7 +7,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad"];
+var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "theme", "style"];
+
+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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -23,10 +27,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { keysOf } from '../common';
+import { typeToPathMap } from './icon_map';
 import { icon as empty } from './assets/empty';
 import { enqueueStateChange } from '../../services/react';
-import { htmlIdGenerator } from '../../services';
-import { colorToClassMap, isNamedColor } from './named_colors';
+import { htmlIdGenerator, withEuiTheme } from '../../services';
+export { COLORS } from './named_colors';
+import { isNamedColor } from './named_colors';
+import { euiIconStyles } from './icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getIsAppIcon = function getIsAppIcon(iconType) {
@@ -38,466 +45,8 @@ var getIsAppIcon = function getIsAppIcon(iconType) {
   return iconType.endsWith('App') || iconType.endsWith('Job');
 };
 
-var typeToPathMap = {
-  accessibility: 'accessibility',
-  addDataApp: 'app_add_data',
-  advancedSettingsApp: 'app_advanced_settings',
-  agentApp: 'app_fleet',
-  aggregate: 'aggregate',
-  alert: 'alert',
-  analyzeEvent: 'analyzeEvent',
-  annotation: 'annotation',
-  apmApp: 'app_apm',
-  apmTrace: 'apm_trace',
-  appSearchApp: 'app_app_search',
-  apps: 'apps',
-  arrowDown: 'arrow_down',
-  arrowLeft: 'arrow_left',
-  arrowRight: 'arrow_right',
-  arrowUp: 'arrow_up',
-  arrowStart: 'arrowStart',
-  arrowEnd: 'arrowEnd',
-  asterisk: 'asterisk',
-  auditbeatApp: 'app_auditbeat',
-  beaker: 'beaker',
-  bell: 'bell',
-  bellSlash: 'bellSlash',
-  bolt: 'bolt',
-  boxesHorizontal: 'boxes_horizontal',
-  boxesVertical: 'boxes_vertical',
-  branch: 'branch',
-  branchUser: 'branchUser',
-  broom: 'broom',
-  brush: 'brush',
-  bug: 'bug',
-  bullseye: 'bullseye',
-  calendar: 'calendar',
-  canvasApp: 'app_canvas',
-  casesApp: 'app_cases',
-  check: 'check',
-  checkInCircleFilled: 'checkInCircleFilled',
-  cheer: 'cheer',
-  classificationJob: 'ml_classification_job',
-  clock: 'clock',
-  cloudDrizzle: 'cloudDrizzle',
-  cloudStormy: 'cloudStormy',
-  cloudSunny: 'cloudSunny',
-  codeApp: 'app_code',
-  color: 'color',
-  compute: 'compute',
-  console: 'console',
-  consoleApp: 'app_console',
-  continuityAbove: 'continuityAbove',
-  continuityAboveBelow: 'continuityAboveBelow',
-  continuityBelow: 'continuityBelow',
-  continuityWithin: 'continuityWithin',
-  controlsHorizontal: 'controls_horizontal',
-  controlsVertical: 'controls_vertical',
-  copy: 'copy',
-  copyClipboard: 'copy_clipboard',
-  createAdvancedJob: 'ml_create_advanced_job',
-  createMultiMetricJob: 'ml_create_multi_metric_job',
-  createPopulationJob: 'ml_create_population_job',
-  createSingleMetricJob: 'ml_create_single_metric_job',
-  cross: 'cross',
-  crossClusterReplicationApp: 'app_cross_cluster_replication',
-  crossInACircleFilled: 'crossInACircleFilled',
-  crosshairs: 'crosshairs',
-  currency: 'currency',
-  cut: 'cut',
-  dashboardApp: 'app_dashboard',
-  dataVisualizer: 'ml_data_visualizer',
-  database: 'database',
-  desktop: 'desktop',
-  devToolsApp: 'app_devtools',
-  discoverApp: 'app_discover',
-  document: 'document',
-  documentEdit: 'documentEdit',
-  documentation: 'documentation',
-  documents: 'documents',
-  dot: 'dot',
-  doubleArrowLeft: 'doubleArrowLeft',
-  doubleArrowRight: 'doubleArrowRight',
-  download: 'download',
-  editorAlignCenter: 'editor_align_center',
-  editorAlignLeft: 'editor_align_left',
-  editorAlignRight: 'editor_align_right',
-  editorBold: 'editor_bold',
-  editorChecklist: 'editor_checklist',
-  editorCodeBlock: 'editor_code_block',
-  editorComment: 'editor_comment',
-  editorDistributeHorizontal: 'editorDistributeHorizontal',
-  editorDistributeVertical: 'editorDistributeVertical',
-  editorHeading: 'editor_heading',
-  editorItalic: 'editor_italic',
-  editorItemAlignBottom: 'editorItemAlignBottom',
-  editorItemAlignCenter: 'editorItemAlignCenter',
-  editorItemAlignLeft: 'editorItemAlignLeft',
-  editorItemAlignMiddle: 'editorItemAlignMiddle',
-  editorItemAlignRight: 'editorItemAlignRight',
-  editorItemAlignTop: 'editorItemAlignTop',
-  editorLink: 'editor_link',
-  editorOrderedList: 'editor_ordered_list',
-  editorPositionBottomLeft: 'editorPositionBottomLeft',
-  editorPositionBottomRight: 'editorPositionBottomRight',
-  editorPositionTopLeft: 'editorPositionTopLeft',
-  editorPositionTopRight: 'editorPositionTopRight',
-  editorRedo: 'editor_redo',
-  editorStrike: 'editor_strike',
-  editorTable: 'editor_table',
-  editorUnderline: 'editor_underline',
-  editorUndo: 'editor_undo',
-  editorUnorderedList: 'editor_unordered_list',
-  email: 'email',
-  empty: 'empty',
-  emsApp: 'app_ems',
-  eql: 'eql',
-  eraser: 'eraser',
-  exit: 'exit',
-  expand: 'expand',
-  expandMini: 'expandMini',
-  exportAction: 'export',
-  eye: 'eye',
-  eyeClosed: 'eye_closed',
-  faceHappy: 'face_happy',
-  faceNeutral: 'face_neutral',
-  faceSad: 'face_sad',
-  filebeatApp: 'app_filebeat',
-  filter: 'filter',
-  flag: 'flag',
-  fleetApp: 'app_agent',
-  fold: 'fold',
-  folderCheck: 'folder_check',
-  folderClosed: 'folder_closed',
-  folderExclamation: 'folder_exclamation',
-  folderOpen: 'folder_open',
-  frameNext: 'frameNext',
-  framePrevious: 'framePrevious',
-  fullScreen: 'full_screen',
-  fullScreenExit: 'fullScreenExit',
-  function: 'function',
-  gear: 'gear',
-  gisApp: 'app_gis',
-  glasses: 'glasses',
-  globe: 'globe',
-  grab: 'grab',
-  grabHorizontal: 'grab_horizontal',
-  graphApp: 'app_graph',
-  grid: 'grid',
-  grokApp: 'app_grok',
-  heart: 'heart',
-  heartbeatApp: 'app_heartbeat',
-  heatmap: 'heatmap',
-  help: 'help',
-  home: 'home',
-  iInCircle: 'iInCircle',
-  image: 'image',
-  importAction: 'import',
-  indexClose: 'index_close',
-  indexEdit: 'index_edit',
-  indexFlush: 'index_flush',
-  indexManagementApp: 'app_index_management',
-  indexMapping: 'index_mapping',
-  indexOpen: 'index_open',
-  indexPatternApp: 'app_index_pattern',
-  indexRollupApp: 'app_index_rollup',
-  indexRuntime: 'index_runtime',
-  indexSettings: 'index_settings',
-  inputOutput: 'inputOutput',
-  inspect: 'inspect',
-  invert: 'invert',
-  ip: 'ip',
-  keyboardShortcut: 'keyboard_shortcut',
-  kqlField: 'kql_field',
-  kqlFunction: 'kql_function',
-  kqlOperand: 'kql_operand',
-  kqlSelector: 'kql_selector',
-  kqlValue: 'kql_value',
-  layers: 'layers',
-  lensApp: 'app_lens',
-  lettering: 'lettering',
-  lineDashed: 'lineDashed',
-  lineDotted: 'lineDotted',
-  lineSolid: 'lineSolid',
-  link: 'link',
-  list: 'list',
-  listAdd: 'list_add',
-  lock: 'lock',
-  lockOpen: 'lockOpen',
-  logoAWS: 'logo_aws',
-  logoAWSMono: 'logo_aws_mono',
-  logoAerospike: 'logo_aerospike',
-  logoApache: 'logo_apache',
-  logoAppSearch: 'logo_app_search',
-  logoAzure: 'logo_azure',
-  logoAzureMono: 'logo_azure_mono',
-  logoBeats: 'logo_beats',
-  logoBusinessAnalytics: 'logo_business_analytics',
-  logoCeph: 'logo_ceph',
-  logoCloud: 'logo_cloud',
-  logoCloudEnterprise: 'logo_cloud_ece',
-  logoCode: 'logo_code',
-  logoCodesandbox: 'logo_codesandbox',
-  logoCouchbase: 'logo_couchbase',
-  logoDocker: 'logo_docker',
-  logoDropwizard: 'logo_dropwizard',
-  logoElastic: 'logo_elastic',
-  logoElasticStack: 'logo_elastic_stack',
-  logoElasticsearch: 'logo_elasticsearch',
-  logoEnterpriseSearch: 'logo_enterprise_search',
-  logoEtcd: 'logo_etcd',
-  logoGCP: 'logo_gcp',
-  logoGCPMono: 'logo_gcp_mono',
-  logoGithub: 'logo_github',
-  logoGmail: 'logo_gmail',
-  logoGolang: 'logo_golang',
-  logoGoogleG: 'logo_google_g',
-  logoHAproxy: 'logo_haproxy',
-  logoIBM: 'logo_ibm',
-  logoIBMMono: 'logo_ibm_mono',
-  logoKafka: 'logo_kafka',
-  logoKibana: 'logo_kibana',
-  logoKubernetes: 'logo_kubernetes',
-  logoLogging: 'logo_logging',
-  logoLogstash: 'logo_logstash',
-  logoMaps: 'logo_maps',
-  logoMemcached: 'logo_memcached',
-  logoMetrics: 'logo_metrics',
-  logoMongodb: 'logo_mongodb',
-  logoMySQL: 'logo_mysql',
-  logoNginx: 'logo_nginx',
-  logoObservability: 'logo_observability',
-  logoOsquery: 'logo_osquery',
-  logoPhp: 'logo_php',
-  logoPostgres: 'logo_postgres',
-  logoPrometheus: 'logo_prometheus',
-  logoRabbitmq: 'logo_rabbitmq',
-  logoRedis: 'logo_redis',
-  logoSecurity: 'logo_security',
-  logoSiteSearch: 'logo_site_search',
-  logoSketch: 'logo_sketch',
-  logoSlack: 'logo_slack',
-  logoUptime: 'logo_uptime',
-  logoWebhook: 'logo_webhook',
-  logoWindows: 'logo_windows',
-  logoWorkplaceSearch: 'logo_workplace_search',
-  logsApp: 'app_logs',
-  logstashFilter: 'logstash_filter',
-  logstashIf: 'logstash_if',
-  logstashInput: 'logstash_input',
-  logstashOutput: 'logstash_output',
-  logstashQueue: 'logstash_queue',
-  machineLearningApp: 'app_ml',
-  magnet: 'magnet',
-  magnifyWithExclamation: 'magnifyWithExclamation',
-  magnifyWithMinus: 'magnifyWithMinus',
-  magnifyWithPlus: 'magnifyWithPlus',
-  managementApp: 'app_management',
-  mapMarker: 'map_marker',
-  memory: 'memory',
-  menu: 'menu',
-  menuDown: 'menuDown',
-  menuLeft: 'menuLeft',
-  menuRight: 'menuRight',
-  menuUp: 'menuUp',
-  merge: 'merge',
-  metricbeatApp: 'app_metricbeat',
-  metricsApp: 'app_metrics',
-  minimize: 'minimize',
-  minus: 'minus',
-  minusInCircle: 'minus_in_circle',
-  minusInCircleFilled: 'minus_in_circle_filled',
-  mobile: 'mobile',
-  monitoringApp: 'app_monitoring',
-  moon: 'moon',
-  nested: 'nested',
-  node: 'node',
-  notebookApp: 'app_notebook',
-  number: 'number',
-  offline: 'offline',
-  online: 'online',
-  outlierDetectionJob: 'ml_outlier_detection_job',
-  package: 'package',
-  packetbeatApp: 'app_packetbeat',
-  pageSelect: 'pageSelect',
-  pagesSelect: 'pagesSelect',
-  paperClip: 'paper_clip',
-  partial: 'partial',
-  pause: 'pause',
-  payment: 'payment',
-  pencil: 'pencil',
-  percent: 'percent',
-  pin: 'pin',
-  pinFilled: 'pin_filled',
-  pipelineApp: 'app_pipeline',
-  play: 'play',
-  playFilled: 'playFilled',
-  plus: 'plus',
-  plusInCircle: 'plus_in_circle',
-  plusInCircleFilled: 'plus_in_circle_filled',
-  popout: 'popout',
-  push: 'push',
-  questionInCircle: 'question_in_circle',
-  quote: 'quote',
-  recentlyViewedApp: 'app_recently_viewed',
-  refresh: 'refresh',
-  regressionJob: 'ml_regression_job',
-  reporter: 'reporter',
-  reportingApp: 'app_reporting',
-  returnKey: 'return_key',
-  save: 'save',
-  savedObjectsApp: 'app_saved_objects',
-  scale: 'scale',
-  search: 'search',
-  searchProfilerApp: 'app_search_profiler',
-  securityAnalyticsApp: 'app_security_analytics',
-  securityApp: 'app_security',
-  securitySignal: 'securitySignal',
-  securitySignalDetected: 'securitySignalDetected',
-  securitySignalResolved: 'securitySignalResolved',
-  sessionViewer: 'sessionViewer',
-  shard: 'shard',
-  share: 'share',
-  snowflake: 'snowflake',
-  sortDown: 'sort_down',
-  sortLeft: 'sortLeft',
-  sortRight: 'sortRight',
-  sortUp: 'sort_up',
-  sortable: 'sortable',
-  spacesApp: 'app_spaces',
-  sqlApp: 'app_sql',
-  starEmpty: 'star_empty',
-  starEmptySpace: 'star_empty_space',
-  starFilled: 'star_filled',
-  starFilledSpace: 'star_filled_space',
-  starMinusEmpty: 'star_minus_empty',
-  starMinusFilled: 'star_minus_filled',
-  starPlusEmpty: 'starPlusEmpty',
-  starPlusFilled: 'starPlusFilled',
-  stats: 'stats',
-  stop: 'stop',
-  stopFilled: 'stop_filled',
-  stopSlash: 'stop_slash',
-  storage: 'storage',
-  string: 'string',
-  submodule: 'submodule',
-  sun: 'sun',
-  swatchInput: 'swatch_input',
-  // Undocumented on purpose. Has an extra stroke for EuiColorPicker
-  symlink: 'symlink',
-  tableDensityCompact: 'table_density_compact',
-  tableDensityExpanded: 'table_density_expanded',
-  tableDensityNormal: 'table_density_normal',
-  tableOfContents: 'tableOfContents',
-  tag: 'tag',
-  tear: 'tear',
-  temperature: 'temperature',
-  timeline: 'timeline',
-  timelionApp: 'app_timelion',
-  timeRefresh: 'timeRefresh',
-  timeslider: 'timeslider',
-  training: 'training',
-  trash: 'trash',
-  unfold: 'unfold',
-  unlink: 'unlink',
-  upgradeAssistantApp: 'app_upgrade_assistant',
-  uptimeApp: 'app_uptime',
-  user: 'user',
-  userAvatar: 'userAvatar',
-  users: 'users',
-  usersRolesApp: 'app_users_roles',
-  vector: 'vector',
-  videoPlayer: 'videoPlayer',
-  visArea: 'vis_area',
-  visAreaStacked: 'vis_area_stacked',
-  visBarHorizontal: 'vis_bar_horizontal',
-  visBarHorizontalStacked: 'vis_bar_horizontal_stacked',
-  visBarVertical: 'vis_bar_vertical',
-  visBarVerticalStacked: 'vis_bar_vertical_stacked',
-  visGauge: 'vis_gauge',
-  visGoal: 'vis_goal',
-  visLine: 'vis_line',
-  visMapCoordinate: 'vis_map_coordinate',
-  visMapRegion: 'vis_map_region',
-  visMetric: 'vis_metric',
-  visPie: 'vis_pie',
-  visTable: 'vis_table',
-  visTagCloud: 'vis_tag_cloud',
-  visText: 'vis_text',
-  visTimelion: 'vis_timelion',
-  visVega: 'vis_vega',
-  visVisualBuilder: 'vis_visual_builder',
-  visualizeApp: 'app_visualize',
-  watchesApp: 'app_watches',
-  wordWrap: 'wordWrap',
-  wordWrapDisabled: 'wordWrapDisabled',
-  workplaceSearchApp: 'app_workplace_search',
-  wrench: 'wrench',
-  // Token Icon Imports
-  tokenClass: 'tokenClass',
-  tokenProperty: 'tokenProperty',
-  tokenEnum: 'tokenEnum',
-  tokenVariable: 'tokenVariable',
-  tokenMethod: 'tokenMethod',
-  tokenAnnotation: 'tokenAnnotation',
-  tokenException: 'tokenException',
-  tokenInterface: 'tokenInterface',
-  tokenParameter: 'tokenParameter',
-  tokenField: 'tokenField',
-  tokenElement: 'tokenElement',
-  tokenFunction: 'tokenFunction',
-  tokenBoolean: 'tokenBoolean',
-  tokenString: 'tokenString',
-  tokenArray: 'tokenArray',
-  tokenNumber: 'tokenNumber',
-  tokenConstant: 'tokenConstant',
-  tokenObject: 'tokenObject',
-  tokenEvent: 'tokenEvent',
-  tokenKey: 'tokenKey',
-  tokenNull: 'tokenNull',
-  tokenStruct: 'tokenStruct',
-  tokenPackage: 'tokenPackage',
-  tokenOperator: 'tokenOperator',
-  tokenEnumMember: 'tokenEnumMember',
-  tokenRepo: 'tokenRepo',
-  tokenSymbol: 'tokenSymbol',
-  tokenFile: 'tokenFile',
-  tokenModule: 'tokenModule',
-  tokenNamespace: 'tokenNamespace',
-  tokenDate: 'tokenDate',
-  tokenIP: 'tokenIP',
-  tokenNested: 'tokenNested',
-  tokenAlias: 'tokenAlias',
-  tokenShape: 'tokenShape',
-  tokenGeo: 'tokenGeo',
-  tokenRange: 'tokenRange',
-  tokenBinary: 'tokenBinary',
-  tokenJoin: 'tokenJoin',
-  tokenPercolator: 'tokenPercolator',
-  tokenFlattened: 'tokenFlattened',
-  tokenRankFeature: 'tokenRankFeature',
-  tokenRankFeatures: 'tokenRankFeatures',
-  tokenKeyword: 'tokenKeyword',
-  tokenTag: 'tokenTag',
-  tokenCompletionSuggester: 'tokenCompletionSuggester',
-  tokenDenseVector: 'tokenDenseVector',
-  tokenText: 'tokenText',
-  tokenTokenCount: 'tokenTokenCount',
-  tokenSearchType: 'tokenSearchType',
-  tokenHistogram: 'tokenHistogram'
-};
 export var TYPES = keysOf(typeToPathMap);
-export var COLORS = keysOf(colorToClassMap); // We accept arbitrary color strings, which are impossible to type.
-
-var sizeToClassNameMap = {
-  original: null,
-  s: 'euiIcon--small',
-  m: 'euiIcon--medium',
-  l: 'euiIcon--large',
-  xl: 'euiIcon--xLarge',
-  xxl: 'euiIcon--xxLarge'
-};
-export var SIZES = keysOf(sizeToClassNameMap);
+export var SIZES = ['original', 's', 'm', 'l', 'xl', 'xxl'];
 
 function isEuiIconType(x) {
   return typeof x === 'string' && typeToPathMap.hasOwnProperty(x);
@@ -535,15 +84,15 @@ export var appendIconComponentCache = function appendIconComponentCache(iconType
     }
   }
 };
-export var EuiIcon = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EuiIcon, _PureComponent);
+export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
+  _inherits(EuiIconClass, _PureComponent);
 
-  var _super = _createSuper(EuiIcon);
+  var _super = _createSuper(EuiIconClass);
 
-  function EuiIcon(props) {
+  function EuiIconClass(props) {
     var _this;
 
-    _classCallCheck(this, EuiIcon);
+    _classCallCheck(this, EuiIconClass);
 
     _this = _super.call(this, props);
 
@@ -602,7 +151,7 @@ export var EuiIcon = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
 
-  _createClass(EuiIcon, [{
+  _createClass(EuiIconClass, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var type = this.props.type;
@@ -658,35 +207,29 @@ export var EuiIcon = /*#__PURE__*/function (_PureComponent) {
           tabIndex = _this$props.tabIndex,
           title = _this$props.title,
           onIconLoad = _this$props.onIconLoad,
+          theme = _this$props.theme,
+          style = _this$props.style,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
       var _this$state = this.state,
           isLoading = _this$state.isLoading,
-          neededLoading = _this$state.neededLoading;
-      var optionalColorClass = null;
-      var optionalCustomStyles = null;
+          neededLoading = _this$state.neededLoading,
+          iconTitle = _this$state.iconTitle;
+      var isLoaded = !isLoading && neededLoading;
+      var isCustomColor = color && !isNamedColor(color);
+      var optionalCustomStyles = isCustomColor ? _objectSpread({
+        color: color
+      }, style) : style; // These icons are a little special and get some extra CSS flexibility
 
-      if (color) {
-        if (isNamedColor(color)) {
-          optionalColorClass = colorToClassMap[color];
-        } else {
-          optionalCustomStyles = {
-            color: color
-          };
-          optionalColorClass = 'euiIcon--customColor';
-        }
-      } // These icons are a little special and get some extra CSS flexibility
+      var isAppIcon = getIsAppIcon(type); // App color styles are only applied if no color is passed or if color="default" is passed
 
+      var appIconHasColor = color && color !== 'default'; // The Elastic logo should be an outline in text and ghost mode
 
-      var isAppIcon = getIsAppIcon(type);
-      var appIconHasColor = color && color !== 'default'; // parent is not one of
+      var isElasticLogoOutline = type === 'logoElastic' && (color === 'ghost' || color === 'text');
+      var classes = classNames('euiIcon', className); // Emotion styles
 
-      var classes = classNames('euiIcon', sizeToClassNameMap[size], optionalColorClass, {
-        // The app icon only gets the .euiIcon--app class if no color is passed or if color="default" is passed
-        'euiIcon--app': isAppIcon && !appIconHasColor,
-        'euiIcon-isLoading': isLoading,
-        'euiIcon-isLoaded': !isLoading && neededLoading
-      }, className);
+      var styles = euiIconStyles(theme);
+      var cssStyles = [styles.euiIcon, styles[size], color && isNamedColor(color) && styles[color], isCustomColor && styles.customColor, isElasticLogoOutline && styles.logoElasticOutline, isAppIcon && !appIconHasColor && styles.app, isLoading && styles.isLoading, !isLoading && neededLoading && styles.isLoaded];
       var icon = this.state.icon || empty; // This is a fix for IE and Edge, which ignores tabindex="-1" on an SVG, but respects
       // focusable="false".
       //   - If there's no tabindex specified, we'll default the icon to not be focusable,
@@ -701,6 +244,7 @@ export var EuiIcon = /*#__PURE__*/function (_PureComponent) {
           alt: title ? title : '',
           src: icon,
           className: classes,
+          css: cssStyles,
           tabIndex: tabIndex
         }, rest));
       } else {
@@ -723,15 +267,19 @@ export var EuiIcon = /*#__PURE__*/function (_PureComponent) {
         return ___EmotionJSX(Svg, _extends({
           className: classes,
           style: optionalCustomStyles,
+          css: cssStyles,
           tabIndex: tabIndex,
           focusable: focusable,
           role: "img",
           title: title,
-          "data-icon-type": this.state.iconTitle
+          "data-icon-type": iconTitle,
+          "data-is-loaded": isLoaded || undefined,
+          "data-is-loading": isLoading || undefined
         }, titleId, rest, hideIconEmpty));
       }
     }
   }]);
 
-  return EuiIcon;
-}(PureComponent);
+  return EuiIconClass;
+}(PureComponent);
+export var EuiIcon = withEuiTheme(EuiIconClass);

package/optimize/es/components/icon/icon.styles.js

@@ -0,0 +1,75 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css, keyframes } from '@emotion/react';
+import { logicalCSS, euiCanAnimate } from '../../global_styling';
+
+var iconSize = function iconSize(size) {
+  return "\n    ".concat(logicalCSS('width', size), ";\n    ").concat(logicalCSS('height', size), ";\n  ");
+};
+
+export var iconLoadingOpacity = 0.05;
+var iconLoading = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: ", ";\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])), iconLoadingOpacity);
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "njd749-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;"
+} : {
+  name: "njd749-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "uacjc5-inherit",
+  styles: "color:inherit;label:inherit;"
+} : {
+  name: "uacjc5-inherit",
+  styles: "color:inherit;label:inherit;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiIconStyles = function euiIconStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Base
+    euiIcon: /*#__PURE__*/css("flex-shrink:0;display:inline-block;vertical-align:middle;fill:currentColor;transform:translate(0, 0);.euiIcon__fillNegative{fill:", euiTheme.colors.darkestShade, ";};label:euiIcon;"),
+    // Colors
+    accent: /*#__PURE__*/css("color:", euiTheme.colors.accentText, ";;label:accent;"),
+    danger: /*#__PURE__*/css("color:", euiTheme.colors.dangerText, ";;label:danger;"),
+    ghost: /*#__PURE__*/css("color:", euiTheme.colors.ghost, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:ghost;"),
+    primary: /*#__PURE__*/css("color:", euiTheme.colors.primaryText, ";;label:primary;"),
+    success: /*#__PURE__*/css("color:", euiTheme.colors.successText, ";;label:success;"),
+    subdued: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
+    text: /*#__PURE__*/css("color:", euiTheme.colors.title, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:text;"),
+    warning: /*#__PURE__*/css("color:", euiTheme.colors.warningText, ";;label:warning;"),
+    inherit: _ref2,
+    default: /*#__PURE__*/css(";label:default;"),
+    customColor: /*#__PURE__*/css(";label:customColor;"),
+    logoElasticOutline: _ref,
+    // Sizes
+    original: /*#__PURE__*/css(";label:original;"),
+    s: /*#__PURE__*/css(iconSize(euiTheme.size.m), ";label:s;"),
+    m: /*#__PURE__*/css(iconSize(euiTheme.size.base), ";label:m;"),
+    l: /*#__PURE__*/css(iconSize(euiTheme.size.l), ";label:l;"),
+    xl: /*#__PURE__*/css(iconSize(euiTheme.size.xl), ";label:xl;"),
+    xxl: /*#__PURE__*/css(iconSize(euiTheme.size.xxl), ";label:xxl;"),
+    // Variants
+    // App icons are two-toned. This provides the base color.
+    app: /*#__PURE__*/css("fill:", euiTheme.colors.text, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.successText, ";};label:app;"),
+    logo: /*#__PURE__*/css(";label:logo;"),
+    // Loading states
+    isLoading: /*#__PURE__*/css("opacity:", iconLoadingOpacity, ";background-color:currentColor;border-radius:", euiTheme.border.radius.small, ";;label:isLoading;"),
+    isLoaded: /*#__PURE__*/css(euiCanAnimate, "{animation:", iconLoading, " ", euiTheme.animation.normal, " ease-in 0s 1 forwards;};label:isLoaded;")
+  };
+};