.

README.md

@@ -21,18 +21,19 @@ Prepare and install environment for development in Window 10/11?
 
 ## Technologies
 
-| Technology  | Role                                                  | Sources                               |
-| :---------- | :---------------------------------------------------- | :------------------------------------ |
-| Go          | Backend programming language                          | https://pkg.go.dev/std                |
-| TypeScript  | Frontend programming language                         | https://typescriptlang.org/           |
-| Vite        | Next Generation Frontend Tooling                      | https://vitejs.dev/                   |
-| Vue 3       | Progressive JavaScript Framework                      | https://vuejs.org/                    |
-| Wails       | Build cross-platform desktop applications using Go    | https://wails.io/                     |
-| UPX         | Ultimate packer for executables                       | https://upx.github.io/                |
-| Systray     | A cross platfrom system tray using Go                 | https://github.com/getlantern/systray |
-| Gin         | A HTTP web framework using Go                         | https://gin-gonic.com/                |
-| Gin Swagger | Gin middleware for API documentation with Swagger 2.0 | https://github.com/swaggo/gin-swagger |
-| Swaggo      | Converts Go annotations to Swagger Documentation 2.0  | https://github.com/swaggo/swag        |
-| Air         | Live reload and test for API service                  | https://github.com/cosmtrek/air       |
-| GORM        | ORM library for Go                                    | https://gorm.io/                      |
-| SQLite      | GORM sqlite driver                                    | https://github.com/go-gorm/sqlite     |
+| Technology  | Role                                                  | Sources                                 |
+| :---------- | :---------------------------------------------------- | :-------------------------------------- |
+| Go          | Backend programming language                          | https://pkg.go.dev/std                  |
+| TypeScript  | Frontend programming language                         | https://typescriptlang.org/             |
+| Vite        | Next Generation Frontend Tooling                      | https://vitejs.dev/                     |
+| Vue 3       | Progressive JavaScript Framework                      | https://vuejs.org/                      |
+| Wails       | Build cross-platform desktop applications using Go    | https://wails.io/                       |
+| UPX         | Ultimate packer for executables                       | https://upx.github.io/                  |
+| Systray     | A cross platfrom system tray using Go                 | https://github.com/getlantern/systray   |
+| Gin         | A HTTP web framework using Go                         | https://gin-gonic.com/                  |
+| Gin Swagger | Gin middleware for API documentation with Swagger 2.0 | https://github.com/swaggo/gin-swagger   |
+| Swaggo      | Converts Go annotations to Swagger Documentation 2.0  | https://github.com/swaggo/swag          |
+| Air         | Live reload and test for API service                  | https://github.com/cosmtrek/air         |
+| GORM        | ORM library for Go                                    | https://gorm.io/                        |
+| SQLite      | GORM sqlite driver                                    | https://github.com/go-gorm/sqlite       |
+| SVG To Font | Generator of fonts from SVG icons                     | https://github.com/jaywcjlove/svgtofont |

frontend/packages/components/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@jinyaoma/my-app-components",
+  "version": "0.1.0",
+  "main": "index.ts"
+}

frontend/packages/icons/build.js

@@ -0,0 +1,37 @@
+const svgtofont = require("svgtofont");
+
+/*
+  "svgtofont": {
+    "outSVGReact": false,
+    "outSVGPath": false,
+    "emptyDist": true,
+    "styleTemplates": "./templates",
+    "fontName": "mp-icon",
+    "css": {
+      "filename": "mp-icon",
+      "include": "\\.(css|scss|less|styl)$",
+      "fontSize": "1em"
+    }
+  }
+*/
+
+svgtofont({
+  dist: "./lib", // output path
+  src: "./svg", // svg path
+  styleTemplates: "./styles",
+  emptyDist: true, // Clear output directory contents
+  fontName: "mp-icon", // font name
+  css: {
+    filename: "mp-icon",
+    include: "\\.css$", // "\\.(css|scss|less|styl)$",
+    fontSize: "1em",
+  }, // Create CSS files.
+  outSVGReact: false,
+  outSVGPath: false,
+  svgicons2svgfont: {
+    fontHeight: 1000,
+    normalize: true,
+  },
+}).then(() => {
+  console.log("done!");
+});

frontend/packages/icons/index.js

@@ -0,0 +1 @@
+import "./lib/mp-icon.css";

frontend/packages/icons/lib/mp-icon.css

@@ -0,0 +1,35 @@
+@font-face {
+  font-family: "mp-icon";
+  src: url('mp-icon.eot'); /* IE9*/
+  src: url('mp-icon.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("mp-icon.woff2") format("woff2"),
+  url("mp-icon.woff") format("woff"),
+  url('mp-icon.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('mp-icon.svg#mp-icon') format('svg'); /* iOS 4.1- */
+}
+
+[class^="mp-icon-"], [class*=" mp-icon-"] {
+  font-family: 'mp-icon' !important;
+  font-size:1em;
+  font-style: normal;
+  vertical-align: bottom;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class^="mp-icon-"].fix-width, [class*=" mp-icon-"].fix-width {
+  width: 1.3em;
+  text-align: center;
+}
+
+.mp-icon-docs:before { content: "\ea01"; }
+.mp-icon-home:before { content: "\ea02"; }
+.mp-icon-jinyao-ma:before { content: "\ea03"; }
+.mp-icon-settings:before { content: "\ea04"; }
+.mp-icon-window-close:before { content: "\ea05"; }
+.mp-icon-window-fullscreen:before { content: "\ea06"; }
+.mp-icon-window-maximize:before { content: "\ea07"; }
+.mp-icon-window-minimize:before { content: "\ea08"; }
+.mp-icon-window-restore:before { content: "\ea09"; }
+.mp-icon-window-unfullscreen:before { content: "\ea0a"; }
+