Installation

npm install @archway-kit/icons

Usage

Import css file and use archway-icons as a font using classes.

<link rel="stylesheet" type="text/css" href="@archway-kit/icons/dist/archway-icons.css" />

<i class="archway-anchor" />

You can also import enums / types to access all the icons' names and IDs in your TypeScript / JavaScript files:

import { ArchwayIcons, ArchwayIconsClasses } from '@archway-kit/icons';
import type { ArchwayIconsKey, ArchwayIconsId, ArchwayIconsClass } from '@archway-kit/icons';

console.log(ArchwayIcons.ArrowDownCircle);
// > "arrow-down-circle"

console.log(ArchwayIconsClasses.ArrowDownCircle);
// > "archway-arrow-down-circle"

Development

To add new icons, put the SVG sources in the ./src dir and run:

npm run optimize

That script will optimize SVGs and transform strokes into resizable paths.

You can also run npm run debug to generate artifacts (as well as html and svg previews) in the debug mode in the ./build dir, so you can double-check the results.

To build artifacts for production, run npm run build.