优化手机端侧边栏图标展示✅

src/components/Comment.astro

@@ -13,9 +13,6 @@ import "../styles/components/Comment.less";
 		updateRouter("afterMount", async () => {
 			if (!document.querySelector(".vh-comment>section")) return;
 			await LoadScript("https://registry.npmmirror.com/twikoo/1.6.41/files/dist/twikoo.all.min.js");
-			twikoo.init({
+			twikoo.init({ envId: SITE_INFO.Twikoo.envId, el: ".vh-comment>section" });
-				envId: SITE_INFO.Twikoo.envId,
-				el: ".vh-comment>section"
-			});
 		});
 </script>

src/components/MobileSidebar.astro

@@ -12,12 +12,12 @@ import "../styles/components/MobileSidebar.less";
 		<div class="vh-mobilesidebar-list user-panel">
 			<h3>{Title}</h3>
 		</div>
-    
+
 		<div class="vh-mobilesidebar-list">
 			{
 				Navs.map(i => (
 					<a class={i.link.includes(activeNav) ? "active" : ""} href={i.link} target={i.target ? "_blank" : "_self"}>
-						<span set:html={i.icon} />
+						<object data={i.icon} type="image/svg+xml" />
 						{i.text}
 					</a>
 				))

src/styles/components/MobileSidebar.less

@@ -90,24 +90,15 @@
           color: #fff;
           background: #3366FF;
 
-          &>span {
+          &>object {
-            &>svg {
+            filter: brightness(0) invert(100%);
-              fill: #fff;
-            }
           }
         }
 
-
+        &>object {
-        &>span {
-          display: flex;
-          align-items: center;
           width: 0.875rem;
           height: 0.875rem;
-
+          transition: filter 0.16s ease-in-out;
-          &>svg {
-            width: 100%;
-            height: 100%;
-          }
         }
       }
     }