unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.
https://www.npmjs.com/package/unplugin-icons
MIT License
3.66k stars 131 forks source link

Svelte 4 support #295

Closed GauBen closed 10 months ago

GauBen commented 12 months ago

Describe the bug

types/svelte.d.ts uses deprecated types. I don't know if this library intends to keep supporting Svelte 3, but the type declaration should now be written like this:

declare module '~icons/*' {
  import { SvelteComponent } from 'svelte'
  import type { SVGAttributes } from 'svelte/elements'
  export default class extends SvelteComponent<SVGAttributes<EventTarget>> {}
}

Here is how it currently looks

image

I can open a merge request with these changes if breaking changes are accepted

Reproduction

/

System Info

/

Used Package Manager

npm

Validations

GauBen commented 11 months ago

Slight update to the type declaration:

declare module '~icons/*' {
  import { SvelteComponent } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'
  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
}

Ping @benmccann, sorry to disturb you but I saw you contributed to this repo, you might have some tips to do this the right way

userquin commented 11 months ago

@GauBen I've sent this to help in Svelte Discord Server: https://discord.com/channels/457912077277855764/1131342890526851072/1131342890526851072

userquin commented 11 months ago

We're trying to add Svelte 4 support in unplugin-icons, how can we replace the SvelteComponentDev type?

Svelte 3:


// svelte.d.ts => svelte3.d.ts
declare module 'virtual:icons/*' {
export { SvelteComponentDev as default } from 'svelte/internal'
}

declare module '~icons/*' { import { SvelteComponentTyped } from 'svelte' export default class extends SvelteComponentTyped<svelte.JSX.IntrinsicElements['svg']> {} }


> I'm using this one for Svelte 4:
```ts
// new svelte.d.ts
declare module 'virtual:icons/*' {
  import { SvelteComponent } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'
  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
}

declare module '~icons/*' {
  import { SvelteComponent } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'
  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
}
leerobert commented 10 months ago

Lot of //@ts-ignore waiting for svelte4 support for unplugin-icons in the codebase rn :D

GauBen commented 10 months ago

@leerobert You may use yarn patch or pnpm patch to update the type definitions until the new ones are merged