elastic · andreadelrio · Feb 19, 2020 · Feb 19, 2020 · Feb 19, 2020 · Feb 19, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Added `paperClip` glyph to `EuiIcon` ([#2845](https://github.com/elastic/eui/pull/2845))
 - Added `banner` prop to `EuiFlyoutBody` and updated `euiOverflowShadow` mixin ([#2837](https://github.com/elastic/eui/pull/2837))
 - Added control columns to `EuiDataGrid` to support non-data columns like row selection and actions ([#2846](https://github.com/elastic/eui/pull/2846))
+- Added `image` glyph to `EuiIcon` ([#2870](https://github.com/elastic/eui/pull/2870))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -93,6 +93,7 @@ export const iconTypes = [
  'heatmap',
  'help',
  'iInCircle',
+ 'image',
  'importAction',
  'indexClose',
  'indexEdit',

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -2679,6 +2679,23 @@ exports[`EuiIcon props type iInCircle is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type image is rendered 1`] = `
+<svg
+ aria-hidden="true"
+ class="euiIcon euiIcon--medium euiIcon-isLoaded"
+ focusable="false"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+>
+ <path
+ d="M6 5a2 2 0 11-4 0 2 2 0 014 0zm9-4a1 1 0 011 1v12a1 1 0 01-1 1H1a1 1 0 01-1-1V2a1 1 0 011-1zm-3.448 6.134l-3.76 2.769a.5.5 0 01-.436.077l-.087-.034-1.713-.87L1 11.8V14h14V9.751l-3.448-2.617zM15 2H1v8.635l4.28-2.558a.5.5 0 01.389-.054l.094.037 1.684.855 3.813-2.807a.5.5 0 01.52-.045l.079.05L15 8.495V2z"
+ />
+</svg>
+`;
+
 exports[`EuiIcon props type importAction is rendered 1`] = `
 <svg
  aria-hidden="true"
@@ -7306,7 +7323,6 @@ exports[`EuiIcon props type tokenAlias is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
 >
- <title />
  <path
  d="M9.075 6.953a.5.5 0 11-.707.707 1.5 1.5 0 00-2.122 0L4.125 9.782a1.5 1.5 0 102.121 2.121l1.145-1.144a.5.5 0 01.707.707L6.953 12.61a2.5 2.5 0 11-3.535-3.535l2.121-2.122a2.5 2.5 0 013.536 0zm3.535-3.535a2.5 2.5 0 010 3.535L10.49 9.075a2.5 2.5 0 01-3.536 0 .5.5 0 11.707-.708 1.5 1.5 0 002.122 0l2.121-2.12a1.5 1.5 0 10-2.121-2.122L8.637 5.269a.5.5 0 11-.707-.707l1.145-1.144a2.5 2.5 0 013.535 0z"
  fill-rule="evenodd"
@@ -7415,7 +7431,6 @@ exports[`EuiIcon props type tokenDate is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
 >
- <title />
  <path
  d="M13 11.567C13 12.36 12.36 13 11.567 13H4.433C3.64 13 3 12.36 3 11.567V4.433C3 3.64 3.64 3 4.433 3H6v-.495a.51.51 0 01.412-.497L6.5 2c.276 0 .5.214.5.505V3h2v-.495a.51.51 0 01.412-.497L9.5 2c.276 0 .5.214.5.505V3h1.567C12.36 3 13 3.64 13 4.433v7.134zM4 6v5.33c0 .37.3.67.67.67h6.66c.37 0 .67-.3.67-.67V6H4zm1.5 4c.245 0 .45.183.492.412L6 10.5c0 .245-.183.45-.412.492L5.5 11a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L5.5 10zM8 10c.245 0 .45.183.492.412l.008.088c0 .245-.183.45-.412.492L8 11a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L8 10zm2.5 0c.245 0 .45.183.492.412L11 10.5c0 .245-.183.45-.412.492L10.5 11a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L10.5 10zm-5-1.5c.245 0 .45.183.492.412L6 9c0 .245-.183.45-.412.492L5.5 9.5A.505.505 0 015 9c0-.245.183-.45.412-.492L5.5 8.5zm2.5 0c.245 0 .45.183.492.412L8.5 9c0 .245-.183.45-.412.492L8 9.5a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L8 8.5zm2.5 0c.245 0 .45.183.492.412L11 9c0 .245-.183.45-.412.492L10.5 9.5A.505.505 0 0110 9c0-.245.183-.45.412-.492L10.5 8.5zM5.5 7c.245 0 .45.183.492.412L6 7.5c0 .245-.183.45-.412.492L5.5 8a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L5.5 7zM8 7c.245 0 .45.183.492.412L8.5 7.5c0 .245-.183.45-.412.492L8 8a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L8 7zm2.5 0c.245 0 .45.183.492.412L11 7.5c0 .245-.183.45-.412.492L10.5 8a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L10.5 7zM4 5h8v-.33c0-.37-.3-.67-.67-.67H4.67C4.3 4 4 4.3 4 4.67V5z"
  fill-rule="evenodd"
@@ -7576,7 +7591,6 @@ exports[`EuiIcon props type tokenGeo is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
 >
- <title />
  <path
  d="M8 3c1.636 0 3.088.785 4 2 .628.836 1 1.875 1 3a4.978 4.978 0 01-.999 3H12a4.992 4.992 0 01-4 2 4.992 4.992 0 01-4-1.999V11a5 5 0 014-8zm.948 8H7.052c.277.626.623 1 .948 1 .325 0 .67-.374.948-1zM6 11l-.645.001c.274.242.581.446.914.606A5.445 5.445 0 016 11.001zm4.645.001H10a5.51 5.51 0 01-.269.606c.333-.16.64-.364.914-.606zm-5.133-2.5H4.031c.068.54.243 1.048.505 1.5h1.172a9.186 9.186 0 01-.196-1.5zm3.975 0H6.513c.03.544.104 1.05.21 1.5h2.553c.107-.45.182-.956.21-1.5zm2.482 0h-1.481a9.186 9.186 0 01-.196 1.5h1.172c.262-.452.437-.96.505-1.5zM5.708 6L4.535 6c-.261.452-.437.96-.504 1.5h1.481A9.187 9.187 0 015.708 6zm3.568 0H6.724c-.107.449-.182.955-.21 1.499h2.973a8.479 8.479 0 00-.21-1.5zM11.465 6h-1.173c.102.467.17.972.196 1.5h1.481a3.974 3.974 0 00-.504-1.5zM6.269 4.393l-.124.062c-.286.15-.551.333-.79.545H6a5.51 5.51 0 01.269-.607zM8 4c-.326 0-.671.375-.948 1h1.896C8.671 4.376 8.326 4 8 4zm1.73.393l.038.071c.083.168.161.347.232.536h.646a4.006 4.006 0 00-.915-.607z"
  fill-rule="evenodd"
@@ -7595,7 +7609,6 @@ exports[`EuiIcon props type tokenIP is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
 >
- <title />
  <path
  d="M11 3a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6zm-1 2H8v6h1V9.014h1c.298-.013 2 0 2-2.018 0-1.74-1.314-1.952-1.825-1.987L10 5zM6 5H5v6h1V5zm4 .984c.667 0 1 .336 1 1.008C11 7.664 10.667 8 10 8H9V5.984z"
  fill-rule="evenodd"
@@ -7705,7 +7718,6 @@ exports[`EuiIcon props type tokenNested is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
 >
- <title />
  <g
  fill-rule="evenodd"
  >
@@ -7854,7 +7866,6 @@ exports[`EuiIcon props type tokenRange is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
 >
- <title />
  <g
  fill-rule="evenodd"
  >
@@ -7894,7 +7905,6 @@ exports[`EuiIcon props type tokenShape is rendered 1`] = `
  width="16"
  xmlns="http://www.w3.org/2000/svg"
 >
- <title />
  <path
  d="M13 10v3h-3v-1H6v1H3v-3h1V6H3V3h3v1h4V3h3v3h-1v4h1zm-8 1H4v1h1v-1zm7 0h-1v1h1v-1zM5 4H4v1h1V4zm7 0h-1v1h1V4zm-1 2h-1V5H6v1H5v4h1v1h4v-1h1V6z"
  fill-rule="evenodd"

diff --git a/src/components/icon/assets/image.js b/src/components/icon/assets/image.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const EuiIconImage = ({ title, titleId, ...props }) => (
+ <svg
+ width={16}
+ height={16}
+ viewBox="0 0 16 16"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
+ {...props}>
+ {title ? <title id={titleId}>{title}</title> : null}
+ <path d="M6 5a2 2 0 11-4 0 2 2 0 014 0zm9-4a1 1 0 011 1v12a1 1 0 01-1 1H1a1 1 0 01-1-1V2a1 1 0 011-1zm-3.448 6.134l-3.76 2.769a.5.5 0 01-.436.077l-.087-.034-1.713-.87L1 11.8V14h14V9.751l-3.448-2.617zM15 2H1v8.635l4.28-2.558a.5.5 0 01.389-.054l.094.037 1.684.855 3.813-2.807a.5.5 0 01.52-.045l.079.05L15 8.495V2z" />
+ </svg>
+);
+
+export const icon = EuiIconImage;
diff --git a/src/components/icon/assets/image.svg b/src/components/icon/assets/image.svg
diff --git a/src/components/icon/assets/tokens/tokenAlias.js b/src/components/icon/assets/tokens/tokenAlias.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconTokenAlias = ({ title, ...props }) => (
+const EuiIconTokenAlias = ({ title, titleId, ...props }) => (
  <svg
  width={16}
  height={16}
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
  {...props}>
- <title>{title}</title>
+ {title ? <title id={titleId}>{title}</title> : null}
  <path
  fillRule="evenodd"
  d="M9.075 6.953a.5.5 0 11-.707.707 1.5 1.5 0 00-2.122 0L4.125 9.782a1.5 1.5 0 102.121 2.121l1.145-1.144a.5.5 0 01.707.707L6.953 12.61a2.5 2.5 0 11-3.535-3.535l2.121-2.122a2.5 2.5 0 013.536 0zm3.535-3.535a2.5 2.5 0 010 3.535L10.49 9.075a2.5 2.5 0 01-3.536 0 .5.5 0 11.707-.708 1.5 1.5 0 002.122 0l2.121-2.12a1.5 1.5 0 10-2.121-2.122L8.637 5.269a.5.5 0 11-.707-.707l1.145-1.144a2.5 2.5 0 013.535 0z"

diff --git a/src/components/icon/assets/tokens/tokenDate.js b/src/components/icon/assets/tokens/tokenDate.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconTokenDate = ({ title, ...props }) => (
+const EuiIconTokenDate = ({ title, titleId, ...props }) => (
  <svg
  width={16}
  height={16}
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
  {...props}>
- <title>{title}</title>
+ {title ? <title id={titleId}>{title}</title> : null}
  <path
  fillRule="evenodd"
  d="M13 11.567C13 12.36 12.36 13 11.567 13H4.433C3.64 13 3 12.36 3 11.567V4.433C3 3.64 3.64 3 4.433 3H6v-.495a.51.51 0 01.412-.497L6.5 2c.276 0 .5.214.5.505V3h2v-.495a.51.51 0 01.412-.497L9.5 2c.276 0 .5.214.5.505V3h1.567C12.36 3 13 3.64 13 4.433v7.134zM4 6v5.33c0 .37.3.67.67.67h6.66c.37 0 .67-.3.67-.67V6H4zm1.5 4c.245 0 .45.183.492.412L6 10.5c0 .245-.183.45-.412.492L5.5 11a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L5.5 10zM8 10c.245 0 .45.183.492.412l.008.088c0 .245-.183.45-.412.492L8 11a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L8 10zm2.5 0c.245 0 .45.183.492.412L11 10.5c0 .245-.183.45-.412.492L10.5 11a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L10.5 10zm-5-1.5c.245 0 .45.183.492.412L6 9c0 .245-.183.45-.412.492L5.5 9.5A.505.505 0 015 9c0-.245.183-.45.412-.492L5.5 8.5zm2.5 0c.245 0 .45.183.492.412L8.5 9c0 .245-.183.45-.412.492L8 9.5a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L8 8.5zm2.5 0c.245 0 .45.183.492.412L11 9c0 .245-.183.45-.412.492L10.5 9.5A.505.505 0 0110 9c0-.245.183-.45.412-.492L10.5 8.5zM5.5 7c.245 0 .45.183.492.412L6 7.5c0 .245-.183.45-.412.492L5.5 8a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L5.5 7zM8 7c.245 0 .45.183.492.412L8.5 7.5c0 .245-.183.45-.412.492L8 8a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L8 7zm2.5 0c.245 0 .45.183.492.412L11 7.5c0 .245-.183.45-.412.492L10.5 8a.505.505 0 01-.5-.5c0-.245.183-.45.412-.492L10.5 7zM4 5h8v-.33c0-.37-.3-.67-.67-.67H4.67C4.3 4 4 4.3 4 4.67V5z"

diff --git a/src/components/icon/assets/tokens/tokenGeo.js b/src/components/icon/assets/tokens/tokenGeo.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconTokenGeo = ({ title, ...props }) => (
+const EuiIconTokenGeo = ({ title, titleId, ...props }) => (
  <svg
  width={16}
  height={16}
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
  {...props}>
- <title>{title}</title>
+ {title ? <title id={titleId}>{title}</title> : null}
  <path
  fillRule="evenodd"
  d="M8 3c1.636 0 3.088.785 4 2 .628.836 1 1.875 1 3a4.978 4.978 0 01-.999 3H12a4.992 4.992 0 01-4 2 4.992 4.992 0 01-4-1.999V11a5 5 0 014-8zm.948 8H7.052c.277.626.623 1 .948 1 .325 0 .67-.374.948-1zM6 11l-.645.001c.274.242.581.446.914.606A5.445 5.445 0 016 11.001zm4.645.001H10a5.51 5.51 0 01-.269.606c.333-.16.64-.364.914-.606zm-5.133-2.5H4.031c.068.54.243 1.048.505 1.5h1.172a9.186 9.186 0 01-.196-1.5zm3.975 0H6.513c.03.544.104 1.05.21 1.5h2.553c.107-.45.182-.956.21-1.5zm2.482 0h-1.481a9.186 9.186 0 01-.196 1.5h1.172c.262-.452.437-.96.505-1.5zM5.708 6L4.535 6c-.261.452-.437.96-.504 1.5h1.481A9.187 9.187 0 015.708 6zm3.568 0H6.724c-.107.449-.182.955-.21 1.499h2.973a8.479 8.479 0 00-.21-1.5zM11.465 6h-1.173c.102.467.17.972.196 1.5h1.481a3.974 3.974 0 00-.504-1.5zM6.269 4.393l-.124.062c-.286.15-.551.333-.79.545H6a5.51 5.51 0 01.269-.607zM8 4c-.326 0-.671.375-.948 1h1.896C8.671 4.376 8.326 4 8 4zm1.73.393l.038.071c.083.168.161.347.232.536h.646a4.006 4.006 0 00-.915-.607z"

diff --git a/src/components/icon/assets/tokens/tokenIP.js b/src/components/icon/assets/tokens/tokenIP.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconTokenIP = ({ title, ...props }) => (
+const EuiIconTokenIP = ({ title, titleId, ...props }) => (
  <svg
  width={16}
  height={16}
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
  {...props}>
- <title>{title}</title>
+ {title ? <title id={titleId}>{title}</title> : null}
  <path
  fillRule="evenodd"
  d="M11 3a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6zm-1 2H8v6h1V9.014h1c.298-.013 2 0 2-2.018 0-1.74-1.314-1.952-1.825-1.987L10 5zM6 5H5v6h1V5zm4 .984c.667 0 1 .336 1 1.008C11 7.664 10.667 8 10 8H9V5.984z"

diff --git a/src/components/icon/assets/tokens/tokenNested.js b/src/components/icon/assets/tokens/tokenNested.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconTokenNested = ({ title, ...props }) => (
+const EuiIconTokenNested = ({ title, titleId, ...props }) => (
  <svg
  width={16}
  height={16}
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
  {...props}>
- <title>{title}</title>
+ {title ? <title id={titleId}>{title}</title> : null}
  <g fillRule="evenodd">
  <path d="M11 3c1.044 0 1.913.757 1.994 1.736l.006.149v6.23c0 1-.82 1.805-1.845 1.88L11 13H9.501a.5.5 0 01-.09-.992l.09-.008H11c.52 0 .937-.35.993-.783l.007-.102v-6.23c0-.445-.379-.827-.882-.879L11 4H9.5a.5.5 0 01-.09-.992L9.5 3H11zM6.5 3a.5.5 0 01.09.992L6.5 4H5c-.52 0-.937.35-.993.783L4 4.885v6.23c0 .445.379.827.882.879L5 12h1.5a.5.5 0 01.09.992L6.5 13H5c-1.044 0-1.913-.757-1.994-1.736L3 11.115v-6.23c0-1 .82-1.805 1.845-1.88L5 3h1.5z" />
  <path d="M5.864 7.25a.714.714 0 110 1.429.714.714 0 010-1.429zm2.143 0a.714.714 0 110 1.429.714.714 0 010-1.429zm2.143 0a.714.714 0 110 1.429.714.714 0 010-1.429z" />

diff --git a/src/components/icon/assets/tokens/tokenRange.js b/src/components/icon/assets/tokens/tokenRange.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconTokenRange = ({ title, ...props }) => (
+const EuiIconTokenRange = ({ title, titleId, ...props }) => (
  <svg
  width={16}
  height={16}
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
  {...props}>
- <title>{title}</title>
+ {title ? <title id={titleId}>{title}</title> : null}
  <g fillRule="evenodd">
  <path d="M9.82 5.116a.5.5 0 00-.704.704l.064.064L11.719 8l-2.54 2.116a.5.5 0 00-.114.63l.05.074a.5.5 0 00.63.115l.075-.05 3-2.5a.5.5 0 00.071-.697l-.07-.072-3-2.5zM6.18 5.116a.5.5 0 01.704.704l-.064.064L4.281 8l2.54 2.116a.5.5 0 01.114.63l-.05.074a.5.5 0 01-.63.115l-.075-.05-3-2.5a.5.5 0 01-.071-.697l.07-.072 3-2.5z" />
  </g>

diff --git a/src/components/icon/assets/tokens/tokenShape.js b/src/components/icon/assets/tokens/tokenShape.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconTokenShape = ({ title, ...props }) => (
+const EuiIconTokenShape = ({ title, titleId, ...props }) => (
  <svg
  width={16}
  height={16}
  viewBox="0 0 16 16"
  xmlns="http://www.w3.org/2000/svg"
+ aria-labelledby={titleId}
  {...props}>
- <title>{title}</title>
+ {title ? <title id={titleId}>{title}</title> : null}
  <path
  fillRule="evenodd"
  d="M13 10v3h-3v-1H6v1H3v-3h1V6H3V3h3v1h4V3h3v3h-1v4h1zm-8 1H4v1h1v-1zm7 0h-1v1h1v-1zM5 4H4v1h1V4zm7 0h-1v1h1V4zm-1 2h-1V5H6v1H5v4h1v1h4v-1h1V6z"

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -141,6 +141,7 @@ const typeToPathMap = {
  heatmap: 'heatmap',
  help: 'help',
  iInCircle: 'iInCircle',
+ image: 'image',
  importAction: 'import',
  indexClose: 'index_close',
  indexEdit: 'index_edit',