UiManager

How to get UiManager

ES2015+:

import UiManager from 'fontoxml-modular-ui/uiManager'

ES5:

define([
	'fontoxml-modular-ui/uiManager'
], function (
	UiManager
) {
});

Type: Class

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

Methods

Name Description
registerCustomIcon

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

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)

  • we recommend you 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.

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.)

Tip for handling long svg strings: load them using the text loader in your install.js file, like so: define([ 'fontoxml-modular-ui/uiManager',

'text!./my-custom-icon.svg' ], function ( uiManager

myCustomIconSVGString ) { uiManager.registerCustomIcon('myCustomIcon', myCustomIconSVGString); });

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. customIconSVGString String

The SVG XML as a 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