Icons load incorrectly (very large) in server side when using library.add (Nuxt.js)

Icons render initially very large until finally settling down to wanted size. I’m using nuxt with server side rendering.

Fontawesome gets loaded as a plugin with nuxt.js:

import fontawesome from '@fortawesome/fontawesome'
import iconCSS from './icon-css.css'
import {
  faFrown
} from '@fortawesome/fontawesome-free-solid'

fontawesome.dom.styles(iconCSS)

fontawesome.library.add(
  faFrown
)

export default fontawesome

Am I missing something here? Is there a workaround for this behavior?

[OriginalEXE]

@chewtoys Here is my example (using the pro version):

font-awesome.js (place in the plugins folder):

import fontawesome from '@fortawesome/fontawesome';
import { faCoffee, faCode } from '@fortawesome/fontawesome-pro-regular';

fontawesome.config = {
  autoAddCss: false,
};

fontawesome.library.add(faCoffee, faCode);

nuxt.config.js (relevant part)

css: [
  '@fortawesome/fontawesome/styles.css',
],
plugins: [
  '~/plugins/font-awesome',
],

index.vue

<template>
  <div>
    <p>Hello! <font-awesome-icon :icon="['far', 'code']"></font-awesome-icon><p>
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';

export default {
  components: {
    FontAwesomeIcon,
  },
};
</script>

[samuelterra22]

I had the same problem using Nuxtjs but I fixed just reading the readme