backward compatible icons and using lucide icons

.vscode/settings.json

@@ -6,9 +6,11 @@
 		"combobox",
 		"Elementable",
 		"invariantable",
+		"lucide",
 		"Niels",
 		"pickable",
 		"Registrator",
+		"svgs",
 		"templating",
 		"tinymce",
 		"umbraco",

devops/icons/index.js

@@ -7,20 +7,86 @@ 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) => {
+		if(iconDef.file && iconDef.name) {
+			const path = lucideSvgDirectory + "/" + iconDef.file;
+
+			try {
+				const rawData = readFileSync(path);
+				// For Lucide icons specially we adjust the icons a bit for them to work in our case:
+				let svg = rawData.toString().replace('  width="24"\n', '');
+				svg = svg.replace('  height="24"\n', '');
+				svg = svg.replace('stroke-width="2"', 'stroke-width="1.75"');
+				const iconFileName = iconDef.name;
+
+				const icon = {
+					name: iconDef.name,
+					legacy: iconDef.legacy,
+					fileName: iconFileName,
+					svg,
+					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+				};
+
+				icons.push(icon);
+			} catch(e) {
+				console.log(`Could not load file: '${path}'`);
+			}
+		}
+	});
+
+	// Umbraco:
+	fileJSON.umbraco.forEach((iconDef) => {
+		if(iconDef.file && iconDef.name) {
+			const path = umbracoSvgDirectory + "/" + iconDef.file;
+
+			try {
+				const rawData = readFileSync(path);
+				const svg = rawData.toString()
+				const iconFileName = iconDef.name;
+
+				const icon = {
+					name: iconDef.name,
+					legacy: iconDef.legacy,
+					fileName: iconFileName,
+					svg,
+					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+				};
+
+				icons.push(icon);
+			} catch(e) {
+				console.log(`Could not load file: '${path}'`);
+			}
+		}
+	});
+
+	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,28 +101,31 @@ const collectIcons = async () => {
 
 		const SVGFileName = match[1];
 		const iconFileName = SVGFileName.replace('.svg', '');
-		const iconName = iconFileName.replace('icon-', '').replace('.svg', '');
-
-		const icon = {
-			src: path,
-			SVGFileName,
-			iconFileName,
-			name: iconName,
-			svg,
-			output: `${iconsOutputDirectory}/${iconFileName}.js`,
-		};
+		const iconName = iconFileName;
+
+		// Only append not already defined icons:
+		if(!icons.find(x => x.name === iconName)) {
 
-		icons.push(icon);
+			const icon = {
+				name: iconName,
+				legacy: true,
+				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 + '`;';
 
-		writeFileWithDir(`${icon.output}`, content, (err) => {
+		writeFileWithDir(icon.output, content, (err) => {
 			if (err) {
 				// eslint-disable-next-line no-undef
 				console.log(err);
@@ -72,10 +141,10 @@ 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,
+			legacy: icon.legacy,
+			path: `./icons/${icon.fileName}.js`,
 		};
 	});
 

package.json

@@ -177,6 +177,7 @@
 		"eslint-plugin-local-rules": "^1.3.2",
 		"eslint-plugin-storybook": "^0.6.15",
 		"eslint-plugin-wc": "^1.5.0",
+		"lucide-static": "^0.290.0",
 		"msw": "^1.2.3",
 		"openapi-typescript-codegen": "^0.25.0",
 		"playwright-msw": "^2.2.1",

src/css/umb-css.css

@@ -1,7 +1,4 @@
 :root {
-	/* TODO: Consulidate with this green color suggestion, align UUI:*/
-	--uui-color-positive: #1c874c;
-	--uui-color-positive-emphasis: #1a7f47;
 	--umb-footer-layout-height: 54px;
 	--umb-header-layout-height: 70px;
 	--umb-section-sidebar-width: 300px;

src/mocks/data/document-blueprint.data.ts

@@ -6,7 +6,7 @@ export const data: Array<DocumentBlueprintDetails> = [
 		name: 'Document Blueprint 1',
 		type: 'document-blueprint',
 		id: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
-		icon: 'umb:blueprint',
+		icon: 'icon-blueprint',
 		documentTypeKey: 'd81c7957-153c-4b5a-aa6f-b434a4964624',
 		properties: [],
 		data: [],
@@ -15,7 +15,7 @@ export const data: Array<DocumentBlueprintDetails> = [
 		name: 'Document Blueprint 2',
 		type: 'document-blueprint',
 		id: '3fa85f64-5717-4562-b3qc-2c963f66afa6',
-		icon: 'umb:blueprint',
+		icon: 'icon-blueprint',
 		documentTypeKey: 'a99e4018-3ffc-486b-aa76-eecea9593d17',
 		properties: [],
 		data: [],

src/mocks/data/document-type.data.ts

@@ -14,7 +14,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'blogPost',
 		name: 'All property editors document type',
 		description: null,
-		icon: 'umb:item-arrangement',
+		icon: 'icon-item-arrangement',
 		allowedAsRoot: true,
 		variesByCulture: true,
 		variesBySegment: false,
@@ -616,7 +616,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'blogPost',
 		name: 'Page Document Type',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: true,
 		variesByCulture: true,
 		variesBySegment: false,
@@ -777,7 +777,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'masterPage',
 		name: 'Master Page',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: false,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -827,7 +827,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'baseElementType',
 		name: 'Base Element Type',
 		description: null,
-		icon: 'umb:science',
+		icon: 'icon-science',
 		allowedAsRoot: false,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -881,7 +881,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'simpleDocumentType',
 		name: 'Simple Document Type',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: true,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -934,7 +934,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'simpleDocumentType2',
 		name: 'Simple Document Type 2',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: true,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -1015,7 +1015,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: '29643452-cff9-47f2-98cd-7de4b6807681',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Page Document Type Compositional',
@@ -1024,7 +1024,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Page Document Type Inherited',
@@ -1033,7 +1033,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Simple Document Type',
@@ -1042,7 +1042,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: 'simple-document-type-key',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Simple Document Type 2',
@@ -1051,7 +1051,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: 'simple-document-type-2-key',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 ];
 

src/mocks/data/media-type.data.ts

@@ -13,7 +13,7 @@ export const data: Array<MediaTypeResponseModel> = [
 		id: 'c5159663-eb82-43ee-bd23-e42dc5e71db6',
 		description: 'Media type 1 description',
 		alias: 'mediaType1',
-		icon: 'umb:bug',
+		icon: 'icon-bug',
 		properties: [],
 		containers: [],
 	},

src/mocks/data/user-group.data.ts

@@ -46,20 +46,20 @@ export const data: Array<UserGroupResponseModel> = [
 	{
 		id: 'c630d49e-4e7b-42ea-b2bc-edc0edacb6b1',
 		name: 'Administrators',
-		icon: 'umb:medal',
+		icon: 'icon-medal',
 		documentStartNodeId: 'all-property-editors-document-id',
 		permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_DELETE],
 	},
 	{
 		id: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
 		name: 'User Group 1',
-		icon: 'umb:bell',
+		icon: 'icon-bell',
 		permissions: [UMB_USER_PERMISSION_DOCUMENT_DELETE],
 	},
 	{
 		id: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa',
 		name: 'User Group 2',
-		icon: 'umb:ball',
+		icon: 'icon-ball',
 		permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
 	},
 ];

src/mocks/handlers/dictionary.handlers.ts

@@ -80,7 +80,7 @@ export const handlers = [
 
 		if (!data) return;
 
-		data.icon = 'umb:book-alt';
+		data.icon = 'icon-book-alt';
 		data.hasChildren = false;
 		data.type = 'dictionary-item';
 

src/packages/core/collection/components/collection-toolbar.element.ts

@@ -11,14 +11,14 @@ export class UmbCollectionToolbarElement extends UmbLitElement {
 	public actions: Array<TooltipMenuItem> = [
 		{
 			label: 'File',
-			icon: 'umb:document',
+			icon: 'icon-document',
 			action: () => {
 				console.log('Create file');
 			},
 		},
 		{
 			label: 'Folder',
-			icon: 'umb:folder',
+			icon: 'icon-folder',
 			action: () => {
 				console.log('create folder');
 			},

src/packages/core/components/header-app/header-app.stories.ts

@@ -19,7 +19,7 @@ export const Overview: Story = {
 			kind: 'button',
 			meta: {
 				label: 'Some Header',
-				icon: 'umb:home',
+				icon: 'icon-home',
 				href: '/some/path',
 			},
 		},