slds-icon-font

0.0.2 • Public • Published

SLDS-icon-font

The Salesforce Lightning Design System (SLDS Icons), created by Salesforce, currently offers a very robust and flexible SVG icon system. However, there may be situations where an additional icon font set would enhance the design system.

Well, here it is.

This icon font set is based on the SLDS SVG set (version 0.10.1) and generated using Icomoon.

Basic Usage

add prefix .sldsicon- then follow this naming scheme: [categoryName]-[fontName].

Example: <i class="sldsicon-utility-add"></i>.

Caveats

The only caveat is with the SLDS doctype icons which use two layers. The markup to render those looks like this:

<span class="sldsicon-doctype-audio">
    <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
</span>

Check out a demo.

Getting Started

There are a couple of options here:

  • Clone the repo: git clone https://github.com/CodeScience/SLDS-icon-font.git
  • Install with npm: npm install

Contributing

  1. npm install
  2. gulp
  3. gulp serve
  4. Make your local edits and submit a pull request.

Attribution

This icon font is being released as a redistribution of the original set of icons created by Salesforce for the Salesforce Lightning Design System. As a redistribution of the original work in a new format, this work—provided free of charge by CodeScience—carries with it the same CreativeCommons-Attribution-NoDerivatives license as the original work.

Package Sidebar

Install

npm i slds-icon-font

Weekly Downloads

2

Version

0.0.2

License

MIT

Last publish

Collaborators

  • mathmatticus