lupine.components 1.1.55 → 1.1.56

package/src/component-pool/skeleton/skeleton-card.tsx

@@ -1,114 +1,114 @@
-import { bindGlobalStyle, getGlobalStylesId, CssProps, RefProps } from 'lupine.web';
-import { Skeleton } from './skeleton';
-
-export type SkeletonCardProps = {
-  class?: string;
-  style?: CssProps;
-  width?: string;
-  height?: string;
-  animated?: boolean;
-};
-
-export const SkeletonCard = (props: SkeletonCardProps) => {
-  const css: CssProps = {
-    display: 'flex',
-    gap: '16px',
-    alignItems: 'flex-start',
-    width: '100%',
-    height: '100%',
-    padding: '24px',
-    boxSizing: 'border-box',
-    border: '1px solid var(--secondary-border-color, #eee)',
-    borderRadius: '12px',
-    backgroundColor: 'var(--primary-bg-color, #fff)',
-    overflow: 'hidden',
-
-    '.&-content': {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '8px',
-      minWidth: 0,
-    },
-  };
-
-  const globalCssId = getGlobalStylesId(css);
-  bindGlobalStyle(globalCssId, css);
-
-  const animated = props.animated !== false;
-
-  let ro: ResizeObserver | null = null;
-  let timer: any = null;
-
-  const contentRef: RefProps = {};
-
-  const ref: RefProps = {
-    referToCssId: globalCssId,
-    onLoad: async () => {
-      const container = ref.current as HTMLElement;
-
-      const refreshLines = () => {
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(() => {
-          // Calculate available vertical space in the content column
-          const style = window.getComputedStyle(container);
-          const paddingTop = parseFloat(style.paddingTop);
-          const paddingBottom = parseFloat(style.paddingBottom);
-
-          const availableHeight = container.clientHeight - paddingTop - paddingBottom;
-
-          // Headings are 20px, sub-lines are 16px. Gap is 8px.
-          // Let's assume the first line is always title: 20px
-          // Then remaining lines take 16px + 8px gap = 24px each.
-
-          let remainingHeight = availableHeight;
-          const lines = [];
-
-          // Title Line (20px)
-          if (remainingHeight >= 20) {
-            lines.push(<Skeleton width='60%' height='20px' animated={animated} />);
-            remainingHeight -= 28; // 20px height + 8px gap
-          }
-
-          // Sub line 1 (16px) full width
-          if (remainingHeight >= 16) {
-            lines.push(<Skeleton width='100%' height='16px' animated={animated} />);
-            remainingHeight -= 24; // 16px height + 8px gap
-          }
-
-          // Generate remaining lines (80% width for visual variety)
-          while (remainingHeight >= 16) {
-            // Give the last line a slightly different width if desired, but 80% is good
-            lines.push(<Skeleton width={Math.random() > 0.5 ? '80%' : '90%'} height='16px' animated={animated} />);
-            remainingHeight -= 24;
-          }
-
-          if (contentRef.mountInnerComponent) {
-            contentRef.mountInnerComponent(<>{lines}</>);
-          }
-        }, 50);
-      };
-
-      ro = new ResizeObserver(() => refreshLines());
-      ro.observe(container);
-    },
-    onUnload: async () => {
-      if (ro) ro.disconnect();
-      if (timer) clearTimeout(timer);
-    },
-  };
-
-  const mergedStyle = {
-    width: props.width || '100%',
-    height: props.height || '100%',
-    ...props.style,
-  };
-
-  // Avatar size is fixed to 48px to represent a typical user profile
-  return (
-    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={mergedStyle} aria-hidden='true'>
-      <Skeleton width='48px' height='48px' circle={true} animated={animated} />
-      <div class='&-content' ref={contentRef}></div>
-    </div>
-  );
-};
+import { bindGlobalStyle, getGlobalStylesId, CssProps, RefProps } from 'lupine.web';
+import { Skeleton } from './skeleton';
+
+export type SkeletonCardProps = {
+  class?: string;
+  style?: CssProps;
+  width?: string;
+  height?: string;
+  animated?: boolean;
+};
+
+export const SkeletonCard = (props: SkeletonCardProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'flex-start',
+    width: '100%',
+    height: '100%',
+    padding: '24px',
+    boxSizing: 'border-box',
+    border: '1px solid var(--secondary-border-color, #eee)',
+    borderRadius: '12px',
+    backgroundColor: 'var(--primary-bg-color, #fff)',
+    overflow: 'hidden',
+
+    '.&-content': {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      minWidth: 0,
+    },
+  };
+
+  const globalCssId = getGlobalStylesId(css);
+  bindGlobalStyle(globalCssId, css);
+
+  const animated = props.animated !== false;
+
+  let ro: ResizeObserver | null = null;
+  let timer: any = null;
+
+  const contentRef: RefProps = {};
+
+  const ref: RefProps = {
+    referToCssId: globalCssId,
+    onLoad: async () => {
+      const container = ref.current as HTMLElement;
+
+      const refreshLines = () => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+          // Calculate available vertical space in the content column
+          const style = window.getComputedStyle(container);
+          const paddingTop = parseFloat(style.paddingTop);
+          const paddingBottom = parseFloat(style.paddingBottom);
+
+          const availableHeight = container.clientHeight - paddingTop - paddingBottom;
+
+          // Headings are 20px, sub-lines are 16px. Gap is 8px.
+          // Let's assume the first line is always title: 20px
+          // Then remaining lines take 16px + 8px gap = 24px each.
+
+          let remainingHeight = availableHeight;
+          const lines = [];
+
+          // Title Line (20px)
+          if (remainingHeight >= 20) {
+            lines.push(<Skeleton width='60%' height='20px' animated={animated} />);
+            remainingHeight -= 28; // 20px height + 8px gap
+          }
+
+          // Sub line 1 (16px) full width
+          if (remainingHeight >= 16) {
+            lines.push(<Skeleton width='100%' height='16px' animated={animated} />);
+            remainingHeight -= 24; // 16px height + 8px gap
+          }
+
+          // Generate remaining lines (80% width for visual variety)
+          while (remainingHeight >= 16) {
+            // Give the last line a slightly different width if desired, but 80% is good
+            lines.push(<Skeleton width={Math.random() > 0.5 ? '80%' : '90%'} height='16px' animated={animated} />);
+            remainingHeight -= 24;
+          }
+
+          if (contentRef.mountInnerComponent) {
+            contentRef.mountInnerComponent(<>{lines}</>);
+          }
+        }, 50);
+      };
+
+      ro = new ResizeObserver(() => refreshLines());
+      ro.observe(container);
+    },
+    onUnload: async () => {
+      if (ro) ro.disconnect();
+      if (timer) clearTimeout(timer);
+    },
+  };
+
+  const mergedStyle = {
+    width: props.width || '100%',
+    height: props.height || '100%',
+    ...props.style,
+  };
+
+  // Avatar size is fixed to 48px to represent a typical user profile
+  return (
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={mergedStyle} aria-hidden='true'>
+      <Skeleton width='48px' height='48px' circle={true} animated={animated} />
+      <div class='&-content' ref={contentRef}></div>
+    </div>
+  );
+};

