@elastic/eui 59.1.0 → 60.1.0

package/lib/components/icon/icon.js

@@ -5,7 +5,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.clearIconComponentCache = exports.appendIconComponentCache = exports.TYPES = exports.SIZES = exports.EuiIcon = exports.COLORS = void 0;
+Object.defineProperty(exports, "COLORS", {
+  enumerable: true,
+  get: function get() {
+    return _named_colors.COLORS;
+  }
+});
+exports.clearIconComponentCache = exports.appendIconComponentCache = exports.TYPES = exports.SIZES = exports.EuiIconClass = exports.EuiIcon = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,6 +21,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _common = require("../common");
 
+var _icon_map = require("./icon_map");
+
 var _empty = require("./assets/empty");
 
 var _react2 = require("../../services/react");
@@ -23,14 +31,20 @@ var _services = require("../../services");
 
 var _named_colors = require("./named_colors");
 
+var _icon = require("./icon.styles");
+
 var _react3 = require("@emotion/react");
 
-var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad"];
+var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "onIconLoad", "theme", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+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 _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; }
@@ -70,472 +84,13 @@ 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'
-};
-var TYPES = (0, _common.keysOf)(typeToPathMap);
+var TYPES = (0, _common.keysOf)(_icon_map.typeToPathMap);
 exports.TYPES = TYPES;
-var COLORS = (0, _common.keysOf)(_named_colors.colorToClassMap); // We accept arbitrary color strings, which are impossible to type.
-
-exports.COLORS = COLORS;
-var sizeToClassNameMap = {
-  original: null,
-  s: 'euiIcon--small',
-  m: 'euiIcon--medium',
-  l: 'euiIcon--large',
-  xl: 'euiIcon--xLarge',
-  xxl: 'euiIcon--xxLarge'
-};
-var SIZES = (0, _common.keysOf)(sizeToClassNameMap);
+var SIZES = ['original', 's', 'm', 'l', 'xl', 'xxl'];
 exports.SIZES = SIZES;
 
 function isEuiIconType(x) {
-  return typeof x === 'string' && typeToPathMap.hasOwnProperty(x);
+  return typeof x === 'string' && _icon_map.typeToPathMap.hasOwnProperty(x);
 }
 
 function getInitialIcon(icon) {
@@ -577,15 +132,15 @@ var appendIconComponentCache = function appendIconComponentCache(iconTypeToIconC
 
 exports.appendIconComponentCache = appendIconComponentCache;
 
-var EuiIcon = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EuiIcon, _PureComponent);
+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);
 
@@ -610,7 +165,7 @@ var EuiIcon = /*#__PURE__*/function (_PureComponent) {
       // It's important that we don't use a template string here, it
       // stops webpack from building a dynamic require context.
       // eslint-disable-next-line prefer-template
-      './assets/' + typeToPathMap[iconType])).then(function (s) {
+      './assets/' + _icon_map.typeToPathMap[iconType])).then(function (s) {
         return _interopRequireWildcard(require(s));
       }).then(function (_ref) {
         var icon = _ref.icon;
@@ -646,7 +201,7 @@ var EuiIcon = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
 
-  _createClass(EuiIcon, [{
+  _createClass(EuiIconClass, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var type = this.props.type;
@@ -702,35 +257,29 @@ 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 && !(0, _named_colors.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 ((0, _named_colors.isNamedColor)(color)) {
-          optionalColorClass = _named_colors.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 = (0, _classnames.default)('euiIcon', className); // Emotion styles
 
-      var classes = (0, _classnames.default)('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 = (0, _icon.euiIconStyles)(theme);
+      var cssStyles = [styles.euiIcon, styles[size], color && (0, _named_colors.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.icon; // 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,
@@ -745,6 +294,7 @@ var EuiIcon = /*#__PURE__*/function (_PureComponent) {
           alt: title ? title : '',
           src: icon,
           className: classes,
+          css: cssStyles,
           tabIndex: tabIndex
         }, rest));
       } else {
@@ -767,21 +317,24 @@ var EuiIcon = /*#__PURE__*/function (_PureComponent) {
         return (0, _react3.jsx)(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;
+  return EuiIconClass;
 }(_react.PureComponent);
 
-exports.EuiIcon = EuiIcon;
-EuiIcon.propTypes = {
+exports.EuiIconClass = EuiIconClass;
+EuiIconClass.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -795,12 +348,12 @@ EuiIcon.propTypes = {
        * One of EUI's color palette or a valid CSS color value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
        * Note that coloring only works if your SVG is removed of fill attributes.
        */
-  color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.oneOf(["default", "primary", "success", "accent", "warning", "danger", "text", "subdued", "ghost", "inherit"]).isRequired]),
+  color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
 
   /**
        * Note that every size other than `original` assumes the provided SVG sits on a square viewbox.
        */
-  size: _propTypes.default.oneOf(["original", "s", "m", "l", "xl", "xxl"]),
+  size: _propTypes.default.any,
 
   /**
        * Descriptive title for naming the icon based on its use
@@ -821,4 +374,6 @@ EuiIcon.propTypes = {
        * Callback when the icon has been loaded & rendered
        */
   onIconLoad: _propTypes.default.func
-};
+};
+var EuiIcon = (0, _services.withEuiTheme)(EuiIconClass);
+exports.EuiIcon = EuiIcon;