NASP Design Kit

A modern, universal design and icon system for the NASP Asset Studio ecosystem and beyond.

The all-in-one design and icon toolkit for web, apps, and creative projects

🚀 Live Demo • 💡 Features • 📦 Installation • 🛠 Usage • 📜 NaspScript Language • 📂 Directory Structure • 📚 Documentation • 📝 Changelog

✨ Features

• Comprehensive Icon Library: 100+ SVG icons, organized by category, fully customizable.
• Universal Integration: Use in HTML, JavaScript, React, Node, and with the new NaspScript language.
• Modern Design: Consistent, accessible, and visually appealing.
• No Dependencies: Pure HTML/CSS/JS, works anywhere.
• Live Preview & Copy: Instantly preview and copy SVG or code snippets.
• Easy Theming: CSS variables for quick customization.
• Open Source: MIT licensed, contributions welcome!
• Named SVG/React Exports: Import icons as SVG strings or React components.
• Advanced DSL: NaspScript with variables, blocks, custom commands, diagnostics, autocomplete, and highlighting.
• Rich Helpers: Utilities for color, string, array, object, math, DOM, and DSL extension.

📦 Installation

Install via npm (Recommended)

npm install @nasp/icons

• Use this if you want to use NASP Design Kit in your own project (React, Node, JS, etc).

Clone or Download (for development/demo)

git clone https://github.com/nanaimo2013/NASP-Design-Kit.git
cd NASP-Design-Kit/NASP-design-kit
npm install

Or download and extract the ZIP.

Build (for npm usage or local development)

npm run prepare
node build-generate-icons.js

🛠 Usage

Named SVG Exports

import { Search, User } from 'nasp-icons/icons';
document.body.innerHTML = Search;

Named React Components

import { SearchIcon, UserIcon } from 'nasp-icons/icons/react';
<SearchIcon size={32} color="#5865f2" className="my-icon" />

Dynamic API

import { NASPIcon } from 'nasp-icons';
NASPIcon.get('Search', { size: 32, color: '#5865f2' });
NASPIcon.listIcons();

NaspScript DSL

let mainColor = #5865f2
icon Search size 32 color mainColor
repeat 3 { icon Star size 24 color yellow }
if showHeart { icon Heart size 40 color red }

Diagnostics, Autocomplete, Highlighting

const { html, diagnostics } = NaspScript.parseWithDiagnostics(script, { renderIcon });
const suggestions = NaspScript.suggest('sea', { icons: NASPIcon.listIcons() });
const highlighted = NaspScript.highlight(script);

📚 Documentation

• Getting Started
• API Reference
• NaspScript Language Guide
• Examples
• Helpers
• Changelog

📂 Directory Structure

NASP-design-kit/
├── dist/              # Build output (after npm run prepare)
├── docs/
│   ├── api/           # API reference (modular)
│   ├── NaspScript.md  # DSL guide
│   ├── examples.md    # Usage examples
│   ├── getting-started.md
│   └── helpers.md     # Helper utilities
├── src/
│   ├── helpers/       # Utility modules
│   ├── icons/         # Named SVG/React exports (auto-generated)
│   ├── iconLibrary.js # NASPIcon (universal icon loader)
│   ├── index.js       # Main npm/ESM entry point
│   └── naspscript.js  # NaspScript parser
├── build-generate-icons.js # Icon export generator
├── icons.json         # All SVG icon data
├── index.html         # Main HTML demo
├── package.json
├── README.md
└── script.js          # Browser bundle (UI + icon loader)

📦 Publishing with Docs

To include your docs folder in your npm package:

• Add this to your package.json:

  "files": [
    "dist/",
    "src/",
    "icons.json",
    "docs/",
    "README.md",
    "CHANGELOG.md",
    "LICENSE"
  ]

• Or use an .npmignore to exclude only what you don't want.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Please open an issue or PR on GitHub.

📜 License

MIT License. See LICENSE.

Report Bug • Request Feature

© 2025 NASP Asset Studio. All Rights Reserved.