Skip to Main Content

Designs launchingafterJuly 14, 2021, please referencethe latest release of Spark.

Installing Spark

Getting Started with Spark Icons

Spark makes it possible for you to include SVG icons right into your project using two basic methods, Compile Time and Run Time.

For more information on working with SVG icons, check out this guide.

Compile Time

The first method includes building SVG icons right into your site at compile time. This method involves downloading the latest SVG, from the correct CDN URL, as part of your build process. That way, you’ll be able to embed the SVG directly into your compiled site.

Pros:

  • The main advantages of this method are performance and reliability. The user avoids waiting for the CDN to serve the SVG, making this method ideal for production environments where load times are critical.
  • Gives development teams more control over which SVGs are included in the site. Since the SVG file is downloaded during development, developers can review the SVG file before publishing and include only the versions they’ve tested.

Cons:

  • However, this method does require more development work at the beginning for building and maintaining the connection to the CDN over the long term.

You can find additional examples by using these helpful Gulp and Gatsby files.

Note: If you use this method you must not put the SVG file in your source control repository. The SVG file should only be hosted on the official CDN.

Run Time

The second method includes dynamically loading the SVG icons at run time. This method involves adding the full SVG and entire icon set, as a separate HTTP request, while the page loads using an AJAX request. That way, the full SVG and icons are automatically embedded at the top of your page making them available to use within the body.

Pros:

  • The primary advantage of this method is that the least amount of setup and additional tooling needed. It’s ideal for quick, non-production projects.

Cons:

  • This method mainly lacks performance. You can easily end up downloading the icons more than once on subsequent page loads and having to wait for multiple downloads to complete.
  • Icons are not visible while you’re still waiting for the download to complete separate from the main site download.
  • If the SVG file within the CDN changes, you’ll see the update immediately without a chance for review.

You can find additional examples by using these environment Angular and React component files.

Troubleshooting

  • Make sure the icon SVG is included at the top of your page, directly after the <body> element.
  • To use your own icon set with the Spark components, your icons must have the exact same names as the icons listed here.

Internal users can access a directory of our CDN resources by clicking this link.