package/src/component-pool/skeleton/skeleton-demo.tsx

@@ -1,55 +1,55 @@
-import { DemoStory } from '../../demo/demo-types';
-import { Skeleton, SkeletonProps } from './skeleton';
-import { SkeletonCard } from './skeleton-card';
-
-export const skeletonDemo: DemoStory<SkeletonProps> = {
-  id: 'skeleton',
-  text: 'Skeleton',
-  args: {
-    width: '100%',
-    height: '24px',
-    circle: false,
-    animated: true,
-  },
-  argTypes: {
-    width: { control: 'text', description: 'Width of the skeleton' },
-    height: { control: 'text', description: 'Height of the skeleton' },
-    circle: { control: 'boolean', description: 'Render as a circle' },
-    animated: { control: 'boolean', description: 'Enable pulse animation' },
-  },
-  render: (args) => {
-    return (
-      <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px' }}>
-        <div>
-          <h3 style={{ marginBottom: '20px' }}>Interactive Skeleton</h3>
-          <Skeleton {...args} />
-        </div>
-
-        <div>
-          <h3 style={{ marginBottom: '20px' }}>Card Example (Dynamic Height)</h3>
-          <p style={{ color: '#666', fontSize: '13px', marginBottom: '10px' }}>
-            The SkeletonCard automatically fills available vertical space with skeleton lines. Resize the browser to see
-            it adapt!
-          </p>
-          <div style={{ height: '200px', resize: 'vertical', overflow: 'hidden' }}>
-            <SkeletonCard height='100%' animated={args.animated} />
-          </div>
-        </div>
-      </div>
-    );
-  },
-  code: `import { Skeleton } from 'lupine.components/component-pool';
-
-// Basic Line
-<Skeleton width="100%" height="24px" />
-
-// Circle (Avatar)
-<Skeleton width="48px" height="48px" circle={true} />
-
-// Static (No animation)
-<Skeleton width="100%" height="100px" animated={false} />
-
-// Dynamic Auto-filling Card
-<SkeletonCard width="100%" height="300px" />
-`,
-};
+import { DemoStory } from '../../demo/demo-types';
+import { Skeleton, SkeletonProps } from './skeleton';
+import { SkeletonCard } from './skeleton-card';
+
+export const skeletonDemo: DemoStory<SkeletonProps> = {
+  id: 'skeleton',
+  text: 'Skeleton',
+  args: {
+    width: '100%',
+    height: '24px',
+    circle: false,
+    animated: true,
+  },
+  argTypes: {
+    width: { control: 'text', description: 'Width of the skeleton' },
+    height: { control: 'text', description: 'Height of the skeleton' },
+    circle: { control: 'boolean', description: 'Render as a circle' },
+    animated: { control: 'boolean', description: 'Enable pulse animation' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px' }}>
+        <div>
+          <h3 style={{ marginBottom: '20px' }}>Interactive Skeleton</h3>
+          <Skeleton {...args} />
+        </div>
+
+        <div>
+          <h3 style={{ marginBottom: '20px' }}>Card Example (Dynamic Height)</h3>
+          <p style={{ color: '#666', fontSize: '13px', marginBottom: '10px' }}>
+            The SkeletonCard automatically fills available vertical space with skeleton lines. Resize the browser to see
+            it adapt!
+          </p>
+          <div style={{ height: '200px', resize: 'vertical', overflow: 'hidden' }}>
+            <SkeletonCard height='100%' animated={args.animated} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+  code: `import { Skeleton } from 'lupine.components/component-pool';
+
+// Basic Line
+<Skeleton width="100%" height="24px" />
+
+// Circle (Avatar)
+<Skeleton width="48px" height="48px" circle={true} />
+
+// Static (No animation)
+<Skeleton width="100%" height="100px" animated={false} />
+
+// Dynamic Auto-filling Card
+<SkeletonCard width="100%" height="300px" />
+`,
+};

package/src/component-pool/svg-icons.ts

@@ -1,95 +1,95 @@
-export const SvgIconData: Record<string, string> = {
-  // iEditor
-  undo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E`,
-  redo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5.8 15.5c1.05-3.19 4.06-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L14.9 15.5h9v-9l-3.6 3.6C18.45 8.99 16.05 8 13.4 8c-4.65 0-8.58 3.03-9.96 7.22l2.36.78z'/%3E%3C/svg%3E`,
-  upload: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/%3E%3C/svg%3E`,
-  download: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E`,
-  zoomIn: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2V7z'/%3E%3C/svg%3E`,
-  zoomOut: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z'/%3E%3C/svg%3E`,
-  pan: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z'/%3E%3C/svg%3E`,
-  select: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='currentColor' stroke-width='2' stroke-dasharray='4 2' x='4' y='4' width='16' height='16'/%3E%3Ccircle fill='currentColor' cx='4' cy='4' r='2'/%3E%3Ccircle fill='currentColor' cx='20' cy='4' r='2'/%3E%3Ccircle fill='currentColor' cx='4' cy='20' r='2'/%3E%3Ccircle fill='currentColor' cx='20' cy='20' r='2'/%3E%3C/svg%3E`,
-  crop: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z'/%3E%3C/svg%3E`,
-  rotate: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z'/%3E%3C/svg%3E`,
-  resize: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z'/%3E%3C/svg%3E`,
-  pencil: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E`,
-  draw: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E`,
-  mosaic: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 4.9688h7.0313v7.0312H12zM4.9688 12h7.0312v7.0313H4.9688z'/%3E%3Cpath fill='currentColor' d='M19.0313 23.25H4.9688a4.2188 4.2188 0 0 1-4.2188-4.2188V4.9688a4.2188 4.2188 0 0 1 4.2188-4.2188h14.0625a4.2188 4.2188 0 0 1 4.2187 4.2188v14.0625a4.2188 4.2188 0 0 1-4.2188 4.2187zM4.9688 3.5625a1.4063 1.4063 0 0 0-1.4063 1.4063v14.0625a1.4063 1.4063 0 0 0 1.4063 1.4062h14.0625a1.4063 1.4063 0 0 0 1.4062-1.4062V4.9688a1.4063 1.4063 0 0 0-1.4062-1.4063z'/%3E%3C/svg%3E`,
-  text: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z'/%3E%3C/svg%3E`,
-  sticker: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpolygon fill='currentColor' points='12,4 13.9,9.8 20,9.8 15.1,13.4 17,19.2 12,15.6 7,19.2 8.9,13.4 4,9.8 10.1,9.8'/%3E%3C/svg%3E`,
-  merge: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17 1H7c-1.1 0-2 .9-2 2v18l7-3 7 3V3c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E`,
-  paste: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z'/%3E%3C/svg%3E`,
-  rotateHandle: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='currentColor' stroke-width='2' cx='12' cy='12' r='9'/%3E%3Cpath fill='currentColor' d='M12 3v4l4-4-4-4v4z'/%3E%3C/svg%3E`,
-  adjust: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 10h-2V8h-2V6h2V4h2v2h2v2h-2v2zm-4 7h-2v-2h-2v-2h2v-2h2v2h2v2h-2v2zM5 14h2v-2h2v-2H7V8H5v2H3v2h2v2z'/%3E%3C/svg%3E`,
-  round: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM8 8h8v8H8z'/%3E%3C/svg%3E`,
-  frame: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2' width='14' height='20' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Crect x='8' y='5' width='8' height='14' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E`,
-  rotL: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.78-4.95-2.05L6.64 16.35C8.27 17.98 10.51 19 13 19c3.87 0 7-3.13 7-7s-3.13-7-7-7z'/%3E%3C/svg%3E`,
-  rotR: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M11 3c4.97 0 9 4.03 9 9H23l-3.89 3.89-0.07 0.14L15 12H18c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.93 0 3.68-0.78 4.95-2.05L17.36 16.35C15.73 17.98 13.49 19 11 19c-3.87 0-7-3.13-7-7s3.13-7 7-7z'/%3E%3C/svg%3E`,
-  flipH: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z'/%3E%3C/svg%3E`,
-  flipV: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 15l0 2 2 0 0-2-2 0z m12 4l0 2L17 21l0-2-2 0zM19 3l-14 0c-1.1 0-2 0.9-2 2l0 4 2 0L5 5 19 5l0 4L21 9 21 5c0-1.1-0.9-2-2-2z m2 16l-2 0 0 2c1.1 0 2-0.9 2-2z m-20-8l0 2L23 13l0-2-22 0z m6 8l0 2 2 0 0-2-2 0zM19 15l0 2L21 17l0-2-2 0z m-8 4l0 2 2 0 0-2-2 0z m-8 0c0 1.1 0.9 2 2 2l0-2-2 0z'/%3E%3C/svg%3E`,
-  circle: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='currentColor'/%3E%3C/svg%3E`,
-  heart: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E`,
-  bw: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10zm1-17.93c3.9.49 7 3.85 7 7.93s-3.1 7.44-7 7.93V4.07z'/%3E%3C/svg%3E`,
-  layerUp: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z'/%3E%3C/svg%3E`,
-  layerDown: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z'/%3E%3C/svg%3E`,
-
-  // hEditor
-  bold: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E`,
-  italic: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 5v3h2.2l-3.4 8H6v3h8v-3h-2.2l3.4-8H18V5h-8z'/%3E%3C/svg%3E`,
-  underline: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E`,
-  strikethrough: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.8 21H10.2a0.9 0.9 0 0 1 0-1.8h0.9V4.8H5.7V5.7A0.9 0.9 0 0 1 3.9 5.7V3.9A0.9 0.9 0 0 1 4.8 3H19.2a0.9 0.9 0 0 1 0.9 0.9V5.7a0.9 0.9 0 0 1-1.8 0V4.8H12.9V19.2h0.9a0.9 0.9 0 0 1 0 1.8Z'/%3E%3Cpath fill='black' d='M20.1 12.9H3.9a0.9 0.9 0 0 1 0-1.8H20.1a0.9 0.9 0 0 1 0 1.8Z'/%3E%3C/svg%3E`,
-  left: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
-  center: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
-  right: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
-  justify: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
-  ol: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z'/%3E%3C/svg%3E`,
-  ul: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z'/%3E%3C/svg%3E`,
-  indent: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2H3v2zM3 8.11l4 3.89-4 3.89v-7.78zM11 15h10v-2H11v2zm0-4h10V9H11v2zm-8-8v2h18V3H3z'/%3E%3C/svg%3E`,
-  outdent: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 15h10v-2H11v2zm0-4h10V9H11v2zm-4 .89l4-3.89v7.78l-4-3.89zM3 21h18v-2H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
-  removeformat: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.14 3c-.51 0-1.02.2-1.41.59L4.59 12.73c-.78.78-.78 2.05 0 2.83l3.54 3.54c.39.39.9.59 1.41.59H20v-2h-3.15l5.56-5.56c.78-.78.78-2.05 0-2.83l-3.54-3.54c-.39-.39-.9-.59-1.41-.59v0zm-.01 2l3.53 3.53-2.83 2.83-3.53-3.53 2.83-2.83zm-4.24 4.24l3.53 3.53-3.53 3.53H7.36l-3.54-3.54 7.07-7.06z'/%3E%3C/svg%3E`,
-  textColor: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.62 12L12 5.67 14.38 12H9.62zM11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-9 17h20v2H2v-2z'/%3E%3C/svg%3E`,
-  backColor: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z'/%3E%3C/svg%3E`,
-  image: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E`,
-  link: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E`,
-  unlink: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.43-.98 2.63-2.31 2.98l1.46 1.46C20.88 15.61 22 13.95 22 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.18-2.9 2.72-3.08L9.73 12H8v2h3.73l6 6 1.27-1.27L3.27 3 2 4.27z'/%3E%3C/svg%3E`,
-  html: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E`,
-  // undo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E`,
-  // redo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.8 15.5c1.05-3.19 4.06-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L14.9 15.5h9v-9l-3.6 3.6C18.45 8.99 16.05 8 13.4 8c-4.65 0-8.58 3.03-9.96 7.22l2.36.78z'/%3E%3C/svg%3E`,
-};
-
-export type SvgIconDataName = keyof typeof SvgIconData;
-export const SvgIconNames = Object.fromEntries(Object.keys(SvgIconData).map((key) => [key, key])) as {
-  [K in SvgIconDataName]: K;
-};
-
-export const LJ_SVG_ICON_CLASS = 'lj_svg_icon';
-export const LJ_SVG_ICON_STYLE_ID = 'lj_svg_icon_style';
-export const loadSvgIconStyles = () => {
-  if (typeof document === 'undefined' || document.getElementById(LJ_SVG_ICON_STYLE_ID)) return;
-  let iconStyles = '';
-  for (const key of Object.keys(SvgIconData)) {
-    iconStyles += `.${LJ_SVG_ICON_CLASS}_${key} { -webkit-mask-image: url("${SvgIconData[key]}"); mask-image: url("${SvgIconData[key]}"); }\n`;
-  }
-
-  const style = document.createElement('style');
-  style.id = LJ_SVG_ICON_STYLE_ID;
-  style.innerHTML = `
-      .${LJ_SVG_ICON_CLASS} {
-        display: inline-block;
-        width: 24px;
-        height: 24px;
-        vertical-align: middle;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-position: center;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        background-color: var(--primary-color, #ccc);
-        overflow:hidden;
-        mask-size: contain;
-      }
-      .${LJ_SVG_ICON_CLASS}:hover, .${LJ_SVG_ICON_CLASS}.active {
-        background-color: var(--primary-accent-color, #0a74c9);
-      }
-      ${iconStyles}
-    `;
-  document.head.appendChild(style);
-};
+export const SvgIconData: Record<string, string> = {
+  // iEditor
+  undo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E`,
+  redo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5.8 15.5c1.05-3.19 4.06-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L14.9 15.5h9v-9l-3.6 3.6C18.45 8.99 16.05 8 13.4 8c-4.65 0-8.58 3.03-9.96 7.22l2.36.78z'/%3E%3C/svg%3E`,
+  upload: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/%3E%3C/svg%3E`,
+  download: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E`,
+  zoomIn: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2V7z'/%3E%3C/svg%3E`,
+  zoomOut: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z'/%3E%3C/svg%3E`,
+  pan: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z'/%3E%3C/svg%3E`,
+  select: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='currentColor' stroke-width='2' stroke-dasharray='4 2' x='4' y='4' width='16' height='16'/%3E%3Ccircle fill='currentColor' cx='4' cy='4' r='2'/%3E%3Ccircle fill='currentColor' cx='20' cy='4' r='2'/%3E%3Ccircle fill='currentColor' cx='4' cy='20' r='2'/%3E%3Ccircle fill='currentColor' cx='20' cy='20' r='2'/%3E%3C/svg%3E`,
+  crop: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z'/%3E%3C/svg%3E`,
+  rotate: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z'/%3E%3C/svg%3E`,
+  resize: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z'/%3E%3C/svg%3E`,
+  pencil: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E`,
+  draw: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E`,
+  mosaic: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 4.9688h7.0313v7.0312H12zM4.9688 12h7.0312v7.0313H4.9688z'/%3E%3Cpath fill='currentColor' d='M19.0313 23.25H4.9688a4.2188 4.2188 0 0 1-4.2188-4.2188V4.9688a4.2188 4.2188 0 0 1 4.2188-4.2188h14.0625a4.2188 4.2188 0 0 1 4.2187 4.2188v14.0625a4.2188 4.2188 0 0 1-4.2188 4.2187zM4.9688 3.5625a1.4063 1.4063 0 0 0-1.4063 1.4063v14.0625a1.4063 1.4063 0 0 0 1.4063 1.4062h14.0625a1.4063 1.4063 0 0 0 1.4062-1.4062V4.9688a1.4063 1.4063 0 0 0-1.4062-1.4063z'/%3E%3C/svg%3E`,
+  text: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z'/%3E%3C/svg%3E`,
+  sticker: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpolygon fill='currentColor' points='12,4 13.9,9.8 20,9.8 15.1,13.4 17,19.2 12,15.6 7,19.2 8.9,13.4 4,9.8 10.1,9.8'/%3E%3C/svg%3E`,
+  merge: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17 1H7c-1.1 0-2 .9-2 2v18l7-3 7 3V3c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E`,
+  paste: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z'/%3E%3C/svg%3E`,
+  rotateHandle: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='currentColor' stroke-width='2' cx='12' cy='12' r='9'/%3E%3Cpath fill='currentColor' d='M12 3v4l4-4-4-4v4z'/%3E%3C/svg%3E`,
+  adjust: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 10h-2V8h-2V6h2V4h2v2h2v2h-2v2zm-4 7h-2v-2h-2v-2h2v-2h2v2h2v2h-2v2zM5 14h2v-2h2v-2H7V8H5v2H3v2h2v2z'/%3E%3C/svg%3E`,
+  round: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM8 8h8v8H8z'/%3E%3C/svg%3E`,
+  frame: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2' width='14' height='20' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Crect x='8' y='5' width='8' height='14' fill='none' stroke='currentColor' stroke-width='1'/%3E%3C/svg%3E`,
+  rotL: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.78-4.95-2.05L6.64 16.35C8.27 17.98 10.51 19 13 19c3.87 0 7-3.13 7-7s-3.13-7-7-7z'/%3E%3C/svg%3E`,
+  rotR: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M11 3c4.97 0 9 4.03 9 9H23l-3.89 3.89-0.07 0.14L15 12H18c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.93 0 3.68-0.78 4.95-2.05L17.36 16.35C15.73 17.98 13.49 19 11 19c-3.87 0-7-3.13-7-7s3.13-7 7-7z'/%3E%3C/svg%3E`,
+  flipH: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z'/%3E%3C/svg%3E`,
+  flipV: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 15l0 2 2 0 0-2-2 0z m12 4l0 2L17 21l0-2-2 0zM19 3l-14 0c-1.1 0-2 0.9-2 2l0 4 2 0L5 5 19 5l0 4L21 9 21 5c0-1.1-0.9-2-2-2z m2 16l-2 0 0 2c1.1 0 2-0.9 2-2z m-20-8l0 2L23 13l0-2-22 0z m6 8l0 2 2 0 0-2-2 0zM19 15l0 2L21 17l0-2-2 0z m-8 4l0 2 2 0 0-2-2 0z m-8 0c0 1.1 0.9 2 2 2l0-2-2 0z'/%3E%3C/svg%3E`,
+  circle: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='currentColor'/%3E%3C/svg%3E`,
+  heart: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E`,
+  bw: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10zm1-17.93c3.9.49 7 3.85 7 7.93s-3.1 7.44-7 7.93V4.07z'/%3E%3C/svg%3E`,
+  layerUp: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z'/%3E%3C/svg%3E`,
+  layerDown: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z'/%3E%3C/svg%3E`,
+
+  // hEditor
+  bold: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E`,
+  italic: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 5v3h2.2l-3.4 8H6v3h8v-3h-2.2l3.4-8H18V5h-8z'/%3E%3C/svg%3E`,
+  underline: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E`,
+  strikethrough: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.8 21H10.2a0.9 0.9 0 0 1 0-1.8h0.9V4.8H5.7V5.7A0.9 0.9 0 0 1 3.9 5.7V3.9A0.9 0.9 0 0 1 4.8 3H19.2a0.9 0.9 0 0 1 0.9 0.9V5.7a0.9 0.9 0 0 1-1.8 0V4.8H12.9V19.2h0.9a0.9 0.9 0 0 1 0 1.8Z'/%3E%3Cpath fill='black' d='M20.1 12.9H3.9a0.9 0.9 0 0 1 0-1.8H20.1a0.9 0.9 0 0 1 0 1.8Z'/%3E%3C/svg%3E`,
+  left: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
+  center: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
+  right: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
+  justify: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
+  ol: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z'/%3E%3C/svg%3E`,
+  ul: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z'/%3E%3C/svg%3E`,
+  indent: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2H3v2zM3 8.11l4 3.89-4 3.89v-7.78zM11 15h10v-2H11v2zm0-4h10V9H11v2zm-8-8v2h18V3H3z'/%3E%3C/svg%3E`,
+  outdent: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 15h10v-2H11v2zm0-4h10V9H11v2zm-4 .89l4-3.89v7.78l-4-3.89zM3 21h18v-2H3v2zM3 3v2h18V3H3z'/%3E%3C/svg%3E`,
+  removeformat: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.14 3c-.51 0-1.02.2-1.41.59L4.59 12.73c-.78.78-.78 2.05 0 2.83l3.54 3.54c.39.39.9.59 1.41.59H20v-2h-3.15l5.56-5.56c.78-.78.78-2.05 0-2.83l-3.54-3.54c-.39-.39-.9-.59-1.41-.59v0zm-.01 2l3.53 3.53-2.83 2.83-3.53-3.53 2.83-2.83zm-4.24 4.24l3.53 3.53-3.53 3.53H7.36l-3.54-3.54 7.07-7.06z'/%3E%3C/svg%3E`,
+  textColor: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.62 12L12 5.67 14.38 12H9.62zM11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-9 17h20v2H2v-2z'/%3E%3C/svg%3E`,
+  backColor: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z'/%3E%3C/svg%3E`,
+  image: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E`,
+  link: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E`,
+  unlink: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.43-.98 2.63-2.31 2.98l1.46 1.46C20.88 15.61 22 13.95 22 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.18-2.9 2.72-3.08L9.73 12H8v2h3.73l6 6 1.27-1.27L3.27 3 2 4.27z'/%3E%3C/svg%3E`,
+  html: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E`,
+  // undo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E`,
+  // redo: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.8 15.5c1.05-3.19 4.06-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L14.9 15.5h9v-9l-3.6 3.6C18.45 8.99 16.05 8 13.4 8c-4.65 0-8.58 3.03-9.96 7.22l2.36.78z'/%3E%3C/svg%3E`,
+};
+
+export type SvgIconDataName = keyof typeof SvgIconData;
+export const SvgIconNames = Object.fromEntries(Object.keys(SvgIconData).map((key) => [key, key])) as {
+  [K in SvgIconDataName]: K;
+};
+
+export const LJ_SVG_ICON_CLASS = 'lj_svg_icon';
+export const LJ_SVG_ICON_STYLE_ID = 'lj_svg_icon_style';
+export const loadSvgIconStyles = () => {
+  if (typeof document === 'undefined' || document.getElementById(LJ_SVG_ICON_STYLE_ID)) return;
+  let iconStyles = '';
+  for (const key of Object.keys(SvgIconData)) {
+    iconStyles += `.${LJ_SVG_ICON_CLASS}_${key} { -webkit-mask-image: url("${SvgIconData[key]}"); mask-image: url("${SvgIconData[key]}"); }\n`;
+  }
+
+  const style = document.createElement('style');
+  style.id = LJ_SVG_ICON_STYLE_ID;
+  style.innerHTML = `
+      .${LJ_SVG_ICON_CLASS} {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: var(--primary-color, #ccc);
+        overflow:hidden;
+        mask-size: contain;
+      }
+      .${LJ_SVG_ICON_CLASS}:hover, .${LJ_SVG_ICON_CLASS}.active {
+        background-color: var(--primary-accent-color, #0a74c9);
+      }
+      ${iconStyles}
+    `;
+  document.head.appendChild(style);
+};