multiInstanceSVG


This creates multiple SVGs from an array of strings. In instances, these can be separately styled. They can be stacked on top of each other as layers in common if they have an identical path.

In the pug template

- const svgs = helpers.multiInstanceSVG('cover',['longer string', 'ABC']) for svg, i in svgs  div(class=`block__svg`)!= svgs[i]

Where cover is the template name in the metrics. The array can be as long as required, bearing in mind the array length of instances needs to match this (otherwise an error will be thrown)

splitString() and 2 name-parts over a spread

By specifying the letter index at which to split the text if under a certain maximum length (and otherwise, a static split ratio) the name can be split over 2 spreads. You can keep the font size consistent with the matchFontSize flag.

In 2 different pug templates

- const svg = helpers.multiInstanceSVG('cover',[helpers.splitString(data.name, 5, 0.5).left, helpers.splitString(data.name, 5, 0.5).right]) div(class=`block__svg`)!= svg[0] - const svg = helpers.multiInstanceSVG('cover',[helpers.splitString(data.name, 5, 0.5).left, helpers.splitString(data.name, 5, 0.5).right]) div(class=`block__svg`)!= svg[1]

matchFontSize

Optional. If the font sizes need to match according to the smallest size for a consistent layout, add matchFontSize: true to the first metrics item / the common properties.

Example 3

Including the matchFontSize flag.

Example 4

No matchFontSize flag.