use built in svelte component typing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phosphor-svelte",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "A clean and friendly icon family for Svelte",
   "svelte": "./lib/index.js",
   "main": "./lib/index.js",
@@ -33,6 +33,9 @@
     "url": "https://github.com/haruaki07/phosphor-svelte/issues"
   },
   "homepage": "https://phosphoricons.com",
+  "peerDependencies": {
+    "svelte": ">=3"
+  },
   "devDependencies": {
     "fs-extra": "^9.0.1",
     "html-minifier-terser": "^5.1.1",

src/lib/shared.d.ts

@@ -1,28 +1,40 @@
-type LocalSvelteProps = {
-  children?: any;
-  class?: string;
-  [key: string]: any;
-};
+import { SvelteComponentTyped } from "svelte";
 
-/**
- * Local svelte class for adding typescript definitions for svelte components
- *
- */
-export declare class SvelteComponent<Props = {}> {
-  constructor(props: Props & LocalSvelteProps);
-  $on<T = any>(
-    event: string,
-    callback: (event: CustomEvent<T>) => void
-  ): () => void;
-  $$prop_def: Props & LocalSvelteProps;
-  $$slot_def: {
-    default?: {};
-  };
-  render: undefined;
-  context: undefined;
-  setState: undefined;
-  forceUpdate: undefined;
-  props: undefined;
-  state: undefined;
-  refs: undefined;
+declare type Weight =
+  | "bold"
+  | "duotone"
+  | "fill"
+  | "light"
+  | "thin"
+  | "regular";
+
+export interface IconProps {
+  /**
+   * @type {string}
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * @type {number|string}
+   * @default "1em"
+   */
+  size?: number | string;
+  /**
+   * @type {string}
+   * @default "regular"
+   */
+  weight?: Weight;
+  /**
+   * @type {boolean}
+   * @default false
+   */
+  mirrored?: boolean;
 }
+
+export class SvelteComponent<Props = {}> extends SvelteComponentTyped<
+  Props,
+  any,
+  {
+    default?: {};
+  }
+> {}

src/template.js

@@ -19,7 +19,8 @@ function componentTemplate(types) {
   height={size}
   fill={color}
   transform={mirrored ? "scale(-1, 1)" : undefined} 
-  viewBox="0 0 256 256">
+  viewBox="0 0 256 256"
+  {...$$restProps}>
   <slot/>
   <rect width="256" height="256" fill="none" />
 ${types
@@ -39,33 +40,10 @@ ${types
 }
 
 function definitionsTemplate(icons) {
-  return `import { SvelteComponent } from "./shared";
-
-declare type Weight =
-  | "bold"
-  | "duotone"
-  | "fill"
-  | "light"
-  | "thin"
-  | "regular";
-
-export interface IconProps {
-  /** @type {string} [color="currentColor"] */
-  color?: string;
-  /** @type {number|string} [size="1em"] */
-  size?: number | string;
-  /** @type {string} [id="regular"] */
-  weight?: Weight;
-  /** @type {boolean} [mirrored=false] */
-  mirrored?: boolean;
-}
-
-type IconContextValue = Required<
-  Pick<IconProps, "color" | "size" | "weight" | "mirrored">
->;
+  return `import { SvelteComponent, IconProps } from "./shared";
 
 export interface IconContextProps {
-  values: IconContextValue;
+  values: Required<IconProps>;
 }
 
 export declare class IconContext extends SvelteComponent<IconContextProps> {}

yarn.lock

@@ -250,9 +250,9 @@ strip-ansi@^6.0.0:
     ansi-regex "^5.0.0"
 
 svelte@^3.0.0:
-  version "3.29.7"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.29.7.tgz#e254eb2d0d609ce0fd60f052d444ac4a66d90f7d"
-  integrity sha512-rx0g311kBODvEWUU01DFBUl3MJuJven04bvTVFUG/w0On/wuj0PajQY/QlXcJndFxG+W1s8iXKaB418tdHWc3A==
+  version "3.37.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
+  integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA==
 
 terser@^4.6.3:
   version "4.8.0"