Nuxt-Icon applies classes to all imported svgs using svgo

[hhhhaaarry]

Describe the bug
I'm using nuxt-icon for my icons, but i tried to use svgo to import a custom svg (not icon, illustration). The issue is that nuxt-icon is adding .nuxt-icon and .nuxt-icon--fill to the svg breaking his original fill.

Here is my nuxt.config

modules: ['woonuxt-settings', 'nuxt-graphql-client', '@nuxtjs/tailwindcss', 'nuxt-icon', '@nuxt/image', '@nuxtjs/i18n', '@pinia/nuxt', '@nuxtjs/device', 'nuxt-svgo'],
svgoOptions: {
svgo: true,
defaultImport: 'component',
svgoConfig: {
multipass: true,
removeViewBox: false,
},
},

[willaCS]

They should remove the style or at least have an option to remove them as you can't use tailwind on them as the style will always prevail over tailwind classes. :/

[baixiaoyu2997]

when using nuxt-svgo, you can set filled solve this problem
https://nuxt.com/modules/nuxt-svgo#component-props

[StasNemy]

Try to add :fontControlled="false". I can't find any other setting to disable this globally.

[bernhardberger]

You could also use a custom Icon component for SvgoIcon - that's what I do because the default component isn't suitable for my project.

[mareszhar]

this solved it for me:

add this to your nuxt.config.ts:

{
  // ...other keys inside `defineNuxtConfig`

  svgo: {
    defaultImport: 'component', // use instead of 'componentext' to opt-out of unwanted auto-inserted classes

    // ...additional svgo config may be here
  },
}