How to configure plugins

[soerenmartius]

Hi!

I am trying to configure some plugins such as cleanupIDs and prefixIds. This is my configuration but the loader returns an error [plugin:svg-loader] Plugin name should be specified

I am using the same SVGs multiple times in the same page but they won't be displayed correctly because of conflicting IDs.

# vite.config.ts
....
        svgLoader({
            svgoConfig: {
                multipass: true,
                plugins: [
                    {
                        prefixIds: {
                            prefix: ({ path }: { path: string }) => basename(path, '.svg'),
                            delim: '-',
                        },
                    },
                    { removeDoctype: true },
                    { removeComments: true },
                    { cleanupIDs: true },
                    { collapseGroups: true },
                    { removeEmptyContainers: true },
                    { removeUnknownsAndDefaults: { keepDataAttrs: false } },
                ],
            },
        }),

Could I get some advice on how to configure plugins? Many thanks!

[jpkleemans]

Hi, when looking at the svgo docs, it looks like you should use the following notation when registering plugins:

{
  name: 'prefixIds',
  params: {
    prefix: ({ path }: { path: string }) => basename(path, '.svg'),
    delim: '-'
  }
}

Could you try if that works?

[soerenmartius]

Thanks - that was helpful. Should have checked the docs myself. My apologies for the noise!

[jpkleemans]

You're welcome