@chenzy-design/icons 0.2.1 → 0.4.0

package/src/IconAILoading.svelte

@@ -0,0 +1,38 @@
+<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-loading' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAILoading — AI 多彩图标，对齐 Semi IconAILoading（type='ai_loading'）。fill 数组自定义多色。 -->
+<svg
+            viewBox="0 0 16 16" 
+            width="1em"
+            height="1em"
+            fill="none" 
+            xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" {...rest}
+        >
+            <path 
+                d="M15.1112 7.99978C15.1112 4.07242 11.9275 0.888672 8.00009 0.888672C5.18219 0.888672 2.74711 2.52771 1.59619 4.90445" 
+                stroke={`url(#${id})`} 
+                stroke-width="1.77778" stroke-linecap="round"
+            />
+            <defs>
+                <linearGradient id={id} x1="16" y1="8" x2="2.68594" y2="11.022" 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} stop-opacity="0"/>
+                </linearGradient>
+            </defs>
+        </svg>

package/src/IconAISearchLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAISearchLevel1 — 具名图标，对齐 Semi IconAISearchLevel1（convertIcon(ai_search_level_1, 'ai_search_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aISearchLevel1Svg } 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={aISearchLevel1Svg} type="ai_search_level_1" {...rest} />

package/src/IconAISearchLevel2.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>
+
+<!-- IconAISearchLevel2 — AI 多彩图标，对齐 Semi IconAISearchLevel2（type='ai_search_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="M14.72 1.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}
+            />
+            <path
+                d="M10 2a1 1 0 0 1 0 2 6 6 0 1 0 6 6 1 1 0 1 1 2 0 8 8 0 0 1-1.68 4.9l5.39 5.4a1 1 0 1 1-1.42 1.4l-5.39-5.38A8 8 0 1 1 10 2Z"
+                fill={secondColor}
+            />
+        </svg>

package/src/IconAISearchLevel3.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-search-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAISearchLevel3 — AI 多彩图标，对齐 Semi IconAISearchLevel3（type='ai_search_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="M10 2a1 1 0 1 1 0 2 6 6 0 1 0 6 6 1 1 0 0 1 2 0 8 8 0 0 1-1.68 4.9l5.39 5.4a1 1 0 1 1-1.42 1.4l-5.39-5.38A8 8 0 1 1 10 2Zm4.93-.6a.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.04a4 4 0 0 0-1.8 1.8 3.8 3.8 0 0 0-.21.51.6.6 0 0 1-1.14 0 4 4 0 0 0-.17-.44l-.04-.07a3.95 3.95 0 0 0-2.31-2.01.6.6 0 0 1 0-1.14 4 4 0 0 0 .5-.2 4 4 0 0 0 1.81-1.81l.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.11-1.1-.42-.31-.8-.69-1.11-1.1Z"
+                fill={`url(#${id})`}
+            />
+            <defs>
+                <linearGradient
+                    id={id}
+                    x1="22.0001"
+                    y1="21.9998"
+                    x2="-0.410523"
+                    y2="18.9983"
+                    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/IconAIStrokedLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAIStrokedLevel1 — 具名图标，对齐 Semi IconAIStrokedLevel1（convertIcon(ai_stroked_level_1, 'ai_stroked_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aIStrokedLevel1Svg } 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={aIStrokedLevel1Svg} type="ai_stroked_level_1" {...rest} />

package/src/IconAIStrokedLevel2.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>
+
+<!-- IconAIStrokedLevel2 — AI 多彩图标，对齐 Semi IconAIStrokedLevel2（type='ai_stroked_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="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}
+            />
+            <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.85Zm1.01 2.96a10.73 10.73 0 0 1-4.9 4.9 10.73 10.73 0 0 1 4.9 4.9 10.73 10.73 0 0 1 4.9-4.9 10.72 10.72 0 0 1-4.9-4.9Z"
+                fill={secondColor}
+            />
+        </svg>

package/src/IconAIStrokedLevel3.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-stroked-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAIStrokedLevel3 — AI 多彩图标，对齐 Semi IconAIStrokedLevel3（type='ai_stroked_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.85Zm1.01 2.96a10.73 10.73 0 0 1-4.9 4.9 10.73 10.73 0 0 1 4.9 4.9 10.73 10.73 0 0 1 4.9-4.9 10.73 10.73 0 0 1-4.9-4.9Zm7.47-6.8c.16-.81 1.31-.81 1.48 0a3.54 3.54 0 0 0 2.76 2.75c.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.0001"
+                    y1="22.0012"
+                    x2="-0.488689"
+                    y2="18.6982"
+                    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/IconAIWandLevel1.svelte

@@ -0,0 +1,18 @@
+<!-- IconAIWandLevel1 — 具名图标，对齐 Semi IconAIWandLevel1（convertIcon(ai_wand_level_1, 'ai_wand_level_1')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { aIWandLevel1Svg } 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={aIWandLevel1Svg} type="ai_wand_level_1" {...rest} />

package/src/IconAIWandLevel2.svelte

@@ -0,0 +1,40 @@
+<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>
+
+<!-- IconAIWandLevel2 — AI 多彩图标，对齐 Semi IconAIWandLevel2（type='ai_wand_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 15.05a4.56 4.56 0 0 1-2.64 2.3.68.68 0 0 0 0 1.3 4.57 4.57 0 0 1 2.64 2.3 4.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.4 4.4 0 0 1 .58-.24.68.68 0 0 0 0-1.3 4.57 4.57 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.57 4.57 0 0 1-.24.58Zm.89 1.68c-.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 16.73Z"
+                fill={primaryColor}
+            />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M4.83 3.53a3.42 3.42 0 0 0 .68-1.18.51.51 0 0 1 .98 0 3.42 3.42 0 0 0 2.16 2.16c.47.16.47.82 0 .98a3.42 3.42 0 0 0-2.16 2.16.51.51 0 0 1-.98 0 3.42 3.42 0 0 0-2.16-2.16.51.51 0 0 1 0-.98 3.42 3.42 0 0 0 1.48-.98Z"
+                fill={primaryColor}
+            />
+            <path
+                d="M16.57 2.93a3.18 3.18 0 1 1 4.5 4.5L7.43 21.07a3.18 3.18 0 1 1-4.5-4.5L16.57 2.93ZM4.34 17.97a1.2 1.2 0 0 0 1.7 1.7L16.6 9.08l-1.7-1.7L4.34 17.97ZM19.67 4.33a1.2 1.2 0 0 0-1.7 0L16.3 6l1.7 1.7 1.66-1.66a1.2 1.2 0 0 0 0-1.7Z"
+                fill={secondColor}
+            />
+        </svg>

package/src/IconAIWandLevel3.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-wand-level-3' });
+  const [stop1, stop2, stop3, stop4] = $derived.by(() => getFillColor(fill, 4));
+</script>
+
+<!-- IconAIWandLevel3 — AI 多彩图标，对齐 Semi IconAIWandLevel3（type='ai_wand_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.57 2.93a3.18 3.18 0 0 1 4.5 4.5L7.43 21.07a3.18 3.18 0 0 1-4.5-4.5L16.57 2.93Zm.74 11.52a.68.68 0 0 1 1.28 0 4.52 4.52 0 0 0 .24.57c.44.9 1.16 1.6 2.04 2.05a4.65 4.65 0 0 0 .58.24.68.68 0 0 1 0 1.28l-.5.2-.07.04a4.52 4.52 0 0 0-2.05 2.04 4.65 4.65 0 0 0-.24.58.68.68 0 0 1-1.28 0 4.54 4.54 0 0 0-.24-.57 4.52 4.52 0 0 0-2.05-2.05l-.08-.04a4.52 4.52 0 0 0-.5-.2.68.68 0 0 1 0-1.28 4.52 4.52 0 0 0 .58-.24 4.52 4.52 0 0 0 2.05-2.05 4.02 4.02 0 0 0 .24-.57ZM4.33 17.97a1.2 1.2 0 0 0 1.7 1.7L16.61 9.09l-1.7-1.7L4.33 17.97Zm13.62-1.28c-.36.48-.78.9-1.26 1.26.48.36.9.78 1.26 1.26.36-.48.78-.9 1.26-1.26-.48-.36-.9-.78-1.26-1.26ZM5.57 2.43a.5.5 0 0 1 .96 0 3.4 3.4 0 0 0 2.15 2.15.5.5 0 0 1 0 .96A3.4 3.4 0 0 0 6.53 7.7a.5.5 0 0 1-.96 0 3.4 3.4 0 0 0-2.15-2.15.5.5 0 0 1 0-.96 3.4 3.4 0 0 0 2.15-2.15Zm14.1 1.9a1.2 1.2 0 0 0-1.7 0L16.3 6l1.7 1.7 1.66-1.66a1.2 1.2 0 0 0 0-1.7Z"
+                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>

package/src/IconAbsoluteStroked.svelte

@@ -0,0 +1,18 @@
+<!-- IconAbsoluteStroked — 具名图标，对齐 Semi IconAbsoluteStroked（convertIcon(absolute_stroked, 'absolute_stroked')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { absoluteStrokedSvg } 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={absoluteStrokedSvg} type="absolute_stroked" {...rest} />

package/src/IconActivity.svelte

@@ -0,0 +1,18 @@
+<!-- IconActivity — 具名图标，对齐 Semi IconActivity（convertIcon(activity, 'activity')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { activitySvg } 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={activitySvg} type="activity" {...rest} />

package/src/IconAlarm.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlarm — 具名图标，对齐 Semi IconAlarm（convertIcon(alarm, 'alarm')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alarmSvg } 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={alarmSvg} type="alarm" {...rest} />

package/src/IconAlarmStroked.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlarmStroked — 具名图标，对齐 Semi IconAlarmStroked（convertIcon(alarm_stroked, 'alarm_stroked')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alarmStrokedSvg } 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={alarmStrokedSvg} type="alarm_stroked" {...rest} />

