Static CMS exposes a window.CMS global object that you can use to register custom icons via registerIcon. The same object is also the default export if you import Static CMS as an npm module.

Custom icons can be used with Collections or Custom Links & Pages

Params

Example

This example uses Font Awesome to supply the icon.

import { faHouse } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import CMS from '@staticcms/core';

CMS.registerIcon('house', () => h(FontAwesomeIcon, {icon=faHouse, size="lg"}));

import { faHouse } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import CMS from '@staticcms/core';

CMS.registerIcon('house', () => <FontAwesomeIcon icon={faHouse} size="lg" />);

import { faHouse } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import CMS from '@staticcms/core';

CMS.registerIcon('house', () => <FontAwesomeIcon icon={faHouse} size="lg" />);

Usage

Collection

collections:
  - name: homepage
    icon: house

collections: [
  {
    name: 'homepage',
    icon: 'house'
  },
],

Additional Links

See Additional Links for details.