@chenzy-design/icons 0.2.1 → 0.4.0

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@chenzy-design/icons",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chenzylab/chenzy-design.git",
+    "directory": "packages/icons"
+  },
   "type": "module",
   "sideEffects": false,
   "svelte": "./src/index.ts",
@@ -19,8 +24,11 @@
   "peerDependencies": {
     "svelte": ">=5.0.0"
   },
+  "devDependencies": {
+    "svelte-check": "^4.0.0"
+  },
   "scripts": {
-    "build": "echo \"[icons] codegen placeholder — see specs/components/basic/Icon.spec.md\"",
-    "typecheck": "echo \"[icons] no ts yet\""
+    "build": "svelte-check --tsconfig ./tsconfig.json",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   }
 }

package/src/Icon.svelte

@@ -0,0 +1,137 @@
+<!--
+  Icon 基座 —— 严格镜像 Semi @douyinfe/semi-icons `components/Icon.tsx`。
+  具名图标经 convertIcon（本库对应 createIcon）复用本基座渲染。
+
+  DOM/props 对齐 Semi：
+    <span class="cd-icon cd-icon-{size} [cd-icon-spinning] [cd-icon-{type}]"
+          role="img" aria-label={type} style={rotate/fill}>{svg}</span>
+  size 用 font-size 控制（extra-small=8 / small=12 / default=16 / large=20 / extra-large=24），
+  内部 svg width/height=1em 随之缩放；fill: currentColor 随 CSS color 变色。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export type IconSize = 'inherit' | 'extra-small' | 'small' | 'default' | 'large' | 'extra-large';
+
+  interface Props {
+    /**
+     * 图标内容，对齐 Semi svg（接收 ReactNode）：
+     *  - string：SVG 字符串，内部 {@html} 渲染（具名图标常量走此路径，来源可信）；
+     *  - Snippet：自定义图标片段（对标 Semi `svg={<CustomIcon />}`）。
+     * 亦可用 children 传自定义图标。
+     */
+    svg?: string | Snippet;
+    /** 尺寸档位，对齐 Semi（font-size 驱动）。 */
+    size?: IconSize;
+    /** 旋转动画。 */
+    spin?: boolean;
+    /** 旋转角度（deg）。 */
+    rotate?: number;
+    /** 图标语义类型，映射到 aria-label 与 cd-icon-{type} 类（对齐 Semi）。 */
+    type?: string;
+    /** 覆盖填充色（对齐 Semi fill；用于双色/多色图标改色）。 */
+    fill?: string;
+    class?: string;
+    style?: string;
+    /** 自定义图标片段（svg 未传时的备选插槽）。 */
+    children?: Snippet;
+    /** 其余原生属性（onclick / aria-* 等）透传到根 span，对齐 Semi restProps。 */
+    [key: string]: unknown;
+  }
+
+  let {
+    svg,
+    size = 'default',
+    spin = false,
+    rotate,
+    type,
+    fill,
+    class: className = '',
+    style = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const isSvgString = $derived(typeof svg === 'string');
+  const svgSnippet = $derived(typeof svg === 'function' ? (svg as Snippet) : children);
+
+  const cls = $derived(
+    [
+      'cd-icon',
+      size && size !== 'inherit' && `cd-icon-${size}`,
+      spin && 'cd-icon-spinning',
+      type && `cd-icon-${type}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  const outerStyle = $derived(
+    [
+      Number.isSafeInteger(rotate) ? `transform:rotate(${rotate}deg)` : '',
+      fill ? `color:${fill}` : '',
+      style,
+    ]
+      .filter(Boolean)
+      .join(';'),
+  );
+</script>
+
+<span class={cls} role="img" aria-label={type} style={outerStyle || undefined} {...rest}>
+  {#if isSvgString}
+    <!-- svg 字符串来源可信（构建期具名图标常量），运行时不做净化。 -->
+    {@html svg}
+  {:else if svgSnippet}
+    {@render svgSnippet()}
+  {/if}
+</span>
+
+<style>
+  /* 镜像 Semi icons.css：font-size 驱动尺寸，fill: currentColor 随 color 变色。 */
+  .cd-icon {
+    display: inline-block;
+    font-style: normal;
+    line-height: 0;
+    text-align: center;
+    text-transform: none;
+    text-rendering: optimizeLegibility;
+    fill: currentColor;
+  }
+  .cd-icon :global(svg) {
+    width: 1em;
+    height: 1em;
+  }
+  .cd-icon-extra-small {
+    font-size: 8px;
+  }
+  .cd-icon-small {
+    font-size: 12px;
+  }
+  .cd-icon-default {
+    font-size: 16px;
+  }
+  .cd-icon-large {
+    font-size: 20px;
+  }
+  .cd-icon-extra-large {
+    font-size: 24px;
+  }
+  .cd-icon-spinning {
+    animation: 0.6s linear infinite cd-icon-animation-rotate;
+    animation-fill-mode: forwards;
+  }
+  @keyframes cd-icon-animation-rotate {
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cd-icon-spinning {
+      animation: none;
+    }
+  }
+</style>

package/src/IconAIBellLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAIBellLevel1 — 具名图标，对齐 Semi IconAIBellLevel1（convertIcon(ai_bell_level_1, 'ai_bell_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aIBellLevel1Svg } from './svgs.js';
+
+  interface Props {
+    size?: IconSize;
+    spin?: boolean;
+    rotate?: number;
+    fill?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { ...rest }: Props = $props();
+</script>
+
+<Icon svg={aIBellLevel1Svg} type="ai_bell_level_1" {...rest} />

package/src/IconAIBellLevel2.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getFillColor } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const [primaryColor, secondColor] = $derived.by(() => getFillColor(fill, 2));
+</script>
+
+<!-- IconAIBellLevel2 — AI 多彩图标，对齐 Semi IconAIBellLevel2（type='ai_bell_level_2'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M17.11 4.05a4.56 4.56 0 0 1-2.06 2.06 4.28 4.28 0 0 1-.58.24.68.68 0 0 0 0 1.3 4.56 4.56 0 0 1 .58.24c.9.44 1.62 1.17 2.06 2.06a4.4 4.4 0 0 1 .24.58.68.68 0 0 0 1.3 0 4.57 4.57 0 0 1 .24-.58 4.56 4.56 0 0 1 2.06-2.06 4.28 4.28 0 0 1 .58-.24.68.68 0 0 0 0-1.3 4.56 4.56 0 0 1-.58-.24 4.56 4.56 0 0 1-2.3-2.64.68.68 0 0 0-1.3 0 4.58 4.58 0 0 1-.24.58ZM18 5.73c-.36.48-.79.91-1.27 1.27.48.36.91.79 1.27 1.27.36-.48.79-.91 1.27-1.27A6.2 6.2 0 0 1 18 5.73Z"
+                fill={primaryColor}
+            />
+            <path
+                d="M20 20a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2h16ZM12 3.5a1 1 0 0 1 0 2 5 5 0 0 0-5 5v6h10V14a1 1 0 0 1 2 0v3.5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7a7 7 0 0 1 7-7ZM1.05 6.18a1 1 0 0 1 1.17-.66l.1.03 1.5.5.1.04a1 1 0 0 1-.64 1.89l-.1-.03-1.5-.5-.1-.04a1 1 0 0 1-.53-1.23ZM2.8 2.8a1 1 0 0 1 1.34-.07l.08.07 1.5 1.5.07.08a1 1 0 0 1-1.41 1.4l-.08-.06-1.5-1.5-.07-.08A1 1 0 0 1 2.8 2.8Zm3.4-1.74a1 1 0 0 1 1.22.54l.04.1.5 1.5.03.1a1 1 0 0 1-1.9.62l-.03-.1-.5-1.5-.03-.1a1 1 0 0 1 .66-1.16Z"
+                fill={secondColor}
+            />
+        </svg>

package/src/IconAIBellLevel3.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { getFillColor, getUuidShort } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const id = getUuidShort({ prefix: 'semi-ai-bell-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAIBellLevel3 — AI 多彩图标，对齐 Semi IconAIBellLevel3（type='ai_bell_level_3'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M20 20a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2h16ZM12 3.5a1 1 0 0 1 0 2 5 5 0 0 0-5 5v6h10V14a1 1 0 1 1 2 0v3.5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7a7 7 0 0 1 7-7Zm5.35-.03a.68.68 0 0 1 1.3 0c.06.17.12.34.2.5l.04.08c.44.9 1.17 1.62 2.06 2.06l.08.04c.16.08.33.14.5.2a.68.68 0 0 1 0 1.3c-.17.06-.34.12-.5.2l-.08.04a4.56 4.56 0 0 0-2.06 2.06l-.04.08c-.08.16-.14.33-.2.5a.68.68 0 0 1-1.3 0 4.56 4.56 0 0 0-.2-.5l-.04-.08a4.56 4.56 0 0 0-2.06-2.06l-.08-.04a4.58 4.58 0 0 0-.5-.2.68.68 0 0 1 0-1.3c.17-.06.34-.12.5-.2l.08-.04a4.56 4.56 0 0 0 2.06-2.06l.04-.08c.08-.16.14-.33.2-.5ZM18 5.73c-.36.48-.79.91-1.27 1.27.48.36.91.79 1.27 1.27.36-.48.79-.91 1.27-1.27A6.2 6.2 0 0 1 18 5.73Zm-16.95.45a1 1 0 0 1 1.17-.66l.1.03 1.5.5.1.04a1 1 0 0 1-.64 1.89l-.1-.03-1.5-.5-.1-.04a1 1 0 0 1-.53-1.23ZM2.8 2.8a1 1 0 0 1 1.34-.07l.08.07 1.5 1.5.07.08a1 1 0 0 1-1.41 1.4l-.08-.06-1.5-1.5-.07-.08A1 1 0 0 1 2.8 2.8Zm3.4-1.74a1 1 0 0 1 1.22.54l.04.1.5 1.5.03.1a1 1 0 0 1-1.9.62l-.03-.1-.5-1.5-.03-.1a1 1 0 0 1 .66-1.16Z"
+                fill={`url(#${id})`}
+            />
+            <defs>
+                <linearGradient
+                    id={id}
+                    x1="21.9997"
+                    y1="21.9998"
+                    x2="-1.48859"
+                    y2="18.6968"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stop-color={stop1} />
+                    <stop offset="0.3" stop-color={stop2} />
+                    <stop offset="0.6" stop-color={stop3} />
+                    <stop offset="1" stop-color={stop4} />
+                </linearGradient>
+            </defs>
+        </svg>

package/src/IconAIEditLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAIEditLevel1 — 具名图标，对齐 Semi IconAIEditLevel1（convertIcon(ai_edit_level_1, 'ai_edit_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aIEditLevel1Svg } from './svgs.js';
+
+  interface Props {
+    size?: IconSize;
+    spin?: boolean;
+    rotate?: number;
+    fill?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { ...rest }: Props = $props();
+</script>
+
+<Icon svg={aIEditLevel1Svg} type="ai_edit_level_1" {...rest} />

package/src/IconAIEditLevel2.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getFillColor } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const [primaryColor, secondColor] = $derived.by(() => getFillColor(fill, 2));
+</script>
+
+<!-- IconAIEditLevel2 — AI 多彩图标，对齐 Semi IconAIEditLevel2（type='ai_edit_level_2'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M16.28 5.04a2 2 0 0 1 2.83 0l2.15 2.14a2 2 0 0 1 0 2.84L11.24 20.04c-.7.7-1.6 1.18-2.56 1.37l-2.97.6a1.2 1.2 0 0 1-1.42-1.42l.6-2.97c.19-.97.67-1.86 1.37-2.56L16.28 5.04Zm-8.6 11.43c-.43.42-.71.96-.83 1.54l-.36 1.8 1.8-.37c.58-.11 1.11-.4 1.53-.82l7.29-7.29-2.15-2.15-7.29 7.3Zm8.7-8.7 2.15 2.14 1.31-1.3-2.15-2.15-1.3 1.3Z"
+                fill={secondColor}
+            />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M5.33 3.08a4.52 4.52 0 0 1-2.65 2.3.69.69 0 0 0 0 1.3 4.58 4.58 0 0 1 .58.25 4.57 4.57 0 0 1 2.3 2.65c.22.63 1.1.63 1.3 0a4.57 4.57 0 0 1 2.32-2.65 4.52 4.52 0 0 1 .58-.24.69.69 0 0 0 0-1.3 4.57 4.57 0 0 1-.58-.24A4.57 4.57 0 0 1 6.87 2.5a.69.69 0 0 0-1.3 0 4.57 4.57 0 0 1-.24.58Zm.89 1.69c-.36.48-.79.9-1.27 1.27.48.36.9.79 1.27 1.27.36-.48.79-.91 1.27-1.27a6.22 6.22 0 0 1-1.27-1.27Z"
+                fill={primaryColor}
+            />
+        </svg>

package/src/IconAIEditLevel3.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { getFillColor, getUuidShort } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const id = getUuidShort({ prefix: 'semi-ai-edit-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAIEditLevel3 — AI 多彩图标，对齐 Semi IconAIEditLevel3（type='ai_edit_level_3'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M16.28 5.04a2 2 0 0 1 2.83 0l2.15 2.14a2 2 0 0 1 0 2.84L11.24 20.04c-.7.7-1.6 1.18-2.56 1.37l-2.97.6a1.2 1.2 0 0 1-1.42-1.42l.6-2.97c.19-.97.67-1.86 1.37-2.56L16.28 5.04Zm-8.6 11.43a3 3 0 0 0-.83 1.54l-.36 1.8 1.8-.37c.58-.11 1.11-.4 1.53-.82l7.3-7.29-2.16-2.15-7.29 7.3ZM5.56 2.5a.69.69 0 0 1 1.3 0c.06.17.12.34.2.5l.04.08c.44.9 1.17 1.62 2.07 2.07l.08.04.5.2c.62.2.62 1.09 0 1.3-.17.06-.34.12-.5.2l-.08.04A4.57 4.57 0 0 0 7.1 9l-.04.08c-.08.16-.14.33-.2.5a.69.69 0 0 1-1.3 0 4.57 4.57 0 0 0-.2-.5L5.33 9a4.57 4.57 0 0 0-2.07-2.07l-.08-.04a4.58 4.58 0 0 0-.5-.2.69.69 0 0 1 0-1.3l.5-.2.08-.04a4.57 4.57 0 0 0 2.07-2.07L5.37 3l.2-.5Zm10.81 5.27 2.15 2.14 1.31-1.3-2.15-2.15-1.3 1.3Zm-10.16-3c-.36.48-.8.9-1.27 1.27.48.36.9.79 1.27 1.27.36-.48.79-.91 1.27-1.27a6.23 6.23 0 0 1-1.27-1.27Z"
+                fill={`url(#${id})`}
+            />
+            <defs>
+                <linearGradient
+                    id={id}
+                    x1="21.8469"
+                    y1="22.0288"
+                    x2="-0.135689"
+                    y2="18.9934"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stop-color={stop1} />
+                    <stop offset="0.3" stop-color={stop2} />
+                    <stop offset="0.6" stop-color={stop3} />
+                    <stop offset="1" stop-color={stop4} />
+                </linearGradient>
+            </defs>
+        </svg>

package/src/IconAIFileLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAIFileLevel1 — 具名图标，对齐 Semi IconAIFileLevel1（convertIcon(ai_file_level_1, 'ai_file_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aIFileLevel1Svg } from './svgs.js';
+
+  interface Props {
+    size?: IconSize;
+    spin?: boolean;
+    rotate?: number;
+    fill?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { ...rest }: Props = $props();
+</script>
+
+<Icon svg={aIFileLevel1Svg} type="ai_file_level_1" {...rest} />

package/src/IconAIFileLevel2.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getFillColor } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const [primaryColor, secondColor] = $derived.by(() => getFillColor(fill, 2));
+</script>
+
+<!-- IconAIFileLevel2 — AI 多彩图标，对齐 Semi IconAIFileLevel2（type='ai_file_level_2'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M17.93 16.4a.6.6 0 0 1 1.14 0c.05.16.1.3.17.45l.04.07a3.99 3.99 0 0 0 1.8 1.8l.07.04a4 4 0 0 0 .44.17.6.6 0 0 1 0 1.14 4 4 0 0 0-.44.17l-.07.04a3.99 3.99 0 0 0-1.8 1.8l-.04.07a4 4 0 0 0-.17.44.6.6 0 0 1-1.14 0 4 4 0 0 0-.17-.44l-.04-.07a3.99 3.99 0 0 0-1.8-1.8l-.07-.04a3.98 3.98 0 0 0-.44-.17.6.6 0 0 1 0-1.14c.15-.05.3-.1.44-.17l.07-.04a3.99 3.99 0 0 0 1.8-1.8l.04-.07.17-.44Zm.57 2c-.31.41-.69.79-1.1 1.1.41.31.79.69 1.1 1.1.31-.41.69-.79 1.1-1.1-.41-.31-.79-.69-1.1-1.1Zm-4.4-8.1a.43.43 0 0 1 .8 0 2.85 2.85 0 0 0 .57.98l.05.05.15.15.05.05a2.85 2.85 0 0 0 .99.56c.39.13.39.69 0 .82a2.85 2.85 0 0 0-.99.56l-.05.05-.15.15-.05.05a2.85 2.85 0 0 0-.56.99.43.43 0 0 1-.82 0 2.85 2.85 0 0 0-.56-.99l-.05-.05-.15-.15-.05-.05a2.85 2.85 0 0 0-.99-.56.43.43 0 0 1 0-.82 2.85 2.85 0 0 0 .99-.56l.05-.05.15-.15.05-.05a2.85 2.85 0 0 0 .56-.99Z"
+                fill={primaryColor}
+            />
+            <path
+                d="M19 1a2 2 0 0 1 2 2v10a1 1 0 1 1-2 0V3H5v18h7a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2h14ZM9.5 11.5a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h1.5ZM16 6a1 1 0 1 1 0 2H8a1 1 0 0 1 0-2h8Z"
+                fill={secondColor}
+            />
+        </svg>

package/src/IconAIFileLevel3.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { getFillColor, getUuidShort } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const id = getUuidShort({ prefix: 'semi-ai-file-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAIFileLevel3 — AI 多彩图标，对齐 Semi IconAIFileLevel3（type='ai_file_level_3'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M19 1a2 2 0 0 1 2 2v10a1 1 0 1 1-2 0V3H5v18h7a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2h14Zm-1.07 15.4a.6.6 0 0 1 1.14 0c.05.16.1.3.17.45l.04.07a3.99 3.99 0 0 0 1.8 1.8l.07.04a4 4 0 0 0 .44.17.6.6 0 0 1 0 1.14 4 4 0 0 0-.44.17l-.07.04a3.99 3.99 0 0 0-1.8 1.8l-.04.07a4 4 0 0 0-.17.44.6.6 0 0 1-1.14 0 4 4 0 0 0-.17-.44l-.04-.07a3.99 3.99 0 0 0-1.8-1.8l-.07-.04a4 4 0 0 0-.44-.17.6.6 0 0 1 0-1.14 4 4 0 0 0 .44-.17l.07-.04a3.99 3.99 0 0 0 1.8-1.8l.04-.07a4 4 0 0 0 .17-.44Zm.57 2c-.31.41-.69.79-1.1 1.1.41.31.79.69 1.1 1.1.31-.41.69-.79 1.1-1.1-.41-.31-.79-.69-1.1-1.1Zm-4.4-8.1a.43.43 0 0 1 .8 0 2.85 2.85 0 0 0 .57.98l.05.05.15.15.05.05a2.85 2.85 0 0 0 .99.56c.39.13.39.69 0 .82a2.85 2.85 0 0 0-.99.56l-.05.05-.15.15-.05.05a2.85 2.85 0 0 0-.56.99.43.43 0 0 1-.82 0 2.85 2.85 0 0 0-.56-.99l-.05-.05-.15-.15-.05-.05a2.85 2.85 0 0 0-.99-.56.43.43 0 0 1 0-.82 2.85 2.85 0 0 0 .99-.56l.05-.05.15-.15.05-.05a2.85 2.85 0 0 0 .56-.99Zm-4.6 1.2a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h1.5ZM16 6a1 1 0 1 1 0 2H8a1 1 0 0 1 0-2h8Z"
+                fill={`url(#${id})`}
+            />
+            <defs>
+                <linearGradient
+                    id={id}
+                    x1="21.9999"
+                    y1="23"
+                    x2="0.643144"
+                    y2="20.4063"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stop-color={stop1} />
+                    <stop offset="0.3" stop-color={stop2} />
+                    <stop offset="0.6" stop-color={stop3} />
+                    <stop offset="1" stop-color={stop4} />
+                </linearGradient>
+            </defs>
+        </svg>

package/src/IconAIFilledLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAIFilledLevel1 — 具名图标，对齐 Semi IconAIFilledLevel1（convertIcon(ai_filled_level_1, 'ai_filled_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aIFilledLevel1Svg } from './svgs.js';
+
+  interface Props {
+    size?: IconSize;
+    spin?: boolean;
+    rotate?: number;
+    fill?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { ...rest }: Props = $props();
+</script>
+
+<Icon svg={aIFilledLevel1Svg} type="ai_filled_level_1" {...rest} />

package/src/IconAIFilledLevel2.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getFillColor } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const [primaryColor, secondColor] = $derived.by(() => getFillColor(fill, 2));
+</script>
+
+<!-- IconAIFilledLevel2 — AI 多彩图标，对齐 Semi IconAIFilledLevel2（type='ai_filled_level_2'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M9.68 5.45c.22-1.1 1.8-1.1 2.02 0a8.79 8.79 0 0 0 6.85 6.85c1.1.22 1.1 1.8 0 2.02a8.79 8.79 0 0 0-6.85 6.85c-.22 1.1-1.8 1.1-2.02 0a8.79 8.79 0 0 0-6.85-6.85c-1.1-.22-1.1-1.8 0-2.02a8.79 8.79 0 0 0 6.85-6.85Z"
+                fill={secondColor}
+            />
+            <path
+                d="M18.16 1.6c.16-.8 1.31-.8 1.48 0a3.54 3.54 0 0 0 2.76 2.76c.8.17.8 1.32 0 1.48a3.54 3.54 0 0 0-2.76 2.76c-.17.8-1.32.8-1.48 0a3.54 3.54 0 0 0-2.76-2.76c-.8-.16-.8-1.31 0-1.48a3.54 3.54 0 0 0 2.76-2.76Z"
+                fill={primaryColor}
+            />
+        </svg>

package/src/IconAIFilledLevel3.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { getFillColor, getUuidShort } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const id = getUuidShort({ prefix: 'semi-ai-filled-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAIFilledLevel3 — AI 多彩图标，对齐 Semi IconAIFilledLevel3（type='ai_filled_level_3'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M9.68 5.45c.22-1.1 1.8-1.1 2.02 0a8.79 8.79 0 0 0 6.85 6.85c1.1.22 1.1 1.8 0 2.02a8.79 8.79 0 0 0-6.85 6.85c-.22 1.1-1.8 1.1-2.02 0a8.79 8.79 0 0 0-6.85-6.85c-1.1-.22-1.1-1.8 0-2.02a8.79 8.79 0 0 0 6.85-6.85Zm8.48-3.85c.16-.8 1.31-.8 1.48 0a3.54 3.54 0 0 0 2.76 2.76c.8.17.8 1.32 0 1.48a3.54 3.54 0 0 0-2.76 2.76c-.17.8-1.32.8-1.48 0a3.54 3.54 0 0 0-2.76-2.76c-.8-.16-.8-1.31 0-1.48a3.54 3.54 0 0 0 2.76-2.76Z"
+                fill={`url(#${id})`}
+            />
+            <defs>
+                <linearGradient
+                    id={id}
+                    x1="23"
+                    y1="22"
+                    x2="-0.488628"
+                    y2="18.6969"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stop-color={stop1} />
+                    <stop offset="0.3" stop-color={stop2} />
+                    <stop offset="0.6" stop-color={stop3} />
+                    <stop offset="1" stop-color={stop4} />
+                </linearGradient>
+            </defs>
+        </svg>

package/src/IconAIImageLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAIImageLevel1 — 具名图标，对齐 Semi IconAIImageLevel1（convertIcon(ai_image_level_1, 'ai_image_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aIImageLevel1Svg } from './svgs.js';
+
+  interface Props {
+    size?: IconSize;
+    spin?: boolean;
+    rotate?: number;
+    fill?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { ...rest }: Props = $props();
+</script>
+
+<Icon svg={aIImageLevel1Svg} type="ai_image_level_1" {...rest} />

package/src/IconAIImageLevel2.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getFillColor } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const [primaryColor, secondColor] = $derived.by(() => getFillColor(fill, 2));
+</script>
+
+<!-- IconAIImageLevel2 — AI 多彩图标，对齐 Semi IconAIImageLevel2（type='ai_image_level_2'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M12 2a1 1 0 1 1 0 2H4v11.23l3.67-3.37.15-.12a2 2 0 0 1 2.5.08l3.2 2.74 2.16-2.15a2 2 0 0 1 2.61-.19L20 13.5V12a1 1 0 1 1 2 0v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h8ZM4 17.94V20h16v-4l-2.9-2.18-2.05 2.05 1.6 1.37a1 1 0 0 1-1.3 1.52l-6.33-5.42L4 17.94Z"
+                fill={secondColor}
+            />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M17.72 2.92a3.99 3.99 0 0 1-1.8 1.8 4.28 4.28 0 0 1-.51.21.6.6 0 0 0 0 1.14 3.99 3.99 0 0 1 .5.2 3.99 3.99 0 0 1 1.81 1.81 4.4 4.4 0 0 1 .21.51.6.6 0 0 0 1.14 0 3.98 3.98 0 0 1 .2-.5 3.99 3.99 0 0 1 1.81-1.81 4.2 4.2 0 0 1 .51-.21.6.6 0 0 0 0-1.14 3.99 3.99 0 0 1-.5-.2 3.99 3.99 0 0 1-1.81-1.81 4.4 4.4 0 0 1-.21-.51.6.6 0 0 0-1.14 0 3.98 3.98 0 0 1-.2.5Zm.78 1.47c-.31.42-.69.8-1.11 1.11.42.31.8.69 1.11 1.11.31-.42.69-.8 1.11-1.11-.42-.31-.8-.69-1.11-1.11Z"
+                fill={primaryColor}
+            />
+        </svg>

package/src/IconAIImageLevel3.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { getFillColor, getUuidShort } from './utils.js';
+
+  interface Props {
+    /** 多彩填充色：string 或 string[]（缺省用 Semi 默认渐变色）。 */
+    fill?: string | string[];
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  }
+  let { fill, ...rest }: Props = $props();
+
+  const id = getUuidShort({ prefix: 'semi-ai-image-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAIImageLevel3 — AI 多彩图标，对齐 Semi IconAIImageLevel3（type='ai_image_level_3'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path
+                d="M12 2a1 1 0 1 1 0 2H4v11.23l3.67-3.37.15-.12a2 2 0 0 1 2.5.08l3.2 2.74 2.16-2.15a2 2 0 0 1 2.61-.19L20 13.5V12a1 1 0 1 1 2 0v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h8ZM4 17.94V20h16v-4l-2.9-2.18-2.05 2.05 1.6 1.37a1 1 0 0 1-1.3 1.52l-6.33-5.42L4 17.94ZM17.93 2.4a.6.6 0 0 1 1.14 0c.05.15.1.3.17.44l.04.07a3.99 3.99 0 0 0 1.8 1.8l.07.04a4 4 0 0 0 .44.17.6.6 0 0 1 0 1.14 4 4 0 0 0-.44.17l-.07.04a3.99 3.99 0 0 0-1.8 1.8l-.04.07a4 4 0 0 0-.17.44.6.6 0 0 1-1.14 0 4 4 0 0 0-.17-.44l-.04-.07a3.99 3.99 0 0 0-1.8-1.8l-.07-.04a4 4 0 0 0-.44-.17.6.6 0 0 1 0-1.14 4 4 0 0 0 .44-.17l.07-.04a3.99 3.99 0 0 0 1.8-1.8l.04-.07a4 4 0 0 0 .17-.44Zm.57 1.98c-.31.42-.69.8-1.1 1.11.41.31.79.69 1.1 1.1.31-.41.69-.79 1.1-1.1-.41-.31-.79-.69-1.1-1.1Z"
+                fill={`url(#${id})`}
+            />
+            <defs>
+                <linearGradient
+                    id={id}
+                    x1="22"
+                    y1="22"
+                    x2="-0.370122"
+                    y2="18.8542"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stop-color={stop1} />
+                    <stop offset="0.3" stop-color={stop2} />
+                    <stop offset="0.6" stop-color={stop3} />
+                    <stop offset="1" stop-color={stop4} />
+                </linearGradient>
+            </defs>
+        </svg>