UI Components / Icons

Rendering An Icon

SVG icons use the combination of <svg> and <use> elements. The icon is dictated by the name after the hash in the <use> element's href. You can view the options in the icon directory.

It's imperative that you include the viewBox attribute as shown below.

<svg class="icon" viewBox="0 0 256 256">
  <use xlink:href="/assets/svgs/icons.svg#check-circle"></use>
</svg>

Icon Sprite File

Notice in the usage instructions above the icon source file is referenced as /assets/svgs/icons.svg. It's ideal to have this file local to your project, as there are limitations to working with the <use> element while referencing an external file.

There are instructions on using Angular CLI to load assets into your project here.

If you'd like to access the assets externally, they are uploaded to S3 with each release. They are named with their version number. For example, the icon sprite file for 0.14.0 is available at https://d1tmclqz61gqwd.cloudfront.net/images/icons-0.14.0.svg.

Generating New Icons

New icons are generated using the source Sketch file. This process is documented in src/assets/svgs/README.md in the crds-styles project.