feat: 品牌图标本地资源库（QQ/B站/Telegram/GitHub/Gitea/微信 SVG）+ 联系链接双通道

frontend/src/components/BlogSidebar.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { listPosts } from '../api/blog.js';
+import BrandIcon, { BRAND_ICON_NAMES } from './BrandIcon.jsx';
 
 /**
  * 前台侧栏（迁移自 index.html HOMEPAGE 侧栏 + blog.js loadSidebar）：
@@ -42,7 +43,9 @@ export default function BlogSidebar({ settings = {}, showRecent = false, forceSh
           <div className="homepage-contacts">
             {contacts.map((l, i) => (
               <a key={i} href={l.url} target="_blank" rel="noopener" className="hp-contact-link" title={l.title || ''}>
-                <span className="material-icons">{l.icon || 'link'}</span>
+                {BRAND_ICON_NAMES.includes(l.icon)
+                  ? <BrandIcon name={l.icon} size={20} className="contact-icon" />
+                  : <span className="material-icons">{l.icon || 'link'}</span>}
               </a>
             ))}
           </div>

frontend/src/components/BrandIcon.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * 品牌图标（读本地彩色 SVG 文件，public/icons/brands/）：
+ * qq / bilibili / telegram / github / gitea / wechat —— 彩色图标，浏览器原生 <img> 渲染，离线可用。
+ * props: { name, size=24, className, alt }
+ * 未知 name（不在 BRAND_ICON_NAMES）→ null，调用方以 material-icons 兜底。
+ */
+
+/** 支持的品牌图标名（供前台双通道渲染判断） */
+export const BRAND_ICON_NAMES = ['qq', 'bilibili', 'telegram', 'github', 'gitea', 'wechat'];
+
+const LABELS = {
+  qq: 'QQ',
+  bilibili: '哔哩哔哩',
+  telegram: 'Telegram',
+  github: 'GitHub',
+  gitea: 'Gitea',
+  wechat: '微信',
+};
+
+export default function BrandIcon({ name, size = 24, className = '', alt }) {
+  if (!BRAND_ICON_NAMES.includes(name)) return null;
+  return (
+    <img
+      src={`/icons/brands/${name}.svg`}
+      alt={alt || LABELS[name] || name}
+      width={size}
+      height={size}
+      className={className}
+      loading="lazy"
+    />
+  );
+}