Images and icons in spark navigation

At the risk of violating declarative regulations, here’s a workaround for tailoring icons in Spark. The icons that Skuid leverages are loaded into SVG (Scalable Vector Graphics) libraries that sit at the top of the page.

Skuid is smart enough to only load the libraries that are referenced in your page to keep things efficient, but if you reference an icon from ink, font-awesome, etc, that entire library is loaded and is thus available on the page.

SVG allows for the tag, which basically replicates the vectors defined in the SVG library, but you can tailor your own definitions to style the SVG. Additionally, since the resource is loaded with the page and then re-used, it’s Waaaaaay faster than loading a custom image. Here’s how we got this to work in Spark.

• Add an element like a button that uses an icon from the library that you are interested in. This is to ensure the SVG library loads. If needed, there are several ways in Spark to suppress the display of that element.
• Add a text element to your page.
• In the text element add html that looks something like:

And there you have a custom styled icon that doesn’t have the load lag time that you see with custom images. Keep in mind that this approach requires that you look at the rendered HTML to pinpoint the Id of the icon you’re after. The syntax in the page builder is different so you can’t paste that in your html.