My Font Awesome Icons are not showing after nuxt build

34 Views Asked by At

My FA icons are not displaying in the built application using nuxt (2.17.3) and vue (2.7.16)

I have the following nuxt.config

buildModules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/fontawesome',
    '@nuxtjs/moment',
    '@nuxt/typescript-build',
    [
      'nuxt-amplitude',
      {
        apiKey: '447f8d6df86ff2e0323e646099f1ba2b',
      }
    ],
  ],
  /*
   ** Moment settings
   */
  moment: {
    defaultTimezone: 'Europe/London',
  },
  /*
   ** FontAwesome settings
   */
  fontawesome: {
    component: 'Fa',
    suffix: false,
    icons: {
      regular: [
        'faGrinStars',
        'faGrin',
        'faFrown',
        'faSadTear',
        'faQuestionCircle',
        'faNewspaper',
        'faEdit',
      ],
      solid: [
        'faCheck',
        'faChevronLeft',
        'faTimes',
        'faSyncAlt',
        'faExpand',
        'faEllipsisV',
        'faUsers',
        'faChartBar',
        'faPrint',
        'faCogs',
        'faUserCog',
        'faUserTag',
        'faUsersCog',
        'faUserCheck',
        'faUserEdit',
        'faUserLock',
        'faUserPlus',
        'faUserMinus',
        'faPlus',
        'faQuestion',
        'faAdjust'
      ],
    },
    css: [
      '@fortawesome/fontawesome-svg-core/styles.css',
      '@fortawesome/fontawesome-free/css/all.css'
    ]      
  },

And after the build, which seems to build with no errors the html is this with no path in the SVG:

<svg data-v-3ce24b5c="" class="svg-inline--fa fa-newspaper"><path class=""></path></svg>

I believe I have all the relevant packages installed: @nuxtjs/fontawesome @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/fontawesome-common-types @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

0

There are 0 best solutions below