[stdf]Update @0.5.3

doc/components/icon/guide.md

@@ -47,3 +47,16 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 ## Snippet
 
 可放入任何元素（甚至 Icon 组件自身），当然主要用于自定义图标或自定义图标颜色，如将自定义 SVG 放入 Icon 组件，请注意 SVG 的 viewBox、height、width 关系与 display 属性。此时图标内容取决于传入的元素，Props 中的 name、size、theme 等参数都将失效。通过 Snippet 将使组件内容有更多自定义可能性。
+
+## 全局注入图标 svg 路径
+
+STDF Icon 组件使用 Svg 文件路径配置，适用于一次性配置全局 SVG symbol 路径，或应用部署在服务器非根路径下。一般在应用的入口如 `App.svelte` 或 `+layout.svelte` 中配置 Context，例如：
+
+```svelte
+<!-- App.svelte/+layout.svelte -->
+<script>
+	import { setContext } from 'svelte'; // 引入 setContext
+
+	setContext('STDF-global-icon-svg-path', 'webapps/svelte_demo/fonts/symbol.svg'); // 设置 svg 文件路径
+</script>
+```

doc/components/icon/guide_en.md

@@ -47,3 +47,16 @@ The injClass parameter injects CSS classes (not limited to Tailwind CSS) into th
 ## 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.
+
+## Global Injection Icon SVG Path
+
+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:
+
+```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
+</script>
+```

doc/components/icon/version.md

@@ -1,3 +1,7 @@
+## 0.5.3
+
+- [!tag|O|0|] 支持一次性配置全局 SVG symbol 路径。关联 [PR](https://github.com/any-tdf/stdf/pull/28)。[!contribute|zh1047842950|]
+
 ## 0.2.11
 
 - [!tag|B|1|] Icon 组件区域不再是 `inline-block`。

doc/components/icon/version_en.md

@@ -1,3 +1,7 @@
+## 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|]
+
 ## 0.2.11
 
 - [!tag|B|1|] The Icon component area is no longer `inline-block`.

doc/guide/changelog.md

@@ -1,3 +1,7 @@
+## 0.5.3 <font size=1>2024-11-19</font>
+
+- 优化 Icon 组件，详见 [Icon](https://stdf.design/#/components?nav=icon&tab=4)。
+
 ## 0.5.2 <font size=1>2024-10-02</font>
 
 - 优化 Button 组件，详见 [Button](https://stdf.design/#/components?nav=button&tab=4)。

doc/guide/changelog_en.md

@@ -1,3 +1,7 @@
+## 0.5.3 <font size=1>2024-11-19</font>
+
+- Optimized Icon component, please see [Icon](https://stdf.design/#/components?nav=icon&tab=4).
+
 ## 0.5.2 <font size=1>2024-10-02</font>
 
 - Optimized Button component, please see [Button](https://stdf.design/#/components?nav=button&tab=4).

packages/stdf/components/icon/Icon.svelte

@@ -1,7 +1,18 @@
 <script>
+	import { getContext } from 'svelte';
+
 	/** @typedef {import('../../index.d').Icon} IconProps */
 	/** @type {IconProps} */
-	let { name = '', size = 24, theme = false, alpha = 1, path = 'fonts/symbol.svg', top = 0, injClass = '', children } = $props();
+	let {
+		name = '',
+		size = 24,
+		theme = false,
+		alpha = 1,
+		path = getContext('STDF-global-icon-svg-path') || 'fonts/symbol.svg',
+		top = 0,
+		injClass = '',
+		children,
+	} = $props();
 </script>
 
 <i class="relative{theme ? ' text-primary dark:text-dark' : ''} {injClass}" style="top:{top}px;">