v0.10.17: H16 Developer Ecosystem(ab35847+906379a)完成,审计 0 差异

- SocialIconsWidget 忠实重写:wrapper grid + column-gap(icon_spacing 10)、
  a.elementor-social-icon 44×44/圆角 10%/官方品牌底色(#0077B5/#CD201F/#3B5998)、
  字形白色(原站 SVG fill #fff 取证)、hover shrink、elementor-screen-only 结构
- FA Brands 字体子集:public/fonts/fa-brands-400.woff2(自 legacy elementor 插件库)+
  app.css 三码位 content 规则(.fab/.fa-linkedin/.fa-youtube/.fa-facebook)
- elementor-animation-shrink 通用动画类;H16 卡列 populated 扣 margin scoped
- 双端节内几何/样式 0 差异(sec 764.4/卡 528.4 全等),截图目视一致

src/components/elementor/Renderer.tsx

@@ -786,16 +786,37 @@ function PostsWidget({ settings }: { settings: Record<string, unknown> }) {
 }
 
 /** # 组件 social-icons widget（图标行） */
+/** # 组件 social-icons widget：忠实 Elementor DOM（widget-social-icons 语义，H16 实测）
+ * .elementor-social-icons-wrapper.elementor-grid（inline-grid + column-gap=icon_spacing，
+ * 由父级 text-align 居中）> a.elementor-icon.elementor-social-icon.elementor-social-icon-<name>
+ * （官方品牌底色/44×44 盒/圆角 10%/白色字形 22px/hover shrink）> span.elementor-screen-only + i.fab；
+ * 字形色原站为白色（SVG fill #fff，icon_primary_color 未作用到字形）。
+ */
 function SocialIconsWidget({ settings }: { settings: Record<string, unknown> }) {
   const items = (settings.social_icon_list as Array<Record<string, unknown>>) || [];
+  if (!items.length) return null;
+  const spacing = sizeCss(settings.icon_spacing) || "10px";
+  const anim = s(settings.hover_animation) === "shrink" ? " elementor-animation-shrink" : "";
   return (
-    <div className="mb-[18px] flex gap-2.5">
+    <div className="elementor-social-icons-wrapper elementor-grid" style={{ columnGap: spacing }}>
       {items.map((it, i) => {
-        const icon = ((it.social_icon as { value?: string })?.value || "").replace(/fa-brands |fa-solid |fa- /g, "");
+        const value = ((it.social_icon as { value?: string })?.value || "").trim();
+        // value 形如 "fab fa-linkedin"：取末段去 fa- 前缀作品牌名（elementor-social-icon-<name>）
+        const name = (value.split(" ").pop() || "").replace(/^fa-/, "");
+        const label = name.replace(/^-/, "").replace(/^\w/, (c) => c.toUpperCase());
         return (
-          <a key={i} className="flex size-[34px] items-center justify-center rounded-full bg-soft text-ink hover:bg-brand hover:text-white" href={s((it.link as { url?: string })?.url) || "#"} target="_blank" rel="noreferrer" aria-label={icon}>
-            <span className={"soc " + icon} />
-          </a>
+          <span key={s(it._id) || i} className="elementor-grid-item">
+            <a
+              className={"elementor-icon elementor-social-icon elementor-social-icon-" + name + anim}
+              href={s((it.link as { url?: string })?.url) || "#"}
+              target={s((it.link as { is_external?: string })?.is_external) === "true" || s((it.link as { is_external?: string })?.is_external) === "on" ? "_blank" : undefined}
+              rel="noopener nofollow"
+              aria-label={label}
+            >
+              <span className="elementor-screen-only">{label}</span>
+              <i className={value} aria-hidden="true" />
+            </a>
+          </span>
         );
       })}
     </div>