enable usage of lucide icons

src/Umbraco.Web.UI.Client/.vscode/settings.json

@@ -10,6 +10,7 @@
 		"Niels",
 		"pickable",
 		"Registrator",
+		"svgs",
 		"templating",
 		"tinymce",
 		"umbraco",

src/Umbraco.Web.UI.Client/devops/icons/index.js

@@ -7,20 +7,51 @@ const getDirName = path.dirname;
 const glob = globModule.default;
 
 const moduleDirectory = 'src/shared/icon-registry';
-const iconsSVGDirectory = `${moduleDirectory}/svgs`;
 const iconsOutputDirectory = `${moduleDirectory}/icons`;
+const umbracoSvgDirectory = `${moduleDirectory}/svgs`;
+const iconMapJson = `${moduleDirectory}/icon-dictionary.json`;
+
+const lucideSvgDirectory = 'node_modules/lucide-static/icons';
 
 const run = async () => {
-	const icons = await collectIcons();
-	outputIcons(icons);
+	var icons = await collectDictionaryIcons();
+	icons = await collectDiskIcons(icons);
+	writeIconsToDisk(icons);
 	generateJSON(icons);
 };
 
-const collectIcons = async () => {
-	const iconPaths = await glob(`${iconsSVGDirectory}/icon-*.svg`);
+const collectDictionaryIcons = async () => {
+
+	const rawData = readFileSync(iconMapJson);
+	const fileRaw = rawData.toString();
+	const fileJSON = JSON.parse(fileRaw);
 
 	let icons = [];
 
+	// Lucide:
+	fileJSON.lucide.forEach((iconDef) => {
+		const path = lucideSvgDirectory + "/" + iconDef.file;
+
+		const rawData = readFileSync(path);
+		const svg = rawData.toString();
+		const iconFileName = iconDef.name;
+
+		const icon = {
+			name: iconDef.name,
+			fileName: iconFileName,
+			svg,
+			output: `${iconsOutputDirectory}/${iconFileName}.js`,
+		};
+
+		icons.push(icon);
+	});
+
+	return icons;
+};
+
+const collectDiskIcons = async (icons) => {
+	const iconPaths = await glob(`${umbracoSvgDirectory}/icon-*.svg`);
+
 	iconPaths.forEach((path) => {
 		const rawData = readFileSync(path);
 		const svg = rawData.toString();
@@ -35,24 +66,26 @@ const collectIcons = async () => {
 
 		const SVGFileName = match[1];
 		const iconFileName = SVGFileName.replace('.svg', '');
-		const iconName = iconFileName.replace('icon-', '').replace('.svg', '');
+		const iconName = iconFileName;
 
-		const icon = {
-			src: path,
-			SVGFileName,
-			iconFileName,
-			name: iconName,
-			svg,
-			output: `${iconsOutputDirectory}/${iconFileName}.js`,
-		};
+		// Only append not already defined icons:
+		if(!icons.find(x => x.name === iconName)) {
 
-		icons.push(icon);
+			const icon = {
+				name: iconName,
+				fileName: iconFileName,
+				svg,
+				output: `${iconsOutputDirectory}/${iconFileName}.js`,
+			};
+
+			icons.push(icon);
+		}
 	});
 
 	return icons;
 };
 
-const outputIcons = (icons) => {
+const writeIconsToDisk = (icons) => {
 	icons.forEach((icon) => {
 		const content = 'export default `' + icon.svg + '`;';
 
@@ -72,10 +105,9 @@ const generateJSON = (icons) => {
 	const JSONPath = `${iconsOutputDirectory}/icons.json`;
 
 	const iconDescriptors = icons.map((icon) => {
-		console.log(icon);
 		return {
-			name: `umb:${icon.name}`,
-			path: `./icons/${icon.iconFileName}.js`,
+			name: icon.name,
+			path: `./icons/${icon.fileName}.js`,
 		};
 	});
 

src/Umbraco.Web.UI.Client/src/shared/icon-registry/icon-dictionary.json

@@ -0,0 +1,8 @@
+{
+	"lucide": [
+		{
+			"name": "icon-eye",
+			"file": "eye.svg"
+		}
+	]
+}

src/Umbraco.Web.UI.Client/src/shared/icon-registry/icons/icon-eye.js

@@ -1 +1,15 @@
-export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M254.867 214.401c-22.305 0-40.45 18.143-40.45 40.439 0 22.316 18.145 40.474 40.45 40.474 22.319 0 40.474-18.157 40.474-40.474 0-22.296-18.155-40.439-40.474-40.439zm0-74.942c-107.278 0-215.312 116.648-215.312 116.648s108.034 116.646 215.312 116.646c107.294 0 215.329-116.646 215.329-116.646S362.161 139.459 254.867 139.459zm0 197.952c-45.586 0-82.546-36.925-82.546-82.57 0-45.587 36.96-82.535 82.546-82.535 45.612 0 82.571 36.948 82.571 82.535 0 45.645-36.959 82.57-82.571 82.57z"/></svg>`;
+export default `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>
+`;