Icon

This example shows how to use the icon attribute to display an icon on a node. Icons are defined as font glyphs. Ogma works well with FontAwesome, but any font such as Arial may be used.
A node's icon is controlled by the icon.content attribute. The font is defined by the icon.font attribute, the color by the icon.color and size relative to the node size in the icon.scale. Icons can also be used in badges as illustrated in the badge example.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';
import chroma from 'chroma-js';

// dummy icon element to retrieve the HEX code
const placeholder = document.getElementById('icon-placeholder')!;
placeholder.style.visibility = 'hidden';

const CLEAN_QUOTES = /["']/g;
// helper routine to get the icon HEX code
const getIconCode = (icon: string) => {
  placeholder.className = `icon-${icon}`;
  const content = getComputedStyle(placeholder, ':before').content;
  return content.replace(CLEAN_QUOTES, '');
};

const fontName = 'Lucide';

const ICONS = [
  'shield',
  'chevron-down',
  'folder',
  'target',
  'bug',
  'martini',
  'star',
  'glasses',
  'cloud',
  'arrow-left',
  'user',
  'message-square',
  'play',
  'hammer'
];

const getColor = chroma
  .scale(['0093ff', 'ff0000'])
  .domain([0, ICONS.length + 2]);

const ogma = new Ogma({
  container: 'graph-container'
});

// Specify the style.
ogma.styles.addNodeRule({
  // Specify the icon font, color and contents.
  icon: {
    font: fontName,
    color: n => getColor(+n.getId()).hex(),
    content: n => getIconCode(ICONS[+n.getId() % ICONS.length]),
    scale: 0.5
  },
  text: {
    content: n => ICONS[+n.getId() % ICONS.length],
    backgroundColor: n => getColor(+n.getId()).hex(),
    color: 'white',
    font: 'IBM Plex Sans',
    size: 14,
    tip: false
  },
  // Set the node color as white
  color: 'white',
  // Add a border to the node
  innerStroke: {
    color: n => getColor(+n.getId()).hex(),
    width: 3,
    minVisibleSize: 5
  }
});

ogma.styles.setHoveredNodeAttributes({
  text: {
    backgroundColor: n => n.getAttribute('icon.color')
  }
});

ogma.generate
  .random({ nodes: ICONS.length + 2, edges: 0 })
  .then(graph => ogma.setGraph(graph))
  .then(() => ogma.layouts.grid({ locate: true, duration: 0 }));

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/lucide-static@0.483.0/font/lucide.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="graph-container"></div>

    <!-- we force the loading of the font awesome -->
    <span class="fa-solid fa-shield-halved" id="icon-placeholder"></span>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}

Icon ​

Icon