Jelajahi Sumber

Update documents

dufu1991 3 tahun lalu
induk
melakukan
8724739281

+ 15 - 15
doc/components/icon/api.md

@@ -1,23 +1,23 @@
 ## Icon Props
 
-| 属性       | 类型          | 默认值              | 可选值        | 必传  | 说明                             |
-|----------|-------------|------------------|------------|-----|--------------------------------|
-| name     | String/slot | ''               | SVG Sprites name/slot | Y   | 图标名称。                          |
-| size     | Number      | 24               | -          | N   | 图标大小。                          |
-| theme    | Boolean     | false            | true/false | N   | 是否跟随主题色(包含亮色与暗色)。              |
-| alpha    | Number      | 1                | 0 - 1      | N   | 图标透明度。                         |
-| top      | Number      | -2               | -          | N   | 上下偏移量。                         |
-| injClass | String      | ''               | Class      | N   | 注入 CSS 名称。                     |
-| path     | String      | '/assets/fonts/symbol.svg' | -          | N   | 项目存放 symbol.svg 的路径。 |
+| 属性     | 类型        | 默认值             | 可选值                | 必传 | 说明                               |
+| -------- | ----------- | ------------------ | --------------------- | ---- | ---------------------------------- |
+| name     | String/slot | ''                 | SVG Sprites name/slot | Y    | 图标名称。                         |
+| size     | Number      | 24                 | -                     | N    | 图标大小。                         |
+| theme    | Boolean     | false              | true/false            | N    | 是否跟随主题色(包含亮色与暗色)。 |
+| alpha    | Number      | 1                  | 0 - 1                 | N    | 图标透明度。                       |
+| top      | Number      | -2                 | -                     | N    | 上下偏移量。                       |
+| injClass | String      | ''                 | Class                 | N    | 注入 CSS 名称。                    |
+| path     | String      | 'fonts/symbol.svg' | -                     | N    | 项目存放 symbol.svg 的路径。       |
 
 ## Icon Events
 
-| 名称    | 参数  | 描述    |
-|-------|-----|-------|
-| click | -   | 点击触发。 |
+| 名称  | 参数 | 描述       |
+| ----- | ---- | ---------- |
+| click | -    | 点击触发。 |
 
 ## Icon Slots
 
-| 名称  | 说明       |
-|-----|----------|
-| -   | 自定义 SVG。 |
+| 名称 | 说明         |
+| ---- | ------------ |
+| -    | 自定义 SVG。 |

+ 9 - 9
doc/components/icon/api_en.md

@@ -1,14 +1,14 @@
 ## Icon Props
 
-| Properties | Type        | Default value              | Optional value | required | Description                                                           |
-| ---------- | ----------- | -------------------------- | -------------- | -------- | --------------------------------------------------------------------- |
-| name       | String/slot | ''                         | SVG Sprites name/slot     | Y        | Icon name.                                                            |
-| size       | Number      | 24                         | -              | N        | Icon size.                                                            |
-| theme      | Boolean     | false                      | true/false     | N        | Whether to follow the theme color (including bright and dark colors). |
-| alpha      | Number      | 1                          | 0 - 1          | N        | Icon transparency.                                                    |
-| top        | Number      | -2                         | -              | N        | Disposal up and down.                                                 |
-| injClass   | String      | ''                         | Class          | N        | Inject the CSS name.                                                  |
-| path       | String      | '/assets/fonts/symbol.svg' | -              | N        | The project stores the path of symbol.svg.                            |
+| Properties | Type        | Default value      | Optional value        | required | Description                                                           |
+| ---------- | ----------- | ------------------ | --------------------- | -------- | --------------------------------------------------------------------- |
+| name       | String/slot | ''                 | SVG Sprites name/slot | Y        | Icon name.                                                            |
+| size       | Number      | 24                 | -                     | N        | Icon size.                                                            |
+| theme      | Boolean     | false              | true/false            | N        | Whether to follow the theme color (including bright and dark colors). |
+| alpha      | Number      | 1                  | 0 - 1                 | N        | Icon transparency.                                                    |
+| top        | Number      | -2                 | -                     | N        | Disposal up and down.                                                 |
+| injClass   | String      | ''                 | Class                 | N        | Inject the CSS name.                                                  |
+| path       | String      | 'fonts/symbol.svg' | -                     | N        | The project stores the path of symbol.svg.                            |
 
 ## Icon Events
 

+ 2 - 0
doc/components/icon/guide.md

@@ -4,6 +4,8 @@ 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)。
 
 ## 内置说明

+ 2 - 0
doc/components/icon/guide_en.md

@@ -4,6 +4,8 @@ STDF uses SVG Sprite technology for icons, which can reduce HTTP requests and im
 
 STDF's SVG Sprites use the [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol) technique, which is similar in principle to the Sprite technique in CSS. The SVGs in the project are concatenated into one file, and the corresponding icons are displayed by using the `use` element in SVG.
 
+You can think of it as a font, but instead of being made up of characters, it is composed of SVGs. It can be styled using CSS to control properties such as color and size. Therefore, if you have large or complex icons with multiple colors, it is recommended to import the SVG files individually instead of using them within a symbol.
+
 Compatibility is not a problem either. Refer to [MDN symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol#browser_compatibility).
 
 ## Built-in Explanation

+ 5 - 0
doc/components/icon/version.md

@@ -0,0 +1,5 @@
+## 0.2.5
+
+- [!tag|O|0|] path 默认值由 `/assets/fonts/symbol.svg` 修改为 `fonts/symbol.svg`。
+
+<font size=1>2023-08-16</font>

+ 5 - 0
doc/components/icon/version_en.md

@@ -0,0 +1,5 @@
+## 0.2.5
+
+- [!tag|O|0|] The default value of `path` has been changed from `/assets/fonts/symbol.svg` to `fonts/symbol.svg`.
+
+<font size=1>2023-08-16</font>

+ 6 - 0
doc/guide/changelog.md

@@ -1,3 +1,9 @@
+## 0.2.5
+
+- Icon 修改 path 默认值,详见 [Icon](https://stdf.design/#/components?nav=icon&tab=4)。
+- 新增了 `rollup-plugin-stdf-icon` 插件,将指定文件夹内的所有 SVG 组合为 SVG symbol,详见 [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon),方便 STDF 的 Icon 组件使用。
+- 配合 `rollup-plugin-stdf-icon` 更新 `create-stdf`。
+
 ## 0.2.4
 
 - 0.2.2 ~ 0.2.4 优化文件结构,精简 NPM 包体积。抵制 `node_modules` 体积膨胀和依赖黑洞,从我做起!

+ 6 - 0
doc/guide/changelog_en.md

@@ -1,3 +1,9 @@
+## 0.2.5
+
+- The default value of `path` in the Icon component has been modified. Please refer to the [Icon](https://stdf.design/#/components?nav=icon&tab=4) section for more details.
+- A new plugin called `rollup-plugin-stdf-icon` has been added. It combines all SVG files in a specified folder into an SVG symbol for the convenience of using the Icon component in STDF. Please see [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon) for more information.
+- The `create-stdf` project has been updated to work with `rollup-plugin-stdf-icon`.
+
 ## 0.2.4
 
 - 0.2.2 ~ 0.2.4 Optimized file structure and reduced NPM package size. Say no to bloated `node_modules` and dependency black holes!