v0.5.0

## 变化

- 增加了 SVG 图标补全
- 修正了部分组件的 HTML 补全，精简了组件使用示例

**Full Changelog**:
https://github.com/lingbopro/soberjs-vscode/blob/master/CHANGELOG.md

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 版本记录
 
+## v0.5.0
+
+- 增加了 SVG 图标补全
+- 修正了部分组件的 HTML 补全，精简了组件使用示例
+
 ## v0.4.0
 - 增加了组件的 CSS 变量补全
 - 增加了 CSS 全局变量（颜色变量）补全

README.md

@@ -43,8 +43,9 @@
 - HTML 标签属性名称和枚举值
 - CSS 变量名和枚举值
 - 一点 HTML 代码片段
+- Material 图标 SVG 补全
 
-目前已支持 Sober.js 0.2.15 的所有组件和 CSS 变量（见下表）  
+目前已支持 `Sober.js 0.2.15` 的所有组件、CSS 变量（见下表）和 SVG 图标  
 
 <details>
   <summary>支持的组件（点击展开）</summary>
@@ -102,10 +103,6 @@
     - [x] `--border-color`
     - [x] `--padding`
 - [x] 全局变量
-
-  <details>
-  <summary>点击展开（共 68 个）</summary>
-
   - [x] `--s-color-primary`
   - [x] `--s-color-on-primary`
   - [x] `--s-color-primary-container`
@@ -176,7 +173,6 @@
   - [x] `--s-elevation-level4`
   - [x] `--s-elevation-level5`
 
-  </details>
 </details>
 
 ### 功能展示
@@ -192,5 +188,6 @@
 - [x] 支持更多组件
 - [ ] 完善悬停提示
 - [x] 完成 CSS 变量名和枚举值补全
-- [ ] 增加 SVG 图标补全
+- [x] 增加 SVG 图标补全
+- [ ] 使 SVG 图标补全可以补全填充图标，不仅是线条图标
 

docs/dev-guide.md

@@ -29,14 +29,10 @@
 
 见 [贡献指南](./../CONTRIBUTING.md)。
 
-<!-- 没做完呢，别动！ -->
-<!--
 
 ## 提示
 
 ### 生成 SVG 代码片段文件
-<details>
-<summary>点击展开</summary>
 
 Sober 图标库中有很多图标，手动编写代码片段非常费时，因此可以使用脚本来生成。
 
@@ -49,14 +45,55 @@ Sober 图标库中有很多图标，手动编写代码片段非常费时，因
     <summary>点击展开</summary>
 
     ```js
-    下个版本补充，别动这！！！
-    --- @lingbopro, 2024/7/12
+    async function getIcons() {
+        const header = `
+    // 此代码片段由脚本生成，包含了 Sober 图标库中的图标
+    // 如要获知更多信息，请查看开发指南(docs/dev-guide.md)`;
+        function wait(delay) {
+            return new Promise(function (resolve, reject) {
+                setTimeout(function () {
+                    resolve();
+                }, delay);
+            });
+        }
+        let elementSnippet = {};
+        let iconSnippet = {};
+        let contentEl = document.querySelector('.detail>pre');
+        let headlineEl = document.querySelector('s-dialog:has(.detail) > [slot="headline"]');
+        let iconsEl = document.querySelectorAll('.group .item');
+        for(const current of iconsEl) {
+            current.click();
+            let content = contentEl.innerText;
+            let name = headlineEl.innerText;
+            let casedName = name.toLowerCase().replaceAll(' ', '-');
+            let lines = content.split('\n');
+            let elementLines = ['<s-icon>'];
+            lines[1] = '\t' + lines[1].substr(2);
+            for(const line of lines) {
+                elementLines.push('\t' + line);
+            }
+            elementLines.push('</s-icon>');
+            let snippetDescription = `Sober Material 图标: ${name}`;
+            iconSnippet[`MD Icon: ${name}`] = {
+                prefix: [`mdi:${casedName}`, `svg:mdi-${casedName}`],
+                body: lines,
+                description: snippetDescription
+            };
+            elementSnippet[`Sober Icon: ${name}`] = {
+                prefix: [`s-icon:${casedName}`],
+                body: elementLines,
+                description: snippetDescription
+            };
+            await wait(2);
+        }
+        console.log('// 代码片段: <s-icon> 元素的 SVG 图标' + header + '\n\n' + JSON.stringify(elementSnippet));
+        console.log('// 代码片段: Sober.js 图标库图标的 SVG' + header + '\n\n' + JSON.stringify(iconSnippet));
+    }
+    getIcons();
     ```
     （脚本由 [@lingbopro](https://github.com/lingbopro) 制作）
 
     </details>
 
-4. 等待 15-30 秒后，控制台会输出两段长文本，将第一段放入 [snippets/s-icon.code-snippets](./../snippets/s-icon.code-snippets) 中，第二段放入 [snippets/svg-icon.code-snippets](./../snippets/svg-icon.code-snippets) 中，并格式化它们
+4. 等待约 20-50 秒后，控制台会输出两段长文本，将第一段放入 [snippets/s-icon.code-snippets](./../snippets/s-icon.code-snippets) 中，第二段放入 [snippets/svg-icon.code-snippets](./../snippets/svg-icon.code-snippets) 中，并格式化它们
 
-</details>
--->

package.json

@@ -2,7 +2,7 @@
   "name": "soberjs-vscode",
   "displayName": "Sober.js",
   "description": "为 Sober.js 组件库提供自动完成、悬停提示、代码片段等功能",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "publisher": "lingbopro",
   "author": {
     "name": "lingbopro",
@@ -44,6 +44,14 @@
         "language": "html",
         "path": "./snippets/html.code-snippets"
       },
+      {
+        "language": "html",
+        "path": "./snippets/s-icon.code-snippets"
+      },
+      {
+        "language": "html",
+        "path": "./snippets/svg-icon.code-snippets"
+      },
       {
         "language": "javascript",
         "path": "./snippets/js-ts.code-snippets"