fix: touchbar icon display

src/electron/touchBar.js

@@ -1,70 +1,81 @@
-const { TouchBar, ipcMain } = require("electron");
+const { TouchBar, nativeImage, ipcMain } = require("electron");
 const { TouchBarButton, TouchBarSpacer } = TouchBar;
+const path = require("path");
 
 export function createTouchBar(window) {
   const renderer = window.webContents;
 
-  // use SF Symbols as label, you probably will see a 􀂒 instead of real icon
+  // Icon follow touchbar design guideline.
+  // See: https://developer.apple.com/design/human-interface-guidelines/macos/touch-bar/touch-bar-icons-and-images/
+  // Icon Resource: https://devimages-cdn.apple.com/design/resources/
+  function getNativeIcon(name) {
+    return nativeImage.createFromPath(
+      path.join(__static, "img/touchbar/", name)
+    );
+  }
 
   const previousPage = new TouchBarButton({
-    label: "􀆉",
     click: () => {
       renderer.send("routerGo", "back");
     },
+    icon: getNativeIcon("page_prev.png"),
   });
 
   const nextPage = new TouchBarButton({
-    label: "􀆊",
     click: () => {
       renderer.send("routerGo", "forward");
     },
+    icon: getNativeIcon("page_next.png"),
   });
 
   const searchButton = new TouchBarButton({
-    label: "􀊫",
     click: () => {
       renderer.send("search");
     },
+    icon: getNativeIcon("search.png"),
   });
 
   const playButton = new TouchBarButton({
-    label: "􀊄",
     click: () => {
       renderer.send("play");
     },
+    icon: getNativeIcon("play.png"),
   });
 
   const previousTrackButton = new TouchBarButton({
-    label: "􀊎",
     click: () => {
       renderer.send("previous");
     },
+    icon: getNativeIcon("backward.png"),
   });
 
   const nextTrackButton = new TouchBarButton({
-    label: "􀊐",
     click: () => {
       renderer.send("next");
     },
+    icon: getNativeIcon("forward.png"),
   });
 
   const likeButton = new TouchBarButton({
-    label: "􀊴",
     click: () => {
       renderer.send("like");
     },
+    icon: getNativeIcon("like.png"),
   });
 
   const nextUpButton = new TouchBarButton({
-    label: "􀑬",
     click: () => {
       renderer.send("nextUp");
     },
+    icon: getNativeIcon("next_up.png"),
   });
 
   ipcMain.on("player", (e, { playing, likedCurrentTrack }) => {
-    playButton.label = playing === true ? "􀊆" : "􀊄";
-    likeButton.label = likedCurrentTrack ? "􀊵" : "􀊴";
+    playButton.icon =
+      playing === true ? getNativeIcon("pause.png") : getNativeIcon("play.png");
+    likeButton.icon = likedCurrentTrack
+      ? getNativeIcon("like_fill.png")
+      : getNativeIcon("like.png");
   });
 
   const touchBar = new TouchBar({