experimental: add icons to html elements (#5219)

Ref #3632

<img width="281" alt="Screenshot 2025-05-18 at 18 37 16"
src="https://github.com/user-attachments/assets/0b95b674-c9fa-4f5d-b79d-b1ce6023dba8"
/>

Author: TrySound

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -39,7 +39,6 @@ import {
 } from "~/shared/nano-states";
 import {
   getComponentTemplateData,
-  getInstanceLabel,
   insertWebstudioFragmentAt,
 } from "~/shared/instance-utils";
 import { humanizeString } from "~/shared/string-utils";
@@ -50,6 +49,10 @@ import { setActiveSidebarPanel } from "~/builder/shared/nano-states";
 import { $commandMetas } from "~/shared/commands-emitter";
 import { emitCommand } from "~/builder/shared/commands";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
+import {
+  getInstanceLabel,
+  InstanceIcon,
+} from "~/builder/shared/instance-label";
 
 const $commandPanel = atom<
   | undefined
@@ -88,7 +91,7 @@ type ComponentOption = {
   component: string;
   label: string;
   category: TemplateMeta["category"];
-  icon: string;
+  icon: undefined | string;
   order: undefined | number;
 };
 
@@ -177,7 +180,7 @@ const $componentOptions = computed(
         component: name,
         label,
         category: meta.category,
-        icon: meta.icon ?? componentMeta?.icon ?? "",
+        icon: meta.icon ?? componentMeta?.icon,
         order: meta.order,
       });
     }
@@ -211,9 +214,9 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
             }}
           >
             <Flex gap={2}>
-              <CommandIcon
-                dangerouslySetInnerHTML={{ __html: icon }}
-              ></CommandIcon>
+              <CommandIcon>
+                <InstanceIcon instance={{ component }} icon={icon} />
+              </CommandIcon>
               <Text variant="labelsTitleCase">
                 {label}{" "}
                 <Text as="span" color="moreSubtle">

apps/builder/app/builder/features/components/components.tsx

@@ -31,28 +31,30 @@ import {
 } from "@webstudio-is/design-system";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { dragItemAttribute, useDraggable } from "./use-draggable";
-import { MetaIcon } from "~/builder/shared/meta-icon";
 import {
   $registeredComponentMetas,
   $registeredTemplates,
 } from "~/shared/nano-states";
 import {
   getComponentTemplateData,
-  getInstanceLabel,
   insertWebstudioElementAt,
   insertWebstudioFragmentAt,
 } from "~/shared/instance-utils";
 import type { Publish } from "~/shared/pubsub";
 import { $selectedPage } from "~/shared/awareness";
 import { mapGroupBy } from "~/shared/shim";
+import {
+  getInstanceLabel,
+  InstanceIcon,
+} from "~/builder/shared/instance-label";
 
 type Meta = {
   name: string;
   category: string;
   order: undefined | number;
   label: string;
   description: undefined | string;
-  icon: string;
+  icon?: string;
 };
 
 const $metas = computed(
@@ -85,7 +87,6 @@ const $metas = computed(
         order: componentMeta.order,
         label: getInstanceLabel({ component: name }, componentMeta),
         description: componentMeta.description,
-        icon: componentMeta.icon,
       });
     }
     for (const [name, templateMeta] of templates) {
@@ -111,7 +112,7 @@ const $metas = computed(
           componentMeta?.label ??
           getInstanceLabel({ component: name }, templateMeta),
         description: templateMeta.description,
-        icon: templateMeta.icon ?? componentMeta?.icon ?? "",
+        icon: templateMeta.icon,
       });
     }
     const metasByCategory = mapGroupBy(metas, (meta) => meta.category);
@@ -335,7 +336,14 @@ export const ComponentsPanel = ({
                       {...{ [dragItemAttribute]: meta.name }}
                       label={meta.label}
                       description={meta.description}
-                      icon={<MetaIcon size="auto" icon={meta.icon} />}
+                      icon={
+                        <InstanceIcon
+                          size="auto"
+                          instance={{ component: meta.name }}
+                          // for cases like Sheet template
+                          icon={meta.icon}
+                        />
+                      }
                     />
                   </ListItem>
                 ))}

apps/builder/app/builder/features/components/use-draggable.tsx

@@ -10,11 +10,9 @@ import {
   useDisableCanvasPointerEvents,
   rawTheme,
 } from "@webstudio-is/design-system";
-import { $registeredComponentMetas } from "~/shared/nano-states";
 import { useSubscribe, type Publish } from "~/shared/pubsub";
 import { $canvasRect, $scale } from "~/builder/shared/nano-states";
