@nasp/icons/docs/examples.md

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

# NASP Design Kit Examples

## HTML Example

```html
<!-- Use a custom icon tag in your HTML -->
<nasp-icon name="Search" size="32" color="#5865f2"></nasp-icon>
<script src="script.js"></script>
```

## JavaScript Example (Browser)

```js
// Initialize the icon library and add an icon to the page
await NASPIconLibrary.init();
document.body.innerHTML += NASPIconLibrary.createIcon('User', { size: 24, color: '#2dc770' });
```

## React Example

```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 }} />;
}

// Usage:
// <NaspIcon name="Search" size={32} color="#5865f2" />
```

## Node/ESM Example

```js
import { NASPIconLibrary, NaspScript } from '@nasp/icons';
import fetch from 'node-fetch'; // If using Node, you may need a fetch polyfill

globalThis.fetch = fetch; // Polyfill fetch if needed

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

const script = `icon "Search" size 32 color #5865f2`;
const html = NaspScript.parse(script, { renderIcon: NASPIconLibrary.createIcon });
```

## NaspScript Example (Browser or Node)

```nasp
icon "Search" size 32 color #5865f2
row {
  icon "User" size 24
  icon "Settings" size 24
}
```

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

## Advanced NaspScript Example

```nasp
// You can mix and match rows and single icons
ow {
  icon "Folder" size 20 color #888
  icon "File" size 20 color #333
}
icon "Star" size 40 color #FFD700
```

---

For more, see the [Getting Started guide](getting-started.md) and [API Reference](api.md).