@scarlab-icons/lib NPM

Scarlab Icons

Scarlab Icons is a collection of more than 2800 simply, beautiful and open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

scarlab-icons

Quick Start

Start with this CodePen Template to begin prototyping with Scarlab Icons in the browser.

Or copy and paste the following code snippet into a blank html file.

<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/@scarlab-icons/lib"></script>
<body>

<!-- example icon -->
<i data-scarlab="circle"></i>

<script>
  ScarlabIcons.replace()
</script>
</body>
</html>

Usage

At its core, Scarlab Icons is a collection of SVG files. This means that you can use Scarlab Icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options

The following are additional ways you can use Scarlab Icons.

Client-side JavaScript

1. Include

Include scarlab-icons.js or scarlab-icons.min.js with a <script> tag:

<script src="path/to/dist/scarlab-icons.js"></script>

Note: scarlab-icons.js and scarlab-icons.min.js are located in the dist directory of the npm package. Or load the script from a CDN provider:

<!-- choose one -->
<script src="https://unpkg.com/@scarlab-icons/lib"></script>
<script src="https://cdn.jsdelivr.net/npm/@scarlab-icons/lib"></script>

After including the script, scarlab will be available as a global variable.

2. Use

To use an icon on your page, add a data-scarlab attribute with the icon name to an element:

<i data-scarlab="circle"></i>

Or add a src attribute with the ~scarlab/ root and icon name to an image:

<img src="~scarlab/circle" alt="" />

See the complete list of icons at scarlab-icons.

3. Replace

Call the ScarlabIcons.replace() method:

<script>
  ScarlabIcons.replace()
</script>

All elements that have a data-scarlab or [src^="~scarlab"] attribute will be replaced with SVG markup corresponding.

Figma

Scarlab Icons is available as a Figma component library. To use the components, log in to your Figma account and duplicate the file to your drafts.

Or you can use Scarlab Icons as a Figma plugin

License

Scarlab Icons is licensed under the MIT License.

@scarlab-icons/icons @scarlab-icons/transformer

@everything-registry/sub-chunk-811 @zalastax/nolb-_sca @infinitebrahmanuniverse/nolb-_sca

2.0.0

1 year ago

1.0.4

2 years ago

1.0.3

2 years ago