💡 [REQUEST] - Lazy loading / splitting icon fonts css

[bengreenow]

Describe the feature

Hey, thanks for creating this plugin, it's been very helpful when transitioning to nuxt.

We use a lot of the mdi-icons notice our initial page render spit out like 600kb of icon declarations. This is understandably very slow. I was wondering if we could edit the plugin / add a config option that would move these into a seperate stylesheet which could be heavily cached, we could save a lot of time on inial load.

Perhaps this feature already exists? any info would be greatly appreaciated.

Thanks

A LOT of these mdi declarations are plonked at the top of index.html

Additional information

• Would you be willing to help implement this feature?
• Does this feature have a potential to break existing features?

[Maiquu]

You can use inlineStyles option to disable inlining all entry css. But this will externalize all globally defined css in nuxt.options.css and not just font icon css.

export default defineNuxtConfig({
  features: {
    inlineStyles(id) {
      return !(typeof id === 'string' && id.endsWith('nuxt/dist/app/entry.js'))
    },
  },
}

But if you still want to be able split the font icons, I can think of something else. But since that will alter the order of css, it will not be enabled by default.

[bengreenow]

Thank you!

This helped our homepage to go from 600kb to 17kb. Lifesaver.