experimental: Head Slot Icons (#4770)

## Description

<img width="255" alt="image"
src="https://github.com/user-attachments/assets/85782344-e992-4f13-a26c-53970136b2ff"
/>

<img width="242" alt="image"
src="https://github.com/user-attachments/assets/d2446c2d-011f-4363-ae35-0a79c66bbbad"
/>


-  additionally replaced blockquote icon
- changed the order of the components in general

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

packages/sdk-components-react/src/code-text.ws.ts

@@ -51,7 +51,7 @@ export const meta: WsComponentMeta = {
   },
   states: defaultStates,
   presetStyle,
-  order: 9,
+  order: 5,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

packages/sdk-components-react/src/head-link.ws.ts

@@ -1,4 +1,4 @@
-import { Link2Icon } from "@webstudio-is/icons/svg";
+import { ResourceIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -8,7 +8,7 @@ import { props } from "./__generated__/head-link.props";
 
 export const meta: WsComponentMeta = {
   category: "hidden",
-  icon: Link2Icon,
+  icon: ResourceIcon,
   type: "container",
   stylable: false,
   constraints: {

packages/sdk-components-react/src/head-meta.ws.ts

@@ -1,4 +1,4 @@
-import { Link2Icon } from "@webstudio-is/icons/svg";
+import { WindowInfoIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -8,7 +8,7 @@ import { props } from "./__generated__/head-meta.props";
 
 export const meta: WsComponentMeta = {
   category: "hidden",
-  icon: Link2Icon,
+  icon: WindowInfoIcon,
   type: "container",
   stylable: false,
   constraints: {

packages/sdk-components-react/src/head-slot.template.tsx

@@ -2,8 +2,9 @@ import { type TemplateMeta, $ } from "@webstudio-is/template";
 
 export const meta: TemplateMeta = {
   category: "general",
-  description: "Head",
-  order: 4,
+  description:
+    "The Head Slot component lets you customize page-specific head elements (like canonical URLs), which merge with your site's global head settings, with Head Slot definitions taking priority over Page Settings. For site-wide head changes, use Project Settings instead.",
+  order: 6,
   template: (
     <$.HeadSlot>
       <$.HeadTitle ws:label="Title">Title</$.HeadTitle>

packages/sdk-components-react/src/head-title.ws.ts

@@ -1,4 +1,4 @@
-import { Link2Icon } from "@webstudio-is/icons/svg";
+import { WindowTitleIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -8,7 +8,7 @@ import { props } from "./__generated__/head-title.props";
 
 export const meta: WsComponentMeta = {
   category: "hidden",
-  icon: Link2Icon,
+  icon: WindowTitleIcon,
   type: "container",
   stylable: false,
   constraints: {

packages/sdk-components-react/src/html-embed.ws.ts

@@ -26,7 +26,7 @@ export const meta: WsComponentMeta = {
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
   presetStyle,
-  order: 8,
+  order: 2,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

packages/sdk-components-react/src/separator.ws.ts

@@ -48,7 +48,7 @@ export const meta: WsComponentMeta = {
   icon: MinusIcon,
   states: defaultStates,
   presetStyle,
-  order: 5,
+  order: 3,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

packages/sdk-components-react/src/slot.ws.ts

@@ -8,7 +8,7 @@ export const meta: WsComponentMeta = {
     "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: SlotComponentIcon,
   stylable: false,
-  order: 6,
+  order: 5,
 };
 
 export const propsMeta: WsComponentPropsMeta = {