Skip to Main Content

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.

Advantages to Compile Time

  • 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.

Disadvantages to Compile Time

  • 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 referencing these Gulp and Gatsby files to get you started.

Note: Do not download and place the SVG file in your source control repository. To stay up-to-date with the official icons, use the hosted CDN. Additionally, you may need polyfills for IE11 compatibility.

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.

Advantages to Run Time

  • 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.

Disadvantages to Run Time

  • 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.