Merge pull request #2208 from umbraco/v14/feature/example-using-icons

Icons examples

src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/README.md

@@ -3,3 +3,8 @@
 This example demonstrates the essence of the Property Dataset.
 
 This dashboard implements such, to display a few selected Property Editors and bind the data back to the Dashboard.
+
+
+## SVG code of Icons
+
+Make sure to use currentColor for fill or stroke color, as that will make the icon adapt to the font color of where its begin used.

src/Umbraco.Web.UI.Client/examples/icons/README.md

@@ -0,0 +1,7 @@
+# Icons Example
+
+This example demonstrates how to registerer your own icons.
+
+Currently they have to be made as JavaScript files that exports an SVG string.
+
+Declared as part of a Icon Dictionary in a JavaScript file.

src/Umbraco.Web.UI.Client/examples/icons/files/icon-heart.ts

@@ -0,0 +1,14 @@
+export default `<!-- @license lucide-static v0.424.0 - ISC -->
+<svg
+  class="lucide lucide-heart"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+</svg>
+`;

src/Umbraco.Web.UI.Client/examples/icons/files/icon-wand.ts

@@ -0,0 +1,19 @@
+export default `<svg
+  class="lucide lucide-wand-sparkles"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
+  <path d="m14 7 3 3" />
+  <path d="M5 6v4" />
+  <path d="M19 14v4" />
+  <path d="M10 2v2" />
+  <path d="M7 8H3" />
+  <path d="M21 16h-4" />
+  <path d="M11 3H9" />
+</svg>`;

src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts

@@ -0,0 +1,36 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+
+// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
+@customElement('example-icons-dashboard')
+// eslint-disable-next-line local-rules/umb-class-prefix
+export class ExampleIconsDashboard extends UmbElementMixin(LitElement) {
+	override render() {
+		return html`
+			<uui-box class="uui-text">
+				<h1 class="uui-h2" style="margin-top: var(--uui-size-layout-1);">Custom icons:</h1>
+				<uui-icon name="my-icon-wand"></uui-icon>
+				<uui-icon name="my-icon-heart"></uui-icon>
+			</uui-box>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export default ExampleIconsDashboard;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-icons-dashboard': ExampleIconsDashboard;
+	}
+}

src/Umbraco.Web.UI.Client/examples/icons/icons-dictionary.ts

@@ -0,0 +1,10 @@
+export default [
+	{
+		name: 'my-icon-wand',
+		path: () => import('./files/icon-wand.js'),
+	},
+	{
+		name: 'my-icon-heart',
+		path: () => import('./files/icon-heart.js'),
+	},
+];

src/Umbraco.Web.UI.Client/examples/icons/index.ts

@@ -0,0 +1,21 @@
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestTypes> = [
+	{
+		type: 'icons',
+		name: 'Example Dataset Dashboard',
+		alias: 'example.dashboard.dataset',
+		js: () => import('./icons-dictionary.js'),
+	},
+	{
+		type: 'dashboard',
+		name: 'Example Icons Dashboard',
+		alias: 'example.dashboard.icons',
+		element: () => import('./icons-dashboard.js'),
+		weight: 900,
+		meta: {
+			label: 'Icons example',
+			pathname: 'icons-example',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-registry.context.ts

@@ -30,12 +30,12 @@ export class UmbIconRegistryContext extends UmbContextBase<UmbIconRegistryContex
 				if (this.#manifestMap.has(manifest.alias)) return;
 				this.#manifestMap.set(manifest.alias, manifest);
 				// TODO: Should we unInit a entry point if is removed?
-				this.instantiateEntryPoint(manifest);
+				this.instantiateIcons(manifest);
 			});
 		});
 	}
 
-	async instantiateEntryPoint(manifest: ManifestIcons) {
+	async instantiateIcons(manifest: ManifestIcons) {
 		if (manifest.js) {
 			const js = await loadManifestPlainJs<{ default?: any }>(manifest.js);
 			if (!js || !js.default || !Array.isArray(js.default)) {