package/src/IconAlertCircle.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlertCircle — 具名图标，对齐 Semi IconAlertCircle（convertIcon(alert_circle, 'alert_circle')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alertCircleSvg } 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={alertCircleSvg} type="alert_circle" {...rest} />

package/src/IconAlertTriangle.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlertTriangle — 具名图标，对齐 Semi IconAlertTriangle（convertIcon(alert_triangle, 'alert_triangle')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alertTriangleSvg } 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={alertTriangleSvg} type="alert_triangle" {...rest} />

package/src/IconAlignBottom.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignBottom — 具名图标，对齐 Semi IconAlignBottom（convertIcon(align_bottom, 'align_bottom')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignBottomSvg } 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={alignBottomSvg} type="align_bottom" {...rest} />

package/src/IconAlignCenter.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignCenter — 具名图标，对齐 Semi IconAlignCenter（convertIcon(align_center, 'align_center')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignCenterSvg } 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={alignCenterSvg} type="align_center" {...rest} />

package/src/IconAlignCenterVertical.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignCenterVertical — 具名图标，对齐 Semi IconAlignCenterVertical（convertIcon(align_center_vertical, 'align_center_vertical')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignCenterVerticalSvg } 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={alignCenterVerticalSvg} type="align_center_vertical" {...rest} />

