@hugeicons/svelte 1.0.3 → 1.1.1

package/CHANGELOG.md

@@ -1,6 +1,27 @@
 # @hugeicons/svelte
 
 
+## 1.1.1
+
+### Patch Changes
+
+- Added postinstall script to display welcome message and encourage community engagement
+- Included scripts directory in published package files
+
+## 1.1.0
+
+### Minor Changes
+
+- Added full SVG props support - component now accepts all standard SVG attributes and event handlers
+- Added support for accessibility attributes (aria-label, aria-hidden, role, etc.)
+- Added support for event handlers (onclick, onmouseenter, etc.)
+- Props interface now extends SVGAttributes<SVGSVGElement> for full TypeScript support
+- Added `prepare` script to auto-generate .svelte-kit/ directory after install
+
+### Deprecations
+
+- `className` prop is deprecated - use `class` instead (both work for backward compatibility)
+
 ## 1.0.3
 
 ### Patch Changes

package/dist/components/HugeiconsIcon.svelte

@@ -2,8 +2,9 @@
     import { onMount } from 'svelte';
     import type { IconSvgElement, HugeiconsProps } from '../create-hugeicon-singleton';
     import { createHugeiconSingleton } from '../create-hugeicon-singleton';
+    import type { SVGAttributes } from 'svelte/elements';
 
-    interface Props {
+    interface Props extends SVGAttributes<SVGSVGElement> {
         icon: IconSvgElement;
         altIcon?: IconSvgElement;
         size?: string | number;
@@ -11,6 +12,10 @@
         absoluteStrokeWidth?: boolean;
         color?: string;
         showAlt?: boolean;
+        class?: string;
+        /**
+         * @deprecated Use `class` prop instead. This prop will be removed in a future version.
+         */
         className?: string;
     }
 
@@ -22,9 +27,14 @@
         absoluteStrokeWidth = false,
         color = 'currentColor',
         showAlt = false,
-        className = ''
+        class: className = '',
+        className: legacyClassName = '',
+        ...restProps
     }: Props = $props();
 
+    // merge class and className for backward compatibility
+    const finalClassName = $derived(className || legacyClassName);
+
     let svgElement: SVGSVGElement;
     let hugeiconAction = $state<ReturnType<typeof createHugeiconSingleton>>();
     let cleanup = $state<{ update: (props: HugeiconsProps) => void; destroy: () => void }>();
@@ -36,7 +46,7 @@
         color,
         altIcon,
         showAlt,
-        class: className
+        class: finalClassName
     });
 
     onMount(() => {
@@ -57,14 +67,15 @@
     });
 </script>
 
-<svg 
+<svg
     bind:this={svgElement}
     xmlns="http://www.w3.org/2000/svg"
     width={size}
     height={size}
     viewBox="0 0 24 24"
     fill="none"
-    class={className}
+    class={finalClassName}
+    {...restProps}
 >
     <!-- SVG content will be managed by the action -->
 </svg>

package/dist/components/HugeiconsIcon.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { IconSvgElement } from '../create-hugeicon-singleton';
-interface Props {
+import type { SVGAttributes } from 'svelte/elements';
+interface Props extends SVGAttributes<SVGSVGElement> {
     icon: IconSvgElement;
     altIcon?: IconSvgElement;
     size?: string | number;
@@ -7,6 +8,10 @@ interface Props {
     absoluteStrokeWidth?: boolean;
     color?: string;
     showAlt?: boolean;
+    class?: string;
+    /**
+     * @deprecated Use `class` prop instead. This prop will be removed in a future version.
+     */
     className?: string;
 }
 declare const HugeiconsIcon: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hugeicons/svelte",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "Hugeicons Svelte Component Library https://hugeicons.com",
   "homepage": "https://hugeicons.com",
   "license": "MIT",
@@ -20,6 +20,7 @@
   "sideEffects": false,
   "files": [
     "dist",
+    "scripts",
     "CHANGELOG.md",
     "LICENSE.md",
     "PRO-LICENSE.md",
@@ -33,10 +34,12 @@
     "url": "https://github.com/hugeicons/svelte/issues"
   },
   "scripts": {
+    "prepare": "svelte-kit sync",                                                                                                                
     "build": "vite build && pnpm run package",
     "package": "svelte-kit sync && svelte-package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "prepublishOnly": "pnpm run build",
+    "postinstall": "node ./scripts/postinstall.cjs",
     "publish:beta": "pnpm build && npm publish --tag beta --no-git-checks",
     "publish:prod": "pnpm build && npm publish --no-git-checks"
   },

package/scripts/postinstall.cjs

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+
+const ANSI = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  cyan: '\x1b[36m',
+};
+
+const bold = (s) => `${ANSI.bold}${s}${ANSI.reset}`;
+const cyan = (s) => `${ANSI.cyan}${s}${ANSI.reset}`;
+
+const pkg = bold('@hugeicons/svelte');
+const repoUrl = cyan('https://github.com/hugeicons/svelte');
+
+
+const lines = [
+  '',
+  `Thanks for installing ${pkg}!`,
+  '',
+  'If you love Hugeicons, please consider starring ⭐ the repo:',
+  '',
+  repoUrl,
+  '',
+  'Happy building!',
+  '',
+];
+
+console.log(lines.join('\n'));
+