SendGrid Icon Library

Icon library for use across SendGrid products. This package is still a work in progress, and will eventually be used to replace the current <i class="sg-icon> elements. This will also be used in a future React icon component.

Installation

npm install @sendgrid/design-icons --save

Usage

The SendGrid icon library can be used as a project dependency or imported into a project by including a javascript file.

Note: This project contains no styles. Those will need to be added on a per project basis.

Dependency Import

If using the projet as a dependency, install the project via yarn or npm using the installation instructions above. Once installed, add the SVG sprite to your project.

Basic html example:

<div style="display: none;>
  <?xml version="1.0" encoding="utf-8"?>
    <svg>
      ...
    </svg>
</div>

Once the sprite is loaded you can use an SVG icon using the following:

<svg>
  <use xlink:href="#ICON_NAME" />
</svg>

Javascript Import

If using the project as a dependency, add the following code snippet to your project:

<script src="https://uiux.s3.amazonaws.com/style-guide/js/design-icons.min.js"></script>

Once the javascriopt is loaded you can use an SVG icon using the following:

<svg>
  <use xlink:href="#ICON_NAME" />
</svg>