[Bug]: Node icons not centered #7016

Describe the bug / 问题描述

In React, node icons are not centered.

Here is a simple example:

import React, { useEffect, useRef } from "react";
import * as G6 from '@antv/g6';

const GraphComponent = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        if (!containerRef.current) return;

        const graph = new G6.Graph({
            container: containerRef.current,
            width: 600,
            height: 400,
            node: {
                size: 30,
            },
            edge: {
                style: {
                    stroke: "#999",
                    lineWidth: 2,
                },
            },
            modes: {
                default: ["drag-canvas", "zoom-canvas", "drag-node"],
            },
            layout: {
                type: "circular",
                radius: 100,
            },
        });

        const data = {
            nodes: [
                { id: "node1", label: "Node 1", style: { iconText: '+' } },
                { id: "node2", label: "Node 2", style: { iconText: 'W' } },
            ],
            edges: [{ source: "node1", target: "node2" }],
        };

        graph.setData(data);
        graph.render();

        return () => graph.destroy();
    }, []);

    return <div ref={containerRef} />;
};

export default GraphComponent;

The nodes look like this:

The icons inside the nodes are not centered.

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

Use the above component inside your React app.

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他