@nasp/icons/README.md

Universal design and icon system for NASP Asset Studio, with NaspScript language support.

# NASP Design Kit

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

<div align="center">

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

[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](LICENSE)
[![NaspScript](https://img.shields.io/badge/NaspScript-DSL-blueviolet?style=for-the-badge)](docs/NaspScript.md)
[![Version](https://img.shields.io/badge/VERSION-1.0.0-blue.svg?style=for-the-badge)](https://github.com/Nanaimo2013/NASP-Design-Kit/releases)

[🚀 Live Demo](#) • [💡 Features](#features) • [📦 Installation](#installation) • [🛠 Usage](#usage) • [📜 NaspScript Language](#naspscript-language) • [📂 Directory Structure](#directory-structure) • [📚 Documentation](#documentation) • [📝 Changelog](CHANGELOG.md)

</div>

---

## ✨ 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)
```bash
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)
```bash
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)
```bash
npm run prepare
node build-generate-icons.js
```

---

## 🛠 Usage

### Named SVG Exports
```js
import { Search, User } from 'nasp-icons/icons';
document.body.innerHTML = Search;
```

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

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

### NaspScript DSL
```nasp
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
```js
const { html, diagnostics } = NaspScript.parseWithDiagnostics(script, { renderIcon });
const suggestions = NaspScript.suggest('sea', { icons: NASPIcon.listIcons() });
const highlighted = NaspScript.highlight(script);
```

---

## 📚 Documentation
- [Getting Started](docs/getting-started.md)
- [API Reference](docs/api/index.md)
- [NaspScript Language Guide](docs/NaspScript.md)
- [Examples](docs/examples.md)
- [Helpers](docs/helpers.md)
- [Changelog](CHANGELOG.md)

---

## 📂 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`:
  ```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](https://github.com/nanaimo2013/NASP-Design-Kit).

---

## 📜 License

MIT License. See [LICENSE](LICENSE).

<div align="center">

**[Report Bug](https://github.com/nanaimo2013/NASP-Design-Kit/issues)** • **[Request Feature](https://github.com/nanaimo2013/NASP-Design-Kit/issues)**

© 2025 NASP Asset Studio. All Rights Reserved.

</div>