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

Question

I'm using the Rappid framework for HTML diagramming tooling. I've made custom shapes using dia.Element from rappid's namespace using the below example. Anyhow, images are working fine using SVG, but I want to use icomoon/font-awesome icon instead.

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,
    }
);

Here I've used the attr on custom element on appLogo:

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`,
}

And the markup is like this:

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

Any help would be greatly appreciated. Thanks.

Answer 1

I finally solved it by using the correct font code. Needed to append \\u\u003c/code> to the text string. And the content prop is no longer required.

{
  text: '\ueb65'
}