Update IconType and its proptype usage

src-docs/src/views/icon/icon_example.js

@@ -82,7 +82,7 @@ import IconTypes from './icon_types';
 const iconTypesSource = require('!!raw-loader!./icon_types');
 const iconTypesSnippet = [`<EuiIcon type="logoElastic" size="xl" />`,
   `<EuiIcon type={reactSVGElement} size="xl" />`,
-  `<EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg" size="xl" />`,
+  `<EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" size="xl" />`,
   `<EuiButton iconType={reactSVGElement}>Works in other components too</EuiButton>`];
 
 export const IconExample = {
@@ -278,7 +278,8 @@ export const IconExample = {
     text: (
       <p>
         The <EuiCode>type</EuiCode> prop can accept a valid enum, string or React SVG Element. When using a custom SVG, please make sure
-        it sits on a square canvas and preferably utilizes one of EUI&apos;s sizes (16x16, 32x32...etc).
+        it sits on a square canvas and preferably utilizes one of EUI&apos;s sizes (16x16, 32x32...etc). For IE11 compatibility, the SVG
+        file <em>must</em> contain a <EuiCode>viewBox</EuiCode>.
       </p>
     ),
     source: [{

src-docs/src/views/icon/icon_types.js

@@ -38,7 +38,7 @@ export default () => (
       >
         <EuiPanel>
           <EuiIcon
-            type="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg"
+            type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"
             size="xl"
           />
           <EuiText size="s">
@@ -72,7 +72,7 @@ export default () => (
 
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <EuiButton iconType="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg">http://some.svg</EuiButton>
+        <EuiButton iconType="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">http://some.svg</EuiButton>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiButton iconType={reactSvg}>{`{reactSvg}`}</EuiButton>

src/components/badge/badge.js

@@ -7,7 +7,7 @@ import { isColorDark, hexToRgb } from '../../services/color';
 import { EuiKeyboardAccessible } from '../accessibility';
 
 import {
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../icon';
 
@@ -150,7 +150,7 @@ EuiBadge.propTypes = {
   /**
    * Accepts any string from our icon library
    */
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
 
   /**
    * The side of the badge the icon should sit

src/components/badge/beta_badge/beta_badge.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { EuiToolTip } from '../../tool_tip';
 
 import {
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../../icon';
 
@@ -78,7 +78,7 @@ EuiBetaBadge.propTypes = {
   /**
    * Supply an icon type if the badge should just be an icon
    */
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
 
   /**
    * Content for the tooltip

src/components/button/button.js

@@ -9,7 +9,7 @@ import {
 import { getSecureRelForTarget } from '../../services';
 
 import {
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../icon';
 
@@ -152,7 +152,7 @@ EuiButton.propTypes = {
   /**
    * See EuiIcon
    */
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
   iconSide: PropTypes.oneOf(ICON_SIDES),
 
   /**

src/components/button/button_empty/button_empty.js

@@ -9,7 +9,7 @@ import {
 import { getSecureRelForTarget } from '../../../services';
 
 import {
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../../icon';
 
@@ -150,7 +150,7 @@ export const EuiButtonEmpty = ({
 EuiButtonEmpty.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
   iconSide: PropTypes.oneOf(ICON_SIDES),
   color: PropTypes.oneOf(COLORS),
   size: PropTypes.oneOf(SIZES),

src/components/button/button_icon/button_icon.js

@@ -6,7 +6,7 @@ import { getSecureRelForTarget } from '../../../services';
 
 import {
   ICON_SIZES,
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../../icon';
 
@@ -107,7 +107,7 @@ export const EuiButtonIcon = ({
 EuiButtonIcon.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
   iconSize: PropTypes.oneOf(ICON_SIZES),
   color: PropTypes.oneOf(COLORS),
   isDisabled: PropTypes.bool,

src/components/call_out/call_out.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../icon';
 
@@ -94,7 +94,7 @@ EuiCallOut.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   title: PropTypes.node,
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
   color: PropTypes.oneOf(COLORS),
   size: PropTypes.oneOf(SIZES),
 };

src/components/date_picker/date_picker_range.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 
 import { EuiText } from '../text';
 import {
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../icon';
 
@@ -91,7 +91,7 @@ EuiDatePickerRange.propTypes = {
    */
   iconType: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(ICON_TYPES),
+    IconPropType,
   ]),
   fullWidth: PropTypes.bool,
   /**

src/components/empty_prompt/empty_prompt.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { TITLE_SIZES } from '../title/title';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSpacer } from '../spacer';
-import { EuiIcon, COLORS, TYPES } from '../icon/icon';
+import { EuiIcon, COLORS, IconPropType } from '../icon/icon';
 import { EuiText, EuiTextColor } from '../text';
 import { EuiTitle } from '../title';
 
@@ -116,7 +116,7 @@ export const EuiEmptyPrompt = ({
 };
 
 EuiEmptyPrompt.propTypes = {
-  iconType: PropTypes.oneOf(TYPES),
+  iconType: IconPropType,
 
   /**
    * Pass `null` to use original icon color

src/components/filter_group/filter_button.js

@@ -11,7 +11,7 @@ import {
 } from '../button/button_empty';
 
 import {
-  ICON_TYPES,
+  IconPropType,
 } from '../icon';
 
 export const EuiFilterButton = ({
@@ -95,7 +95,7 @@ EuiFilterButton.propTypes = {
   /**
    * Use any one of our icons
    */
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
   iconSide: PropTypes.oneOf(ICON_SIDES),
   color: PropTypes.oneOf(COLORS),
   /**

src/components/header/header_logo.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import {
   EuiIcon,
+  IconPropType,
 } from '../icon';
 
 export const EuiHeaderLogo = ({ iconType, iconTitle, href, children, className, ...rest }) => {
@@ -28,7 +29,7 @@ export const EuiHeaderLogo = ({ iconType, iconTitle, href, children, className,
 EuiHeaderLogo.propTypes = {
   href: PropTypes.string,
   children: PropTypes.node,
-  iconType: PropTypes.string,
+  iconType: IconPropType,
   iconTitle: PropTypes.string,
 };
 

src/components/icon/icon.tsx

@@ -4,6 +4,7 @@ import React, {
   ReactElement,
   SVGAttributes,
 } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { CommonProps, Omit, keysOf } from '../common';
@@ -316,9 +317,16 @@ const typeToPathMap = {
   tokenNamespace: 'tokens/tokenNamespace',
 };
 
-export const TYPES: IconType[] = keysOf(typeToPathMap);
+export const TYPES = keysOf(typeToPathMap);
 
-export type IconType = keyof typeof typeToPathMap;
+export type EuiIconType = keyof typeof typeToPathMap;
+
+export type IconType = EuiIconType | string | ReactElement;
+
+export const IconPropType = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.node,
+]);
 
 const colorToClassMap = {
   default: null,
@@ -361,7 +369,7 @@ export interface EuiIconProps {
   /**
    * `Enum` is any of the named icons listed in the docs, `Element` is any React SVG element, and `string` is usually a URL to an SVG file
    */
-  type: IconType | ReactElement<SVGElement> | string;
+  type: IconType;
   /**
    * 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.
@@ -374,23 +382,23 @@ export interface EuiIconProps {
 }
 
 type Props = CommonProps &
-  Omit<SVGAttributes<SVGElement>, 'color'> &
+  Omit<SVGAttributes<SVGElement>, keyof EuiIconProps> &
   EuiIconProps;
 
 interface State {
-  icon: undefined | ReactElement<any> | string;
+  icon: undefined | ReactElement | string;
   isLoading: boolean;
 }
 
-function isIconType(x: EuiIconProps['type']): x is IconType {
+function isEuiIconType(x: EuiIconProps['type']): x is EuiIconType {
   return typeof x === 'string' && typeToPathMap.hasOwnProperty(x);
 }
 
 function getInitialIcon(icon: EuiIconProps['type']) {
   if (icon == null) {
     return undefined;
   }
-  if (isIconType(icon)) {
+  if (isEuiIconType(icon)) {
     return undefined;
   }
   return icon;
@@ -403,7 +411,7 @@ export class EuiIcon extends Component<Props, State> {
     const initialIcon = getInitialIcon(this.props.type);
     let isLoading = false;
 
-    if (isIconType(this.props.type)) {
+    if (isEuiIconType(this.props.type)) {
       isLoading = true;
       import('./assets/' + typeToPathMap[this.props.type] + '.js').then(
         ({ icon }) => {
@@ -447,6 +455,7 @@ export class EuiIcon extends Component<Props, State> {
     // These icons are a little special and get some extra CSS flexibility
     const isAppIcon =
       type &&
+      typeof type === 'string' &&
       (/.+App$/.test(type) || /.+Job$/.test(type) || type === 'dataVisualizer');
 
     const classes = classNames(

src/components/icon/index.ts

@@ -3,6 +3,7 @@ export {
   IconColor,
   IconSize,
   IconType,
+  IconPropType,
   TYPES as ICON_TYPES,
   SIZES as ICON_SIZES,
   COLORS as ICON_COLORS,

src/components/key_pad_menu/key_pad_menu_item.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { EuiBetaBadge } from '../../components/badge/beta_badge';
 
 import {
-  ICON_TYPES,
+  IconPropType,
 } from '../icon';
 
 const renderContent = (children, label, betaBadgeLabel, betaBadgeTooltipContent, betaBadgeIconType) => (
@@ -43,7 +43,7 @@ const commonPropTypes = {
   /**
    * Supply an icon type if the badge should just be an icon
    */
-  betaBadgeIconType: PropTypes.oneOf(ICON_TYPES),
+  betaBadgeIconType: IconPropType,
 
   /**
    * Add a description to the beta badge (will appear in a tooltip)

src/components/list_group/list_group_item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { EuiButtonIcon } from '../button';
-import { ICON_TYPES, EuiIcon } from '../icon';
+import { IconPropType, EuiIcon } from '../icon';
 import { EuiToolTip } from '../tool_tip';
 
 const sizeToClassNameMap = {
@@ -182,7 +182,7 @@ EuiListGroupItem.propTypes = {
   /**
    * Adds `EuiIcon` of `EuiIcon.type`
    */
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
 
   /**
    * Custom node to pass as the icon. Cannot be used in conjunction
@@ -200,7 +200,7 @@ EuiListGroupItem.propTypes = {
    * pass `alwaysShow` if you don't want the default behavior of only showing on hover
    */
   extraAction: PropTypes.shape({
-    iconType: PropTypes.oneOf(ICON_TYPES).isRequired,
+    iconType: IconPropType.isRequired,
     alwaysShow: PropTypes.bool,
   }),
 

src/components/table/table_header_button.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {
-  ICON_TYPES,
+  IconPropType,
   EuiIcon,
 } from '../icon';
 
@@ -44,5 +44,5 @@ export const EuiTableHeaderButton = ({
 EuiTableHeaderButton.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  iconType: PropTypes.oneOf(ICON_TYPES),
+  iconType: IconPropType,
 };

src/components/toast/global_toast_list.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { Timer } from '../../services/time';
-import { ICON_TYPES } from '../icon';
+import { IconPropType } from '../icon';
 import { EuiGlobalToastListItem } from './global_toast_list_item';
 import { EuiToast } from './toast';
 
@@ -38,7 +38,7 @@ export class EuiGlobalToastList extends Component {
       title: PropTypes.string,
       text: PropTypes.node,
       color: PropTypes.string,
-      iconType: PropTypes.oneOf(ICON_TYPES),
+      iconType: IconPropType,
       toastLifeTimeMs: PropTypes.number,
     }).isRequired),
     dismissToast: PropTypes.func.isRequired,