# struct-icon

Icon package for Struct PIM and partner developers – fast to ship, easy to integrate. Publish‑ready sprites, raw SVGs, and framework components (Angular/React/Vue/Svelte). Tailwind‑friendly sizing out of the box.

## Highlights

- **Source of truth:** hand‑tuned SVGs per size (`icons/{16,24,32,48,64}`).
- **Angular library:** per‑icon components + generic `<sp-icon>` registry.
- **Tailwind 3 plugin:** CSS mask utilities with data URIs (no brittle paths).
- **Raw SVG + sprite:** consume however you like.
- **Manifest:** machine‑readable icon metadata for docs/registries.
- **Changesets:** versioning & changelogs.

## Quickstart (scoped, private by default)

```bash
pnpm i
pnpm build
# Package is scoped: @structdk/struct-icon
# To publish publicly: set "private": false and `npm publish --access public`
# To publish privately in npm org: set "private": false and `npm publish --access restricted`
```

Angular usage (per‑icon component):

```ts
import { SpIconCalendar24Component } from '@structdk/struct-icon/angular';
```

```html
<sp-icon-calendar-24 class="w-6 h-6 text-neutral-900"></sp-icon-calendar-24>
```

Generic component:

```html
<sp-icon name="calendar" size="24" class="w-6 h-6 text-foreground"></sp-icon>
```

Tailwind utility:

```js
// tailwind.config.cjs
module.exports = {
  content: ['./src/**/*.{html,ts}'],
  plugins: [require('@structdk/struct-icon/tailwind')],
};
```

```html
<i class="icon icon-calendar-24 icon-24 text-foreground" aria-hidden="true"></i>
```

### Plain HTML sprite usage

```html
<svg class="w-16 h-16" stroke="currentColor">
  <use href="../sprite/64.svg#bookmark-delete-2"></use>
  <!-- Or package path: @structdk/struct-icon/sprite/64.svg#icon-name -->
  <!-- Color via currentColor; size via width/height or Tailwind -->
  <!-- 64/48/32/24/16 sizes available -->
</svg>
```

### Icon font (optional)

If you prefer an icon font, include the generated CSS and use classes. The font is built from the 24px SVG set.

```html
<link rel="stylesheet" href="@structdk/struct-icon/font/struct-icon.css" />

<i class="si si-bookmark-delete-2" aria-hidden="true"></i>
```

With bundlers:

```js
import '@structdk/struct-icon/font/struct-icon.css';
```

Notes:

- Class prefix is `si` and each icon gets `si-<icon-name>`.
- Color via CSS `color`; scale via `font-size`.

## Other frameworks

**React**

```tsx
import Calendar24 from '@structdk/struct-icon/react/24/calendar';
<Calendar24 className='w-6 h-6 text-foreground' aria-label='Calendar' />;
```

**Vue 3**

```vue
<script setup>
import Calendar24 from '@structdk/struct-icon/vue/24/calendar.vue';
</script>

<template>
  <Calendar24 class="w-6 h-6 text-foreground" aria-label="Calendar" />
</template>
```

**Svelte**

```svelte
<script>
  import Calendar24 from '@structdk/struct-icon/svelte/24/calendar.svelte';
</script>

<Calendar24 class="w-6 h-6 text-foreground" ariaLabel="Calendar" />
```

## Storybook preview

Install dev deps and run Storybook (uses HTML framework and renders from the manifest):

```bash
pnpm i
pnpm storybook
```

_(You may need to add a script:)_

```json
"storybook": "storybook dev -p 6006"
```