feature/add_theme_custom_icons (#2205)

* add macos detailed build documentation

* feature/add_theme_custom_icons

* update

en_us/docs/Users/Themes and Styles.md

@@ -17,6 +17,7 @@ Some key files of a theme:
 - `text-editor.theme`: theme file of the text editor (as well as Markdown editor);
 - `web.css`: style sheet file of the read mode of Markdown;
 - `highlight.css`: style sheet file of the read mode of Markdown for code block syntax highlight; VNote uses [Prism](https://prismjs.com/) for syntax highlight in read mode;
+- `icons`: folder for customized icons (**optional**);
 
 ## Samples
 ### Customize Editor Fonts
@@ -154,4 +155,75 @@ Change the font size of the notebook node explorer:
 vnotex--NotebookNodeExplorer QTreeView {
     font-size: 14pt;
 }
-```
+```
+
+### Customize ICONS
+
+Vnotex Support for adding custom icon folders in themes `icons`, After placing the `SVG` format image of the corresponding name inside, the icon customization in the theme can be realized.
+
+Sample directory: 
+
+```
+.
+├── cover.png
+├── highlight.css
+├── icons
+│   ├── ***.svg
+│   ├── ***.svg
+│   └── ***.svg
+├── interface.qss
+├── palette.json
+├── text-editor.theme
+└── web.css
+```
+
+Mapping between common ICONS: 
+
+**Notes**
+
+![](vx_images/567140813269078.png)
+
+| Name            | Explain         |
+| :-------------- | :-------------- |
+| folder_node.svg | Folder of nodes |
+| file_node.svg   | Nodes           |
+
+**Top Menu bar**
+
+From left to right.
+
+![](vx_images/52411495826601.png)
+
+| Name                  | Explain             |
+| :-------------------- | :------------------ |
+| notebook_menu.svg     | Notebook            |
+| new_note.svg          | New Note            |
+| import_menu.svg       | Import              |
+| export_menu.svg       | Export              |
+| flash_page_menu.svg   | Flash Page          |
+| quick_access_menu.svg | Quick Access        |
+| task_menu.svg         | Task                |
+| united_entry.svg      | United Entry        |
+| expand.svg            | Expand Content Area |
+| settings_menu.svg     | Settings            |
+| menu.svg              | Menu                |
+
+**Left navigation bar**
+
+From top to down.
+
+![](vx_images/55762704615693.png)
+
+| Name                | Explain    |
+| :------------------ | :--------- |
+| navigation_dock.svg | Navigation |
+| history_dock.svg    | History    |
+| tag_dock.svg        | Tags       |
+| search_dock.svg     | Search     |
+| snippet_dock.svg    | Snippets   |
+
+
+Demo: 
+
+![](vx_images/508490695826601.png)
+

en_us/docs/Users/vx.json

@@ -95,7 +95,7 @@
             "attachment_folder": "",
             "created_time": "2018-11-24T12:18:17Z",
             "id": "12",
-            "modified_time": "2021-12-23T05:58:40Z",
+            "modified_time": "2022-08-09T02:46:01Z",
             "name": "Themes and Styles.md",
             "signature": "2110466178163",
             "tags": [

zh_cn/docs/用户/vx.json

@@ -95,7 +95,7 @@
             "attachment_folder": "",
             "created_time": "2018-11-24T12:30:05Z",
             "id": "39",
-            "modified_time": "2021-12-23T06:01:10Z",
+            "modified_time": "2022-08-07T05:14:57Z",
             "name": "主题和样式.md",
             "signature": "102269103520883",
             "tags": [

zh_cn/docs/用户/主题和样式.md

@@ -17,6 +17,7 @@
 - `text-editor.theme`: 文本编辑器（以及Markdown编辑器）的主题文件；
 - `web.css`: Markdown阅读模式的样式文件；
 - `highlight.css`: Markdown阅读模式的代码块语法高亮样式文件；VNote在阅读模式使用[Prism](https://prismjs.com/)来进行语法高亮;
+- `icons`: 自定义图标文件夹 **可选** ；
 
 ## 示例
 ### 自定义编辑器字体
@@ -154,4 +155,75 @@ QTreeView, QListView {
 vnotex--NotebookNodeExplorer QTreeView {
     font-size: 14pt;
 }
-```
+```
+
+### 自定义图标
+
+Vnotex 支持在主题中添加自定义图标文件夹 `icons`，往里面放置对应名称的 `svg` 格式图片后，即可实现主题中的图标定制化。
+
+目录样例结构如下：
+
+```
+.
+├── cover.png
+├── highlight.css
+├── icons
+│   ├── ***.svg
+│   ├── ***.svg
+│   └── ***.svg
+├── interface.qss
+├── palette.json
+├── text-editor.theme
+└── web.css
+```
+
+常用图标的名称对应关系：
+
+**笔记**
+
+![](vx_images/61273190889848.png)
+
+| 名称             | 解释   |
+| :-------------- | :----- |
+| folder_node.svg | 文件夹 |
+| file_node.svg   | 笔记   |
+
+**顶部菜单**
+
+从左到右
+
+![](vx_images/345532103615693.png)
+
+| 名称                   | 解释       |
+| :-------------------- | :-------- |
+| notebook_menu.svg     | 笔记本     |
+| new_note.svg          | 新建笔记   |
+| import_menu.svg       | 导入       |
+| export_menu.svg       | 导出       |
+| flash_page_menu.svg   | 灵犀页     |
+| quick_access_menu.svg | 快速访问   |
+| task_menu.svg         | 任务       |
+| united_entry.svg      | 统一入口   |
+| expand.svg            | 扩展内容区 |
+| settings_menu.svg     | 设置       |
+| menu.svg              | 菜单       |
+
+**左侧导航栏**
+
+从上到下
+
+![](vx_images/292792926941444.png)
+
+| 名称                 | 解释 |
+| :------------------ | :--- |
+| navigation_dock.svg | 导航 |
+| history_dock.svg    | 历史 |
+| tag_dock.svg        | 标签 |
+| search_dock.svg     | 搜索 |
+| snippet_dock.svg    | 片段 |
+
+
+效果如下
+
+![](vx_images/396011412269078.png)
+