UiManager

The license could not be verified: License Certificate has expired!

How to get uiManager

import uiManager from 'fontoxml-modular-ui/src/uiManager.js'

Type: Class

Allows registration of React components to be used in the Fonto application.

Methods

Name Description
registerCustomIcon

Registers a custom icon defined as an SVGModule or string of SVG under a given name. Use the given name as the icon name when you want to use it.

Strongly recommended tips for sizing your icons:

  • Your icon should be easily viewable at a minimum-height of 14px. (this size is used when the icon is inline with other text; icon size 's' in FDS)

  • Define an SVG viewBox of 0 0 180 140, this has the same 18:14 aspect ratio as the existing Font-Awesome icons. This helps to automatically align different icons visually.

  • Remove the height and width attributes from the svg element if present.

Tip for using a custom color: to allow setting the icon color when you use your custom icon, use 'currentColor' whenever you want to render the primary color of your SVG: See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color for more on currentColor.

Eg.

// place this in the install.js of any package:
uiManager.registerCustomIcon(
  'swirl',
  '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140"><path fill="transparent" stroke="currentColor" stroke-width="15" d="M10 20 Q 50 10, 80 80 T 160 120" /></svg>'
);
// (Note: stroke is set to currentColor and the path stays within a viewBox of 0 0 180 140.)
// (Note: the <?xml version="1.0" encoding="UTF-8"?> declaration is omitted: its optional.)

Do not include anything inside the svg that isn't used to draw the svg (shape/path). So do not include an svg <title> element for example, that is only used to (automatically) display as a tooltip when hovering the svg. This is done by the browser natively and conflicts with the tooltipContent prop on an FDS Icon for example.

Tip for handling long svg strings: import and register them in your install.js file, like so:

import uiManager from 'fontoxml-modular-ui/src/uiManager.js';
import myCustomIconSVG from './my-custom-icon.svg';

export default function install () {
  uiManager.registerCustomIcon('myCustomIcon', myCustomIconSVG);
};

Usage somewhere in React/JSX: <Icon icon="swirl" />

Usage as a widget when configuring a CVK element: createIconWidget('swirl')

Anywhere a icon name is expected, a custom icon name that is registered can be used.

Tip: you can even override existing (FontAwesome) icons by registering a custom icon under a pre-existing FontAwesome icon name.


  Arguments
# Name Type Description
1. customIconName String

The name of the icon when using it.

2. customIconSVG SVGModule | String

The SVG XML as a SVGModule or string, including an svg element with the correct viewport.

registerReactComponent

Registers a React component using the given name.

Component can be either the constructor of a class extending React.Component (or one of its subclasses), or a stateless component function.


  Arguments
# Name Type Description
1. componentName String
2. Component ReactComponent
Was this page helpful?