svg - 关节：如何将 icomoon 图标包含到 rappid 的自定义形状中

Question

我正在为 HTML 图表工具使用Rappid框架。我dia.Element使用以下示例使用 rappid 的命名空间制作了自定义形状。无论如何，图像使用 SVG 可以正常工作，但我想改用icomoon/font-awesome图标。

export const Element = dia.Element.define(
    "custom.Element",
    {
        size: {height: 165, width: 140},
        attrs: {
            body: {
                refWidth: "100%",
                refHeight: "100%",
                fill: "transparent",
            },
            logoWrapper: {
                refX2: 25,
                refY2: 40,
            },
            logoContainer: {
                height: 75,
                width: 90,
                fill: "#fff",
                stroke: "#9C9C9C",
                rx: 6,
                ry: 6,
            },
            appLogo: {
                width: 48,
                height: 48,
                refX: 21,
                refY: 14,
                fontFamily: "icomoon",
                content: `\eb65`,
                text: `\eb65`,
            },
            ...otherProps,
        } as Record<string, SVGAttributes>,
    },
    {
        markup: [
            {
                tagName: "rect",
                selector: "body",
            },
            {
                tagName: "g",
                selector: "logoWrapper",
                children: [
                    {
                        tagName: "rect",
                        selector: "logoContainer",
                    },
                    {
                        tagName: "text",
                        selector: "appLogo",
                    },
                    ...otherMarkup,
                ],
            },
        ] as dia.MarkupJSON,
    }
);

在这里，我attr在 appLogo 上使用了 on custom 元素：

appLogo: {
  width: 48,
  height: 48,
  refX: 21,
  refY: 14,
  // here I've used the font-family or content/text
  // to fiddle with it, but no luck
  fontFamily: "icomoon",
  content: `\eb65`,
  text: `\eb65`,
}

标记是这样的：

{
  tagName: "text",
  selector: "appLogo",
},

任何帮助将不胜感激。谢谢。

Answer 1

我终于通过使用正确的字体代码解决了它。需要附加\u到text字符串。并且content不再需要道具。

{
  text: '\ueb65'
}