@nasp/icons/docs/getting-started.md

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

# Getting Started with NASP Design Kit

Welcome to the NASP Design Kit! This guide will help you set up and use the kit in your projects.

## 1. Installation

Clone the repository or download the ZIP:

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

## 2. Build (for npm/ESM usage)

```bash
npm run prepare
```

## 3. Using in the Browser (HTML Demo)

Open `index.html` in your browser, or run a local server:

```bash
python -m http.server
# Visit http://localhost:8000
```

## 4. Using Icons in HTML

```html
<nasp-icon name="Search" size="32" color="#5865f2"></nasp-icon>
<script src="script.js"></script>
```

## 5. Using in JavaScript (Browser)

```js
await NASPIconLibrary.init();
document.body.innerHTML += NASPIconLibrary.createIcon('Search', { size: 32, color: '#5865f2' });
```

## 6. Using in React

```jsx
import { NASPIconLibrary } from '@nasp/icons';

function NaspIcon({ name, size, color }) {
  const [svg, setSvg] = React.useState('');
  React.useEffect(() => {
    NASPIconLibrary.init().then(() => {
      setSvg(NASPIconLibrary.createIcon(name, { size, color }));
    });
  }, [name, size, color]);
  return <span dangerouslySetInnerHTML={{ __html: svg }} />;
}
```

## 7. Using in Node/ESM

```js
import { NASPIconLibrary, NaspScript } from '@nasp/icons';
import fetch from 'node-fetch'; // Polyfill fetch if needed

globalThis.fetch = fetch;
await NASPIconLibrary.init('path/to/icons.json');
const svg = NASPIconLibrary.createIcon('Search', { size: 32, color: '#5865f2' });
```

## 8. Using NaspScript

```js
const script = `
icon "Search" size 32 color #5865f2
row {
  icon "User" size 24
  icon "Settings" size 24
}`;
const html = NaspScript.parse(script, { renderIcon: NASPIconLibrary.createIcon });
document.getElementById('output').innerHTML = html;
```

---

## Troubleshooting
- **CORS errors:** Use a local server (e.g., `python -m http.server`) instead of opening HTML files directly.
- **fetch not defined (Node):** Use a fetch polyfill like `node-fetch` and assign it to `globalThis.fetch`.
- **Icons not showing:** Make sure `icons.json` is in the correct path and accessible.

For more, see the [NaspScript Language Guide](NaspScript.md) and [API Reference](api.md).