package/src/IconAlignHCenterStroked.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignHCenterStroked — 具名图标，对齐 Semi IconAlignHCenterStroked（convertIcon(align_h_center_stroked, 'align_h_center_stroked')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignHCenterStrokedSvg } 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={alignHCenterStrokedSvg} type="align_h_center_stroked" {...rest} />

package/src/IconAlignHLeftStroked.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignHLeftStroked — 具名图标，对齐 Semi IconAlignHLeftStroked（convertIcon(align_h_left_stroked, 'align_h_left_stroked')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignHLeftStrokedSvg } 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={alignHLeftStrokedSvg} type="align_h_left_stroked" {...rest} />

package/src/IconAlignHRightStroked.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignHRightStroked — 具名图标，对齐 Semi IconAlignHRightStroked（convertIcon(align_h_right_stroked, 'align_h_right_stroked')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignHRightStrokedSvg } 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={alignHRightStrokedSvg} type="align_h_right_stroked" {...rest} />

package/src/IconAlignJustify.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignJustify — 具名图标，对齐 Semi IconAlignJustify（convertIcon(align_justify, 'align_justify')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignJustifySvg } 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={alignJustifySvg} type="align_justify" {...rest} />

package/src/IconAlignLeft.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignLeft — 具名图标，对齐 Semi IconAlignLeft（convertIcon(align_left, 'align_left')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignLeftSvg } 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={alignLeftSvg} type="align_left" {...rest} />

package/src/IconAlignRight.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignRight — 具名图标，对齐 Semi IconAlignRight（convertIcon(align_right, 'align_right')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignRightSvg } 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={alignRightSvg} type="align_right" {...rest} />

package/src/IconAlignTop.svelte

@@ -0,0 +1,18 @@
+<!-- IconAlignTop — 具名图标，对齐 Semi IconAlignTop（convertIcon(align_top, 'align_top')）。 -->
+<script lang="ts">
+  import Icon, { type IconSize } from './Icon.svelte';
+  import { alignTopSvg } 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={alignTopSvg} type="align_top" {...rest} />