[Lens] Move custom chart icons into lens package (#138101)

* [Lens] Move custom chart icons into lens package

Closes #135230

* add storybook

* fix merge conflicts

* [CI] Auto-commit changed files from 'node scripts/generate packages_build_manifest'

* clenaup

* add region_map icon into package

* fix styles

* Update README.md

* fix ci

* try to fix CI

* fix PR comments

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* RegionMap -> LensIconRegionMap

* lensIcons -> lens_icons

* move to x-pack packages

* [CI] Auto-commit changed files from 'node scripts/generate packages_build_manifest'

* move to x-pack/packages/lens/icons

* fix jest

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

.buildkite/scripts/steps/storybooks/build_and_upload.ts

@@ -17,6 +17,7 @@ const STORYBOOKS = [
   'ci_composite',
   'cloud',
   'coloring',
+  'lens_icons',
   'controls',
   'custom_integrations',
   'dashboard_enhanced',

package.json

@@ -271,6 +271,7 @@
     "@kbn/jsonc": "link:bazel-bin/packages/kbn-jsonc",
     "@kbn/kibana-manifest-parser": "link:bazel-bin/packages/kbn-kibana-manifest-parser",
     "@kbn/kibana-manifest-schema": "link:bazel-bin/packages/kbn-kibana-manifest-schema",
+    "@kbn/lens-icons": "link:bazel-bin/x-pack/packages/lens/icons",
     "@kbn/logging": "link:bazel-bin/packages/kbn-logging",
     "@kbn/logging-mocks": "link:bazel-bin/packages/kbn-logging-mocks",
     "@kbn/mapbox-gl": "link:bazel-bin/packages/kbn-mapbox-gl",
@@ -926,6 +927,7 @@
     "@types/kbn__kbn-ci-stats-performance-metrics": "link:bazel-bin/packages/kbn-kbn-ci-stats-performance-metrics/npm_module_types",
     "@types/kbn__kibana-manifest-parser": "link:bazel-bin/packages/kbn-kibana-manifest-parser/npm_module_types",
     "@types/kbn__kibana-manifest-schema": "link:bazel-bin/packages/kbn-kibana-manifest-schema/npm_module_types",
+    "@types/kbn__lens-icons": "link:bazel-bin/x-pack/packages/lens/icons/npm_module_types",
     "@types/kbn__logging": "link:bazel-bin/packages/kbn-logging/npm_module_types",
     "@types/kbn__logging-mocks": "link:bazel-bin/packages/kbn-logging-mocks/npm_module_types",
     "@types/kbn__managed-vscode-config": "link:bazel-bin/packages/kbn-managed-vscode-config/npm_module_types",

packages/BUILD.bazel

@@ -262,6 +262,7 @@ filegroup(
     "//packages/shared-ux/prompt/no_data_views/mocks:build",
     "//packages/shared-ux/prompt/no_data_views/types:build",
     "//packages/shared-ux/storybook/mock:build",
+    "//x-pack/packages/lens/icons:build",
     "//x-pack/packages/ml/agg_utils:build",
     "//x-pack/packages/ml/aiops_components:build",
     "//x-pack/packages/ml/aiops_utils:build",
@@ -505,6 +506,7 @@ filegroup(
     "//packages/shared-ux/prompt/no_data_views/impl:build_types",
     "//packages/shared-ux/prompt/no_data_views/mocks:build_types",
     "//packages/shared-ux/storybook/mock:build_types",
+    "//x-pack/packages/lens/icons:build_types",
     "//x-pack/packages/ml/agg_utils:build_types",
     "//x-pack/packages/ml/aiops_components:build_types",
     "//x-pack/packages/ml/aiops_utils:build_types",

packages/kbn-bazel-packages/src/bazel_package_dirs.ts

@@ -30,6 +30,7 @@ export const BAZEL_PACKAGE_DIRS = [
   'packages/core/*',
   'packages/home',
   'x-pack/packages/ml',
+  'x-pack/packages/lens',
 ];
 
 /**

src/dev/storybook/aliases.ts

@@ -13,6 +13,7 @@ export const storybookAliases = {
   ci_composite: '.ci/.storybook',
   cloud: 'x-pack/plugins/cloud/.storybook',
   coloring: 'packages/kbn-coloring/.storybook',
+  lens_icons: 'x-pack/packages/lens/icons/.storybook',
   controls: 'src/plugins/controls/storybook',
   custom_integrations: 'src/plugins/custom_integrations/storybook',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',

x-pack/packages/lens/icons/.storybook/main.js

@@ -0,0 +1,8 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = require('@kbn/storybook').defaultConfig;

x-pack/packages/lens/icons/BUILD.bazel

@@ -0,0 +1,136 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "icons"
+PKG_REQUIRE_NAME = "@kbn/lens-icons"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.svg",
+    "src/**/*.scss"
+  ],
+  exclude = [
+    "**/*.test.*",
+    "**/*.stories.*"
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+  "@npm//react",
+  "@npm//@elastic/eui",
+  "@npm//classnames",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//@types/classnames",
+  "@npm//@elastic/eui",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

x-pack/packages/lens/icons/README.md

@@ -0,0 +1,5 @@
+# @kbn/lens-icons
+
+This package contains lens svg shared assets
+
+It can be removes when the [EuiIllustrations](https://github.com/elastic/eui/discussions/5546) initiative is shipped.

x-pack/packages/lens/icons/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/lens/icons'],
+};

x-pack/packages/lens/icons/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/lens-icons",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

x-pack/packages/lens/icons/src/__stories__/icons.stories.tsx

@@ -0,0 +1,205 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, ComponentType } from 'react';
+import { EuiFlexItem, EuiFlexGroup, EuiEmptyPrompt, EuiForm, IconType } from '@elastic/eui';
+import { ComponentStory } from '@storybook/react';
+
+import {
+  IconCircle,
+  IconTriangle,
+  EuiIconAxisBottom,
+  EuiIconAxisLeft,
+  EuiIconAxisRight,
+  EuiIconAxisTop,
+  LensIconChartArea,
+  LensIconChartAreaPercentage,
+  LensIconChartAreaStacked,
+  LensIconChartBar,
+  LensIconChartBarAnnotations,
+  LensIconChartBarHorizontal,
+  LensIconChartBarHorizontalPercentage,
+  LensIconChartBarHorizontalStacked,
+  LensIconChartBarPercentage,
+  LensIconChartBarReferenceLine,
+  LensIconChartBarStacked,
+  LensIconChartDatatable,
+  LensIconChartDonut,
+  LensIconChartLine,
+  LensIconChartMetric,
+  LensIconChartMixedXy,
+  LensIconChartMosaic,
+  LensIconChartPie,
+  LensIconChartTreemap,
+  LensIconChartWaffle,
+  DropIllustration,
+  GlobeIllustration,
+  EuiIconLegend,
+  LensIconRegionMap,
+} from '..';
+
+export default {
+  title: 'Lens Icons',
+  decorators: [(story: Function) => <EuiForm>{story()}</EuiForm>],
+};
+
+const IconsArray: Array<{
+  title: string;
+  Component: ComponentType<{ title: string; titleId: string }>;
+}> = [
+  {
+    title: 'EuiIconAxisBottom',
+    Component: EuiIconAxisBottom,
+  },
+  {
+    title: 'EuiIconAxisLeft',
+    Component: EuiIconAxisLeft,
+  },
+  {
+    title: 'EuiIconAxisRight',
+    Component: EuiIconAxisRight,
+  },
+  {
+    title: 'EuiIconAxisTop',
+    Component: EuiIconAxisTop,
+  },
+  {
+    title: 'LensIconChartArea',
+    Component: LensIconChartArea,
+  },
+  {
+    title: 'LensIconChartAreaPercentage',
+    Component: LensIconChartAreaPercentage,
+  },
+  {
+    title: 'LensIconChartAreaStacked',
+    Component: LensIconChartAreaStacked,
+  },
+  {
+    title: 'LensIconChartBar',
+    Component: LensIconChartBar,
+  },
+  {
+    title: 'LensIconChartBarAnnotations',
+    Component: LensIconChartBarAnnotations,
+  },
+  {
+    title: 'LensIconChartBarHorizontal',
+    Component: LensIconChartBarHorizontal,
+  },
+  {
+    title: 'LensIconChartBarHorizontalPercentage',
+    Component: LensIconChartBarHorizontalPercentage,
+  },
+  {
+    title: 'LensIconChartBarHorizontalStacked',
+    Component: LensIconChartBarHorizontalStacked,
+  },
+  {
+    title: 'LensIconChartBarPercentage',
+    Component: LensIconChartBarPercentage,
+  },
+  {
+    title: 'LensIconChartBarReferenceLine',
+    Component: LensIconChartBarReferenceLine,
+  },
+  {
+    title: 'LensIconChartBarStacked',
+    Component: LensIconChartBarStacked,
+  },
+  {
+    title: 'LensIconChartDatatable',
+    Component: LensIconChartDatatable,
+  },
+  {
+    title: 'LensIconChartDonut',
+    Component: LensIconChartDonut,
+  },
+  {
+    title: 'LensIconChartLine',
+    Component: LensIconChartLine,
+  },
+  {
+    title: 'LensIconChartMetric',
+    Component: LensIconChartMetric,
+  },
+  {
+    title: 'LensIconChartMixedXy',
+    Component: LensIconChartMixedXy,
+  },
+  {
+    title: 'LensIconChartMosaic',
+    Component: LensIconChartMosaic,
+  },
+  {
+    title: 'LensIconChartPie',
+    Component: LensIconChartPie,
+  },
+  {
+    title: 'LensIconChartTreemap',
+    Component: LensIconChartTreemap,
+  },
+  {
+    title: 'LensIconChartWaffle',
+    Component: LensIconChartWaffle,
+  },
+  {
+    title: 'DropIllustration',
+    Component: DropIllustration,
+  },
+  {
+    title: 'GlobeIllustration',
+    Component: GlobeIllustration,
+  },
+  {
+    title: 'EuiIconLegend',
+    Component: EuiIconLegend,
+  },
+  {
+    title: 'IconCircle',
+    Component: IconCircle,
+  },
+  {
+    title: 'IconTriangle',
+    Component: IconTriangle,
+  },
+  {
+    title: 'LensIconRegionMap',
+    Component: LensIconRegionMap,
+  },
+];
+
+interface RootComponentProps {
+  icons: typeof IconsArray;
+}
+
+function RootComponent(props: RootComponentProps) {
+  return (
+    <EuiFlexGroup direction={'row'} responsive={false} wrap={true}>
+      {props.icons.map((i) => (
+        <EuiFlexItem>
+          <EuiEmptyPrompt
+            style={{ minWidth: '250px' }}
+            hasBorder={true}
+            hasShadow={true}
+            iconType={i.Component as IconType}
+            title={<>{i.title}</>}
+            titleSize={'s'}
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+}
+
+const Template: ComponentStory<FC<RootComponentProps>> = (args) => <RootComponent {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  icons: IconsArray,
+};

x-pack/packages/lens/icons/src/assets/index.scss

@@ -0,0 +1,15 @@
+.lensChartIcon__subdued {
+  fill: $euiTextSubduedColor;
+
+  .lnsLayerChartSwitch__item-isSelected & {
+    fill: currentColor;
+  }
+}
+
+.lensChartIcon__accent {
+  fill: $euiColorVis0;
+
+  .lnsLayerChartSwitch__item-isSelected & {
+    fill: makeGraphicContrastColor($euiColorVis0, $euiColorDarkShade);
+  }
+}

x-pack/packages/lens/icons/src/assets/index.ts

@@ -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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import './index.scss';
+
+export { IconCircle, IconTriangle } from './annotation_icons';
+
+export { EuiIconAxisBottom } from './axis_bottom';
+export { EuiIconAxisLeft } from './axis_left';
+export { EuiIconAxisRight } from './axis_right';
+export { EuiIconAxisTop } from './axis_top';
+export { LensIconChartArea } from './chart_area';
+export { LensIconChartAreaPercentage } from './chart_area_percentage';
+export { LensIconChartAreaStacked } from './chart_area_stacked';
+export { LensIconChartBar } from './chart_bar';
+export { LensIconChartBarAnnotations } from './chart_bar_annotations';
+export { LensIconChartBarHorizontal } from './chart_bar_horizontal';
+export { LensIconChartBarHorizontalPercentage } from './chart_bar_horizontal_percentage';
+export { LensIconChartBarHorizontalStacked } from './chart_bar_horizontal_stacked';
+export { LensIconChartBarPercentage } from './chart_bar_percentage';
+export { LensIconChartBarReferenceLine } from './chart_bar_reference_line';
+export { LensIconChartBarStacked } from './chart_bar_stacked';
+export { LensIconChartDatatable } from './chart_datatable';
+export { LensIconChartDonut } from './chart_donut';
+export { LensIconChartLine } from './chart_line';
+export { LensIconChartMetric } from './chart_metric';
+export { LensIconChartMixedXy } from './chart_mixed_xy';
+export { LensIconChartMosaic } from './chart_mosaic';
+export { LensIconChartPie } from './chart_pie';
+export { LensIconChartTreemap } from './chart_treemap';
+export { LensIconChartWaffle } from './chart_waffle';
+export { DropIllustration } from './drop_illustration';
+export { GlobeIllustration } from './globe_illustration';
+export { EuiIconLegend } from './legend';
+export { LensIconRegionMap } from './region_map';

x-pack/packages/lens/icons/src/assets/region_map.tsx

@@ -8,7 +8,7 @@
 import React, { FunctionComponent } from 'react';
 import type { EuiIconProps } from '@elastic/eui';
 
-export const Icon: FunctionComponent = ({
+export const LensIconRegionMap: FunctionComponent = ({
   title,
   titleId,
   ...props

x-pack/packages/lens/icons/src/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './assets';

x-pack/packages/lens/icons/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "rootDir": "src",
+    "types": [
+      "jest",
+      "node",
+      "react",
+    ],
+  },
+  "include": [
+    "src/**/*",
+  ]
+}

x-pack/plugins/lens/public/app_plugin/app.scss

@@ -19,21 +19,6 @@
   flex-grow: 1;
 }
 
-.lensChartIcon__subdued {
-  fill: $euiTextSubduedColor;
-
-  .lnsLayerChartSwitch__item-isSelected & {
-    fill: currentColor;
-  }
-}
-
-.lensChartIcon__accent {
-  fill: $euiColorVis0;
-
-  .lnsLayerChartSwitch__item-isSelected & {
-    fill: makeGraphicContrastColor($euiColorVis0, $euiColorDarkShade);
-  }
-}
 .lensAnnotationIconNoFill {
   fill: none;
 }

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx

@@ -19,7 +19,7 @@ import { ReactExpressionRendererType } from '@kbn/expressions-plugin/public';
 import { SuggestionPanel, SuggestionPanelProps, SuggestionPanelWrapper } from './suggestion_panel';
 import { getSuggestions } from './suggestion_helpers';
 import { EuiIcon, EuiPanel, EuiToolTip, EuiAccordion } from '@elastic/eui';
-import { LensIconChartDatatable } from '../../assets/chart_datatable';
+import { LensIconChartDatatable } from '@kbn/lens-icons';
 import { mountWithProvider } from '../../mocks';
 import {
   applyChanges,

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx

@@ -10,9 +10,9 @@ import { EuiPageContentBody, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { UiActionsStart, VISUALIZE_GEO_FIELD_TRIGGER } from '@kbn/ui-actions-plugin/public';
+import { GlobeIllustration } from '@kbn/lens-icons';
 import { getVisualizeGeoFieldMessage } from '../../../utils';
 import { DragDrop } from '../../../drag_drop';
-import { GlobeIllustration } from '../../../assets/globe_illustration';
 import { APP_ID } from '../../../../common/constants';
 import './geo_field_workspace_panel.scss';
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -35,6 +35,7 @@ import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
 import type { DefaultInspectorAdapters } from '@kbn/expressions-plugin/common';
 import type { Datatable } from '@kbn/expressions-plugin/public';
+import { DropIllustration } from '@kbn/lens-icons';
 import { trackUiCounterEvents } from '../../../lens_ui_telemetry';
 import {
   FramePublicAPI,
@@ -51,7 +52,6 @@ import { DragDrop, DragContext, DragDropIdentifier } from '../../../drag_drop';
 import { switchToSuggestion } from '../suggestion_helpers';
 import { buildExpression } from '../expression_helpers';
 import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
-import { DropIllustration } from '../../../assets/drop_illustration';
 import applyChangesIllustrationDark from '../../../assets/render_dark@2x.png';
 import applyChangesIllustrationLight from '../../../assets/render_light@2x.png';
 import {

x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx

@@ -9,7 +9,7 @@ import './toolbar_popover.scss';
 import React, { useState } from 'react';
 import { EuiFlexItem, EuiPopover, EuiIcon, EuiPopoverTitle, IconType } from '@elastic/eui';
 import { ToolbarButton, ToolbarButtonProps } from '@kbn/kibana-react-plugin/public';
-import { EuiIconLegend } from '../assets/legend';
+import { EuiIconLegend } from '@kbn/lens-icons';
 
 const typeToIconMap: { [type: string]: string | IconType } = {
   legend: EuiIconLegend as IconType,

x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx

@@ -14,7 +14,7 @@ import { IAggType } from '@kbn/data-plugin/public';
 import { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
 import { VisualizationContainer } from '../../../visualization_container';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
-import { LensIconChartDatatable } from '../../../assets/chart_datatable';
+import { LensIconChartDatatable } from '@kbn/lens-icons';
 import { DataContext, DatatableComponent } from './table_basic';
 import { DatatableProps } from '../../../../common/expressions';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';

x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx

@@ -29,12 +29,12 @@ import {
 } from '@elastic/eui';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
 import { ClickTriggerEvent } from '@kbn/charts-plugin/public';
+import { LensIconChartDatatable } from '@kbn/lens-icons';
 import type { LensTableRowContextMenuEvent } from '../../../types';
 import type { FormatFactory } from '../../../../common';
 import type { LensGridDirection } from '../../../../common/expressions';
 import { VisualizationContainer } from '../../../visualization_container';
 import { findMinMaxByColumnId } from '../../../shared_components';
-import { LensIconChartDatatable } from '../../../assets/chart_datatable';
 import type {
   DataContextType,
   DatatableRenderProps,

x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx

@@ -14,13 +14,13 @@ import { PaletteRegistry, CUSTOM_PALETTE } from '@kbn/coloring';
 import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
+import { LensIconChartDatatable } from '@kbn/lens-icons';
 import type {
   SuggestionRequest,
   Visualization,
   VisualizationSuggestion,
   DatasourceLayers,
 } from '../../types';
-import { LensIconChartDatatable } from '../../assets/chart_datatable';
 import { TableDimensionEditor } from './components/dimension_editor';
 import { TableDimensionEditorAdditionalSection } from './components/dimension_editor_addtional_section';
 import { LayerType, layerTypes } from '../../../common';

x-pack/plugins/lens/public/visualizations/heatmap/toolbar_component.tsx

@@ -10,6 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
 import { Position } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { LegendSize } from '@kbn/visualizations-plugin/public';
+import { EuiIconAxisLeft, EuiIconAxisBottom } from '@kbn/lens-icons';
 import type { VisualizationToolbarProps } from '../../types';
 import {
   LegendSettingsPopover,
@@ -18,8 +19,6 @@ import {
   AxisTitleSettings,
   TooltipWrapper,
 } from '../../shared_components';
-import { EuiIconAxisLeft } from '../../assets/axis_left';
-import { EuiIconAxisBottom } from '../../assets/axis_bottom';
 import type { HeatmapVisualizationState } from './types';
 import { getDefaultVisualValuesForLayer } from '../../shared_components/datasource_default_values';
 import './toolbar_component.scss';

x-pack/plugins/lens/public/visualizations/legacy_metric/metric_suggestions.ts

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
+import { LensIconChartMetric } from '@kbn/lens-icons';
 import { SuggestionRequest, VisualizationSuggestion, TableSuggestion } from '../../types';
 import type { MetricState } from '../../../common/types';
 import { layerTypes } from '../../../common';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { legacyMetricSupportedTypes } from './visualization';
 
 /**

x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx

@@ -14,8 +14,8 @@ import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { ColorMode, CustomPaletteState } from '@kbn/charts-plugin/common';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
+import { LensIconChartMetric } from '@kbn/lens-icons';
 import { getSuggestions } from './metric_suggestions';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { Visualization, OperationMetadata, DatasourceLayers } from '../../types';
 import type { MetricState } from '../../../common/types';
 import { layerTypes } from '../../../common';

x-pack/plugins/lens/public/visualizations/metric/suggestions.test.ts

@@ -8,7 +8,7 @@
 import { getSuggestions } from './suggestions';
 import { layerTypes } from '../../../common';
 import { MetricVisualizationState } from './visualization';
-import { LensIconChartMetric } from '../../assets/chart_metric';
+import { LensIconChartMetric } from '@kbn/lens-icons';
 
 const metricColumn = {
   columnId: 'metric-column',

x-pack/plugins/lens/public/visualizations/metric/suggestions.ts

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
+import { LensIconChartMetric } from '@kbn/lens-icons';
 import type { TableSuggestion, Visualization } from '../../types';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { layerTypes } from '../../../common';
 import { metricLabel, MetricVisualizationState, supportedDataTypes } from './visualization';
 

x-pack/plugins/lens/public/visualizations/metric/visualization.tsx

@@ -16,9 +16,9 @@ import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
 import { LayoutDirection } from '@elastic/charts';
 import { euiLightVars, euiThemeVars } from '@kbn/ui-theme';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { LensIconChartMetric } from '@kbn/lens-icons';
 import { LayerType } from '../../../common';
 import { getSuggestions } from './suggestions';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { Visualization, OperationMetadata, DatasourceLayers, AccessorConfig } from '../../types';
 import { layerTypes } from '../../../common';
 import { GROUP_ID, LENS_METRIC_ID } from './constants';

x-pack/plugins/lens/public/visualizations/partition/partition_charts_meta.ts

@@ -9,11 +9,13 @@ import { i18n } from '@kbn/i18n';
 import type { EuiIconProps } from '@elastic/eui';
 
 import type { DatatableColumn } from '@kbn/expressions-plugin/common';
-import { LensIconChartDonut } from '../../assets/chart_donut';
-import { LensIconChartPie } from '../../assets/chart_pie';
-import { LensIconChartTreemap } from '../../assets/chart_treemap';
-import { LensIconChartMosaic } from '../../assets/chart_mosaic';
-import { LensIconChartWaffle } from '../../assets/chart_waffle';
+import {
+  LensIconChartDonut,
+  LensIconChartPie,
+  LensIconChartTreemap,
+  LensIconChartMosaic,
+  LensIconChartWaffle,
+} from '@kbn/lens-icons';
 import {
   CategoryDisplay,
   NumberDisplay,

x-pack/plugins/lens/public/visualizations/xy/annotations/helpers.tsx

@@ -13,6 +13,7 @@ import {
   isRangeAnnotation,
 } from '@kbn/event-annotation-plugin/public';
 import { EventAnnotationConfig } from '@kbn/event-annotation-plugin/common';
+import { LensIconChartBarAnnotations } from '@kbn/lens-icons';
 import { layerTypes } from '../../../../common';
 import type { FramePublicAPI, Visualization } from '../../../types';
 import { isHorizontalChart } from '../state_helpers';
@@ -24,7 +25,6 @@ import {
   getDataLayers,
   isAnnotationsLayer,
 } from '../visualization_helpers';
-import { LensIconChartBarAnnotations } from '../../../assets/chart_bar_annotations';
 import { generateId } from '../../../id_generator';
 
 const MAX_DATE = 8640000000000000;

x-pack/plugins/lens/public/visualizations/xy/reference_line_helpers.tsx

@@ -8,6 +8,7 @@
 import { groupBy, partition } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { Datatable } from '@kbn/expressions-plugin/public';
+import { LensIconChartBarReferenceLine } from '@kbn/lens-icons';
 import { layerTypes } from '../../../common';
 import type { DatasourceLayers, FramePublicAPI, Visualization } from '../../types';
 import { groupAxesByType } from './axes_configuration';
@@ -28,7 +29,6 @@ import {
   isReferenceLayer,
 } from './visualization_helpers';
 import { generateId } from '../../id_generator';
-import { LensIconChartBarReferenceLine } from '../../assets/chart_bar_reference_line';
 import { defaultReferenceLineColor } from './color_assignment';
 
 export interface ReferenceLineBase {

x-pack/plugins/lens/public/visualizations/xy/types.ts

@@ -22,16 +22,18 @@ import type {
   YAxisConfig,
 } from '@kbn/expression-xy-plugin/common';
 import { EventAnnotationConfig } from '@kbn/event-annotation-plugin/common';
-import { LensIconChartArea } from '../../assets/chart_area';
-import { LensIconChartAreaStacked } from '../../assets/chart_area_stacked';
-import { LensIconChartAreaPercentage } from '../../assets/chart_area_percentage';
-import { LensIconChartBar } from '../../assets/chart_bar';
-import { LensIconChartBarStacked } from '../../assets/chart_bar_stacked';
-import { LensIconChartBarPercentage } from '../../assets/chart_bar_percentage';
-import { LensIconChartBarHorizontal } from '../../assets/chart_bar_horizontal';
-import { LensIconChartBarHorizontalStacked } from '../../assets/chart_bar_horizontal_stacked';
-import { LensIconChartBarHorizontalPercentage } from '../../assets/chart_bar_horizontal_percentage';
-import { LensIconChartLine } from '../../assets/chart_line';
+import {
+  LensIconChartArea,
+  LensIconChartLine,
+  LensIconChartAreaStacked,
+  LensIconChartBarHorizontalStacked,
+  LensIconChartBarHorizontalPercentage,
+  LensIconChartAreaPercentage,
+  LensIconChartBar,
+  LensIconChartBarStacked,
+  LensIconChartBarPercentage,
+  LensIconChartBarHorizontal,
+} from '@kbn/lens-icons';
 
 import type { VisualizationType, Suggestion } from '../../types';
 import type { ValueLabelConfig } from '../../../common/types';

x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts

@@ -26,7 +26,7 @@ import type {
 import { createDatatableUtilitiesMock } from '@kbn/data-plugin/common/mocks';
 import { layerTypes } from '../../../common';
 import { createMockDatasource, createMockFramePublicAPI } from '../../mocks';
-import { LensIconChartBar } from '../../assets/chart_bar';
+import { LensIconChartBar } from '@kbn/lens-icons';
 import type { VisualizeEditorLayersContext } from '@kbn/visualizations-plugin/public';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';

x-pack/plugins/lens/public/visualizations/xy/visualization_helpers.tsx

@@ -7,6 +7,11 @@
 
 import { i18n } from '@kbn/i18n';
 import { uniq } from 'lodash';
+import {
+  LensIconChartBarHorizontal,
+  LensIconChartMixedXy,
+  LensIconChartBarStacked,
+} from '@kbn/lens-icons';
 import { DatasourceLayers, OperationMetadata, VisualizationType } from '../../types';
 import {
   State,
@@ -20,9 +25,6 @@ import {
 } from './types';
 import { isHorizontalChart } from './state_helpers';
 import { layerTypes } from '../..';
-import { LensIconChartBarHorizontal } from '../../assets/chart_bar_horizontal';
-import { LensIconChartMixedXy } from '../../assets/chart_mixed_xy';
-import { LensIconChartBarStacked } from '../../assets/chart_bar_stacked';
 import { LayerType } from '../../../common';
 
 export function getAxisName(

x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/annotations_config_panel/icon_set.ts

@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { AvailableAnnotationIcon } from '@kbn/event-annotation-plugin/common';
-import { IconTriangle, IconCircle } from '../../../../assets/annotation_icons';
+import { IconTriangle, IconCircle } from '@kbn/lens-icons';
 import { IconSet } from '../shared/icon_select';
 
 export const annotationsIconSet: IconSet<AvailableAnnotationIcon> = [

x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx

@@ -18,7 +18,13 @@ import { i18n } from '@kbn/i18n';
 import { isEqual } from 'lodash';
 import { AxisExtentConfig, YScaleType } from '@kbn/expression-xy-plugin/common';
 import { ToolbarButtonProps } from '@kbn/kibana-react-plugin/public';
-import { XYLayerConfig, AxesSettingsConfig } from '../types';
+import {
+  EuiIconAxisBottom,
+  EuiIconAxisLeft,
+  EuiIconAxisRight,
+  EuiIconAxisTop,
+} from '@kbn/lens-icons';
+import { isHorizontalChart } from '../state_helpers';
 import {
   ToolbarPopover,
   useDebouncedValue,
@@ -26,11 +32,7 @@ import {
   RangeInputField,
   BucketAxisBoundsControl,
 } from '../../../shared_components';
-import { isHorizontalChart } from '../state_helpers';
-import { EuiIconAxisBottom } from '../../../assets/axis_bottom';
-import { EuiIconAxisLeft } from '../../../assets/axis_left';
-import { EuiIconAxisRight } from '../../../assets/axis_right';
-import { EuiIconAxisTop } from '../../../assets/axis_top';
+import { XYLayerConfig, AxesSettingsConfig } from '../types';
 import { validateExtent } from '../axes_configuration';
 
 import './axis_settings_popover.scss';

x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx

@@ -9,12 +9,11 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiIcon, EuiPopover, EuiSelectable, EuiText, EuiPopoverTitle } from '@elastic/eui';
 import { ToolbarButton } from '@kbn/kibana-react-plugin/public';
+import { LensIconChartBarReferenceLine, LensIconChartBarAnnotations } from '@kbn/lens-icons';
 import type { VisualizationLayerWidgetProps, VisualizationType } from '../../../types';
 import { State, visualizationTypes, SeriesType } from '../types';
 import { isHorizontalChart, isHorizontalSeries } from '../state_helpers';
 import { StaticHeader } from '../../../shared_components';
-import { LensIconChartBarReferenceLine } from '../../../assets/chart_bar_reference_line';
-import { LensIconChartBarAnnotations } from '../../../assets/chart_bar_annotations';
 import { updateLayer } from '.';
 import { isAnnotationsLayer, isDataLayer, isReferenceLayer } from '../visualization_helpers';
 

x-pack/plugins/maps/public/lens/choropleth_chart/suggestions.ts

@@ -9,8 +9,8 @@ import { partition } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import type { FileLayer } from '@elastic/ems-client';
 import type { SuggestionRequest, VisualizationSuggestion } from '@kbn/lens-plugin/public';
+import { LensIconRegionMap } from '@kbn/lens-icons';
 import type { ChoroplethChartState } from './types';
-import { Icon } from './icon';
 import { getEmsSuggestion } from './get_ems_suggestion';
 
 /**
@@ -72,7 +72,7 @@ export function getSuggestions(
                 valueAccessor: metric.columnId,
                 regionAccessor: bucket.columnId,
               },
-              previewIcon: Icon,
+              previewIcon: LensIconRegionMap,
             });
           }
         }

x-pack/plugins/maps/public/lens/choropleth_chart/visualization.tsx

@@ -15,9 +15,9 @@ import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { layerTypes } from '@kbn/lens-plugin/public';
 import type { OperationMetadata, SuggestionRequest, Visualization } from '@kbn/lens-plugin/public';
+import { LensIconRegionMap } from '@kbn/lens-icons';
 import { getSuggestions } from './suggestions';
 import type { ChoroplethChartState } from './types';
-import { Icon } from './icon';
 import { RegionKeyEditor } from './region_key_editor';
 
 const REGION_KEY_GROUP_ID = 'region_key';
@@ -41,7 +41,7 @@ export const getVisualization = ({
   visualizationTypes: [
     {
       id: 'lnsChoropleth',
-      icon: Icon,
+      icon: LensIconRegionMap,
       label: CHART_LABEL,
       groupLabel: i18n.translate('xpack.maps.lens.groupLabel', {
         defaultMessage: 'Map',
@@ -70,7 +70,7 @@ export const getVisualization = ({
 
   getDescription() {
     return {
-      icon: Icon,
+      icon: LensIconRegionMap,
       label: CHART_LABEL,
     };
   },

yarn.lock

@@ -3591,6 +3591,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/lens-icons@link:bazel-bin/x-pack/packages/lens/icons":
+  version "0.0.0"
+  uid ""
+
 "@kbn/logging-mocks@link:bazel-bin/packages/kbn-logging-mocks":
   version "0.0.0"
   uid ""
@@ -7507,6 +7511,10 @@
   version "0.0.0"
   uid ""
 
+"@types/kbn__lens-icons@link:bazel-bin/x-pack/packages/lens/icons/npm_module_types":
+  version "0.0.0"
+  uid ""
+
 "@types/kbn__logging-mocks@link:bazel-bin/packages/kbn-logging-mocks/npm_module_types":
   version "0.0.0"
   uid ""