@suitejs/icons
v0.4.0
Published
svg icon sets for react
Downloads
19
Maintainers
Readme
icons
A unified collection of SVG icons built for React.
Installation
$ npm install --save @suitejs/icons
Usage
Icon sets are located in name-spaced directories. You can use named imports (if your toolchain supports tree-shaking or dead-code elimination), or import icon modules individually:
import { SpFacebook } from '@suitejs/icons/sp';
or
import SpFacebook from '@suitejs/icons/sp/Facebook';
ℹ️ You can find all import paths in the docs.
If you are using CommonJS modules, you will find them under the /lib
directory:
var SpFacebook = require('@suitejs/icons/lib/sp').SpFacebook;
If your environment supports ES6 destructuring syntax:
var { SpFacebook, SpYouTube } = require('@suitejs/icons/lib/sp');
You can also access modules individually:
var SpYouTube = require('@suitejs/icons/lib/sp/YouTube');
Configuration
icons
uses icon-base
to set common settings. You can configure global settings for all your icons via React's context API. You can roll your own 'provider', or use the IconProvider
from the icon-base
package.
Global settings can be overriden inline:
<CheckBox fill="#000000" size="0.75em" aria-hidden={false} />
To see what defaults are applied, refer to the icon-base
documentation.
Sets
| Name | Location |
| --- | --- |
| Social Platforms | @suitejs/icons/sp
|
| Material Design | @suitejs/icons/md
|
| Developer | @suitejs/icons/dv
Goals
The goal for this library, is to provide commonly used icons in a uniform format. You should be free to mix and match icons from different sets and expect them to behave/render in a consistent manner.
All icons are set up on a 48 × 48 grid. They have all been scaled to achieve as consistent a weighting across the board as possible.