[stdf] publish v1.0.1

README.md

@@ -56,7 +56,7 @@ Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind
 - 🫡 No third-party dependencies — no need to worry about library versions or security issues.
 - 📦 Supports on-demand import to reduce bundle size.
 - 🪜 Comes with a scaffolding tool for quick project creation.
-- 🔗 Comes with an SVG merging plugin for quickly merging SVG files.
+- 🔗 Comes with an SVG merging plugin for quickly merging SVG files, support Iconify.
 - 🍺 IDE plugin for quickly viewing component APIs.
 
 # Getting Started

README_CN.md

@@ -58,7 +58,7 @@
 - 🫡 无三方依赖，无需担心三方库版本与安全问题。
 - 📦 支持按需引入，减少打包体积。
 - 🪜 配套脚手架，快速创建工程。
-- 🔗 配套 SVG 合并插件，快速合并 SVG。
+- 🔗 配套 SVG 合并插件，快速合并 SVG，支持 Iconify。
 - 🍺 配套 IDE 插件，快速查看组件 API。
 
 # 快速上手

docs/mds/components/avatar/version.md

@@ -1,3 +1,7 @@
+## 1.1.0
+
+- [!tag|B|3|] 修复 Avatars 边框为 3 时的样式以适配 Tailwind 4。
+
 ## 0.5.1
 
 - [!tag|B|3|]修复未传入 altSizeObj 时的默认值问题。

docs/mds/components/avatar/version_en.md

@@ -1,3 +1,7 @@
+## 1.1.0
+
+- [!tag|B|3|] Fix the style of Avatars when the border is 3 to adapt to Tailwind 4.
+
 ## 0.5.1
 
 - [!tag|B|3|] Fix the problem of default values when altSizeObj is not passed in.

docs/mds/components/button/api.md

