Garden SVG Icons

> 🌱 Garden is the design system by Zendesk

This repo packages a collection of SVG icons used throughout Zendesk products. All source icons are optimized for size + readability.

Installation

npm install @zendeskgarden/svg-icons

The package contains a src folder with individual SVG icons along with a combined "spritemap" dist of SVG symbols.

Usage

Garden SVGs come in two flavors – monochrome and two-tone. The primary fill/stroke will always be specified as currentColor. This means CSS text color style will cascade to the icon. Two-tone icons can receive a secondary color via the fill style property. In the following example, the top arrow of the "sort" icon will be blue; the bottom arrow will be red (see spritemap below for more re: SVG use with an external source).

<svg style="color: blue; fill: red;">
  
</svg>

Once installed, SVG icons may be accessed in a variety of ways. The following list demonstrates several possibilities, however usage will vary depending on the particular needs of your application.

• JavaScript

  In the following snippet, a source SVG is loaded just like any other JS module. SVGs loaded in this manner will benefit from the same caching as any other JS asset.

  import ZendeskIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
  
  class ZendeskButton extends React.Component {
    render() {
      return (
        <button>
          
        </button>
      );
    }
  }
  

• PostCSS

  Several Garden CSS Components utilize the postcss-inline-svg plugin to compile SVGs into CSS.

  1. Configure the plugin:

  "postcss-inline-svg": {
    "path": "node_modules/@zendeskgarden/svg-icons/src"
  }
  

  2. Load an SVG in your source CSS:

  .icon {
    background-image: svg-load('16/remove.svg', color: #007fab);
  }
  

  3. Build via postcss to inline the SVG into your destination CSS as a data URI:

  .icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='https://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' color='%23007FAB' ...");
  }
  

• Spritemap

  The main distribution from the npm package is an SVG "spritemap" containing all source icons as `