Using FontAwesome Icons with a TreeView in React

Background:

Sometimes you want to show meaningful icons (folders, files, links, brands) next to each node in a Wijmo TreeView. The TreeView supports customizing node content via the formatItem hook, and Font Awesome provides a large, lightweight set of web icons you can use. In React, the key is to import the Font Awesome stylesheet up front and use a formatItem handler to inject <i> elements with the appropriate Font Awesome classes into each node.

Steps to Complete:

1. Install Wijmo React packages and Font Awesome.
2. Import Wijmo and Font Awesome styles in your app entry point.
3. Provide a data source with optional kind or icon hints.
4. Implement an onFormatItem function that injects an <i> element with Font Awesome classes.
5. Pass that handler via the TreeView’s formatItem prop so it runs on initial render.

Getting Started:

Install Wijmo React packages and Font Awesome

Makes sure the component libraries and icon fonts are available in your project.

npm i @mescius/wijmo @mescius/wijmo.react.nav @mescius/wijmo.styles @fortawesome/fontawesome-free

• Wijmo React Nav includes the TreeView component.

Import Wijmo and Font Awesome styles in your app entry point

This loads the base styles for Wijmo controls and Font Awesome icons so they render correctly.

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

import '@mescius/wijmo.styles/wijmo.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• If you forget this step, icons won’t show at first render.

Provide a data source with optional kind or icon hints

This defines a hierarchical dataset with optional kind or icon properties to guide which Font Awesome icon to inject for each node.

// src/data.js
export const treeData = [
  {
    header: 'Documents',
    kind: 'folder',
    items: [
      { header: 'Resume.pdf', kind: 'file' },
      { header: 'Project Plan.docx', kind: 'file' }
    ]
  },
  {
    header: 'Photos',
    kind: 'folder',
    items: [
      {
        header: 'Vacation',
        kind: 'folder',
        items: [
          { header: 'IMG_0001.jpg', kind: 'image' },
          { header: 'IMG_0002.jpg', kind: 'image' }
        ]
      },
      { header: 'Family.png', kind: 'image' }
    ]
  },
  {
    header: 'GitHub',
    kind: 'link',
    icon: 'fa-brands fa-github'
  }
];

• kind helps determine default icons (e.g., folders, files, images).
• An explicit icon overrides defaults (e.g., brand icons).

Implement an onFormatItem function that injects an <i> element with Font Awesome classes

This customizes how TreeView nodes render by prepending a Font Awesome <i> icon element to each node’s text area.

// src/App.jsx
function onFormatItem(s, e) {
  const item = e.dataItem;
  const label = e.element.querySelector('.wj-node-text') || e.element;
  if (!label) return;

  // Remove previously injected icons
  const existing = label.querySelector('.fa-solid, .fa-regular, .fa-brands');
  if (existing) existing.remove();

  // Determine which icon class to use
  const iconClass = item.icon
    ?? (
      item.kind === 'folder' || (Array.isArray(item.items) && item.items.length)
        ? 'fa-solid fa-folder'
        : item.kind === 'image'
          ? 'fa-solid fa-image'
          : item.kind === 'link'
            ? 'fa-solid fa-link'
            : 'fa-solid fa-file'
    );

  const i = document.createElement('i');
  i.className = iconClass;
  i.setAttribute('aria-hidden', 'true'); // Improve accessibility

  label.insertAdjacentElement('afterbegin', i);
}

• Uses metadata (icon, kind, items) to choose appropriate icons.
• Removes previously injected icons to prevent duplication on rerender.
• The created <i> node uses Font Awesome classes.

Pass that handler via the TreeView’s formatItem prop so it runs on initial render

This attaches your formatItem handler so TreeView runs it on initial render and whenever nodes update.

// src/App.jsx
import * as wjNav from '@mescius/wijmo.react.nav';
import { treeData } from './data';

export default function App() {
  return (
    <div className="app">
      <h1>Wijmo TreeView + Font Awesome</h1>
      <wjNav.TreeView
        itemsSource={treeData}
        displayMemberPath="header"
        childItemsPath="items"
        formatItem={onFormatItem}
      />
    </div>
  );
}

• Passing formatItem={onFormatItem} binds the handler during initial rendering (important so icons appear immediately).

With this React setup:

• Each TreeView node can display a contextually appropriate Font Awesome icon.
• Custom icons can be defined per item, or default ones chosen based on metadata.
• Icons render correctly on first load because the handler is bound via the formatItem prop.
• This enhances usability by visually distinguishing folders, files, links, images, and other node types.

Happy coding!