Icons are fine in dev but huge in production build

nuxt-community / fontawesome-module

Module to use Font Awesome icons in Nuxt.js

MIT License

110 stars 12 forks source link

Icons are fine in dev but huge in production build #6

Closed jdanino closed 4 years ago

jdanino commented 4 years ago

I've been using your package for a while and everything was working fine. However, after updating last week the Icons turned huge (as in 640 x 562 px) when in production mode. when in development mode everything is fine. I cant figure out what is causing this.. any idea?

pimlie commented 4 years ago

Could you please check:

the contents of .nuxt/fontawesome.js in your buildDir? Is there any strange content?
inspect your icons with the developer console, are they svg's with an fa-* classes? Are those classes listed with rules in the Style rules tab of the dev console? If they arent listed in the style rules tab, then the css is just not loaded. If you are using PurgeCSS, try to white list all fa-* classes

jdanino commented 4 years ago

Thanks for the reply. Turns out I was running purgeCSS and it removed the styles since the last npm update.

subdavis commented 4 years ago

@jdanino could you provide some more info about how you fixed this? I'm getting the same issue: styles aren't making it into my production build, but my icons are still there.

I was able to hack a fix by putting this in my nuxtConfig, but it seems like this should either be mentioned in the docs or there should be an easier fix:

purgeCSS: {
    whitelistPatterns: [/-fa$/, /^fa-/],
  }

jdanino commented 4 years ago

I ended up adding whitelistPatterns: [/fa/], to my nuxtconfig just like you did and I agree this could/should be mentioned somewhere

@jdanino could you provide some more info about how you fixed this? I'm getting the same issue: styles aren't making it into my production build, but my icons are still there.

I was able to hack a fix by putting this in my nuxtConfig, but it seems like this should either be mentioned in the docs or there should be an easier fix:
purgeCSS: {
    whitelistPatterns: [/-fa$/, /^fa-/],
  }

pimlie commented 4 years ago

@jdanino Feel free to submit a PR to add a section to the readme about using PurgeCSS :)

rtuttlecoder commented 2 years ago

this is happening to me for Tailwind v.3.x but am not using purgeCss at all -- thoughts?

B3JKER commented 2 years ago

I found another solution on nuxt v2, when you don't use PurgeCSS - you have to install 2 packages that is not mentioned: https://www.npmjs.com/package/@fortawesome/vue-fontawesome - yarn add @fortawesome/vue-fontawesome@latest https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core - yarn add @fortawesome/fontawesome-svg-core That 100% worked for me.

twisty commented 4 months ago

Slight update to above... on nuxt v2, this worked for me:

yarn add @fortawesome/vue-fontawesome@2
yarn add @fortawesome/fontawesome-svg-core