Icons

In applications managed by Project Forge, SVG icons are run through a pipeline to allow us to inline them in the templates in an efficient way. Each icon is only included in the markup once, and each reference instance can style them individually. See the “SVG” page in Project Forge for more details, along with a UI to add your own.

To reference an icon in an HTML template, helpers are provided. Once referenced, the icon will automatically be emitted at the end of the template. You’ll need to import views/components at the top of your template.

{%= components.SVGRef("star", 20, 20, "some_css_class", ps) %}

In TypeScript, you can do the following to generate an icon reference:

1
2
3
4

import {svgRef} from "./util"

// svgRef(key: string, size: number): string
someElement.innerHTML = svgRef("star", 20);