@@ -17,6 +17,7 @@
 | customWidth     | `number`                                                                      | `0`       | N    | 自定义宽度。                   |
 | customHeight    | `number`                                                                      | `0`       | N    | 自定义高度。                   |
 | icon            | [`Icon`](https://stdf.design/components?nav=icon&tab=1)\|`null`             | `null`    | N    | 图标参数。                     |
+| iconPosition    | `'left'\|'right'`                                                            | `'left'` | N    | 图标位置。                     |
 | loading         | [`Loading`](https://stdf.design/components?nav=loading&tab=1)\|`null`       | `null`    | N    | 加载参数。                     |
 | disabledLoading | `boolean`                                                                     | `false`   | N    | 加载时是否禁用。               |
 | type            | `'button'\|'reset'\|'submit'`                                                | `button`  | N        | button 的类型。               |

docs/mds/components/button/api_en.md

@@ -17,6 +17,7 @@
 | customWidth     | `number`                                                                      | `0`       | N        | Custom width.                                    |
 | customHeight    | `number`                                                                      | `0`       | N        | Custom height.                                   |
 | icon            | [`Icon`](https://stdf.design/components?nav=icon&tab=1)\|`null`               | `null`    | N        | Icon props.                                      |
+| iconPosition    | `'left'\|'right'`                                                            | `'left'` | N        | Icon position.                                   |
 | loading         | [`Loading`](https://stdf.design/components?nav=loading&tab=1)\|`null`         | `null`    | N        | Loading props.                                   |
 | disabledLoading | `boolean`                                                                     | `false`   | N        | Whether to disable when loading.                 |
 | type            | `'button'\|'reset'\|'submit'`                                                 | `button`  | N        | The default behavior of the button               |

docs/mds/components/button/version.md

@@ -13,6 +13,10 @@
 -   [!tag|A|0|] 新增。
  -->
 
+## 1.1.0
+
+- [!tag|A|0|] 新增 `iconPosition` 属性，支持设置图标位置。
+
 ## 1.0.4
 
 - [!tag|A|0|] 新增 `type` 属性 [PR#43](https://github.com/any-tdf/stdf/pull/43)，相关 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/button#type)。[!contribute|arithefirst|]

docs/mds/components/button/version_en.md

@@ -1,3 +1,7 @@
+## 1.1.0
+
+- [!tag|A|0|] Added `iconPosition` property, support setting icon position.
+
 ## 1.0.4
 
 - [!tag|A|0|] Added `type` property [PR#43](https://github.com/any-tdf/stdf/pull/43), related [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type). [!contribute|arithefirst|]

docs/mds/components/icon/api.md

@@ -1,14 +1,17 @@
 ## Icon Props
 
-| 名称     | 类型      | 默认值               | 必传 | 说明                             |
-| -------- | --------- | -------------------- | ---- | -------------------------------- |
-| name     | `string`  | `''`                 | N    | 图标名称。                       |
-| size     | `number`  | `24`                 | N    | 图标大小。                       |
-| theme    | `boolean` | `false`              | N    | 是否跟随主题色（包含亮暗模式）。 |
-| alpha    | `number`  | `1`                  | N    | 图标透明度。                     |
-| top      | `number`  | `0`                  | N    | 上下偏移量。                     |
-| injClass | `string`  | `''`                 | N    | 注入 CSS 名称。                  |
-| path     | `string`  | `'fonts/symbol.svg'` | N    | 项目存放 symbol.svg 的路径。     |
+| 名称     | 类型                                   | 默认值               | 必传 | 说明                                                             |
+| -------- | -------------------------------------- | -------------------- | ---- | ---------------------------------------------------------------- |
+| type     | `'iconify'\|'iconify-color'\|'symbol'` | `'symbol'`           | N    | 图标类型。                                                       |
+| name     | `string`                               | `''`                 | N    | 图标名称。                                                       |
+| size     | `number`                               | `24`                 | N    | 图标大小。                                                       |
+| width    | `number`                               | `0`                  | N    | 图标宽度。                                                       |
+| height   | `number`                               | `0`                  | N    | 图标高度。                                                       |
+| theme    | `boolean`                              | `false`              | N    | 是否跟随主题色（包含亮暗模式），type 为 `iconify-color` 时无效。 |
+| alpha    | `number`                               | `1`                  | N    | 图标透明度。                                                     |
+| top      | `number`                               | `0`                  | N    | 上下偏移量。                                                     |
+| injClass | `string`                               | `''`                 | N    | 注入 CSS 名称。                                                  |
+| path     | `string`                               | `'fonts/symbol.svg'` | N    | 项目存放 symbol.svg 的路径。                                     |
 
 ## Icon Snippets
 

docs/mds/components/icon/api_en.md

@@ -1,14 +1,17 @@
 ## Icon Props
 
-| Name     | Type      | Default              | Required | Description                                      |
-| -------- | --------- | -------------------- | -------- | ------------------------------------------------ |
-| name     | `string`  | `''`                 | N        | Icon name.                                       |
-| size     | `number`  | `24`                 | N        | Icon size.                                       |
-| theme    | `boolean` | `false`              | N        | Whether to follow theme color (light/dark mode). |
-| alpha    | `number`  | `1`                  | N        | Icon opacity.                                    |
-| top      | `number`  | `0`                  | N        | Vertical offset.                                 |
-| injClass | `string`  | `''`                 | N        | Injected CSS class name.                         |
-| path     | `string`  | `'fonts/symbol.svg'` | N        | Project path for symbol.svg file.                |
+| Name     | Type                                   | Default              | Required | Description                                                                            |
+| -------- | -------------------------------------- | -------------------- | -------- | -------------------------------------------------------------------------------------- |
+| type     | `'iconify'\|'iconify-color'\|'symbol'` | `'symbol'`           | N        | Icon type.                                                                             |
+| name     | `string`                               | `''`                 | N        | Icon name.                                                                             |
+| size     | `number`                               | `24`                 | N        | Icon size.                                                                             |
+| width    | `number`                               | `0`                  | N        | Icon width.                                                                            |
+| height   | `number`                               | `0`                  | N        | Icon height.                                                                           |
+| theme    | `boolean`                              | `false`              | N        | Whether to follow theme color (light/dark mode), invalid when type is `iconify-color`. |
+| alpha    | `number`                               | `1`                  | N        | Icon opacity.                                                                          |
+| top      | `number`                               | `0`                  | N        | Vertical offset.                                                                       |
+| injClass | `string`                               | `''`                 | N        | Injected CSS class name.                                                               |
+| path     | `string`                               | `'fonts/symbol.svg'` | N        | Project path for symbol.svg file.                                                      |
 
 ## Icon Snippets
 

docs/mds/components/icon/guide.md

@@ -1,36 +1,20 @@
-## 背景
+> 从 v1.1.0 开始，STDF 支持 [Iconify](https://iconify.design) 方式使用图标。
 
-STDF 使用 SVG Sprites 技术使用图标，这样可以减少 HTTP 请求，提高页面性能。
+## 使用方式
 
-STDF 的 SVG Sprites 是使用 [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)，大致原理类似于 CSS 中的 Sprite 技术，将项目中的 SVG 拼接在一个文件内，通过 SVG 中的 use 元素找到对应的图标来显示。
-
-你可以把它类比看成是一种字体，只不过这种字体是由 SVG 组成的，而且可以通过 CSS 控制颜色、大小等属性。所以如果用到比较大或者有多种颜色等比较复杂的图标，建议单独引入 SVG 文件使用，不要放在 symbol 中。
-
-兼容性方面也完全没问题。参考 [MDN symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol#browser_compatibility)。
-
-## rollup-plugin-stdf-icon
-
-STDF 已经开发了一个 Rollup/Vite 插件，用于将项目中的 SVG 文件合并成 SVG Sprites，具体使用请参考 [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon)，由于 svg 格式的多样性，可能存在 rollup-plugin-stdf-icon 处理不准确的情况，请到 [GitHub](https://github.com/any-tdf/stdf/issues) 提 issue，注明 svg 文件的具体情况。
-
-或使用其他 SVG Sprites 合成工具或手动合成，也可以请设计师提供设计物料时一并提供对应的 SVG Sprites。或类似 Remix Icon 这样的图标库，可以直接将选定的多个图标下载为 SVG Sprites。
-
-## 内置说明
-
-STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixicon.com)（[GitHub](https://github.com/Remix-Design/remixicon)），在此表示感谢 🙏🏻🙏🏻。
-
-**如果使用这些组件，请确保项目的 symbol.svg 中包含了对应图标。**
-
-具体请参考 [STDF-指南 - 图标](https://stdf.design/guide/icon)。
-
-可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。
+参考 [Icon](https://stdf.design/guide/icon)。
 
 ## 图标名称
 
-当传入 Snippet 时表示图标内部使用传入的元素渲染，其他字符如 'ri-home-line' 使用 symbol.svg 中对应的 SVG 图标渲染。
+当传入 Snippet 时表示图标内部使用传入的元素渲染，其他字符如 'ri-home-line' 使用 symbol.svg 中对应的 SVG 图标渲染；当使用 iconify 时，name 为 Iconify 的规则图标名称，如 'solar--cat-broken'。
 
 ## 图标颜色
 
-如果 theme 不传或传入 false，图标颜色将继承自父级文字颜色，传入 true 图标颜色会根据主题色变化（包含亮暗模式）；如果要实现自定义颜色，而颜色又同时包含亮暗模式，建议使用 CSS 注入或 Snippet 渲染，在 injClass 或 Snippet 中分别配置亮暗模式，请查看示例。
+如果 theme 不传或传入 false，图标颜色将继承自父级文字颜色，传入 true 图标颜色会根据主题色变化（包含亮暗模式）；如果要实现自定义颜色，可以使用 `iconify-color`，或者使用 CSS 注入或 Snippet 渲染，在 injClass 或 Snippet 中分别配置亮暗模式，请查看示例。
+
+## 图标大小
+
+图标默认大小为 24px，当传入 width 或 height 时，图标会根据传入的值设置宽高，否则使用 size 属性设置宽高，即 `size` 属性优先级低于 `width` 和 `height`。
 
 ## 颜色优先级
 
@@ -42,7 +26,7 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 
 ## CSS 注入
 
-通过 injClass 参数可以向组件内部最外层元素注入 CSS 名称（不仅限于 Tailwind CSS），这将使组件样式有更多自定义可能性。因为 CSS 注入于最后，此时最外层元素若已有同属性 CSS 将会以 injClass 为准，这也是通过 injClass 实现自定义图标颜色的原因。
+通过 injClass 参数可以向组件内部外层元素注入 CSS 名称（不仅限于 Tailwind CSS），这将使组件样式有更多自定义可能性。因为 CSS 注入于最后，此时最外层元素若已有同属性 CSS 将会以 injClass 为准，这也是通过 injClass 实现自定义图标颜色的原因。
 
 ## Snippet
 

docs/mds/components/icon/guide_en.md

@@ -1,62 +1,46 @@
-## Background
+> Starting from v1.1.0, STDF supports using icons via [Iconify](https://iconify.design).
 
-STDF uses SVG Sprites technology for icons, which reduces HTTP requests and improves page performance.
+## Usage
 
-STDF's SVG Sprites uses [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol), with a principle similar to CSS Sprite technology - combining project SVG files into one file and displaying icons through the SVG use element.
-
-You can think of it as a font, except it's composed of SVGs and can be styled with CSS properties like color and size. For large or complex icons with multiple colors, it's recommended to import SVG files separately rather than including them in the symbol.
-
-Browser compatibility is not an issue. See [MDN symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol#browser_compatibility).
-
-## rollup-plugin-stdf-icon
-
-STDF has developed a Rollup/Vite plugin to merge SVG files into SVG Sprites. For usage details, see [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon). Due to SVG format variations, if you encounter any issues with rollup-plugin-stdf-icon processing, please submit an issue on [GitHub](https://github.com/any-tdf/stdf/issues) with specific SVG file details.
-
-You can also use other SVG Sprites generation tools, manual compilation, or request SVG Sprites from designers along with design assets. Icon libraries like Remix Icon allow direct download of selected icons as SVG Sprites.
-
-## Built-in Icons
-
-Some STDF components use icons from [Remix Icon](https://remixicon.com) ([GitHub](https://github.com/Remix-Design/remixicon)). We express our gratitude 🙏🏻🙏🏻.
-
-**When using these components, ensure your project's symbol.svg includes the corresponding icons.**
-
-For details, refer to [STDF-Guide-Icon](https://stdf.design/guide/icon).
-
-You can find SVG source files in `node_modules/stdf/assets/svg_base/`.
+Refer to [Icon](https://stdf.design/guide/icon).
 
 ## Icon Names
 
-When a Snippet is passed, the icon renders using the passed element. Other strings like 'ri-home-line' render the corresponding SVG icon from symbol.svg.
+When a Snippet is passed, it indicates that the icon internally uses the passed element for rendering. Other strings like 'ri-home-line' use the corresponding SVG icon in symbol.svg for rendering. When using iconify, the name follows Iconify's icon naming convention, such as 'solar--cat-broken'.
 
 ## Icon Colors
 
-Without theme prop or when set to false, icons inherit parent text color. When true, icons follow theme colors (including light/dark modes). For custom colors with light/dark mode support, use CSS injection or Snippet rendering with injClass or Snippet configured for both modes. See examples.
+If theme is not passed or set to false, the icon color will inherit from the parent text color. When set to true, the icon color will change according to the theme color (including light and dark modes). To implement custom colors, you can use `iconify-color`, or use CSS injection or Snippet rendering, configuring light and dark modes separately in injClass or Snippet. Please refer to the examples.
+
+## Icon Size
+
+The default icon size is 24px. When width or height is passed, the icon will set the width and height according to the passed value. Otherwise, the width and height are set using the size property, i.e., the `size` property has lower priority than `width` and `height`.
 
 ## Color Priority
 
 Color priority: Snippet > injClass > theme > default.
 
-## Vertical Offset
+## Offset
 
-European and West Asian typography has a baseline, while East Asian text doesn't. See [MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/baseline). Due to differences in system fonts, icons may misalign with text. Use the offset to fine-tune alignment or balance visual weight of icons.
+European and West Asian typography has a baseline, while East Asian text does not have a baseline. Refer to [MDN](https://developer.mozilla.org/en-US/docs/Glossary/baseline). However, due to differences in various systems and fonts, icons and text may not align vertically when arranged together. This can be fine-tuned through offset. Or some icons may need offset during layout to maintain visual balance due to differences in visual center of gravity.
 
 ## CSS Injection
 
-The injClass parameter injects CSS classes (not limited to Tailwind CSS) into the component's outer element, enabling more style customization. Since CSS injection occurs last, any existing CSS properties on the outer element will be overridden by injClass, which enables custom icon colors.
+Through the injClass parameter, you can inject CSS class names (not limited to Tailwind CSS) into the outer element inside the component, which provides more customization possibilities for component styles. Since CSS injection happens last, if the outermost element already has CSS properties of the same type, injClass will take precedence, which is also why custom icon colors can be implemented through injClass.
 
 ## Snippet
 
-Can contain any element (even Icon component itself), primarily used for custom icons or colors. When placing custom SVGs in Icon component, note the relationships between SVG viewBox, height, width, and display property. Icon content depends on the passed element, and Props like name, size, theme become ineffective. Snippets enable more customization possibilities for component content.
+You can place any element (even the Icon component itself), mainly used for custom icons or custom icon colors, such as placing custom SVG into the Icon component. Please note the relationship between SVG's viewBox, height, width and the display property. At this point, the icon content depends on the passed element, and parameters like name, size, theme in Props will all become ineffective. Using Snippet provides more customization possibilities for component content.
 
-## Global Injection Icon SVG Path
+## Global Icon SVG Path Injection
 
-STDF Icon component uses SVG file path configuration, which is suitable for a one-time configuration of the global SVG symbol path or the application being deployed on a non-root server path. Usually, the Context is configured in the entry of the application, such as `App.svelte` or `+layout.svelte`, for example:
+STDF Icon component uses SVG file path configuration, suitable for one-time global SVG symbol path configuration, or when the application is deployed on a server non-root path. Generally configured in the application entry such as `App.svelte` or `+layout.svelte` using Context, for example:
 
 ```svelte
 <!-- App.svelte/+layout.svelte -->
 <script>
 	import { setContext } from 'svelte'; // Import setContext
 
-	setContext('STDF-global-icon-svg-path', 'webapps/svelte_demo/fonts/symbol.svg'); // Set the SVG file path
+	setContext('STDF-global-icon-svg-path', 'webapps/svelte_demo/fonts/symbol.svg'); // Set svg file path
 </script>
 ```

docs/mds/components/icon/version.md

@@ -1,3 +1,11 @@
+## 1.1.0
+
+- [!tag|A|0|] 支持 [Iconify](https://iconify.design) 方式使用图标，通过新增的 `type` 属性设置，具体方法参考指南。
+- [!tag|O|0|] 将所有组件中使用到的图标以 svg 的方式内置，项目不再需要手动内置 svg 文件。
+- [!tag|A|0|] 新增 `width` 和 `height` 属性，支持设置图标宽度和高度。
+- [!tag|O|0|] 修改透明度 `alpha` 属性为 `opacity`，更符合 CSS 直觉。
+- [!tag|O|0|] 修改偏移量 `top` 属性为 `y`，更符合描述偏移量。
+
 ## 0.5.3
 
 - [!tag|O|0|] 支持一次性配置全局 SVG symbol 路径。关联 [PR](https://github.com/any-tdf/stdf/pull/28)。[!contribute|zh1047842950|]

docs/mds/components/icon/version_en.md

@@ -1,3 +1,11 @@
+## 1.1.0
+
+- [!tag|A|0|] Support using icons via [Iconify](https://iconify.design) by setting the `type` property, see guide for details.
+- [!tag|O|0|] All icons used in components are embedded as SVG files, so projects no longer need to manually embed SVG files.
+- [!tag|A|0|] Added `width` and `height` properties, supporting setting icon width and height.
+- [!tag|O|0|] Renamed `alpha` property to `opacity`, aligning with CSS conventions.
+- [!tag|O|0|] Renamed `top` property to `y`, aligning with the description of offset.
+
 ## 0.5.3
 
 - [!tag|O|0|] Support one-time configuration of the global SVG symbol path. Related to [PR](https://github.com/any-tdf/stdf/pull/28). [!contribute|zh1047842950|]

docs/mds/components/noticeBar/api.md

@@ -1,17 +1,17 @@
 ## NoticeBar Props
 
-| 名称      | 类型                                                              | 默认值    | 必传 | 说明                          |
-| --------- | ----------------------------------------------------------------- | --------- | ---- | ----------------------------- |
-| textList  | `string[]`                                                        | `[]`      | Y    | 通告内容组成的数组。          |
-| leftIcon  | `null`\|[`Icon`](https://stdf.design/components?nav=icon&tab=0) | `{}`      | N    | 左侧内容。                    |
-| rightIcon | `'close'`\|`'arrow'`\|`null`                                      | `'close'` | N    | 右侧内容。                    |
-| fontSize  | `'xs'\|'sm'\|'base'\|'lg'`                                        | `'sm'`    | N    | 通告字体大小。                |
-| space     | `number`                                                          | `100`     | N    | 通告间距，单位是 px。         |
-| speed     | `number`                                                          | `30`      | N    | 横向滚动速度，单位是 px/s。   |
-| vertical  | `boolean`                                                         | `false`   | N    | 是否垂直滚动。                |
-| duration  | `100`\|`300`\|`500`\|`700`\|`1000`                                | `500`     | N    | 垂直滚动过渡时间，单位是 ms。 |
-| interval  | `number`                                                          | `4`       | N    | 垂直滚动间隔时间，单位是 s。  |
-| injClass  | `string`                                                          | `''`      | N    | 注入 CSS 名称。               |
+| 名称      | 类型                                                                      | 默认值     | 必传 | 说明                          |
+| --------- | ------------------------------------------------------------------------- | ---------- | ---- | ----------------------------- |
+| textList  | `string[]`                                                                | `[]`       | Y    | 通告内容组成的数组。          |
+| leftIcon  | `'volume'\|null`\|[`Icon`](https://stdf.design/components?nav=icon&tab=0) | `'volume'` | N    | 左侧内容。                    |
+| rightIcon | `'close'\|'arrow'\|null`                                              | `'close'`  | N    | 右侧内容。                    |
+| fontSize  | `'xs'\|'sm'\|'base'\|'lg'`                                                | `'sm'`     | N    | 通告字体大小。                |
+| space     | `number`                                                                  | `100`      | N    | 通告间距，单位是 px。         |
+| speed     | `number`                                                                  | `30`       | N    | 横向滚动速度，单位是 px/s。   |
+| vertical  | `boolean`                                                                 | `false`    | N    | 是否垂直滚动。                |
+| duration  | `100\|300\|500\|700\|1000`                                                | `500`      | N    | 垂直滚动过渡时间，单位是 ms。 |
+| interval  | `number`                                                                  | `4`        | N    | 垂直滚动间隔时间，单位是 s。  |
+| injClass  | `string`                                                                  | `''`       | N    | 注入 CSS 名称。               |
 
 ## NoticeBar Events
 

docs/mds/components/noticeBar/api_en.md

@@ -3,13 +3,13 @@
 | Name      | Type                                                              | Default   | Required | Description                                   |
 | --------- | ----------------------------------------------------------------- | --------- | -------- | --------------------------------------------- |
 | textList  | `string[]`                                                        | `[]`      | Y        | Array of announcement contents.               |
-| leftIcon  | `null`\|[`Icon`](https://stdf.design/components?nav=icon&tab=0) | `{}`      | N        | Left content.                                 |
-| rightIcon | `'close'`\|`'arrow'`\|`null`                                      | `'close'` | N        | Right content.                                |
+| leftIcon  | `'volume'\|null`\|[`Icon`](https://stdf.design/components?nav=icon&tab=0) | `'volume'`      | N        | Left content.                                 |
+| rightIcon | `'close'\|'arrow'\|null`                                      | `'close'` | N        | Right content.                                |
 | fontSize  | `'xs'\|'sm'\|'base'\|'lg'`                                        | `'sm'`    | N        | Font size of the announcement.                |
 | space     | `number`                                                          | `100`     | N        | Space between announcements in px.            |
 | speed     | `number`                                                          | `30`      | N        | Horizontal scrolling speed in px/s.           |
 | vertical  | `boolean`                                                         | `false`   | N        | Whether to scroll vertically.                 |
-| duration  | `100`\|`300`\|`500`\|`700`\|`1000`                                | `500`     | N        | Vertical scrolling transition duration in ms. |
+| duration  | `100\|300\|500\|700\|1000`                                | `500`     | N        | Vertical scrolling transition duration in ms. |
 | interval  | `number`                                                          | `4`       | N        | Vertical scrolling interval time in seconds.  |
 | injClass  | `string`                                                          | `''`      | N        | Injected CSS class name.                      |
 

docs/mds/components/noticeBar/version.md

@@ -0,0 +1,3 @@
+## 1.0.0
+
+- [!tag|O|0|] `leftIcon` 属性新增 `volume` 选项并默认值为 `volume`。

docs/mds/components/noticeBar/version_en.md

@@ -0,0 +1,3 @@
+## 1.0.0
+
+- [!tag|O|0|] `leftIcon` property adds `volume` option and default value is `volume`.

docs/mds/guide/changelog.md

@@ -1,3 +1,10 @@
+## 1.1.0 <font size=1>2025-05-26</font>
+
+- 增强 Button 组件，详见 [Button](https://stdf.design/components?nav=button&tab=4)。
+- 增强 Icon 组件，支持 Iconify，组件内置 svg，详见 [指南 - 图标](https://stdf.design/guide/icon) 和 [Icon](https://stdf.design/components?nav=icon&tab=4)。
+- 修复 Avatar 组件，详见 [Avatar](https://stdf.design/components?nav=avatar&tab=4)。
+- 优化 NoticeBar 组件，详见 [NoticeBar](https://stdf.design/components?nav=noticeBar&tab=4)。
+
 ## 1.0.8 <font size=1>2025-05-04</font>
 
 - 修复 Grids 组件，详见 [Grids](https://stdf.design/components?nav=grids&tab=4)。

docs/mds/guide/changelog_en.md

@@ -1,3 +1,10 @@
+## 1.1.0 <font size=1>2025-05-26</font>
+
+- Enhanced Button component, please see [Button](https://stdf.design/components?nav=button&tab=4).
+- Enhanced Icon component, support Iconify, built-in svg, please see [Guide - Icon](https://stdf.design/guide/icon) and [Icon](https://stdf.design/components?nav=icon&tab=4).
+- Fixed Avatar component, please see [Avatar](https://stdf.design/components?nav=avatar&tab=4).
+- Optimized NoticeBar component, please see [NoticeBar](https://stdf.design/components?nav=noticeBar&tab=4).
+
 ## 1.0.8 <font size=1>2025-05-04</font>
 
 - Fixed Grids component, please see [Grids](https://stdf.design/components?nav=grids&tab=4).

docs/mds/guide/icon.md

@@ -1,6 +1,8 @@
-## 背景
+> 从 v1.1.0 开始，STDF 支持 [Iconify](https://iconify.design) 方式使用图标。
 
-STDF 使用 SVG Sprites 技术使用图标，这样可以减少 HTTP 请求，提高页面性能。
+## SVG Sprites
+
+STDF 图标组件的 `type` 默认为 `symbol`，即使用 SVG Sprites 技术使用图标，这样可以减少 HTTP 请求，提高页面性能。
 
 STDF 的 SVG Sprites 是使用 [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)，大致原理类似于 CSS 中的 Sprite 技术，将项目中的 SVG 拼接在一个文件内，通过 SVG 中的 use 元素找到对应的图标来显示。
 
@@ -8,48 +10,106 @@ STDF 的 SVG Sprites 是使用 [SVG symbol](https://developer.mozilla.org/en-US/
 
 兼容性方面也完全没问题。参考 [MDN symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol#browser_compatibility)。
 
-## rollup-plugin-stdf-icon
-
-STDF 已经开发了一个 Rollup/Vite 插件，用于将项目中的 SVG 文件合并成 SVG Sprites，具体使用请参考 [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon)，由于 svg 格式的多样性，可能存在 rollup-plugin-stdf-icon 处理不准确的情况，请到 [GitHub](https://github.com/any-tdf/stdf/issues) 提 issue，注明 svg 文件的具体情况。
-
-或使用其他 SVG Sprites 合成工具或手动合成，也可以请设计师提供设计物料时一并提供对应的 SVG Sprites。或类似 Remix Icon 这样的图标库，可以直接将选定的多个图标下载为 SVG Sprites。
-
-## 内置说明
-
-STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixicon.com)（[GitHub](https://github.com/Remix-Design/remixicon)），在此表示感谢 🙏🏻🙏🏻。
-
-**如果使用这些组件，请确保项目的 symbol.svg 中包含了对应图标。**
-
-具体使用如下：
-
-| 图标名称                      | 所属组件         |
-| ----------------------------- | ---------------- |
-| ri-user-3-line                | Avatar           |
-| ri-user-add-line              | Avatars          |
-| ri-arrow-right-s-line         | Cell / NoticeBar |
-| ri-checkbox-fill              | Checkbox         |
-| ri-checkbox-line              | Checkbox         |
-| ri-close-circle-fill          | Input            |
-| ri-arrow-left-s-line          | NavBar           |
-| ri-volume-down-line           | NoticeBar        |
-| ri-close-line                 | NoticeBar        |
-| ri-delete-back-2-line         | NumKeyboard      |
-| ri-skip-down-line             | NumKeyboard      |
-| ri-more-line                  | Pagination       |
-| ri-more-fill                  | Pagination       |
-| ri-radio-button-line          | Radio            |
-| ri-checkbox-blank-circle-line | Radio            |
-| ri-star-fill                  | Rate             |
-| ri-image-2-fill               | Skeleton         |
-| ri-movie-2-fill               | Skeleton         |
-| ri-code-box-fill              | Skeleton         |
-| ri-qr-code-fill               | Skeleton         |
-| ri-barcode-fill               | Skeleton         |
-| ri-add-line                   | Stepper          |
-| ri-subtract-line              | Stepper          |
-| ri-checkbox-circle-line       | Toast            |
-| ri-close-circle-line          | Toast            |
-| ri-error-warning-line         | Toast            |
-| ri-information-line           | Toast            |
-
-可到 `node_modules/stdf/dist/assets/svg_base/` 查看这些图标的 SVG 源文件。
+STDF 开发了一个 Rollup/Vite 插件，用于将项目中的 SVG 文件合并成 SVG Sprites，具体使用请参考 [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon)，由于 svg 格式的多样性，可能存在 rollup-plugin-stdf-icon 处理不准确的情况，请到 [GitHub](https://github.com/any-tdf/stdf/issues) 提 issue，注明 svg 文件的具体情况。
+
+或使用其他 SVG Sprites 合成工具或手动合成，也可以请设计师提供设计物料时一并提供对应的 SVG Sprites。或类似 [Remix Icon](https://remixicon.com) 这样的图标库，可以直接将选定的多个图标下载为 SVG Sprites。
+
+## Iconify
+
+STDF 也可以通过设置 `type` 为 `iconify` 或 `iconify-color` 使用 [Iconify](https://iconify.design) 方式使用图标。
+
+Iconify 有很多种使用方式，STDF 选择的是 Tailwind 4 插件的方式，这样对代码的侵入性最小，可参考 [Iconify for Tailwind CSS](https://iconify.design/docs/usage/css/tailwind/tailwind4)。在 STDF 中使用方式如下：
+
+1. 安装 Tailwind 4 插件
+
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm i -D @iconify/tailwind4
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i -D @iconify/tailwind4
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun i -D @iconify/tailwind4
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @iconify/tailwind4
+```
+<!-- ::: -->
+
+2. 安装所需的开源图标库
+
+> 非常不推荐安装 `@iconify/json`，这样全量图标库的体积非常大。
+
+按需安装图标库，如使用以下命令安装 Solar 和 Carbon 图标库：
+
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm i -D @iconify-json/solar
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i -D @iconify-json/solar
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun i -D @iconify-json/solar
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @iconify-json/solar
+```
+<!-- ::: -->
+
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm i -D @iconify-json/carbon
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i -D @iconify-json/carbon
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun i -D @iconify-json/carbon
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @iconify-json/carbon
+```
+<!-- ::: -->
+
+3. 项目的入口 CSS 文件中配置插件，并设置需要使用的图标库前缀，参考 [Clean selectors](https://iconify.design/docs/usage/css/tailwind/tailwind4/#clean-selectors)。
+
+```css
+@plugin "@iconify/tailwind4" {
+	prefixes: solar, carbon;
+}
+```
+
+4. 在组件中使用图标
+
+```svelte
+<Icon type="iconify" name="solar--cat-broken" />
+```
+
+使用 `iconify` 与 `iconify-color` 的区别在于，`iconify` 将图标渲染为蒙版图像，图标颜色为文本颜色，因此与使用 `symbol` 一样，可以设置 `theme` 属性控制图标跟随主题色，或者设置文本颜色自定义颜色，一般用于纯色图标。而 `iconify-color` 将图标渲染为背景图像，将无法设置 `theme` 属性，也无法设置文本颜色自定义颜色，一般用于多色图标，如 fluent-color 图标库，参考 [extra-class-name](https://iconify.design/docs/usage/css/tailwind/tailwind4/#extra-class-name)。
+
+## 何时选择 symbol 方式？
+
+当你使用的图标是团队自行设计，或不在 iconify 的开源图标库内，或者希望图标由自己手动维护，或图标已经是 SVG Sprites 时，建议使用 SVG Sprites 方式。

docs/mds/guide/icon_en.md

@@ -1,55 +1,115 @@
-## Background
+> Starting from v1.1.0, STDF supports using icons via [Iconify](https://iconify.design).
 
-STDF uses SVG Sprites technology for icons, which helps reduce HTTP requests and improve page performance.
+## SVG Sprites
 
-STDF's SVG Sprites use [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol), which is similar to CSS Sprite technique. It combines SVG files in the project into a single file and uses the `<use>` element in SVG to display the corresponding icons.
+The STDF icon component's `type` defaults to `symbol`, which uses SVG Sprites technology to display icons. This reduces HTTP requests and improves page performance.
 
-You can think of it as a type of font, except that it is composed of SVG and can be styled using CSS properties such as color and size. Therefore, for larger or more complex icons with multiple colors, it is recommended to use individual SVG files instead of placing them in the symbol.
+STDF's SVG Sprites use [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol). The principle is similar to CSS Sprite technology, where SVG files in the project are concatenated into a single file, and the corresponding icon is displayed through the use element in SVG.
 
-Compatibility is not an issue. Refer to [MDN symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol#browser_compatibility) for more information.
+You can think of it as a font, except this font is composed of SVG and can be controlled for color, size, and other properties through CSS. Therefore, if you need to use large or complex icons with multiple colors, it's recommended to import SVG files separately rather than putting them in symbols.
 
-## rollup-plugin-stdf-icon
+Compatibility is also completely fine. Refer to [MDN symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol#browser_compatibility).
 
-STDF has developed a Rollup/Vite plugin called rollup-plugin-stdf-icon, which combines SVG files in the project into SVG Sprites. Please refer to [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon) for specific usage. Due to the diversity of SVG formats, there may be cases where rollup-plugin-stdf-icon does not handle them accurately. In such cases, please raise an issue on [GitHub](https://github.com/any-tdf/stdf/issues) and provide details about the SVG file.
+STDF has developed a Rollup/Vite plugin for merging SVG files in projects into SVG Sprites. For specific usage, please refer to [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon). Due to the diversity of SVG formats, there may be cases where rollup-plugin-stdf-icon doesn't process accurately. Please submit an issue on [GitHub](https://github.com/any-tdf/stdf/issues) with specific details about the SVG file.
 
-Alternatively, you can use other SVG Sprites synthesis tools or manually combine them. You can also ask the designer to provide the corresponding SVG Sprites along with the design materials.Or, for icon libraries like Remix Icon, you can directly download a selection of multiple icons as SVG Sprites.
+Alternatively, you can use other SVG Sprites synthesis tools or manual synthesis, or ask designers to provide corresponding SVG Sprites along with design materials. Or use icon libraries like [Remix Icon](https://remixicon.com), which allows you to directly download multiple selected icons as SVG Sprites.
 
-## Built-in Icons
+## Iconify
 
-Some of the icons used in STDF components are sourced from [Remix Icon Library](https://remixicon.com) ([GitHub](https://github.com/Remix-Design/remixicon)). Many thanks to them! 🙏🏻🙏🏻
+STDF can also use icons via [Iconify](https://iconify.design) by setting `type` to `iconify` or `iconify-color`.
 
-**If you are using these components, please make sure that the `symbol.svg` file in your project includes the corresponding icons.**
+Iconify has many usage methods. STDF chooses the Tailwind 4 plugin approach, which has minimal code intrusion. Refer to [Iconify for Tailwind CSS](https://iconify.design/docs/usage/css/tailwind/tailwind4). The usage in STDF is as follows:
 
-Here are the icons and their corresponding components:
+1. Install the Tailwind 4 plugin
 
-| Icon Name                     | Component        |
-| ----------------------------- | ---------------- |
-| ri-user-3-line                | Avatar           |
-| ri-user-add-line              | Avatars          |
-| ri-arrow-right-s-line         | Cell / NoticeBar |
-| ri-checkbox-fill              | Checkbox         |
-| ri-checkbox-line              | Checkbox         |
-| ri-close-circle-fill          | Input            |
-| ri-arrow-left-s-line          | NavBar           |
-| ri-volume-down-line           | NoticeBar        |
-| ri-close-line                 | NoticeBar        |
-| ri-delete-back-2-line         | NumKeyboard      |
-| ri-skip-down-line             | NumKeyboard      |
-| ri-more-line                  | Pagination       |
-| ri-more-fill                  | Pagination       |
-| ri-radio-button-line          | Radio            |
-| ri-checkbox-blank-circle-line | Radio            |
-| ri-star-fill                  | Rate             |
-| ri-image-2-fill               | Skeleton         |
-| ri-movie-2-fill               | Skeleton         |
-| ri-code-box-fill              | Skeleton         |
-| ri-qr-code-fill               | Skeleton         |
-| ri-barcode-fill               | Skeleton         |
-| ri-add-line                   | Stepper          |
-| ri-subtract-line              | Stepper          |
-| ri-checkbox-circle-line       | Toast            |
-| ri-close-circle-line          | Toast            |
-| ri-error-warning-line         | Toast            |
-| ri-information-line           | Toast            |
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm i -D @iconify/tailwind4
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i -D @iconify/tailwind4
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun i -D @iconify/tailwind4
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @iconify/tailwind4
+```
+<!-- ::: -->
 
-You can find the SVG source files for these icons in `node_modules/stdf/dist/assets/svg_base/`.
+2. Install the required open-source icon libraries
+
+> Installing `@iconify/json` is strongly discouraged as the full icon library has a very large size.
+
+Install icon libraries on demand. For example, use the following commands to install Solar and Carbon icon libraries:
+
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm i -D @iconify-json/solar
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i -D @iconify-json/solar
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun i -D @iconify-json/solar
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @iconify-json/solar
+```
+<!-- ::: -->
+
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm i -D @iconify-json/carbon
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i -D @iconify-json/carbon
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun i -D @iconify-json/carbon
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @iconify-json/carbon
+```
+<!-- ::: -->
+
+3. Configure the plugin in your project's entry CSS file and set the icon library prefixes you need to use. Refer to [Clean selectors](https://iconify.design/docs/usage/css/tailwind/tailwind4/#clean-selectors).
+
+```css
+@plugin "@iconify/tailwind4" {
+	prefixes: solar, carbon;
+}
+```
+
+4. Use icons in components
+
+```svelte
+<Icon type="iconify" name="solar--cat-broken" />
+```
+
+The difference between using `iconify` and `iconify-color` is that `iconify` renders icons as mask images, where the icon color is the text color. Therefore, like using `symbol`, you can set the `theme` property to control the icon to follow the theme color, or set text color to customize the color. This is generally used for monochrome icons. While `iconify-color` renders icons as background images, you cannot set the `theme` property or customize colors with text color. This is generally used for multi-color icons, such as fluent-color icon libraries. Refer to [extra-class-name](https://iconify.design/docs/usage/css/tailwind/tailwind4/#extra-class-name).
+
+## When to choose the symbol approach?
+
+When the icons you use are designed by your team, or are not in iconify's open-source icon libraries, or you want to maintain icons manually, or the icons are already SVG Sprites, it's recommended to use the SVG Sprites approach.

packages/stdf/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "1.0.8",
+	"version": "1.1.0",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"author": "any-tdf",
 	"funding": "https://stdf.design?fund",
@@ -147,6 +147,11 @@
 		"tailwindcss": "^4.0.0"
 	},
 	"devDependencies": {
+		"@iconify-json/carbon": "^1.2.8",
+		"@iconify-json/fluent-color": "^1.2.12",
+		"@iconify-json/material-symbols": "^1.2.21",
+		"@iconify-json/solar": "^1.2.2",
+		"@iconify/tailwind4": "^1.0.6",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.19.0",
 		"@sveltejs/package": "^2.3.10",

packages/stdf/src/app.css

@@ -2,6 +2,10 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@plugin "@iconify/tailwind4" {
+	prefixes: material-symbols, solar, carbon, fluent-color;
+}
+
 @theme {
 	--color-primary-50: oklch(0.979 0.01 267.36);
 	--color-primary-100: oklch(0.95 0.024 270.343);

packages/stdf/src/lib/assets/svg_base/ri-add-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-arrow-left-s-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-arrow-right-s-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-barcode-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 4H4V20H2V4ZM6 4H8V20H6V4ZM9 4H12V20H9V4ZM13 4H15V20H13V4ZM16 4H18V20H16V4ZM19 4H22V20H19V4Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-checkbox-blank-circle-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-checkbox-circle-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-close-circle-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-close-circle-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-close-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-code-box-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM16.4645 15.5355L20 12L16.4645 8.46447L15.0503 9.87868L17.1716 12L15.0503 14.1213L16.4645 15.5355ZM6.82843 12L8.94975 9.87868L7.53553 8.46447L4 12L7.53553 15.5355L8.94975 14.1213L6.82843 12ZM11.2443 17L14.884 7H12.7557L9.11597 17H11.2443Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-error-warning-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-image-2-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-information-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-more-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10ZM19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-more-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-movie-2-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.001 20H20V22H12C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.2712 20.4293 18.1755 18.001 20ZM12 10C13.1046 10 14 9.10457 14 8C14 6.89543 13.1046 6 12 6C10.8954 6 10 6.89543 10 8C10 9.10457 10.8954 10 12 10ZM8 14C9.10457 14 10 13.1046 10 12C10 10.8954 9.10457 10 8 10C6.89543 10 6 10.8954 6 12C6 13.1046 6.89543 14 8 14ZM16 14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10C14.8954 10 14 10.8954 14 12C14 13.1046 14.8954 14 16 14ZM12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-qr-code-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 17V16H13V13H16V15H18V17H17V19H15V21H13V18H15V17H16ZM21 21H17V19H19V17H21V21ZM3 3H11V11H3V3ZM13 3H21V11H13V3ZM3 13H11V21H3V13ZM18 13H21V15H18V13ZM6 6V8H8V6H6ZM6 16V18H8V16H6ZM16 6V8H18V6H16Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-radio-button-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-star-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-subtract-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-survey-fill.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4V8H18V4H20.0066C20.5552 4 21 4.44495 21 4.9934V21.0066C21 21.5552 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5551 3 21.0066V4.9934C3 4.44476 3.44495 4 3.9934 4H6ZM9 17H7V19H9V17ZM9 14H7V16H9V14ZM9 11H7V13H9V11ZM16 2V6H8V2H16Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-survey-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 2V4H20.0066C20.5552 4 21 4.44495 21 4.9934V21.0066C21 21.5552 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5551 3 21.0066V4.9934C3 4.44476 3.44495 4 3.9934 4H7V2H17ZM7 6H5V20H19V6H17V8H7V6ZM9 16V18H7V16H9ZM9 13V15H7V13H9ZM9 10V12H7V10H9ZM15 4H9V6H15V4Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-user-3-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 22H18V20C18 18.3431 16.6569 17 15 17H9C7.34315 17 6 18.3431 6 20V22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13ZM12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-user-add-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18 17V14H20V17H23V19H20V22H18V19H15V17H18Z"></path></svg>

packages/stdf/src/lib/assets/svg_base/ri-volume-down-line.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 7.22056L9.60282 10.0001H6V14.0001H9.60282L13 16.7796V7.22056ZM8.88889 16.0001H5C4.44772 16.0001 4 15.5524 4 15.0001V9.00007C4 8.44778 4.44772 8.00007 5 8.00007H8.88889L14.1834 3.66821C14.3971 3.49335 14.7121 3.52485 14.887 3.73857C14.9601 3.8279 15 3.93977 15 4.05519V19.9449C15 20.2211 14.7761 20.4449 14.5 20.4449C14.3846 20.4449 14.2727 20.405 14.1834 20.3319L8.88889 16.0001ZM18.8631 16.5911L17.4411 15.1691C18.3892 14.4376 19 13.2902 19 12.0001C19 10.5697 18.2493 9.31476 17.1203 8.60766L18.5589 7.16906C20.0396 8.26166 21 10.0187 21 12.0001C21 13.8422 20.1698 15.4905 18.8631 16.5911Z"></path></svg>

packages/stdf/src/lib/components/actionSheet/ActionSheet.svelte

@@ -80,7 +80,7 @@
 		</div>
 	{/if}
 	<div>
-		{#each actions as item, index}
+		{#each actions as item, index (index)}
 			<button
 				class="{item.style !== 'disabled'
 					? 'active:scale-90 '

packages/stdf/src/lib/components/asyncPicker/AsyncPicker.svelte

@@ -136,7 +136,7 @@
 			<div class="h-8 flex-none text-center text-sm leading-8 text-black/60 dark:text-white/60">
 				{selectedText}
 			</div>
-			{#each items as item}
+			{#each items as item, index (index)}
 				{#if !isLoading}
 					<div
 						in:fly|global={{ x: document.documentElement.clientWidth, duration: 500 }}

packages/stdf/src/lib/components/avatar/Avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from '../icon/Icon.svelte';
-	import type { AvatarProps } from '../../types/index.js';
+	import type { AvatarProps } from '$lib/types/index.js';
 
 	let {
 		image = '',
@@ -53,13 +53,7 @@
 
 	// 替换文本大小样式
 	// replace text size style
-	const altSizeObj = {
-		xs: 'text-base',
-		sm: 'text-2xl',
-		md: 'text-4xl',
-		lg: 'text-6xl',
-		xl: 'text-8xl'
-	};
+	const altSizeObj = { xs: 'text-base', sm: 'text-2xl', md: 'text-4xl', lg: 'text-6xl', xl: 'text-8xl' };
 
 	// 当默认情况时根据 size 计算 Icon 大小
 	// when default, calculate Icon size by size
@@ -72,14 +66,22 @@
 	onclick={() => onclick && onclick()}
 >
 	{#if image === '' && alt === ''}
-		<div class="m-auto">
-			<Icon
-				size={iconSizeObj[size] || iconSizeObj.base}
-				name="ri-user-3-line"
-				theme
-				{...icon}
-				injClass="text-primary-950 dark:text-dark-950"
-			/>
+		<div class="flex flex-col items-center justify-center">
+			{#if icon.type && icon.name}
+				<Icon {...icon} />
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					width={iconSizeObj[size] || iconSizeObj.base}
+					height={iconSizeObj[size] || iconSizeObj.base}
+					class="text-primary-900 dark:text-dark-900 fill-current"
+				>
+					<path
+						d="M20 22H18V20C18 18.3431 16.6569 17 15 17H9C7.34315 17 6 18.3431 6 20V22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13ZM12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
+					></path>
+				</svg>
+			{/if}
 		</div>
 	{:else if image === '' && alt !== ''}
 		<div

packages/stdf/src/lib/components/avatar/Avatars.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Avatar from './Avatar.svelte';
-	import Icon from '../icon/Icon.svelte';
 	import type { AvatarsProps } from '../../types/index.js';
 
 	let {
@@ -32,7 +31,7 @@
 		0: 'ring-0',
 		1: 'ring-1',
 		2: 'ring-2',
-		3: 'ring',
+		3: 'ring-3',
 		4: 'ring-4',
 		8: 'ring-8'
 	};
@@ -84,14 +83,26 @@
 					class="bg-primary-200 dark:bg-dark-200 flex flex-col justify-center overflow-hidden text-center {radiusObj[radius] ||
 						radiusObj.sm} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
 				>
-					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
+					<div class="mx-auto">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							width="24"
+							height="24"
+							class="text-primary-950 dark:text-dark-950 fill-current"
+						>
+							<path
+								d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18 17V14H20V17H23V19H20V22H18V19H15V17H18Z"
+							></path>
+						</svg>
+					</div>
 				</div>
 			{:else if top === null}{:else}
 				{@render top?.()}
 			{/if}
 		</div>
 	{/if}
-	{#each dataInner as item, i}
+	{#each dataInner as item, i (item.image)}
 		<div
 			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
 				radiusObj.sm} {injClass}"
@@ -119,7 +130,19 @@
 					class="bg-primary-200 dark:bg-dark-200 flex flex-col justify-center overflow-hidden text-center {radiusObj[radius] ||
 						radiusObj.sm} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
 				>
-					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
+					<div class="mx-auto">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							width="24"
+							height="24"
+							class="text-primary-950 dark:text-dark-950 fill-current"
+						>
+							<path
+								d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18 17V14H20V17H23V19H20V22H18V19H15V17H18Z"
+							></path>
+						</svg>
+					</div>
 				</div>
 			{:else if top === null}{:else}
 				{@render top?.()}

packages/stdf/src/lib/components/bottomSheet/BottomSheet.svelte

@@ -3,7 +3,6 @@
 	import { fly } from 'svelte/transition';
 	import { throttleWithRAF } from '../utils/index.js';
 	import Mask from '../mask/Mask.svelte';
-	import Icon from '../icon/Icon.svelte';
 	import { zh_CN, type LangProps } from '../../lang/index.js';
 	import type { BottomSheetProps } from '../../types/index.js';
 
@@ -272,8 +271,17 @@
 						<button
 							class="h-6 w-6 flex-none bg-black/5 dark:bg-white/10 text-center{iconRadiusClass[radius] || iconRadiusClass['full']}"
 							onclick={backFunc}
+							aria-label="back"
 						>
-							<Icon name="ri-arrow-left-s-line" alpha={0.4} size={16} top={-2} />
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								width="16"
+								height="16"
+								class="mx-auto block fill-current opacity-40"
+							>
+								<path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path>
+							</svg>
 						</button>
 					{/if}
 					<div class="h-7 truncate text-lg font-bold grow{titleAlignClass[titleAlign] || titleAlignClass['left']}">
@@ -285,15 +293,37 @@
 						<button
 							class="h-6 w-6 flex-none bg-black/5 dark:bg-white/10 text-center{iconRadiusClass[radius] || iconRadiusClass['full']}"
 							onclick={closeFunc}
+							aria-label="close"
 						>
-							<Icon name="ri-close-line" alpha={0.4} size={14} top={-2} />
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								width="16"
+								height="16"
+								class="mx-auto block fill-current opacity-40"
+							>
+								<path
+									d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"
+								>
+								</path>
+							</svg>
 						</button>
 					{:else if closeContent === 'downIcon'}
 						<button
 							class="h-6 w-6 flex-none bg-black/5 dark:bg-white/10 text-center{iconRadiusClass[radius] || iconRadiusClass['full']}"
 							onclick={closeFunc}
+							aria-label="close"
 						>
-							<Icon name="ri-arrow-down-s-line" alpha={0.4} size={16} top={-1} />
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								width="16"
+								height="16"
+								class="mx-auto block fill-current opacity-40"
+							>
+								<path d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z">
+								</path>
+							</svg>
 						</button>
 					{:else}
 						<button class="text-primary dark:text-dark cursor-pointer font-bold" onclick={closeFunc}>{closeContent}</button>

packages/stdf/src/lib/components/button/Button.svelte

@@ -19,6 +19,7 @@
 		customWidth = 0,
 		customHeight = 0,
 		icon = null,
+		iconPosition = 'left',
 		loading = null,
 		disabledLoading = true,
 		type = 'button',
@@ -93,9 +94,12 @@
 		{#if loading}
 			<Loading {...loading} />
 		{/if}
-		{#if icon && icon.name}
+		{#if icon && icon.name && iconPosition === 'left'}
 			<Icon {...icon} />
 		{/if}
 		{@render children?.()}
+		{#if icon && icon.name && iconPosition === 'right'}
+			<Icon {...icon} />
+		{/if}
 	</button>
 </div>

packages/stdf/src/lib/components/calendar/Calendar.svelte

@@ -304,7 +304,7 @@
 		<div class="sticky left-0 top-0 z-10 w-full bg-gray-50 dark:bg-gray-800">
 			{#if quickSelects.length > 0 && mode === 'range'}
 				<div class="calendar-container flex flex-nowrap gap-4 overflow-x-auto px-4 pb-1 pt-2">
-					{#each quickSelects as item}
+					{#each quickSelects as item, index (index)}
 						<button
 							class="flex-none rounded-sm bg-white px-2 py-1 text-xs shadow-sm dark:bg-black dark:shadow-white/10"
 							class:!bg-primary={isQuickSelect && quickSelectItem === item}
@@ -331,7 +331,7 @@
 				</div>
 			{/if}
 			<div class="flex h-10 items-center justify-around gap-1 px-6 text-center leading-10">
-				{#each weekTexts as item, index}
+				{#each weekTexts as item, index (index)}
 					<div class="flex-1 font-bold{weekendRed && isWeekendFunc(startSunday, index) ? ' text-error' : ''}">
 						{item}
 					</div>
@@ -345,7 +345,7 @@
 			style="height:{(window.innerHeight * height) / 100}px"
 			bind:this={scrollElement}
 		>
-			{#each allMonthData as item}
+			{#each allMonthData as item, index (index)}
 				<div
 					class="{monthCard ? `bg-white shadow-md dark:bg-black dark:shadow-white/5 ${radiusClass[radius] || 'rounded-xl'}` : ''} relative"
 				>
@@ -356,7 +356,7 @@
 						{item.year}
 					</div>
 					<div class="grid grid-cols-7 gap-y-1 p-2 text-center">
-						{#each item.days as day}
+						{#each item.days as day, index (index)}
 							<button
 								class="p-px{day.text ? ' bg-primary/10 dark:bg-dark/20' : ''}"
 								onclick={() => {

packages/stdf/src/lib/components/cell/Cell.svelte

@@ -123,7 +123,16 @@
 				{@render rightChild?.()}
 			{:else if right === 'arrow'}
 				<div class="flex flex-col justify-center text-gray-700 dark:text-gray-300">
-					<Icon name="ri-arrow-right-s-line" size={love ? 26 : 20} alpha={0.6} top={-2} />
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						class="fill-current opacity-60"
+						width={love ? 26 : 20}
+						height={love ? 26 : 20}
+					>
+						<path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"
+						></path>
+					</svg>
 				</div>
 			{:else if typeof right === 'object' && right?.type === 'switch'}
 				<div class="ml-1 flex flex-col justify-center">

packages/stdf/src/lib/components/checkbox/Checkbox.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <div class={layout === 'inline' ? 'flex flex-wrap' : `flex ${layout === 'h' ? 'justify-between' : 'w-full flex-col space-y-2'}`}>
-	{#each data as item}
+	{#each data as item, index (index)}
 		{#if checkboxChild}
 			{@render checkboxChild({ item })}
 		{:else}

packages/stdf/src/lib/components/checkbox/CheckboxItem.svelte

@@ -36,16 +36,26 @@
 	{/if}
 	<div class:hidden={!checked}>
 		{#if iconChecked === null}{:else if iconChecked === 'default'}
-			<Icon name="ri-checkbox-fill" theme top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-primary dark:fill-dark">
+				<path
+					d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"
+				>
+				</path>
+			</svg>
 		{:else}
 			<Icon {...iconChecked} theme />
 		{/if}
 	</div>
 	<div class:hidden={checked}>
 		{#if icon === null}{:else if icon === 'default'}
-			<Icon name="ri-checkbox-line" alpha={0.2} top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current opacity-20">
+				<path
+					d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"
+				>
+				</path>
+			</svg>
 		{:else}
-			<Icon alpha={0.2} {...icon} />
+			<Icon opacity={0.2} {...icon} />
 		{/if}
 	</div>
 	{#if textPosition === 'r' || textPosition === 'b'}

packages/stdf/src/lib/components/icon/Icon.svelte

@@ -3,23 +3,35 @@
 	import type { IconProps } from '../../types/index.js';
 
 	let {
+		type = 'symbol',
 		name = '',
 		size = 24,
+		width = 0,
+		height = 0,
 		theme = false,
-		alpha = 1,
+		opacity = 1,
 		path = getContext('STDF-global-icon-svg-path') || 'fonts/symbol.svg',
-		top = 0,
+		y = 0,
 		injClass = '',
 		children
 	}: IconProps = $props();
 </script>
 
-<i class="relative{theme ? ' text-primary dark:text-dark' : ''} {injClass}" style="top:{top}px;">
-	{#if children}
-		{@render children()}
-	{:else}
-		<svg width={size} height={size === 'full' ? '100%' : size} class="inline fill-current" style="fill-opacity: {alpha};">
-			<use xlink:href="/{path}#{name}" />
-		</svg>
-	{/if}
-</i>
+{#if children}
+	{@render children()}
+{:else if type === 'iconify' || type === 'iconify-color'}
+	<span
+		class="{type} {name} relative{theme ? ' text-primary dark:text-dark' : ''} {injClass}"
+		style="opacity:{opacity}; width:{width || size}px; height:{height || size}px; top:{y}px;"
+	>
+	</span>
+{:else if type === 'symbol'}
+	<svg
+		width={width || size}
+		height={height || size}
+		class="relative{theme ? ' text-primary dark:text-dark' : ''} inline fill-current {injClass}"
+		style="fill-opacity:{opacity}; top:{y}px;"
+	>
+		<use xlink:href="/{path}#{name}" />
+	</svg>
+{:else}{/if}

packages/stdf/src/lib/components/indexBar/IndexBar.svelte

@@ -132,10 +132,10 @@
 </script>
 
 <div bind:this={bodyDom} class="overflow-y-auto {scrollAlign && 'snap-y'}" onscroll={scrollBody} style="height:{height}px;">
-	{#each data as group, index}
+	{#each data as group, index (index)}
 		<div class="snap-start px-4 pt-8" bind:clientHeight={group.height}>
 			<div class="text-primary dark:text-dark text-sm {titleInjClass}">{group.title}</div>
-			{#each group.child as child, childIndex}
+			{#each group.child as child, childIndex (childIndex)}
 				<button class="w-full py-2 text-left {textInjClass}" onclick={() => onclickChild && onclickChild(index, group, childIndex, child)}>
 					{child}
 				</button>
@@ -155,7 +155,7 @@
 	] || radiusObj.middle}"
 	style="top:{top + (height - barHeight) / 2}px;min-height:{height / 4}px;"
 >
-	{#each data as group, i}
+	{#each data as group, i (i)}
 		<div class="relative flex flex-1 flex-col justify-center">
 			<div
 				class="h-5 w-5 text-center text-xs leading-5 transition-all {current === i

packages/stdf/src/lib/components/input/Input.svelte

@@ -353,8 +353,13 @@
 						{/if}
 					</div>
 					{#if clear && value !== ''}
-						<button onclick={() => clearFun()}>
-							<Icon name="ri-close-circle-fill" size={16} alpha={0.3} />
+						<button onclick={() => clearFun()} aria-label="clear">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="fill-current opacity-30">
+								<path
+									d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"
+								>
+								</path>
+							</svg>
 						</button>
 					{/if}
 				</div>

packages/stdf/src/lib/components/navBar/NavBar.svelte

@@ -41,8 +41,10 @@
 	{#if leftChild}
 		{@render leftChild()}
 	{:else if left === 'back'}
-		<button class="min-w-[3rem] text-center lining-nums active:opacity-80" onclick={() => onclickLeft && onclickLeft()}>
-			<Icon name="ri-arrow-left-s-line" size={iconSize} top={-2} />
+		<button class="min-w-[3rem] text-center lining-nums active:opacity-80" onclick={() => onclickLeft && onclickLeft()} aria-label="back">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={iconSize} height={iconSize} class="mx-auto block fill-current">
+				<path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path>
+			</svg>
 		</button>
 	{:else if left === null}
 		<div class="h-full w-4"></div>
@@ -62,7 +64,7 @@
 		{#if rightChild}
 			{@render rightChild()}
 		{:else if rights.length > 0}
-			{#each rights as icon, i}
+			{#each rights as icon, i (icon.name)}
 				<button class="w-12 text-center active:opacity-80" onclick={() => onclickRight && onclickRight(i)}>
 					<Icon {...icon} size={iconSize} />
 				</button>

packages/stdf/src/lib/components/noticeBar/NoticeBar.svelte

@@ -5,7 +5,7 @@
 
 	let {
 		textList = [],
-		leftIcon = {},
+		leftIcon = 'volume',
 		rightIcon = 'close',
 		fontSize = 'sm',
 		space = 100,
@@ -126,17 +126,24 @@
 			? ''
 			: ` ${injClass}`}"
 	>
-		<div class={!leftIcon ? '' : 'mr-1'}>
+		<div class={leftIcon ? 'mr-1' : ''}>
 			{#if leftChild}
 				{@render leftChild()}
-			{:else if !leftIcon}{:else}
-				<Icon name="ri-volume-down-line" size={20} top={-1} {...leftIcon} />
-			{/if}
+			{:else if leftIcon === 'volume'}
+				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="mx-auto block fill-current">
+					<path
+						d="M13 7.22056L9.60282 10.0001H6V14.0001H9.60282L13 16.7796V7.22056ZM8.88889 16.0001H5C4.44772 16.0001 4 15.5524 4 15.0001V9.00007C4 8.44778 4.44772 8.00007 5 8.00007H8.88889L14.1834 3.66821C14.3971 3.49335 14.7121 3.52485 14.887 3.73857C14.9601 3.8279 15 3.93977 15 4.05519V19.9449C15 20.2211 14.7761 20.4449 14.5 20.4449C14.3846 20.4449 14.2727 20.405 14.1834 20.3319L8.88889 16.0001ZM18.8631 16.5911L17.4411 15.1691C18.3892 14.4376 19 13.2902 19 12.0001C19 10.5697 18.2493 9.31476 17.1203 8.60766L18.5589 7.16906C20.0396 8.26166 21 10.0187 21 12.0001C21 13.8422 20.1698 15.4905 18.8631 16.5911Z"
+					>
+					</path>
+				</svg>
+			{:else if leftIcon}
+				<Icon {...leftIcon} />
+			{:else}{/if}
 		</div>
 		{#if vertical}
 			<div class="grow" bind:this={outBoxDom}>
 				<div class="relative overflow-hidden" style="height:{outBoxHeight}px;">
-					{#each textListVertical as item, i}
+					{#each textListVertical as item, i (i)}
 						<div
 							class="absolute truncate{isTransition ? ' transition-all' : ' transition-none'}{durationClass[duration] ||
 								durationClass['500']}"
@@ -150,7 +157,7 @@
 		{:else}
 			<div class="relative grow overflow-hidden" bind:this={outBoxDom}>
 				<div class="absolute whitespace-nowrap" style="left:{left}px" bind:this={boxDom}>
-					{#each newTextList as item}
+					{#each newTextList as item, i (i)}
 						<div class="inline-block" style="margin-right:{space}px">{item}</div>
 					{/each}
 				</div>
@@ -160,9 +167,17 @@
 			{#if rightChild}
 				{@render rightChild()}
 			{:else if !rightIcon}{:else if rightIcon === 'close'}
-				<Icon name="ri-close-line" size={20} top={-1} />
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" class="mx-auto block fill-current">
+					<path
+						d="M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z"
+					>
+					</path>
+				</svg>
 			{:else if rightIcon === 'arrow'}
-				<Icon name="ri-arrow-right-s-line" size={20} top={-1} />
+				<svg xmlns="http://www.w3.org/2000/svg" class="fill-current" width="20" height="20" viewBox="0 0 24 24">
+					<path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"
+					></path>
+				</svg>
 			{/if}
 		</button>
 	</div>

packages/stdf/src/lib/components/numKeyboard/NumKeyboard.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
-	import Icon from '../icon/Icon.svelte';
 	import { zh_CN, type LangProps } from '../../lang/index.js';
 	import type { NumKeyboardProps } from '../../types/index.js';
 
@@ -148,15 +147,26 @@
 			'p-2'}{panelClass ? ' ' + panelClass : ''}"
 	>
 		<div class="grid {type === 'button' ? gapClass[space] || 'gap-2' : 'gap-px'} {done ? 'grid-cols-4' : 'grid-cols-3'}">
-			{#each reverse ? ['7', '8', '9'] : ['1', '2', '3'] as item}
+			{#each reverse ? ['7', '8', '9'] : ['1', '2', '3'] as item (item)}
 				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if done}
-				<button class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
-					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
+				<button class={baseClassFunc('delete')} onclick={() => clickFunc('delete')} aria-label="delete">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width={Number(height) * 2}
+						height={Number(height) * 2}
+						viewBox="0 0 24 24"
+						class="mx-auto block fill-current"
+					>
+						<path
+							d="M6.53451 3H20.9993C21.5516 3 21.9993 3.44772 21.9993 4V20C21.9993 20.5523 21.5516 21 20.9993 21H6.53451C6.20015 21 5.88792 20.8329 5.70246 20.5547L0.369122 12.5547C0.145189 12.2188 0.145189 11.7812 0.369122 11.4453L5.70246 3.4453C5.88792 3.1671 6.20015 3 6.53451 3ZM7.06969 5L2.40302 12L7.06969 19H19.9993V5H7.06969ZM12.9993 10.5858L15.8277 7.75736L17.242 9.17157L14.4135 12L17.242 14.8284L15.8277 16.2426L12.9993 13.4142L10.1709 16.2426L8.75668 14.8284L11.5851 12L8.75668 9.17157L10.1709 7.75736L12.9993 10.5858Z"
+						>
+						</path>
+					</svg>
 				</button>
 			{/if}
-			{#each ['4', '5', '6'] as item}
+			{#each ['4', '5', '6'] as item (item)}
 				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if done}
@@ -169,21 +179,43 @@
 					{doneText}
 				</button>
 			{/if}
-			{#each reverse ? ['1', '2', '3'] : ['7', '8', '9'] as item}
+			{#each reverse ? ['1', '2', '3'] : ['7', '8', '9'] as item (item)}
 				<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
 			{/each}
 			{#if dot}
 				<button class={baseClassFunc('.')} onclick={() => clickFunc('.')}>.</button>
 			{/if}
 			{#if done ? close : !dot && close}
-				<button class={baseClassFunc('close')} onclick={() => clickFunc('close')}>
-					<Icon name="ri-skip-down-line" size={Number(height) * 2} />
+				<button class={baseClassFunc('close')} onclick={() => clickFunc('close')} aria-label="close">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width={Number(height) * 2}
+						height={Number(height) * 2}
+						viewBox="0 0 24 24"
+						class="mx-auto block fill-current"
+					>
+						<path
+							d="M12.0001 10.0859L7.20718 5.29297L5.79297 6.70718L12.0001 12.9143L18.2072 6.70718L16.793 5.29297L12.0001 10.0859ZM18.0001 17.0001L6.00007 17.0001L6.00007 15.0001L18.0001 15.0001V17.0001Z"
+						>
+						</path>
+					</svg>
 				</button>
 			{/if}
 			<button class={baseClassFunc('0') + ' ' + zeroColFunc()} onclick={() => clickFunc('0')}>0</button>
 			{#if !done}
-				<button class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
-					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
+				<button class={baseClassFunc('delete')} onclick={() => clickFunc('delete')} aria-label="delete">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width={Number(height) * 2}
+						height={Number(height) * 2}
+						viewBox="0 0 24 24"
+						class="mx-auto block fill-current"
+					>
+						<path
+							d="M6.53451 3H20.9993C21.5516 3 21.9993 3.44772 21.9993 4V20C21.9993 20.5523 21.5516 21 20.9993 21H6.53451C6.20015 21 5.88792 20.8329 5.70246 20.5547L0.369122 12.5547C0.145189 12.2188 0.145189 11.7812 0.369122 11.4453L5.70246 3.4453C5.88792 3.1671 6.20015 3 6.53451 3ZM7.06969 5L2.40302 12L7.06969 19H19.9993V5H7.06969ZM12.9993 10.5858L15.8277 7.75736L17.242 9.17157L14.4135 12L17.242 14.8284L15.8277 16.2426L12.9993 13.4142L10.1709 16.2426L8.75668 14.8284L11.5851 12L8.75668 9.17157L10.1709 7.75736L12.9993 10.5858Z"
+						>
+						</path>
+					</svg>
 				</button>
 			{/if}
 		</div>

packages/stdf/src/lib/components/pagination/Pagination.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import Icon from '../icon/Icon.svelte';
 	import Page from './Page.svelte';
 	import SecondPageNext from './SecondPageNext.svelte';
 	import SecondPagePre from './SecondPagePre.svelte';
@@ -200,10 +199,14 @@
 	<button
 		class="flex-1 border border-transparent py-2 transition-all {current > 1
 			? 'text-primary dark:text-dark'
-			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.md} active:scale-75"
+			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.md} {current > 1 ? 'active:scale-75' : ''}"
+		disabled={current === 1}
 		onclick={preFunc}
+		aria-label="pre"
 	>
-		<Icon name="ri-arrow-left-s-line" size={18} />
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" class="mx-auto block fill-current">
+			<path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path>
+		</svg>
 	</button>
 	{#if totalPage === 0}
 		<div class="flex-1 border border-transparent py-2">{noDataText}</div>
@@ -211,7 +214,7 @@
 		<div class="flex-1 border border-transparent py-2">{onePageText}</div>
 	{:else if totalPage > 1 && totalPage <= maxShowPage}
 		<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-		{#each new Array(totalPage) as _, index}
+		{#each new Array(totalPage) as _, index (index)}
 			<Page active={current === index + 1} {type} {radius} onclick={() => !continuous && clickItemFunc(index + 1)}>
 				{index + 1}
 			</Page>
@@ -226,22 +229,32 @@
 				onclick={() => !continuous && clickPreEllipsisFunc()}
 			>
 				{#if type === 'bold' && showPreOmitPage}
-					<Icon name="ri-more-fill" size={18} />
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="mx-auto block fill-current">
+						<path
+							d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10ZM19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
+						>
+						</path>
+					</svg>
 				{:else}
-					<Icon name="ri-more-line" size={18} />
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="mx-auto block">
+						<path
+							d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"
+						>
+						</path>
+					</svg>
 				{/if}
 			</button>
 		{/if}
 		{#if !showPreEllipsis && current <= maxShowPage - 1}
 			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each new Array(maxShowPage - 3) as _, index}
+			{#each new Array(maxShowPage - 3) as _, index (index)}
 				<Page active={current === index + 2} {type} {radius} onclick={() => !continuous && clickItemFunc(index + 2)}>
 					{index + 2}
 				</Page>
 			{/each}
 		{/if}
 		{#if middleShowPage.length > 0}
-			{#each middleShowPage as item, index}
+			{#each middleShowPage as item, index (item)}
 				<Page active={index === (middleShowPage.length - 1) / 2} {type} {radius} onclick={() => !continuous && clickItemFunc(item)}>
 					{item}
 				</Page>
@@ -249,7 +262,7 @@
 		{/if}
 		{#if !showNextEllipsis && current > totalPage - (maxShowPage - 3)}
 			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each new Array(maxShowPage - 3) as _, index}
+			{#each new Array(maxShowPage - 3) as _, index (index)}
 				<Page
 					active={current === totalPage + index + 3 - maxShowPage}
 					{type}
@@ -268,9 +281,19 @@
 				onclick={() => !continuous && clickNextEllipsisFunc()}
 			>
 				{#if type === 'bold' && showNextOmitPage}
-					<Icon name="ri-more-fill" size={18} />
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="mx-auto block fill-current">
+						<path
+							d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10ZM19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
+						>
+						</path>
+					</svg>
 				{:else}
-					<Icon name="ri-more-line" size={18} />
+					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="mx-auto block">
+						<path
+							d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"
+						>
+						</path>
+					</svg>
 				{/if}
 			</button>
 		{/if}
@@ -279,10 +302,14 @@
 	<button
 		class="flex-1 border border-transparent py-2 transition-all {current < totalPage
 			? 'text-primary dark:text-dark'
-			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.md} active:scale-75"
+			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.md} {current < totalPage ? 'active:scale-75' : ''}"
+		disabled={current === totalPage}
 		onclick={nextFunc}
+		aria-label="next"
 	>
-		<Icon name="ri-arrow-right-s-line" size={20} />
+		<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="mx-auto block fill-current" viewBox="0 0 24 24">
+			<path d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"> </path>
+		</svg>
 	</button>
 	{#if showNextOmitPage}
 		<SecondPageNext {pageCol} Pages={nextEllipsisPages} {type} {radius} onclickItem={clickSecondPageItemFunc} {maxShowPage} />

packages/stdf/src/lib/components/pagination/SecondPageNext.svelte

@@ -18,7 +18,7 @@
 		style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);right:{(2.5 / (maxShowPage + 2)) *
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>
-		{#each Pages as item}
+		{#each Pages as item, index (index)}
 			<Page onclick={() => onclickItem && onclickItem(item)} {type} {radius}>{item}</Page>
 		{/each}
 	</div>

packages/stdf/src/lib/components/pagination/SecondPagePre.svelte

@@ -18,7 +18,7 @@
 		style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);left:{(2.5 / (maxShowPage + 2)) *
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>
-		{#each Pages as item}
+		{#each Pages as item, index (index)}
 			<Page onclick={() => onclickItem && onclickItem(item)} {type} {radius}>{item}</Page>
 		{/each}
 	</div>

packages/stdf/src/lib/components/picker/Picker.svelte

@@ -270,10 +270,10 @@
 	<div class="flex items-center justify-between border-b border-black/10 bg-white dark:border-white/20 dark:bg-black">
 		<button class="h-10 cursor-pointer px-4 leading-10 text-black/60 dark:text-white/60" onclick={clickCancelFunc}>{cancelText}</button>
 		<div>{title}</div>
-		<button class="h-10 cursor-pointer px-4 leading-10 text-primary dark:text-dark" onclick={clickConfirmFunc}>{confirmText}</button>
+		<button class="text-primary dark:text-dark h-10 cursor-pointer px-4 leading-10" onclick={clickConfirmFunc}>{confirmText}</button>
 	</div>
 	<div class="flex items-center justify-around gap-1 bg-white dark:bg-black">
-		{#each newDatas as item, col}
+		{#each newDatas as item, col (col)}
 			<div class="truncate" style="flex:{item.flex || 1}">
 				{#if (item as PickerDatasProps).data.length > 0}
 					<ScrollRadio

packages/stdf/src/lib/components/radio/Radio.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <div class={layout === 'inline' ? 'flex flex-wrap' : `flex ${layout === 'h' ? 'justify-between' : 'w-full flex-col space-y-2'}`}>
-	{#each data as item}
+	{#each data as item, index (index)}
 		{#if radioChild}
 			{@render radioChild({ item })}
 		{:else}

packages/stdf/src/lib/components/radio/RadioItem.svelte

@@ -36,16 +36,26 @@
 	{/if}
 	<div class:hidden={!checked}>
 		{#if iconChecked === null}{:else if iconChecked === 'default'}
-			<Icon name="ri-radio-button-line" theme top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-primary dark:fill-dark">
+				<path
+					d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17Z"
+				>
+				</path>
+			</svg>
 		{:else}
 			<Icon {...iconChecked} theme />
 		{/if}
 	</div>
 	<div class:hidden={checked}>
 		{#if icon === null}{:else if icon === 'default'}
-			<Icon name="ri-checkbox-blank-circle-line" alpha={0.2} top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="fill-current opacity-20">
+				<path
+					d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
+				>
+				</path>
+			</svg>
 		{:else}
-			<Icon alpha={0.2} {...icon} />
+			<Icon opacity={0.2} {...icon} />
 		{/if}
 	</div>
 	{#if textPosition === 'r' || textPosition === 'b'}

packages/stdf/src/lib/components/rate/Rate.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import Icon from '../icon/Icon.svelte';
 	import type { RateProps } from '../../types/index.js';
 	import { zh_CN, type LangProps } from '../../lang/index.js';
 
@@ -154,7 +153,7 @@
 
 <div class="inset-0 inline-flex flex-wrap{spaceObj[space] || spaceObj['4']}{disabled ? ' opacity-50' : ''}">
 	<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-	{#each new Array(Math.floor(total)) as _, index}
+	{#each new Array(Math.floor(total)) as _, index (index)}
 		<button
 			class="flex flex-wrap transition-all{disabled ? ' cursor-not-allowed' : ' cursor-pointer'}{animation === 'active'
 				? clickIndex >= index && isScale
@@ -168,7 +167,7 @@
 			style="height:{height}px;width:{width}px;"
 			onclick={() => clickFun(index)}
 		>
-			{#each [0, 1, 2, 3] as i}
+			{#each [0, 1, 2, 3] as i (i)}
 				<div
 					class="overflow-hidden{isActiveFun(index, value, half, vertical, i) ? '' : ` grayscale${opacityObj[opacity] || ' opacity-30'}`}"
 					style="height:{height / 2}px;width:{width / 2}px;"
@@ -177,7 +176,12 @@
 						{#if children}
 							{@render children?.()}
 						{:else}
-							<Icon name="ri-star-fill" theme size={height} top={height < 24 ? height - 24 : 0} />
+							<svg xmlns="http://www.w3.org/2000/svg" width={height} {height} viewBox="0 0 24 24" class="fill-primary dark:fill-dark">
+								<path
+									d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"
+								>
+								</path>
+							</svg>
 						{/if}
 					</div>
 				</div>

packages/stdf/src/lib/components/scrollRadio/ScrollRadio.svelte

@@ -97,7 +97,7 @@
 			isTouch = true;
 		}}
 	>
-		{#each newData as item}
+		{#each newData as item, index (index)}
 			<div class="{alignClass[align] || alignClass.center} flex snap-center flex-col justify-center px-2" style="height:{itemHeight}rem;">
 				<div class="truncate">{item[labelKey]}</div>
 			</div>

packages/stdf/src/lib/components/skeleton/Skeleton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '../icon/Icon.svelte';
 	import type { SkeletonProps } from '../../types/index.js';
 
 	let { type = 'div', width = '6', height = '6', radius = 'sm', space = '1', lines = 3, iconRatio = 0.6 }: SkeletonProps = $props();
@@ -43,16 +42,6 @@
 	};
 	const paddingObj = { '0.5': ' p-0.5', '1': ' p-1', '2': ' p-2', '4': ' p-4' };
 	const randomArr = ['w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-2/5', 'w-3/5', 'w-4/5', 'w-5/6'];
-	const typeIconFun = (type: string) => {
-		const typeMap = {
-			img: 'ri-image-2-fill',
-			video: 'ri-movie-2-fill',
-			code: 'ri-code-box-fill',
-			qrcode: 'ri-qr-code-fill',
-			barcode: 'ri-barcode-fill'
-		};
-		return typeMap[type as keyof typeof typeMap] || typeMap.qrcode;
-	};
 </script>
 
 <div
@@ -62,7 +51,7 @@
 	{#if type === 'p'}
 		<div class="flex flex-col space-y-2">
 			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each new Array(lines - 1) as _}
+			{#each new Array(lines - 1) as _, i (i)}
 				<div class="bg-black/20 dark:bg-white/20 w-full{heightObj[height] || heightObj['6']}{radiusObj[radius] || radiusObj.sm}"></div>
 			{/each}
 			<div
@@ -77,7 +66,43 @@
 		>
 			{#if type === 'img' || type === 'video' || type === 'code' || type === 'qrcode' || type === 'barcode'}
 				<div class="m-auto" style="width:{iconRatio * 100 + '%'}">
-					<Icon name={typeIconFun(type)} size="full" alpha={0.2} />
+					{#if type === 'img'}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" class="fill-current opacity-20">
+							<path
+								d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"
+							>
+							</path>
+						</svg>
+					{/if}
+					{#if type === 'video'}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" class="fill-current opacity-20">
+							<path
+								d="M18.001 20H20V22H12C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.2712 20.4293 18.1755 18.001 20ZM12 10C13.1046 10 14 9.10457 14 8C14 6.89543 13.1046 6 12 6C10.8954 6 10 6.89543 10 8C10 9.10457 10.8954 10 12 10ZM8 14C9.10457 14 10 13.1046 10 12C10 10.8954 9.10457 10 8 10C6.89543 10 6 10.8954 6 12C6 13.1046 6.89543 14 8 14ZM16 14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10C14.8954 10 14 10.8954 14 12C14 13.1046 14.8954 14 16 14ZM12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18Z"
+							>
+							</path>
+						</svg>
+					{/if}
+					{#if type === 'code'}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" class="fill-current opacity-20">
+							<path
+								d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM16.4645 15.5355L20 12L16.4645 8.46447L15.0503 9.87868L17.1716 12L15.0503 14.1213L16.4645 15.5355ZM6.82843 12L8.94975 9.87868L7.53553 8.46447L4 12L7.53553 15.5355L8.94975 14.1213L6.82843 12ZM11.2443 17L14.884 7H12.7557L9.11597 17H11.2443Z"
+							>
+							</path>
+						</svg>
+					{/if}
+					{#if type === 'qrcode'}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" class="fill-current opacity-20">
+							<path
+								d="M16 17V16H13V13H16V15H18V17H17V19H15V21H13V18H15V17H16ZM21 21H17V19H19V17H21V21ZM3 3H11V11H3V3ZM13 3H21V11H13V3ZM3 13H11V21H3V13ZM18 13H21V15H18V13ZM6 6V8H8V6H6ZM6 16V18H8V16H6ZM16 6V8H18V6H16Z"
+							>
+							</path>
+						</svg>
+					{/if}
+					{#if type === 'barcode'}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" class="fill-current opacity-20">
+							<path d="M2 4H4V20H2V4ZM6 4H8V20H6V4ZM9 4H12V20H9V4ZM13 4H15V20H13V4ZM16 4H18V20H16V4ZM19 4H22V20H19V4Z"></path>
+						</svg>
+					{/if}
 				</div>
 			{/if}
 		</div>

packages/stdf/src/lib/components/stepper/Stepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '../icon/Icon.svelte';
 	import Loading from '../loading/Loading.svelte';
 	import type { StepperProps } from '../../types/index.js';
 
@@ -71,7 +70,15 @@
 		aria-label="decrease"
 	>
 		<span class={async || value === min ? 'opacity-20' : ''}>
-			<Icon name="ri-subtract-line" theme={theme && (numberHighlight ? false : true)} />
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				width="24"
+				height="24"
+				class={theme && (numberHighlight ? false : true) ? 'fill-primary dark:fill-dark' : ''}
+			>
+				<path d="M5 11V13H19V11H5Z"></path>
+			</svg>
 		</span>
 	</button>
 
@@ -103,7 +110,15 @@
 		disabled={async || value === max}
 	>
 		<span class={async || value === max ? 'opacity-20' : ''}>
-			<Icon name="ri-add-line" theme={theme && (numberHighlight ? false : true)} />
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				width="24"
+				height="24"
+				class={theme && (numberHighlight ? false : true) ? 'fill-primary dark:fill-dark' : ''}
+			>
+				<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
+			</svg>
 		</span>
 	</button>
 </div>

packages/stdf/src/lib/components/steps/Steps.svelte

@@ -15,7 +15,7 @@
 
 {#if vertical}
 	<div class="flex flex-col justify-between">
-		{#each steps as item, i}
+		{#each steps as item, i (item.step.title)}
 			<div class="relative flex items-center py-3" use:getClientHeight>
 				{#if item.step?.bar || item.finishStep?.bar}
 					<div class="my-4 mr-10 pl-4">
@@ -36,14 +36,14 @@
 							{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
 								<div class="m-auto h-4 w-4">
 									<Icon
-										{...item.step?.bar?.type === 'icon' ? item.step?.bar : {}}
+										{...item.step?.bar?.type === 'icon' ? item.step?.bar?.content : {}}
+										{...item.finishStep && i < current && item.finishStep?.bar?.type === 'icon' ? item.finishStep?.bar?.content : {}}
 										name={item.finishStep && i < current && item.finishStep?.bar?.type === 'icon'
 											? item.finishStep?.bar?.content?.name
 											: item.step?.bar?.type === 'icon'
 												? item.step?.bar?.content?.name
 												: ''}
 										size={16}
-										top={0}
 									/>
 								</div>
 							{/if}
@@ -113,7 +113,7 @@
 	</div>
 {:else}
 	<div class="mt-4 flex justify-between" bind:clientWidth={width}>
-		{#each steps as item, i}
+		{#each steps as item, i (item.step.title)}
 			<div class="flex flex-1 flex-col items-center space-y-2">
 				{#if item.step?.bar || item.finishStep?.bar}
 					<div class="relative w-full pb-8">
@@ -134,14 +134,14 @@
 							{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
 								<div class="m-auto h-4 w-4">
 									<Icon
-										{...item.step?.bar?.type === 'icon' ? item.step?.bar : {}}
+										{...item.step?.bar?.type === 'icon' ? item.step?.bar?.content : {}}
+										{...item.finishStep && i < current && item.finishStep?.bar?.type === 'icon' ? item.finishStep?.bar?.content : {}}
 										name={item.finishStep && i < current && item.finishStep?.bar?.type === 'icon'
 											? item.finishStep?.bar?.content?.name
 											: item.step?.bar?.type === 'icon'
 												? item.step?.bar?.content?.name
 												: ''}
 										size={16}
-										top={0}
 									/>
 								</div>
 							{/if}

packages/stdf/src/lib/components/swiper/Swiper.svelte

@@ -422,7 +422,7 @@
 	<div class="relative overflow-hidden" style="width:{width}px;height:{(width * aspectRatio[1]) / aspectRatio[0]}px;perspective:{width}px;">
 		<!-- 通过循环 dataNew 渲染多个 item -->
 		<!-- Render multiple item through loop dataNew -->
-		{#each dataNew as item, i}
+		{#each dataNew as item, i (i)}
 			<div
 				class="absolute {pxObj[px] || ''} {pyObj[py] || ''} {translateXTransition ? 'transition-all' : 'transition-none'} {i === active
 					? activeInjClass
@@ -460,7 +460,7 @@
 			] || indicateAlignObj.center}"
 		>
 			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each data as _, i}
+			{#each data as _, i (i)}
 				<div
 					class="{indicateStyleInnerFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} {indicateRadius &&
 						'rounded-full'} transition-all"
@@ -488,7 +488,7 @@
 		class="flex w-full space-x-2 px-4 py-3 {indicateAlignObj[indicateAlign] || indicateAlignObj.center} {indicateInjClass}"
 	>
 		<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-		{#each data as _, i}
+		{#each data as _, i (i)}
 			<div
 				class="{indicateStyleOutFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} {indicateRadius &&
 					'rounded-full'} transition-all"

packages/stdf/src/lib/components/tabBar/TabBar.svelte

@@ -34,7 +34,7 @@
 		></div>
 	{/if}
 	<div class="flex justify-between">
-		{#each labels as label, i}
+		{#each labels as label, i (i)}
 			<button
 				onclick={() => clickFun(i)}
 				class="flex flex-1 flex-col items-center justify-center py-1 text-center active:opacity-80 {i === active
@@ -48,15 +48,14 @@
 								{...label.icon}
 								name={label.activeIcon ? label.activeIcon.name : label.icon.name}
 								size={i === active
-									? label.activeIcon?.size !== 'full' && label.activeIcon?.size
+									? label.activeIcon?.size
 										? label.activeIcon.size * (love ? 1.2 : 1)
-										: label.icon.size !== 'full' && label.icon.size
+										: label.icon.size
 											? label.icon.size * (love ? 1.2 : 1)
 											: undefined
-									: label.icon.size !== 'full' && label.icon.size
+									: label.icon.size
 										? label.icon.size * (love ? 1.2 : 1)
 										: undefined}
-								top={0}
 							/>
 						</i>
 						<i class:hidden={i === active}>
@@ -64,15 +63,14 @@
 								{...label.icon}
 								name={label.icon.name}
 								size={i === active
-									? label.activeIcon?.size !== 'full' && label.activeIcon?.size
+									? label.activeIcon?.size
 										? label.activeIcon.size * (love ? 1.2 : 1)
-										: label.icon.size !== 'full' && label.icon.size
+										: label.icon.size
 											? label.icon.size * (love ? 1.2 : 1)
 											: undefined
-									: label.icon.size !== 'full' && label.icon.size
+									: label.icon.size
 										? label.icon.size * (love ? 1.2 : 1)
 										: undefined}
-								top={0}
 							/>
 						</i>
 					</div>

packages/stdf/src/lib/components/tabs/Tab.svelte

@@ -91,7 +91,7 @@
 			style="width: {ofActiveW}px;height: {lineType ? 2 : ofActiveH}px;left: {ofActiveLeft}px;"
 		></div>
 		<div class="relative flex whitespace-nowrap" style="width: {itemW * labels.length + 2}px;">
-			{#each labels as label, i}
+			{#each labels as label, i (i)}
 				<button
 					class="flex shrink-0 justify-center overflow-hidden py-1 font-medium {love ? 'text-lg' : 'text-sm'} leading-6 {radiusObj[
 						radius
@@ -131,7 +131,7 @@
 			style="width: {activeW}px;height: {lineType && layout !== 'v' ? 2 : activeH}px;left: {activeLeft}px;top: {activeTop}px"
 		></div>
 		<div class="relative {layout === 'h' ? 'flex justify-between' : 'whitespace-nowrap px-4'}">
-			{#each labels as label, i}
+			{#each labels as label, i (i)}
 				<button
 					class="flex flex-1 justify-center {layout === 'h' ? 'py-1' : 'py-2'} overflow-hidden font-medium {love
 						? 'text-lg'

packages/stdf/src/lib/components/toast/Toast.svelte

@@ -39,7 +39,6 @@
 		}
 	});
 
-	const typeObj = { success: 'checkbox-circle', error: 'close-circle', warning: 'error-warning', info: 'information' };
 	const positionClass = { center: ' justify-center', top: ' justify-start', bottom: ' justify-end' };
 	const pyClass = { '0': ' py-0', '10': ' py-10', '20': ' py-20', '40': ' py-40', '60': ' py-60', '80': ' py-80' };
 	const radiusClass = {
@@ -52,7 +51,6 @@
 		xl: ' rounded-xl',
 		'2xl': ' rounded-2xl'
 	};
-	const typeColor = { success: 'text-success', error: 'text-error', warning: 'text-warning', info: 'text-info' };
 
 	//解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
 	// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
@@ -104,8 +102,34 @@
 									<Loading inverse {...loading} />
 								{:else if type === 'icon'}
 									<Icon size={30} {...icon} />
-								{:else if type === 'success' || type === 'error' || type === 'warning' || type === 'info'}
-									<Icon name={`ri-${typeObj[type]}-line`} injClass={typeColor[type]} size={30} {...icon} />
+								{:else if type === 'success'}
+									<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="fill-success mx-auto block">
+										<path
+											d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"
+										>
+										</path>
+									</svg>
+								{:else if type === 'error'}
+									<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="fill-error mx-auto block">
+										<path
+											d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z"
+										>
+										</path>
+									</svg>
+								{:else if type === 'warning'}
+									<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="fill-warning mx-auto block">
+										<path
+											d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"
+										>
+										</path>
+									</svg>
+								{:else if type === 'info'}
+									<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="fill-info mx-auto block">
+										<path
+											d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z"
+										>
+										</path>
+									</svg>
 								{:else}{/if}
 							</div>
 						{/if}

packages/stdf/src/lib/types/index.ts

@@ -123,6 +123,7 @@ export type ButtonProps = {
 	customWidth?: number;
 	customHeight?: number;
 	icon?: IconProps | null;
+	iconPosition?: 'left' | 'right';
 	loading?: LoadingProps | null;
 	disabledLoading?: boolean;
 	type?: 'submit' | 'reset' | 'button';
@@ -264,12 +265,15 @@ export type GridsProps = {
 };
 
 export type IconProps = {
+	type?: 'symbol' | 'iconify' | 'iconify-color';
 	name?: string;
-	size?: number | 'full';
+	size?: number;
+	width?: number;
+	height?: number;
 	theme?: boolean;
-	alpha?: number;
+	opacity?: number;
 	path?: string;
-	top?: number;
+	y?: number;
 	injClass?: string;
 	children?: Snippet;
 	onclick?: () => void;
@@ -405,7 +409,7 @@ export type NavBarProps = {
 
 export type NoticeBarProps = {
 	textList: string[];
-	leftIcon?: IconProps | null;
+	leftIcon?: IconProps | null | 'volume';
 	rightIcon?: 'close' | 'arrow' | null;
 	fontSize?: 'xs' | 'sm' | 'base' | 'lg';
 	space?: number;

packages/stdf/src/routes/avatar/zh_CN/+page.svelte

@@ -1,12 +1,13 @@
 <!-- Avatar Demo -->
 <script lang="ts">
 	import { Avatar, Avatars, Divider, Icon } from '$lib/index.js';
+	import type { IconProps } from '$lib/types/index.js';
 
-	const icons = [
-		{ name: 'ri-aliens-fill', theme: true, top: -1, size: 16 },
-		{ name: 'ri-user-smile-line', top: -1 },
-		{ name: 'ri-shield-user-line', theme: true, top: 0, size: 32 },
-		{ name: 'ri-emotion-line', theme: true, top: -1, size: 46 }
+	const icons: IconProps[] = [
+		{ name: 'ri-aliens-fill', theme: true, y: -1, size: 16 },
+		{ name: 'ri-emotion-line', theme: true, y: -1, size: 46 },
+		{ name: 'ri-shield-user-line', theme: true, y: 0, size: 32 },
+		{ type: 'iconify', name: 'solar--user-hands-line-duotone', theme: true, size: 28 }
 	];
 
 	const imgNames = [
@@ -71,7 +72,7 @@
 
 	<div class="font-bold">替换 Icon</div>
 	<div class="mb-8 mt-4 flex justify-between">
-		{#each icons as icon}
+		{#each icons as icon (icon.name)}
 			<Avatar {icon} />
 		{/each}
 	</div>
@@ -127,8 +128,8 @@
 	<div class="mb-2 mt-6 font-bold">自定义顶层</div>
 	<Avatars {data}>
 		{#snippet top()}
-			<button class="relative flex h-12 w-12 justify-center overflow-hidden rounded-full bg-primary-200 dark:bg-dark-200">
-				<div class="flex h-full w-full items-center justify-center text-primary-950 dark:text-dark-950">
+			<button class="bg-primary-200 dark:bg-dark-200 relative flex h-12 w-12 justify-center overflow-hidden rounded-full">
+				<div class="text-primary-950 dark:text-dark-950 flex h-full w-full items-center justify-center">
 					<Icon name="ri-svelte-line" />
 				</div>
 			</button>

packages/stdf/src/routes/button/en_US/+page.svelte

@@ -47,7 +47,7 @@
 		<Button size="auto">AUTO</Button>
 		<Button size="auto">
 			<div class="px-1">
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</div>
 		</Button>
 	</div>
@@ -64,16 +64,16 @@
 			<Button customSize customWidth={40} customHeight={40}>H</Button>
 			<Button customSize customWidth={40} customHeight={40} radius="none">equal</Button>
 			<Button fill="lineTheme" customSize customWidth={40} customHeight={40}>
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</Button>
 			<Button radius="full" fill="lineTheme" customSize customWidth={40} customHeight={40}>
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</Button>
 			<Button radius="full" line="dashed" fill="lineTheme" customSize customWidth={40} customHeight={40}>
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</Button>
 			<Button radius="full" customSize customWidth={24} customHeight={24} heightIn="0">
-				<Icon name="ri-plane-fill" size={12} top={-2} />
+				<Icon name="ri-plane-fill" size={12} />
 			</Button>
 		</div>
 	</div>
@@ -84,8 +84,8 @@
 	</div>
 	<div>
 		<div class="p-4 font-bold">With icon</div>
-		<Button icon={{ name: 'ri-share-forward-2-fill', size: 18, top: -2 }}>Throw the two way foil</Button>
-		<Button fill="lineTheme" icon={{ name: 'ri-mic-off-fill', size: 16, top: -2 }}>Start the surface wall plan</Button>
+		<Button icon={{ name: 'ri-share-forward-2-fill', size: 18 }}>Throw the two way foil</Button>
+		<Button fill="lineTheme" icon={{ name: 'ri-mic-off-fill', size: 16 }}>Start the surface wall plan</Button>
 	</div>
 	<div>
 		<div class="p-4 font-bold">With loading (disabled by default)</div>
@@ -96,11 +96,11 @@
 	<div>
 		<div class="p-4 font-bold">With icon (passed through Snippet)</div>
 		<Button>
-			<Icon name="ri-share-forward-2-fill" size={18} top={-2} />
+			<Icon name="ri-share-forward-2-fill" size={18} />
 			Throw the two way foil
 		</Button>
 		<Button fill="lineTheme">
-			<Icon name="ri-mic-off-fill" size={16} top={-2} />
+			<Icon name="ri-mic-off-fill" size={16} />
 			Start the surface wall plan
 		</Button>
 	</div>
@@ -117,7 +117,7 @@
 		<div class="p-4 font-bold">Love version</div>
 		<Button love>Care version button</Button>
 		<Button love fill="lineTheme">
-			<Icon name="ri-hand-heart-line" size={22} top={-2} />
+			<Icon name="ri-hand-heart-line" size={22} />
 			Care version button
 		</Button>
 	</div>
@@ -133,16 +133,16 @@
 		<div class="p-4 font-bold">Button group</div>
 		<Button fill="lineTheme" heightIn="0" group>
 			<div class="flex w-full">
-				<button class="flex-1 border-r border-primary py-2 active:opacity-80 dark:border-dark">
-					<Icon name="ri-apps-2-line" size={18} top={-2} />
+				<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80">
+					<Icon name="ri-apps-2-line" size={18} y={-2} />
 					Application
 				</button>
-				<button class="flex-1 border-r border-primary py-2 active:opacity-80 dark:border-dark">
-					<Icon name="ri-star-line" size={18} top={-2} />
+				<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80">
+					<Icon name="ri-star-line" size={18} y={-2} />
 					Collect
 				</button>
 				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
-					<Icon name="ri-share-forward-line" size={18} top={-2} />
+					<Icon name="ri-share-forward-line" size={18} y={-2} />
 					Share
 				</button>
 			</div>
@@ -150,15 +150,15 @@
 		<Button radius="full" heightIn="0" group>
 			<div class="flex w-full">
 				<button class="flex-1 border-r border-white py-2 active:opacity-80 dark:border-black">
-					<Icon name="ri-apps-2-line" size={18} top={-2} />
+					<Icon name="ri-apps-2-line" size={18} y={-2} />
 					Application
 				</button>
 				<button class="flex-1 border-r border-white py-2 active:opacity-80 dark:border-black">
-					<Icon name="ri-star-line" size={18} top={-2} />
+					<Icon name="ri-star-line" size={18} y={-2} />
 					Collect
 				</button>
 				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
-					<Icon name="ri-share-forward-line" size={18} top={-2} />
+					<Icon name="ri-share-forward-line" size={18} y={-2} />
 					Share
 				</button>
 			</div>

packages/stdf/src/routes/button/zh_CN/+page.svelte

@@ -47,7 +47,7 @@
 		<Button size="auto">AUTO</Button>
 		<Button size="auto">
 			<div class="px-1">
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</div>
 		</Button>
 	</div>
@@ -64,16 +64,16 @@
 			<Button customSize customWidth={40} customHeight={40}>一</Button>
 			<Button customSize customWidth={40} customHeight={40} radius="none">致</Button>
 			<Button fill="lineTheme" customSize customWidth={40} customHeight={40}>
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</Button>
 			<Button radius="full" fill="lineTheme" customSize customWidth={40} customHeight={40}>
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</Button>
 			<Button radius="full" line="dashed" fill="lineTheme" customSize customWidth={40} customHeight={40}>
-				<Icon name="ri-plane-fill" size={20} top={-2} />
+				<Icon name="ri-plane-fill" size={20} />
 			</Button>
 			<Button radius="full" customSize customWidth={24} customHeight={24} heightIn="0">
-				<Icon name="ri-plane-fill" size={12} top={-2} />
+				<Icon name="ri-plane-fill" size={12} />
 			</Button>
 		</div>
 	</div>
@@ -84,8 +84,6 @@
 	</div>
 	<div>
 		<div class="p-4 font-bold">带图标</div>
-		<Button icon={{ name: 'ri-share-forward-2-fill', size: 18, top: -2 }}>投掷二向箔</Button>
-		<Button fill="lineTheme" icon={{ name: 'ri-mic-off-fill', size: 16, top: -2 }}>启动面壁计划</Button>
 	</div>
 	<div>
 		<div class="p-4 font-bold">带加载（默认禁用）</div>
@@ -96,11 +94,11 @@
 	<div>
 		<div class="p-4 font-bold">带图标（通过 Snippet 传入）</div>
 		<Button>
-			<Icon name="ri-share-forward-2-fill" size={18} top={-2} />
+			<Icon name="ri-share-forward-2-fill" size={18} />
 			投掷二向箔
 		</Button>
 		<Button fill="lineTheme">
-			<Icon name="ri-mic-off-fill" size={16} top={-2} />
+			<Icon name="ri-mic-off-fill" size={16} />
 			启动面壁计划
 		</Button>
 	</div>
@@ -117,7 +115,7 @@
 		<div class="p-4 font-bold">关爱版</div>
 		<Button love>关爱版按钮</Button>
 		<Button love fill="lineTheme">
-			<Icon name="ri-hand-heart-line" size={22} top={-2} />
+			<Icon name="ri-hand-heart-line" size={22} />
 			关爱版按钮
 		</Button>
 	</div>
@@ -133,16 +131,16 @@
 		<div class="p-4 font-bold">按钮组</div>
 		<Button fill="lineTheme" heightIn="0" group>
 			<div class="flex w-full">
-				<button class="flex-1 border-r border-primary py-2 active:opacity-80 dark:border-dark">
-					<Icon name="ri-apps-2-line" size={18} top={-2} />
+				<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80">
+					<Icon name="ri-apps-2-line" size={18} y={-2} />
 					应用
 				</button>
-				<button class="flex-1 border-r border-primary py-2 active:opacity-80 dark:border-dark">
-					<Icon name="ri-star-line" size={18} top={-2} />
+				<button class="border-primary dark:border-dark flex-1 border-r py-2 active:opacity-80">
+					<Icon name="ri-star-line" size={18} y={-2} />
 					收藏
 				</button>
 				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
-					<Icon name="ri-share-forward-line" size={18} top={-2} />
+					<Icon name="ri-share-forward-line" size={18} y={-2} />
 					分享
 				</button>
 			</div>
@@ -150,15 +148,15 @@
 		<Button radius="full" heightIn="0" group>
 			<div class="flex w-full">
 				<button class="flex-1 border-r border-white py-2 active:opacity-80 dark:border-black">
-					<Icon name="ri-apps-2-line" size={18} top={-2} />
+					<Icon name="ri-apps-2-line" size={18} y={-2} />
 					应用
 				</button>
 				<button class="flex-1 border-r border-white py-2 active:opacity-80 dark:border-black">
-					<Icon name="ri-star-line" size={18} top={-2} />
+					<Icon name="ri-star-line" size={18} y={-2} />
 					收藏
 				</button>
 				<button class="flex-1 py-2 active:opacity-80" onclick={() => (visible = true)}>
-					<Icon name="ri-share-forward-line" size={18} top={-2} />
+					<Icon name="ri-share-forward-line" size={18} y={-2} />
 					分享
 				</button>
 			</div>

packages/stdf/src/routes/cell/en_US/+page.svelte

@@ -24,7 +24,7 @@
 		<Cell title="Switch with Text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
 		<Cell title="Rounded Switch" right={{ type: 'switch', switch: { radius: 'full' } }} />
 		<Cell title="Switch Only" clickAll={false} right={{ type: 'switch' }} />
-		<Cell title="Left Icon" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
+		<Cell title="Left Icon" left={{ name: 'ri-bank-line', size: 20, theme: true }} />
 		<Cell title="Right Icon" right={{ type: 'icon', icon: { name: 'ri-battery-charge-line', size: 20, theme: true } }} />
 		<Cell title="Left Image">
 			{#snippet leftChild()}

packages/stdf/src/routes/cell/zh_CN/+page.svelte

@@ -24,7 +24,7 @@
 		<Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
 		<Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
 		<Cell title="仅点击开关触发" clickAll={false} right={{ type: 'switch' }} />
-		<Cell title="左侧使用 Icon 组件" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
+		<Cell title="左侧使用 Icon 组件" left={{ name: 'ri-bank-line', size: 20, theme: true }} />
 		<Cell title="右侧使用 Icon 组件" right={{ type: 'icon', icon: { name: 'ri-battery-charge-line', size: 20, theme: true } }} />
 		<Cell title="左侧自定义图片">
 			{#snippet leftChild()}

packages/stdf/src/routes/checkbox/en_US/+page.svelte

@@ -208,7 +208,7 @@
 					<Icon
 						name={imgCheckeds.includes(item.name) ? 'ri-arrow-up-s-fill' : 'ri-arrow-up-s-line'}
 						theme={imgCheckeds.includes(item.name)}
-						alpha={imgCheckeds.includes(item.name) ? 1 : 0.2}
+						opacity={imgCheckeds.includes(item.name) ? 1 : 0.2}
 					/>
 				</div>
 			</div>
@@ -267,12 +267,12 @@
 					<Icon
 						name={voiceCheckeds.includes(item.name) ? 'ri-checkbox-fill' : 'ri-checkbox-line'}
 						theme={voiceCheckeds.includes(item.name)}
-						alpha={voiceCheckeds.includes(item.name) ? 1 : 0.2}
+						opacity={voiceCheckeds.includes(item.name) ? 1 : 0.2}
 					/>
 				</div>
 				<div class="ml-2 grow {voiceCheckeds.includes(item.name) ? 'text-primary dark:text-dark' : ''}">
 					{item.label}
-					{#each item.voices as string[] as voice}
+					{#each item.voices as string[] as voice (voice)}
 						<div class="text-xs">{voice}</div>
 					{/each}
 					<div class="mt-1 h-px bg-black/10 dark:bg-white/10"></div>

packages/stdf/src/routes/checkbox/zh_CN/+page.svelte

@@ -204,7 +204,7 @@
 					<Icon
 						name={imgCheckeds.includes(item.name) ? 'ri-arrow-up-s-fill' : 'ri-arrow-up-s-line'}
 						theme={imgCheckeds.includes(item.name)}
-						alpha={imgCheckeds.includes(item.name) ? 1 : 0.2}
+						opacity={imgCheckeds.includes(item.name) ? 1 : 0.2}
 					/>
 				</div>
 			</div>
@@ -263,12 +263,12 @@
 					<Icon
 						name={voiceCheckeds.includes(item.name) ? 'ri-checkbox-fill' : 'ri-checkbox-line'}
 						theme={voiceCheckeds.includes(item.name)}
-						alpha={voiceCheckeds.includes(item.name) ? 1 : 0.2}
+						opacity={voiceCheckeds.includes(item.name) ? 1 : 0.2}
 					/>
 				</div>
 				<div class="ml-2 grow {voiceCheckeds.includes(item.name) ? 'text-primary dark:text-dark' : ''}">
 					{item.label}
-					{#each item.voices as string[] as voice}
+					{#each item.voices as string[] as voice (voice)}
 						<div class="text-xs">{voice}</div>
 					{/each}
 					<div class="mt-1 h-px bg-black/10 dark:bg-white/10"></div>

packages/stdf/src/routes/grids/en_US/+page.svelte

@@ -209,10 +209,10 @@
 					<div class="flex justify-center">
 						<Switch radius="full">
 							{#snippet falseChild()}
-								<div><Icon name="ri-bluetooth-line" size={12} top={-1} /></div>
+								<div><Icon name="ri-bluetooth-line" size={12} y={-1} /></div>
 							{/snippet}
 							{#snippet trueChild()}
-								<div><Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} /></div>
+								<div><Icon name="ri-bluetooth-connect-line" size={12} theme y={-1} /></div>
 							{/snippet}
 						</Switch>
 					</div>

packages/stdf/src/routes/grids/zh_CN/+page.svelte

@@ -209,10 +209,10 @@
 					<div class="flex justify-center">
 						<Switch radius="full">
 							{#snippet falseChild()}
-								<div><Icon name="ri-bluetooth-line" size={12} top={-1} /></div>
+								<div><Icon name="ri-bluetooth-line" size={12} y={-1} /></div>
 							{/snippet}
 							{#snippet trueChild()}
-								<div><Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} /></div>
+								<div><Icon name="ri-bluetooth-connect-line" size={12} theme y={-1} /></div>
 							{/snippet}
 						</Switch>
 					</div>

packages/stdf/src/routes/icon/en_US/+page.svelte

@@ -3,13 +3,31 @@
 	import { Icon } from '$lib/index.js';
 
 	const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
+	const msIcons = [
+		{ name: 'material-symbols--agriculture' },
+		{ name: 'material-symbols--brightness-5', theme: true },
+		{ name: 'material-symbols--cardiology-outline', opacity: 0.5 },
+		{ name: 'material-symbols--e911-avatar-rounded', size: 36 }
+	];
+	const solarIcons = [
+		{ name: 'solar--cat-broken' },
+		{ name: 'solar--chair-2-line-duotone', theme: true },
+		{ name: 'solar--bonfire-line-duotone', opacity: 0.5 },
+		{ name: 'solar--cup-hot-broken', size: 36 }
+	];
+	const fcIcons = [
+		{ name: 'fluent-color--building-store-24' },
+		{ name: 'fluent-color--slide-text-sparkle-16' },
+		{ name: 'fluent-color--chart-multiple-24', opacity: 0.5 },
+		{ name: 'fluent-color--bot-sparkle-24', size: 36 }
+	];
 </script>
 
 <div class="felx felx-col space-y-12 px-4 py-8">
 	<div>
 		<div class="mb-2 text-xl font-bold">Basic usage</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} />
 					<div class="mt-2 text-xs">{icon}</div>
@@ -20,7 +38,7 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">Follow the theme color</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} theme />
 				</div>
@@ -30,7 +48,7 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">Different size</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon, i}
+			{#each icons as icon, i (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} size={18 + i * 6} />
 					<div class="mt-2 text-xs">{18 + i * 6}</div>
@@ -41,20 +59,43 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">Different transparency</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon, i}
+			{#each icons as icon, i (icon)}
 				<div class="flex-1 py-2 text-center">
-					<Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
+					<Icon name={icon} opacity={Number((0.2 + i * 0.2).toFixed(1))} />
 					<div class="mt-2 text-xs">{(0.2 + i * 0.2).toFixed(1)}</div>
 				</div>
 			{/each}
 		</div>
 	</div>
+	<div>
+		<div class="mb-2 text-xl font-bold">Use iconify</div>
+		<div>material-symbols</div>
+		<div class="flex flex-wrap items-center justify-around py-2">
+			{#each msIcons as icon (icon)}
+				<Icon type="iconify" {...icon} />
+			{/each}
+		</div>
+		<div>solar</div>
+		<div class="flex flex-wrap items-center justify-around py-2">
+			{#each solarIcons as icon (icon)}
+				<Icon type="iconify" {...icon} />
+			{/each}
+		</div>
+	</div>
+	<div>
+		<div class="mb-2 text-xl font-bold">Use iconify-color</div>
+		<div class="flex flex-wrap items-center justify-around py-2">
+			{#each fcIcons as icon (icon)}
+				<Icon type="iconify-color" {...icon} />
+			{/each}
+		</div>
+	</div>
 	<div>
 		<div class="mb-2 text-xl font-bold">
 			Custom color<span class="ml-2 text-xs font-normal">By injClass</span>
 		</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} injClass="text-[red] dark:text-[green]" />
 				</div>
@@ -66,7 +107,7 @@
 			Custom color<span class="ml-2 text-xs font-normal">by Snippet</span>
 		</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon><i class="text-[#266CF6] dark:text-[#C84031]"> <Icon name={icon} /></i></Icon>
 				</div>
@@ -76,7 +117,7 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">Snippet</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon, index}
+			{#each icons as icon, index (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon>
 						<svg
@@ -101,10 +142,10 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">Offset</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon, i}
+			{#each icons as icon, i (icon)}
 				<div class="flex-1 py-2 text-center">
-					<Icon name={icons[1]} top={-4 + i * 2} />
-					top:{-4 + i * 2}
+					<Icon name={icon} y={-4 + i * 2} />
+					y:{-4 + i * 2}
 				</div>
 			{/each}
 		</div>

packages/stdf/src/routes/icon/zh_CN/+page.svelte

@@ -3,13 +3,31 @@
 	import { Icon } from '$lib/index.js';
 
 	const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
+	const msIcons = [
+		{ name: 'material-symbols--agriculture' },
+		{ name: 'material-symbols--brightness-5', theme: true },
+		{ name: 'material-symbols--cardiology-outline', opacity: 0.5 },
+		{ name: 'material-symbols--e911-avatar-rounded', size: 36 }
+	];
+	const solarIcons = [
+		{ name: 'solar--cat-broken' },
+		{ name: 'solar--chair-2-line-duotone', theme: true },
+		{ name: 'solar--bonfire-line-duotone', opacity: 0.5 },
+		{ name: 'solar--cup-hot-broken', size: 36 }
+	];
+	const fcIcons = [
+		{ name: 'fluent-color--building-store-24' },
+		{ name: 'fluent-color--slide-text-sparkle-16' },
+		{ name: 'fluent-color--chart-multiple-24', opacity: 0.5 },
+		{ name: 'fluent-color--bot-sparkle-24', size: 36 }
+	];
 </script>
 
 <div class="felx felx-col space-y-12 px-4 py-8">
 	<div>
 		<div class="mb-2 text-xl font-bold">基础用法</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} />
 					<div class="mt-2 text-xs">{icon}</div>
@@ -20,7 +38,7 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">跟随主题色</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} theme />
 				</div>
@@ -30,7 +48,7 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">不同大小</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon, i}
+			{#each icons as icon, i (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} size={18 + i * 6} />
 					<div class="mt-2 text-xs">{18 + i * 6}</div>
@@ -41,20 +59,43 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">不同透明度</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon, i}
+			{#each icons as icon, i (icon)}
 				<div class="flex-1 py-2 text-center">
-					<Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
+					<Icon name={icon} opacity={Number((0.2 + i * 0.2).toFixed(1))} />
 					<div class="mt-2 text-xs">{(0.2 + i * 0.2).toFixed(1)}</div>
 				</div>
 			{/each}
 		</div>
 	</div>
+	<div>
+		<div class="mb-2 text-xl font-bold">使用 iconify</div>
+		<div>material-symbols</div>
+		<div class="flex flex-wrap items-center justify-around py-2">
+			{#each msIcons as icon (icon)}
+				<Icon type="iconify" {...icon} />
+			{/each}
+		</div>
+		<div>solar</div>
+		<div class="flex flex-wrap items-center justify-around py-2">
+			{#each solarIcons as icon (icon)}
+				<Icon type="iconify" {...icon} />
+			{/each}
+		</div>
+	</div>
+	<div>
+		<div class="mb-2 text-xl font-bold">使用 iconify-color</div>
+		<div class="flex flex-wrap items-center justify-around py-2">
+			{#each fcIcons as icon (icon)}
+				<Icon type="iconify-color" {...icon} />
+			{/each}
+		</div>
+	</div>
 	<div>
 		<div class="mb-2 text-xl font-bold">
 			自定义颜色<span class="ml-2 text-xs font-normal">通过 injClass</span>
 		</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon name={icon} injClass="text-[red] dark:text-[green]" />
 				</div>
@@ -66,7 +107,7 @@
 			自定义颜色<span class="ml-2 text-xs font-normal">通过 Snippet</span>
 		</div>
 		<div class="flex flex-wrap justify-between">
-			{#each icons as icon}
+			{#each icons as icon (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon><i class="text-[#266CF6] dark:text-[#C84031]"><Icon name={icon} /></i></Icon>
 				</div>
@@ -77,7 +118,7 @@
 		<div class="mb-2 text-xl font-bold">Snippet</div>
 		<div class="flex flex-wrap justify-between">
 			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each icons as _, index}
+			{#each icons as icon, index (icon)}
 				<div class="flex-1 py-2 text-center">
 					<Icon>
 						<svg
@@ -102,11 +143,10 @@
 	<div>
 		<div class="mb-2 text-xl font-bold">偏移</div>
 		<div class="flex flex-wrap justify-between">
-			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each icons as _, i}
+			{#each icons as icon, i (icon)}
 				<div class="flex-1 py-2 text-center">
-					<Icon name={icons[1]} top={-4 + i * 2} />
-					top:{-4 + i * 2}
+					<Icon name={icons[1]} y={-4 + i * 2} />
+					y:{-4 + i * 2}
 				</div>
 			{/each}
 		</div>

packages/stdf/src/routes/input/en_US/+page.svelte

@@ -117,70 +117,70 @@
 />
 
 <div class="px-4 pt-8 text-xl font-bold">Left Icon</div>
-<Input title="Password" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<Input title="Password" type="password" label1={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} />
 <Input
 	title="Username"
-	label1={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
-	label3={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-arrow-down-s-line', size: 16, opacity: 0.5 }}
+	label3={{ name: 'ri-shield-user-line', size: 16, opacity: 0.5 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">Left Text</div>
 <Input title="Account" label2="Account" />
 
 <div class="px-4 pt-8 text-xl font-bold">Left Icon and Text</div>
-<Input title="Password" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label2="Password" />
+<Input title="Password" type="password" label1={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} label2="Password" />
 
 <div class="px-4 pt-8 text-xl font-bold">Left Text and Icon</div>
-<Input title="Password" type="password" label2="Password" label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<Input title="Password" type="password" label2="Password" label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} />
 
 <div class="px-4 pt-8 text-xl font-bold">Left Icon, Text, Icon</div>
 <Input
 	title="Password"
 	type="password"
-	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label2="Password"
-	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
+	label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">Right Icon</div>
-<Input title="ID Card" label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} />
+<Input title="ID Card" label4={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5 }} />
 <Input
 	title="Username"
-	label4={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
-	label6={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
+	label4={{ name: 'ri-arrow-down-s-line', size: 16, opacity: 0.5 }}
+	label6={{ name: 'ri-shield-user-line', size: 16, opacity: 0.5 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">Right Text</div>
 <Input title="Amount" type="number" label5="Yuan" />
 
 <div class="px-4 pt-8 text-xl font-bold">Right Icon and Text</div>
-<Input title="Password" type="password" label4={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label5="Password" />
+<Input title="Password" type="password" label4={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} label5="Password" />
 
 <div class="px-4 pt-8 text-xl font-bold">Right Text and Icon</div>
-<Input title="Password" type="password" label5="Password" label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<Input title="Password" type="password" label5="Password" label6={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} />
 
 <div class="px-4 pt-8 text-xl font-bold">Right Icon, Text, Icon</div>
 <Input
 	title="Password"
 	type="password"
-	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label4={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label5="Password"
-	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
+	label6={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">Left Text and Right Icon</div>
-<Input label2="ID Card" label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} placeholder="Please enter ID card number" />
+<Input label2="ID Card" label6={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5 }} placeholder="Please enter ID card number" />
 
 <div class="px-4 pt-8 text-xl font-bold">All Six Items</div>
 <Input
 	title="Password"
 	type="password"
-	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label2="Password"
-	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
-	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
+	label4={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label5="Password"
-	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
+	label6={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">Tips and Data Items</div>
@@ -195,12 +195,12 @@
 <Input
 	title="Title"
 	placeholder="Please enter text"
-	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label2="Label 2"
-	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
-	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
+	label4={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label5="Label 5"
-	label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
+	label6={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5, y: -2 }}
 	data1="Data item 1"
 	data2="Data item 2"
 	data3="Data item 3"
@@ -263,7 +263,7 @@
 	title="ID Card"
 	placeholder={placeholderIdCard}
 	bind:value={IdCard}
-	label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
+	label4={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5 }}
 	onclickLabel4={clickLabel4Fun}
 	clear
 />

packages/stdf/src/routes/input/zh_CN/+page.svelte

@@ -110,70 +110,70 @@
 <Input title="动态改变状态色" type="tel" placeholder="请输入11位手机号" maxlength={11} state={mobileState} onchange={changeStateFun} />
 
 <div class="px-4 pt-8 text-xl font-bold">左侧带图标</div>
-<Input title="密码" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<Input title="密码" type="password" label1={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} />
 <Input
 	title="用户名"
-	label1={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
-	label3={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-arrow-down-s-line', size: 16, opacity: 0.5 }}
+	label3={{ name: 'ri-shield-user-line', size: 16, opacity: 0.5 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">左侧带文字</div>
 <Input title="账号" label2="账号" />
 
 <div class="px-4 pt-8 text-xl font-bold">左侧带图标与文字</div>
-<Input title="密码" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label2="密码" />
+<Input title="密码" type="password" label1={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} label2="密码" />
 
 <div class="px-4 pt-8 text-xl font-bold">左侧带文字与图标</div>
-<Input title="密码" type="password" label2="密码" label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<Input title="密码" type="password" label2="密码" label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} />
 
 <div class="px-4 pt-8 text-xl font-bold">左侧带图标、文字、图标</div>
 <Input
 	title="密码"
 	type="password"
-	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label2="密码"
-	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
+	label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">右侧带图标</div>
-<Input title="身份证号" label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} />
+<Input title="身份证号" label4={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5 }} />
 <Input
 	title="用户名"
-	label4={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
-	label6={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
+	label4={{ name: 'ri-arrow-down-s-line', size: 16, opacity: 0.5 }}
+	label6={{ name: 'ri-shield-user-line', size: 16, opacity: 0.5 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">右侧带文字</div>
 <Input title="金额" type="number" label5="元" />
 
 <div class="px-4 pt-8 text-xl font-bold">右侧带图标与文字</div>
-<Input title="密码" type="password" label4={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} label5="密码" />
+<Input title="密码" type="password" label4={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} label5="密码" />
 
 <div class="px-4 pt-8 text-xl font-bold">右侧带文字与图标</div>
-<Input title="密码" type="password" label5="密码" label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
+<Input title="密码" type="password" label5="密码" label6={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }} />
 
 <div class="px-4 pt-8 text-xl font-bold">右侧带图标、文字、图标</div>
 <Input
 	title="密码"
 	type="password"
-	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label4={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label5="密码"
-	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
+	label6={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">左侧带文字右侧带图标</div>
-<Input label2="身份证号" label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} placeholder="请输入身份证号" />
+<Input label2="身份证号" label6={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5 }} placeholder="请输入身份证号" />
 
 <div class="px-4 pt-8 text-xl font-bold">左右六项全带</div>
 <Input
 	title="密码"
 	type="password"
-	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label2="密码"
-	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
-	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
+	label4={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label5="密码"
-	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
+	label6={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
 />
 
 <div class="px-4 pt-8 text-xl font-bold">提示信息与数据项组合</div>
@@ -188,12 +188,12 @@
 <Input
 	title="标题"
 	placeholder="请输入文本"
-	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label1={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label2="标签 2"
-	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
-	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
+	label3={{ name: 'ri-lock-line', size: 16, opacity: 0.5, y: -2 }}
+	label4={{ name: 'ri-bank-line', size: 16, opacity: 0.5, y: -2 }}
 	label5="标签 5"
-	label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
+	label6={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5, y: -2 }}
 	data1="数据项 1"
 	data2="数据项 2"
 	data3="数据项 3"
@@ -249,7 +249,7 @@
 	title="身份证号"
 	placeholder={placeholderIdCard}
 	bind:value={IdCard}
-	label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
+	label4={{ name: 'ri-qr-scan-line', size: 16, opacity: 0.5 }}
 	onclickLabel4={clickLabel4Fun}
 	clear
 />

packages/stdf/src/routes/navBar/en_US/+page.svelte

@@ -53,7 +53,7 @@
 	<NavBar injClass="!bg-transparent" line={false}>
 		{#snippet leftChild()}
 			<div class="m-2 h-8 w-8 rounded-full bg-white text-center leading-8 dark:bg-black/50">
-				<Icon name="ri-home-7-line" size={18} top={-2} />
+				<Icon name="ri-home-7-line" size={18} y={-2} />
 			</div>
 		{/snippet}
 		{#snippet titleChild()}
@@ -61,7 +61,7 @@
 		{/snippet}
 		{#snippet rightChild()}
 			<div class="m-2 h-8 w-8 rounded-full bg-white text-center leading-8 dark:bg-black/50">
-				<Icon name="ri-customer-service-2-line" size={18} top={-2} />
+				<Icon name="ri-customer-service-2-line" size={18} y={-2} />
 			</div>
 		{/snippet}
 	</NavBar>

packages/stdf/src/routes/navBar/zh_CN/+page.svelte

@@ -53,7 +53,7 @@
 	<NavBar injClass="!bg-transparent" line={false}>
 		{#snippet leftChild()}
 			<div class="m-2 h-8 w-8 rounded-full bg-white text-center leading-8 dark:bg-black/50">
-				<Icon name="ri-home-7-line" size={18} top={-2} />
+				<Icon name="ri-home-7-line" size={18} y={-2} />
 			</div>
 		{/snippet}
 		{#snippet titleChild()}
@@ -61,7 +61,7 @@
 		{/snippet}
 		{#snippet rightChild()}
 			<div class="m-2 h-8 w-8 rounded-full bg-white text-center leading-8 dark:bg-black/50">
-				<Icon name="ri-customer-service-2-line" size={18} top={-2} />
+				<Icon name="ri-customer-service-2-line" size={18} y={-2} />
 			</div>
 		{/snippet}
 	</NavBar>

packages/stdf/src/routes/noticeBar/en_US/+page.svelte

@@ -37,9 +37,9 @@
 <NoticeBar fontSize="lg" {textList}></NoticeBar>
 
 <div class="m-4 mt-8 text-lg font-bold">Custom left</div>
-<NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, top: -1 }} {textList}></NoticeBar>
+<NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, y: -1 }} {textList}></NoticeBar>
 <div class="my-4"></div>
-<NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, top: -1 }} {textList}></NoticeBar>
+<NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, y: -1 }} {textList}></NoticeBar>
 <div class="my-4"></div>
 <NoticeBar {textList}>
 	{#snippet leftChild()}🥳{/snippet}
@@ -68,7 +68,7 @@
 <div class="m-4 mt-8 text-lg font-bold">Custom style</div>
 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
 <div class="my-4"></div>
-<NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
+<NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, y: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
 <div class="my-4"></div>
 <NoticeBar injClass="!text-extend0 !bg-extend0/10" {textList}></NoticeBar>
 <div class="pb-8"></div>

packages/stdf/src/routes/noticeBar/zh_CN/+page.svelte

@@ -34,9 +34,9 @@
 <NoticeBar fontSize="lg" {textList}></NoticeBar>
 
 <div class="m-4 mt-8 text-lg font-bold">自定义左侧</div>
-<NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, top: -1 }} {textList}></NoticeBar>
+<NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, y: -1 }} {textList}></NoticeBar>
 <div class="my-4"></div>
-<NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, top: -1 }} {textList}></NoticeBar>
+<NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, y: -1 }} {textList}></NoticeBar>
 <div class="my-4"></div>
 <NoticeBar {textList}>
 	{#snippet leftChild()}🥳{/snippet}
@@ -65,7 +65,7 @@
 <div class="m-4 mt-8 text-lg font-bold">自定义样式</div>
 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
 <div class="my-4"></div>
-<NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
+<NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, y: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
 <div class="my-4"></div>
 <NoticeBar injClass="!text-extend0 !bg-extend0/10" {textList}></NoticeBar>
 <div class="pb-8"></div>

packages/stdf/src/routes/radio/en_US/+page.svelte

@@ -130,7 +130,7 @@
 					<Icon
 						name={imgChecked === item.name ? 'ri-arrow-up-s-fill' : 'ri-arrow-up-s-line'}
 						theme={imgChecked === item.name}
-						alpha={imgChecked === item.name ? 1 : 0.2}
+						opacity={imgChecked === item.name ? 1 : 0.2}
 					/>
 				</div>
 			</div>
@@ -186,12 +186,12 @@
 					<Icon
 						name={voiceChecked === item.name ? 'ri-radio-button-line' : 'ri-checkbox-blank-circle-line'}
 						theme={voiceChecked === item.name}
-						alpha={voiceChecked === item.name ? 1 : 0.2}
+						opacity={voiceChecked === item.name ? 1 : 0.2}
 					/>
 				</div>
 				<div class="ml-2 grow {voiceChecked === item.name ? 'text-primary dark:text-dark' : ''}">
 					{item.label}
-					{#each item.voices as string[] as voice}
+					{#each item.voices as string[] as voice (voice)}
 						<div class="text-xs">{voice}</div>
 					{/each}
 					<div class="mt-1 h-px bg-black/10 dark:bg-white/10"></div>

packages/stdf/src/routes/radio/zh_CN/+page.svelte

@@ -127,7 +127,7 @@
 					<Icon
 						name={imgChecked === item.name ? 'ri-arrow-up-s-fill' : 'ri-arrow-up-s-line'}
 						theme={imgChecked === item.name}
-						alpha={imgChecked === item.name ? 1 : 0.2}
+						opacity={imgChecked === item.name ? 1 : 0.2}
 					/>
 				</div>
 			</div>
@@ -183,12 +183,12 @@
 					<Icon
 						name={voiceChecked === item.name ? 'ri-radio-button-line' : 'ri-checkbox-blank-circle-line'}
 						theme={voiceChecked === item.name}
-						alpha={voiceChecked === item.name ? 1 : 0.2}
+						opacity={voiceChecked === item.name ? 1 : 0.2}
 					/>
 				</div>
 				<div class="ml-2 grow {voiceChecked === item.name ? 'text-primary dark:text-dark' : ''}">
 					{item.label}
-					{#each item.voices as string[] as voice}
+					{#each item.voices as string[] as voice (voice)}
 						<div class="text-xs">{voice}</div>
 					{/each}
 					<div class="mt-1 h-px bg-black/10 dark:bg-white/10"></div>