ReGraph can display font icons on nodes and glyphs.
Pass the CSS class name of the icon into the fontIcon property.
You can load in font libraries using the document.fonts.load function.
See the FontReadyChart and Demo components in the Story tab for how to wait for icons to load before rendering the chart.
See also
import React from "react";
import { createRoot } from "react-dom/client";
import { Chart } from "regraph";
import items from "./data";
// We need to import CSS which maps classnames to unicode
// You can also manually define this as a JSON object
// (the main icomoon download does this in icons.js)
import "icomoon-free-npm/Font/demo-files/demo.css";
// the above css applies global styles which in some cases need patching
const imageAlignment = {
"icon-phone": { size: 2 },
};
function IcoMoon() {
return (
<Chart
items={items}
options={{
imageAlignment,
iconFontFamily: "IcoMoon-Free",
navigation: false,
overview: false,
}}
/>
);
}
const FontReadyChart = React.lazy(() =>
// Ensure that the CSS containing the @font-face declaration
// has been loaded before attempting to load the font here.
document.fonts.load("24px 'IcoMoon-Free'").then(() => ({
default: IcoMoon,
}))
);
export function Demo() {
return (
<React.Suspense fallback="">
<FontReadyChart />
</React.Suspense>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
const items = {
3: {
fontIcon: { text: "icon-user", ...style.primary1 },
color: "rgba(0, 0, 0, 0)",
glyphs: [
{
position: "ne",
color: "rgba(0, 0, 0, 0)",
fontIcon: { text: "icon-credit-card", color: style.tertiary2.color },
},
],
},
4: {
fontIcon: { text: "icon-user", ...style.primary1 },
color: "rgba(0, 0, 0, 0)",
glyphs: [
{
position: "ne",
color: "rgba(0, 0, 0, 0)",
fontIcon: { text: "icon-bubble", color: style.secondary2.color },
},
],
},
5: {
fontIcon: { text: "icon-user-tie", ...style.primary3 },
color: "rgba(0, 0, 0, 0)",
glyphs: [
{
position: "ne",
color: "rgba(0, 0, 0, 0)",
fontIcon: { text: "icon-warning", color: "black" },
},
],
},
6: {
fontIcon: { text: "icon-library", ...style.secondary1 },
color: "rgba(0, 0, 0, 0)",
glyphs: [
{
position: "ne",
color: "rgba(0, 0, 0, 0)",
fontIcon: { text: "icon-floppy-disk", color: style.tertiary2.color },
},
],
},
7: {
fontIcon: { text: "icon-truck", ...style.primary2 },
color: "rgba(0, 0, 0, 0)",
glyphs: [
{
position: "ne",
color: "rgba(0, 0, 0, 0)",
fontIcon: { text: "icon-phone", color: "black" },
},
],
},
8: {
fontIcon: { text: "icon-office", ...style.secondary2 },
color: "rgba(0, 0, 0, 0)",
glyphs: [
{
position: "ne",
color: "rgba(0, 0, 0, 0)",
fontIcon: { text: "icon-floppy-disk", color: style.tertiary2.color },
},
],
},
9: {
fontIcon: { text: "icon-home", ...style.secondary3 },
color: "rgba(0, 0, 0, 0)",
glyphs: [
{
position: "ne",
color: "rgba(0, 0, 0, 0)",
fontIcon: { text: "icon-warning", color: style.secondary2.color },
},
],
},
l1: { id1: "3", id2: "7" },
l2: { id1: "4", id2: "6" },
l3: { id1: "4", id2: "9" },
l4: { id1: "5", id2: "7" },
l5: { id1: "5", id2: "8" },
l6: { id1: "5", id2: "9" },
l7: { id1: "5", id2: "6" },
};
export default items;<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>input[type="range"]:focus {
box-shadow: none;
}