[EuiIcon] Add crossInCircle glyph (#7924)

Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: Cee Chen <[email protected]>

packages/eui/changelogs/upcoming/7924.md

@@ -0,0 +1,2 @@
+- Updated `EuiIcon` with a new `crossInCircle` glyph
+

packages/eui/src-docs/src/views/icon/icons.js

@@ -67,6 +67,7 @@ export const iconTypes = [
   'copy',
   'copyClipboard',
   'cross',
+  'crossInCircle',
   'crosshairs',
   'currency',
   'cut',

packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -1989,6 +1989,29 @@ exports[`EuiIcon props type crossClusterReplicationApp is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type crossInCircle is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="crossInCircle"
+  data-is-loaded="true"
+  fill="none"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708Z"
+  />
+  <path
+    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1 0A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type crosshairs is rendered 1`] = `
 <svg
   aria-hidden="true"

packages/eui/src/components/icon/assets/crossInCircle.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+import { htmlIdGenerator } from '../../../services';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconCrossInCircle = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  const generateId = htmlIdGenerator('crossInCircle');
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={16}
+      height={16}
+      fill="none"
+      viewBox="0 0 16 16"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <g clipPath={`url(#${generateId('a')})`}>
+        <path
+          d="m8.755 8 2.64 2.641a.534.534 0 1 1-.754.755L8 8.755l-2.641 2.64a.534.534 0 1 1-.755-.754L7.245 8l-2.64-2.641a.534.534 0 1 1 .754-.755L8 7.245l2.641-2.64a.534.534 0 1 1 .755.754L8.755 8Zm4.904-5.66c3.121 3.121 3.121 8.199 0 11.32-3.12 3.12-8.198 3.12-11.318 0C-.78 10.538-.78 5.46 2.34 2.34c3.12-3.12 8.198-3.12 11.319 0Zm-.665.666a7.062 7.062 0 1 0-9.988 9.988 7.062 7.062 0 0 0 9.988-9.988Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id={generateId('a')}>
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+export const icon = EuiIconCrossInCircle;

packages/eui/src/components/icon/assets/cross_in_circle.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconCrossInCircle = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708Z" />
+    <path
+      fillRule="evenodd"
+      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1 0A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+    />
+  </svg>
+);
+export const icon = EuiIconCrossInCircle;

packages/eui/src/components/icon/icon_map.ts

@@ -79,6 +79,7 @@ export const typeToPathMap = {
   createSingleMetricJob: 'ml_create_single_metric_job',
   cross: 'cross',
   crossClusterReplicationApp: 'app_cross_cluster_replication',
+  crossInCircle: 'cross_in_circle',
   crosshairs: 'crosshairs',
   currency: 'currency',
   cut: 'cut',