icon icon indicating copy to clipboard operation
icon copied to clipboard

Nuxt-Icon keeps adding classes to non-icon svgs imported

Open hhhhaaarry opened this issue 2 years ago • 3 comments

Hi, i'm using nuxt-svgo to import svgs as components, and i also have nuxt-icon for icons. The issue here is that if i use nuxt-svgo to import an svg as a component, nuxt-icon adds .nuxt-icon and .nuxt-icon--fill classes, and overwrites my svg colors

hhhhaaarry avatar Oct 03 '23 14:10 hhhhaaarry

Could you please open a reproduction / sandbox?

atinux avatar Oct 25 '23 11:10 atinux

same issue here.

Will post a repro soon. Commented for visibility.

StevenJPx2 avatar Oct 30 '23 06:10 StevenJPx2

Same issue.

UPDATE : I'm also using svgo-nuxt, and I was trying to dynamically load the svg. In order to fix the issue you need to specify a filled property, Ex: <SvgoTest :filled="true" />

But I had to give up the first option since I couldn't change the svg width & height. What I end up doing is adding this to the nuxt.config.ts in order to stop using the nuxt-icon component :

  modules: [      
    [
      'nuxt-svgo',
      {
        defaultImport: 'component',
      },
    ],
  ],

ImEins avatar Apr 12 '24 11:04 ImEins