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

【问题标题】：Joints: How to include icomoon icon into rappid's custom shape关节：如何将 icomoon 图标包含到 rappid 的自定义形状中
【发布时间】：2021-02-24 14:16:56
【问题描述】：

我正在为 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",
},

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

【问题讨论】：

标签： svg jointjs rappid icomoon

【解决方案1】：

我终于通过使用正确的字体代码解决了这个问题。需要将\u 附加到text 字符串。并且不再需要 content 属性。

{
  text: '\ueb65'
}

【讨论】：