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

Question

我正在为 HTML 图表工具使用 Rappid 框架。我使用以下示例使用 rappid 命名空间中的 dia.Element 制作了自定义形状。无论如何，图像使用 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,
    }
);

这里我在 appLogo 的自定义元素上使用了 attr：

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'
}

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

Joints: How to include icomoon icon into rappid's custom shape

svg

jointjs

rappid

icomoon