search

nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
868 stars 37 forks source link

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

Open hhhhaaarry opened 9 months ago

hhhhaaarry commented 9 months ago

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

Atinux commented 8 months ago

Could you please open a reproduction / sandbox?

StevenJPx2 commented 8 months ago

same issue here.

Will post a repro soon. Commented for visibility.

ImEins commented 2 months ago

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',
      },
    ],
  ],