Shelstad Icons

A collection of open source SVG icons published as @shelstad/icons.

Install

npm install @shelstad/icons

Available Packs

• essentials - Core UI icons for common actions and navigation.
• vibes - A colorful extension pack for expressive interfaces.

Usage

CSS Classes (Recommended)

Import the CSS file and use class names directly in your HTML:

<!-- In your HTML head -->
<link rel="stylesheet" href="node_modules/@shelstad/icons/dist/shelstad-icons.css">

<!-- Or import in your JavaScript/CSS -->
<!-- @import '@shelstad/icons/dist/shelstad-icons.css'; -->

<!-- Use icons with class names -->
<i class="driw-icon-essentials-home"></i>
<span class="driw-icon-essentials-edit"></span>
<i class="driw-icon-vibes-bolt"></i>

Class naming convention: driw-icon-{pack}-{name}

• driw-icon-essentials-home - Home icon from essentials pack
• driw-icon-essentials-edit - Edit icon from essentials pack
• driw-icon-vibes-retro-pc - Retro PC icon from vibes pack

JavaScript/TypeScript

import icons, { essentials, vibes } from '@shelstad/icons';

// Named exports by pack
const homeIcon = essentials.home;
const retroPcIcon = vibes['retro-pc'];

// Default export contains all packs
const sameHomeIcon = icons.essentials.home;

Icon keys are generated from SVG filenames. Use bracket notation for names with hyphens.

Development

Adding New Icons

1. Add .svg files under src/icons/<pack>/ (for example src/icons/essentials/).
2. Run npm run generate-icons to regenerate src/index.ts.
3. Run npm run build to regenerate exports and compile TypeScript.

src/index.ts is auto-generated by scripts/generate-icons.js. Do not edit it manually.

Creating New Packs

1. Create a new folder under src/icons/.
2. Add .svg files to that folder.
3. Run npm run build.

The generator discovers SVG files recursively and creates pack-based exports automatically.

Scripts

• npm run generate-icons - Generate src/index.ts from all SVG files.
• npm run generate-css - Generate dist/shelstad-icons.css with icon classes.
• npm run build - Regenerate icons, CSS, and compile TypeScript.
• npm run prepublishOnly - Runs automatically before publishing.

Publishing

1. Update the version in package.json.
2. Run npm run build.
3. Run npm pack to validate package contents locally.
4. Run npm publish.

prepublishOnly runs npm run build, so publishing always uses fresh generated exports.