UnicodeSymbol

How to get UnicodeSymbol

import { UnicodeSymbol } from 'fds/components';

Type: Component

Renders a unicode code point as a symbol, looking similar to an Icon.

Props

# Name Type Description
1. code String

The code point to render as a symbol, must be a valid unicode code point.

2. [colorName] String

The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.

When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.

The possible values can be found in the example.

  Default value
"text-color"
  Related links
3. [primaryFontFamily] String

A CSS font-family string that will be prepended to the default FDS 'content' font-family to render the Unicode symbols. (The default 'content' font-family is: Merriweather, Georgia, 'Times New Roman', Times, BravuraRegular, BravuraTextRegular, Code2000Regular, Code2001Regular, serif). Note: when the browser renders a character (of a Unicode symbol) it uses the first font in the font-family string that has a glyph for that character. So by prepending a custom font name, that font gets the first chance to provide a glyph and render the character.

This can be used to render certain unicode icons you use commonly in your publications with your own custom (publication) font. This is usually set when using a custom (publication) font for certain/all parts of your document in the editor (via the registerFontStack API and related fontStack CVK option).

Setting the same font-family for both the CVK content and the special characters UI ensures users do not get confused by having the same symbol render differently in different places.

4. [size] String

The size of symbol to render. The possible values are:

  • 's'

  • 'm'

  • 'l'


  Default value
"s"
Was this page helpful?