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.
I finally solved it by using the correct font code. Needed to append \u
to the text
string. And the content
prop is no longer required.
{
text: '\ueb65'
}