Usage with SvelteKit and Vite

[baptiste0928]

Hello ! I'm currently using @iconify/svelte for my icons, and would like to use purge-icons to generate the bundles so that the icons are rendered in SSR. So I installed the Vite plugin as described :

// svelte.config.js
import PurgeIcons from 'vite-plugin-purge-icons';

const config = {
  kit: {
    vite: {
      plugins: [PurgeIcons({ content: './src/**/*.svelte' })]
    }
  }
};

export default config;

When I try to import @purge-icons/generated, an error occurs.

Click to expand the error

``` TypeError: content.filter is not a function at Extract (file:///home/project-path/node_modules/@purge-icons/core/dist/index.mjs:162:29) at PurgeIcons (file:///project-path/node_modules/@purge-icons/core/dist/index.mjs:150:23) at Context.load (file:///home/project-path/node_modules/rollup-plugin-purge-icons/dist/index.mjs:21:22) at Object.load (/home/project-path/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50920:50) at transformRequest (/home/project-path/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66702:46) at async instantiateModule (/home/project-path/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:73412:10) ```

I looked for where this could come from, and it appears that the usage of bundles with the Svelte module is a different, but I don't know how to implement it with purge-icons:

Usage is almost identical to using icon bundles in SVG framework with one major difference: bundle requires importing Svelte component.

That one difference completely changes how bundle behaves. While in SVG framework bundle can be in a separately included script, in Svelte component bundle is similar to any other part of your application that uses Svelte component. That is, it must be bundled with your application. Quote from the Iconify documentation

Does anyone have any idea how to use purge-icons with SvelteKit?

[antfu]

Sadly purge icons does not support SSR either.

[baptiste0928]

I don't know exactly how SSR works internally, but isn't it possible to have the bundle generated during a build phase, at the same time as the Svelte/TS compilation for example? Maybe in the specific case of Svelte, it is possible to do something with svelte-preprocess, I will give it a look.

[antfu]

I have this for Vue https://github.com/antfu/vite-plugin-icons, which is purely build time and on-demanded (works for SSR). Maybe you could make a similar one for Svelte.

[baptiste0928]

Thanks for the answers, I'll look into it. In the meantime I'm using the CLI which works perfectly!