@scarlab/icons NPM

Scarlab Icons

What is Scarlab Icons?

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

scarlab-icons

npm install @scarlab/icons

Quick Start
Usage
License

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"></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 lib directory of the npm package. Or load the script from a CDN provider:

<!-- choose one -->
<script src="https://unpkg.com/@scarlab/icons"></script>
<script src="https://cdn.jsdelivr.net/npm/@scarlab/icons/index/min.js"></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.

Frameworks

1. Friendly Frameworks

npm install @scarlab/icons-vue
npm install @scarlab/icons-react
npm install @scarlab/icons-svelte

2. Include

import { SquareOutlineIcon, CircleSolidIcon, ... } from '@scarlab/icons-vue'
import { SquareIcon, CircleIcon, ... } from '@scarlab/icons-vue/outline'
import CircleIcon from '@scarlab/icons-vue/outline/circle-icon'

3. Use

<circle-icon></circle-icon>

SVG Sprite

Include an icon on your page with the following markup:

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="path/to/scarlab/icons/sprite-[outline|solid].svg#[icon-name]"/>
</svg>