@la-moore/scarab-icons v1.0.0
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.
npm install @la-moore/scarab-icons
Table of Contents
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
andscarab-icons.min.js
are located in thelib
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.
2 years ago