@la-moore/scarab-icons NPM

Scarab Icons

What is Scarab Icons?

Scarab 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.

scarab-icons

npm install @la-moore/scarab-icons

Quick Start
Usage
License

Quick Start

Start with this CodePen Template to begin prototyping with Scarab 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://cdn.jsdelivr.net/gh/la-moore/scarab-icons/lib/scarab-icons.min.js"></script>
<body>

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

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

Usage

At its core, Scarab Icons is a collection of SVG files. This means that you can use Scarab 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 Scarab Icons.

Client-side JavaScript

1. Include

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

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

Note: scarab-icons.js and scarab-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://cdn.jsdelivr.net/gh/la-moore/scarab-icons/lib/scarab-icons.min.js"></script>

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

2. Use

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

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

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

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

See the complete list of icons at scarab-icons.

3. Replace

Call the scarab.replace() method:

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

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

Frameworks

1. Friendly Frameworks

2. Include

import { SquareOutlineIcon, CircleSolidIcon, ... } from 'scarab-icons/[framework]'
import { SquareIcon, CircleIcon, ... } from 'scarab-icons/[framework]/outline'
import CircleIcon from 'scarab-icons/[framework]/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/scarab-[outline|solid]-sprite.svg#[icon-name]"/>
</svg>

Figma

Scarab 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.

License

Scarab Icons is licensed under the MIT License.

@rollup/plugin-json @rollup/plugin-node-resolve @vue/compiler-sfc cheerio html-minifier jsdom querystring rollup-plugin-babel-minify

@zalastax/nolb-_la-

1.0.0

4 years ago

@la-moore/scarab-icons v1.0.0