Use base Icon class in types

Currently every icon has a type defined like this:

import { SvelteComponentTyped } from "svelte";

export default class Icon extends SvelteComponentTyped<{
  size?: string | number
  width?: string | number
  height?: string | number
  color?: string
  viewBox?: string
  class?: string
  ariaHidden?: boolean
  title?: string | null
  desc?: string | null
}> {}

This feels very repetitive and makes type hinting more complicated as well. (ie in theory a user of this package cannot assume that every icon definition has the same type)

Could we not implement it such that it looks like this?

File: Icon.svelte.d.ts

import { SvelteComponentTyped } from "svelte";
export default class Icon extends SvelteComponentTyped<{
  size?: string | number
  width?: string | number
  height?: string | number
  color?: string
  viewBox?: string
  class?: string
  ariaHidden?: boolean
  title?: string | null
  desc?: string | null
}> {}

All other files: [IconName].svelte.d.ts

export { default as Icon } from "icon";

Currently to typehint that a Svelte component takes any icon as a prop I either need to copy the definition from above, which is the opposite of loosely coupled. Alternatively what I do now is this:

import type Icon from "svelte-material-icons/Delete.svelte";
export default interface ContextMenuAction {
  name: string,
  icon: typeof Icon
}

Which is still kind of ugly and depends on the fact that I assume all other icons will have a compatible type.

ramiroaisen / svelte-material-icons

Use base Icon class in types #16