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)

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):

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

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

Generic component:

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

Tailwind utility:

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

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

Plain HTML sprite usage

<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.

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

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

With bundlers:

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

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

Vue 3

<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

<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):

pnpm i
pnpm storybook

(You may need to add a script:)

"storybook": "storybook dev -p 6006"