From bffbbe7b173178ed38f68ca36e9b77c25f010220 Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Wed, 18 Oct 2023 15:29:43 +0200
Subject: [PATCH] feat: use local icons

---
 .changeset/unlucky-cats-fold.md               |  5 ++++
 packages/icons/.storybook/main.js             | 30 -------------------
 .../.storybook-templates/main.js              |  2 +-
 .../.storybook-templates/preview.js           |  9 +++++-
 4 files changed, 14 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/unlucky-cats-fold.md

diff --git a/.changeset/unlucky-cats-fold.md b/.changeset/unlucky-cats-fold.md
new file mode 100644
index 0000000000..d59d8aaa31
--- /dev/null
+++ b/.changeset/unlucky-cats-fold.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-storybook-lib': minor
+---
+
+feat: use icons from talend/icons and not from unpkg
diff --git a/packages/icons/.storybook/main.js b/packages/icons/.storybook/main.js
index 6f7275f8e7..3f833890fd 100644
--- a/packages/icons/.storybook/main.js
+++ b/packages/icons/.storybook/main.js
@@ -1,35 +1,5 @@
-const fs = require('fs/promises');
-const path = require('path');
-
 module.exports = {
 	webpackFinal: async config => {
-		const spriteAll = await fs.readFile(path.resolve(__dirname, '../dist/svg-bundle/all.svg'), {
-			encoding: 'utf8',
-		});
-		const spriteXS = await fs.readFile(path.resolve(__dirname, '../dist/svg-bundle/XS.svg'), {
-			encoding: 'utf8',
-		});
-		const spriteS = await fs.readFile(path.resolve(__dirname, '../dist/svg-bundle/S.svg'), {
-			encoding: 'utf8',
-		});
-		const spriteM = await fs.readFile(path.resolve(__dirname, '../dist/svg-bundle/M.svg'), {
-			encoding: 'utf8',
-		});
-		const spriteL = await fs.readFile(path.resolve(__dirname, '../dist/svg-bundle/L.svg'), {
-			encoding: 'utf8',
-		});
-		config.plugins.forEach(plugin => {
-			if (plugin.constructor.name.includes('HtmlWebpackPlugin')) {
-				const htmlPlugin = plugin;
-				htmlPlugin.userOptions.templateParameters.bodyHtmlSnippet += spriteAll;
-				htmlPlugin.userOptions.templateParameters.bodyHtmlSnippet += spriteXS;
-				htmlPlugin.userOptions.templateParameters.bodyHtmlSnippet += spriteS;
-				htmlPlugin.userOptions.templateParameters.bodyHtmlSnippet += spriteM;
-				htmlPlugin.userOptions.templateParameters.bodyHtmlSnippet += spriteL;
-				return htmlPlugin;
-			}
-			return plugin;
-		});
 		return config;
 	},
 };
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/main.js b/tools/scripts-config-storybook-lib/.storybook-templates/main.js
index 3efa432806..55ebdc78b7 100644
--- a/tools/scripts-config-storybook-lib/.storybook-templates/main.js
+++ b/tools/scripts-config-storybook-lib/.storybook-templates/main.js
@@ -35,7 +35,7 @@ const defaultMain = {
 		buildStoriesJson: true,
 	},
 	stories: getStoriesFolders(),
-	staticDirs: [path.join(__dirname, 'msw')],
+	staticDirs: [path.join(__dirname, 'msw'), require.resolve('@talend/icons').replace('/dist/TalendIcons.js', '/dist/svg-bundle')],
 	addons: [
 		'@storybook/addon-essentials',
 		'@storybook/addon-a11y',
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
index dbbb08b4cf..99a4ab1477 100644
--- a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
+++ b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
@@ -94,7 +94,14 @@ const defaultPreview = {
 			const storyElement = React.createElement(Story, {...context, key: 'story'});
 			return [
 				React.createElement(IconsProvider, {
-					key: 'icons-provider-decorator'
+					key: 'icons-provider-decorator',
+					bundles: [
+						'/all.svg',
+						'/XS.svg',
+						'/S.svg',
+						'/M.svg',
+						'/L.svg',
+					]
 				}),
 				React.createElement(ToggleBootstrap, {
 					disabled: context.globals.bootstrapTheme === 'false',