-import { getInstanceLabel } from "~/shared/instance-utils";
-import { MetaIcon } from "~/builder/shared/meta-icon";
+import { InstanceIcon, InstanceLabel } from "~/builder/shared/instance-label";
 
 const DragLayer = ({
   component,
@@ -23,12 +21,6 @@ const DragLayer = ({
   component: Instance["component"];
   point: Point;
 }) => {
-  const metas = useStore($registeredComponentMetas);
-  const meta = metas.get(component);
-  if (meta === undefined) {
-    return null;
-  }
-
   return createPortal(
     <Flex
       // Container is used to position card
@@ -40,8 +32,8 @@ const DragLayer = ({
       }}
     >
       <ComponentCard
-        label={getInstanceLabel({ component }, meta)}
-        icon={<MetaIcon size="auto" icon={meta.icon} />}
+        label={<InstanceLabel instance={{ component }} />}
+        icon={<InstanceIcon size="auto" instance={{ component }} />}
         style={{
           transform: `translate3d(${point.x}px, ${point.y}px, 0)`,
           width: rawTheme.spacing[20],

apps/builder/app/builder/features/footer/breadcrumbs.tsx

@@ -2,14 +2,12 @@ import { Fragment } from "react";
 import { useStore } from "@nanostores/react";
 import { ChevronRightIcon } from "@webstudio-is/icons";
 import { theme, Button, Flex, Text } from "@webstudio-is/design-system";
-import { $registeredComponentMetas } from "~/shared/nano-states";
 import { $textEditingInstanceSelector } from "~/shared/nano-states";
-import { getInstanceLabel } from "~/shared/instance-utils";
 import { $selectedInstancePath, selectInstance } from "~/shared/awareness";
+import { InstanceLabel } from "~/builder/shared/instance-label";
 
 export const Breadcrumbs = () => {
   const instancePath = useStore($selectedInstancePath);
-  const metas = useStore($registeredComponentMetas);
   return (
     <Flex align="center" css={{ height: "100%", px: theme.spacing[3] }}>
       {instancePath === undefined ? (
@@ -20,10 +18,6 @@ export const Breadcrumbs = () => {
           .slice()
           .reverse()
           .map(({ instance, instanceSelector }, index) => {
-            const meta = metas.get(instance.component);
-            if (meta === undefined) {
-              return;
-            }
             return (
               <Fragment key={index}>
                 <Button
@@ -35,7 +29,7 @@ export const Breadcrumbs = () => {
                     $textEditingInstanceSelector.set(undefined);
                   }}
                 >
-                  {getInstanceLabel(instance, meta)}
+                  <InstanceLabel instance={instance} />
                 </Button>
                 {/* hide the last one */}
                 {index < instancePath.length - 1 && <ChevronRightIcon />}

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -55,8 +55,7 @@ import {
 } from "~/shared/nano-states";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { serverSyncStore } from "~/shared/sync";
-import { MetaIcon } from "~/builder/shared/meta-icon";
-import { getInstanceLabel, reparentInstance } from "~/shared/instance-utils";
+import { reparentInstance } from "~/shared/instance-utils";
 import { emitCommand } from "~/builder/shared/commands";
 import { useContentEditable } from "~/shared/dom-hooks";
 import {
@@ -69,6 +68,10 @@ import {
   isRichTextContent,
   isTreeSatisfyingContentModel,
 } from "~/shared/content-model";
+import {
+  getInstanceLabel,
+  InstanceIcon,
+} from "~/builder/shared/instance-label";
 
 type TreeItemAncestor =
   | undefined
@@ -430,7 +433,7 @@ const TreeNodeContent = ({
   });
 
   return (
-    <TreeNodeLabel prefix={<MetaIcon icon={meta.icon} />}>
+    <TreeNodeLabel prefix={<InstanceIcon instance={instance} />}>
       <EditableTreeNodeLabel
         ref={mergeRefs(editableRef, ref)}
         {...handlers}
@@ -657,7 +660,9 @@ export const NavigatorTree = () => {
               </Tooltip>
             }
           >
-            <TreeNodeLabel prefix={<MetaIcon icon={rootMeta.icon} />}>
+            <TreeNodeLabel
+              prefix={<InstanceIcon instance={{ component: rootComponent }} />}
+            >
               {rootMeta.label}
             </TreeNodeLabel>
           </TreeNode>

apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx

@@ -8,10 +8,11 @@ import {
   $selectedInstanceSelector,
 } from "~/shared/nano-states";
 import { getInstanceStyleDecl } from "~/builder/features/style-panel/shared/model";
-import { getInstanceLabel, updateWebstudioData } from "~/shared/instance-utils";
+import { updateWebstudioData } from "~/shared/instance-utils";
 import { toValue } from "@webstudio-is/css-engine";
 import type { AnimationAction } from "@webstudio-is/sdk";
 import { setListedCssProperty } from "./set-css-property";
+import { getInstanceLabel } from "~/builder/shared/instance-label";
 
 const initSubjects = () => {
   const selectedInstanceSelector = $selectedInstanceSelector.get();

apps/builder/app/builder/features/settings-panel/props-section/props-section.stories.tsx

@@ -202,7 +202,6 @@ registerComponentLibrary({
   templates: {},
   metas: {
     Box: {
-      icon: "",
       props: {
         initialText: textProp("", "multi\nline"),
         initialShortText: shortTextProp(),

apps/builder/app/builder/features/settings-panel/settings-section.tsx

@@ -4,9 +4,9 @@ import type { Instance } from "@webstudio-is/sdk";
 import { InputField } from "@webstudio-is/design-system";
 import { $instances, $registeredComponentMetas } from "~/shared/nano-states";
 import { HorizontalLayout, Label, Row, useLocalValue } from "./shared";
-import { getInstanceLabel } from "~/shared/instance-utils";
 import { serverSyncStore } from "~/shared/sync";
 import { $selectedInstance } from "~/shared/awareness";
+import { getInstanceLabel } from "~/builder/shared/instance-label";
 
 const saveLabel = (label: string, selectedInstance: Instance) => {
   serverSyncStore.createTransaction([$instances], (instances) => {
@@ -32,9 +32,6 @@ export const SettingsSection = () => {
   }
 
   const meta = metas.get(selectedInstance.component);
-  if (meta === undefined) {
-    return;
-  }
   const placeholder = getInstanceLabel(selectedInstance, meta);
 
   return (

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -23,7 +23,6 @@ import {
   $registeredComponentMetas,
   $styleSources,
 } from "~/shared/nano-states";
-import { getInstanceLabel } from "~/shared/instance-utils";
 import type {
   ComputedStyleDecl,
   StyleValueSourceColor,
@@ -32,6 +31,7 @@ import { useComputedStyles } from "./shared/model";
 import { StyleSourceBadge } from "./style-source";
 import { createBatchUpdate } from "./shared/use-style-data";
 import { $virtualInstances } from "~/shared/awareness";
+import { getInstanceLabel } from "~/builder/shared/instance-label";
 
 const $isAltPressed = atom(false);
 if (typeof window !== "undefined") {

apps/builder/app/builder/features/workspace/canvas-tools/outline/block-instance-outline.tsx

@@ -19,15 +19,13 @@ import {
 } from "@webstudio-is/design-system";
 import type { Instance } from "@webstudio-is/sdk";
 import { PlusIcon, TrashIcon } from "@webstudio-is/icons";
-import { BoxIcon } from "@webstudio-is/icons/svg";
 import {
   $blockChildOutline,
   $hoveredInstanceOutline,
   $hoveredInstanceSelector,
   $instances,
   $isContentMode,
   $modifierKeys,
-  $registeredComponentMetas,
   findBlockSelector,
   findTemplates,
   type BlockChildOutline,
@@ -38,13 +36,13 @@ import {
   deleteInstanceMutable,
   updateWebstudioData,
 } from "~/shared/instance-utils";
-import { MetaIcon } from "~/builder/shared/meta-icon";
 import { skipInertHandlersAttribute } from "~/builder/shared/inert-handlers";
 import { useEffectEvent } from "~/shared/hook-utils/effect-event";
 import { getInstancePath } from "~/shared/awareness";
 import { insertTemplateAt } from "./block-utils";
 import { Outline } from "./outline";
 import { applyScale } from "./apply-scale";
+import { InstanceIcon } from "~/builder/shared/instance-label";
 
 export const TemplatesMenu = ({
   onOpenChange,
@@ -74,7 +72,6 @@ export const TemplatesMenu = ({
   preventFocusOnHover: boolean;
 }) => {
   const instances = useStore($instances);
-  const metas = useStore($registeredComponentMetas);
   const modifierKeys = useStore($modifierKeys);
 
   const blockInstanceSelector = findBlockSelector(anchor, instances);
@@ -105,7 +102,7 @@ export const TemplatesMenu = ({
 
   const menuItems = templates?.map(([template, templateSelector]) => ({
     id: template.id,
-    icon: <MetaIcon icon={metas.get(template.component)?.icon ?? BoxIcon} />,
+    icon: <InstanceIcon instance={{ component: template.component }} />,
     title: template.label ?? template.component,
     value: templateSelector,
   }));