zendeskgardenGarden SVG Icons 
:seedling: 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-iconsThe 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;">
<use xlink:href="index.svg#zd-svg-icon-12-sort-fill">
</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> <ZendeskIcon /> </button> ); } }PostCSS
Several Garden CSS Components utilize the postcss-inline-svg plugin to compile SVGs into CSS.
- Configure the plugin:
"postcss-inline-svg": { "path": "node_modules/@zendeskgarden/svg-icons/src" }- Load an SVG in your source CSS:
.icon { background-image: svg-load('16/remove.svg', color: #007fab); }- 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='http://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
<symbol>elements. Once that file is hosted, any icon may be externally referenced using its unique ID.<svg> <use xlink:href="/path/to/index.svg#zd-svg-icon-16-chevron-down-stroke"> </svg>By referencing the external resource, you take advantage of the browser cache. Subsequent
<use xlink:href>will leverage the cached SVG spritemap. Note you'll need to use a polyfill like svg4everybody to compensate for browsers (IE9-11) that can't handle external SVG content.Build pipeline
There are numerous plugins for handling SVG files via an asset bundler (webpack, gulp, grunt, etc.). Search npm and select one that fits your needs.
Contribution
Thanks for your interest in Garden! Community involvement helps make our design system fresh and tasty for everyone.
Got issues with what you find here? Please feel free to create an issue.
If you'd like to take a crack at making some changes, please follow our contributing documentation for details needed to submit a PR.
Community behavior is benevolently ruled by a code of conduct. Please participate accordingly.
License
Copyright 2021 Zendesk
Licensed under the Apache License, Version 2.0