chore: fix ci release (#36)

Author: jmfrancois

package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@qlik/prettier-config": "^0.4.33",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "concurrently": "^9.2.1",
     "husky": "^9.1.7",
     "prettier": "^3.8.1",

packages/sprout-icons/CHANGELOG.md

@@ -0,0 +1,184 @@
+# @qlik/sprout-icons
+
+A comprehensive icon library for Qlik Sprout, available as React and Vue components.
+
+## Features
+
+- 📦 Framework agnostic SVG icons
+- ⚛️ React components with full TypeScript support
+- 🖖 Vue 3 components
+- 🎨 Customizable via SVG props
+- 📐 Multiple size options
+- 🎯 Tree-shakeable exports
+
+## Installation
+
+```bash
+npm install @qlik/sprout-icons
+```
+
+Or with pnpm:
+
+```bash
+pnpm add @qlik/sprout-icons
+```
+
+## Usage
+
+### React
+
+Import icons directly from the React package and use them as components:
+
+```tsx
+import { AddIcon, DeleteIcon, SearchIcon } from "@qlik/sprout-icons/react";
+
+export function MyComponent() {
+  return (
+    <div>
+      <AddIcon />
+      <DeleteIcon className="size-xl" />
+      <SearchIcon style={{ color: "red" }} />
+    </div>
+  );
+}
+```
+
+Icons accept any SVG element attributes, allowing you to customize:
+
+- **Styling**: `className`, `style`, inline CSS properties
+- **Dimensions**: `width`, `height`, or use Sprout size classes (`size-s`, `size-m`, `size-l`, etc.)
+- **Attributes**: `data-*`, `aria-*`, and other SVG attributes
+
+```tsx
+import { DownloadIcon } from "@qlik/sprout-icons/react";
+
+<DownloadIcon className="size-2xl text-primary" aria-label="Download file" />;
+```
+
+### Vue
+
+Import icons from the Vue package:
+
+```vue
+<script setup>
+import { AddIcon, DeleteIcon, SearchIcon } from "@qlik/sprout-icons/vue";
+</script>
+
+<template>
+  <div>
+    <add-icon />
+    <delete-icon class="size-xl" />
+    <search-icon :style="{ color: 'red' }" />
+  </div>
+</template>
+```
+
+Vue components support the same customization options as React components.
+
+## Available Icons
+
+Browse all available icons in the [Storybook documentation](./storybook). The Storybook playground includes:
+
+- A searchable gallery of all icons
+- Live size preview
+- Component code samples
+
+## Icon Naming Convention
+
+All icon component names follow the pattern: `{name}Icon`
+
+For example:
+
+- `AddIcon`
+- `DeleteIcon`
+- `ChevronDownIcon`
+- `AlertCircleIcon`
+
+## Size Options
+
+Use Sprout's size tokens via the `size-{size}` class or inline CSS:
+
+- `size-s` - Small
+- `size-m` - Medium
+- `size-l` - Large
+- `size-xl` - Extra Large
+- `size-2xl`, `size-3xl`, ... `size-7xl` - Extra sizes
+
+```tsx
+import { StarIcon } from "@qlik/sprout-icons/react";
+
+<StarIcon className="size-s" /> {/* Small */}
+<StarIcon className="size-xl" /> {/* Extra Large */}
+<StarIcon style={{ width: "32px", height: "32px" }} /> {/* Custom */}
+```
+
+## Styling Tips
+
+### With Tailwind CSS
+
+```tsx
+import { AlertIcon } from "@qlik/sprout-icons/react";
+
+<AlertIcon className="w-6 h-6 text-red-500" />;
+```
+
+### With CSS Modules
+
+```tsx
+import { CheckIcon } from "@qlik/sprout-icons/react";
+import styles from "./MyComponent.module.css";
+
+<CheckIcon className={styles.icon} />;
+```
+
+### Inline Styles
+
+```tsx
+import { InfoIcon } from "@qlik/sprout-icons/react";
+
+<InfoIcon style={{ width: "24px", height: "24px", color: "#0066cc" }} />;
+```
+
+## Accessibility
+
+Icons are semantic SVG elements. When using icons that convey meaning:
+
+```tsx
+import { DownloadIcon, WarningIcon } from "@qlik/sprout-icons/react";
+
+{
+  /* Decorative icon - no label needed */
+}
+<button>
+  <DownloadIcon className="size-m" aria-hidden="true" />
+</button>;
+
+{
+  /* Icon conveying meaning - add label */
+}
+<button aria-label="Download file">
+  <DownloadIcon className="size-m" />
+</button>;
+
+{
+  /* With text content - icon is decorative */
+}
+<span>
+  <WarningIcon className="size-m" aria-hidden="true" />
+  Important notice
+</span>;
+```
+
+## Contributing
+
+Icons are sourced from the `./svg` directory and automatically compiled to React and Vue components. To add or modify icons:
+
+1. Add or update SVG files in `./svg`
+2. Run `npm run build` to generate components
+3. Icons will be optimized and converted to framework-specific components
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for more details.
+
+## License
+
+MIT © Qlik