search

vaso2 / nuxt-fontawesome

Nuxt module for Fontawesome 5 integration with ES6 imports and tree shaking
MIT License
107 stars 4 forks source link

Incorrect import paths for icon sets #10

Closed Soviut closed 5 years ago

Soviut commented 5 years ago

I have the following configuration in my nuxt.config.js file

    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['phone', 'at', 'envelope']
        },
        {
          set: '@fortawesome/free-brands-svg-icons',
          icons: ['facebook', 'twitter', 'instagram']
        }
      ]
    }],

But started getting the following errors

friendly-errors 19:06:58  WARN  in ./.nuxt/templates.plugin.012189c0.js

friendly-errors 19:06:58 "export 'at' (imported as 'fortawesomefreesolidsvgicons_at') was not found in '@fortawesome/free-solid-svg-icons'
friendly-errors 19:06:58

friendly-errors 19:06:58  WARN  in ./.nuxt/templates.plugin.012189c0.js

friendly-errors 19:06:58 "export 'envelope' (imported as 'fortawesomefreesolidsvgicons_envelope') was not found in '@fortawesome/free-solid-svg-icons'
friendly-errors 19:06:58

friendly-errors 19:06:58  WARN  in ./.nuxt/templates.plugin.012189c0.js

friendly-errors 19:06:58 "export 'facebook' (imported as 'fortawesomefreebrandssvgicons_facebook') was not found in '@fortawesome/free-brands-svg-icons'
friendly-errors 19:06:58

friendly-errors 19:06:58  WARN  in ./.nuxt/templates.plugin.012189c0.js

friendly-errors 19:06:58 "export 'instagram' (imported as 'fortawesomefreebrandssvgicons_instagram') was not found in '@fortawesome/free-brands-svg-icons'
friendly-errors 19:06:58

friendly-errors 19:06:58  WARN  in ./.nuxt/templates.plugin.012189c0.js

friendly-errors 19:06:58 "export 'phone' (imported as 'fortawesomefreesolidsvgicons_phone') was not found in '@fortawesome/free-solid-svg-icons'
friendly-errors 19:06:58

friendly-errors 19:06:58  WARN  in ./.nuxt/templates.plugin.012189c0.js

friendly-errors 19:06:58 "export 'twitter' (imported as 'fortawesomefreebrandssvgicons_twitter') was not found in '@fortawesome/free-brands-svg-icons'
friendly-errors 19:06:58

In the generated file mentioned, the imports looked like

    import  { phone as fortawesomefreesolidsvgicons_phone } from '@fortawesome/free-solid-svg-icons'
    library.add(fortawesomefreesolidsvgicons_phone)

    import  { at as fortawesomefreesolidsvgicons_at } from '@fortawesome/free-solid-svg-icons'
    library.add(fortawesomefreesolidsvgicons_at)

    import  { envelope as fortawesomefreesolidsvgicons_envelope } from '@fortawesome/free-solid-svg-icons'
    library.add(fortawesomefreesolidsvgicons_envelope)

    import  { facebook as fortawesomefreebrandssvgicons_facebook } from '@fortawesome/free-brands-svg-icons'
    library.add(fortawesomefreebrandssvgicons_facebook)

    import  { twitter as fortawesomefreebrandssvgicons_twitter } from '@fortawesome/free-brands-svg-icons'
    library.add(fortawesomefreebrandssvgicons_twitter)

    import  { instagram as fortawesomefreebrandssvgicons_instagram } from '@fortawesome/free-brands-svg-icons'
    library.add(fortawesomefreebrandssvgicons_instagram)

This seems to be throwing errors because it's looking for the node_modules directory but since we're in the .nuxt/ directory, it can't find it.

I tried a workaround by changing the sets to use relative paths set: '../@fortawesome/free-solid-svg-icons'. But now I get

friendly-errors 19:09:45 * ../@fortawesome/free-brands-svg-icons in ./.nuxt/templates.plugin.012189c0.js
friendly-errors 19:09:45 * ../@fortawesome/free-solid-svg-icons in ./.nuxt/templates.plugin.012189c0.js
vaso2 commented 5 years ago

Hi! Thanks for using my module! Sadly, your problem has nothing to do with it, just read the docs carefully. When you see the message

"export 'at' (imported as 'fortawesomefreesolidsvgicons_at') was not found in '@fortawesome/free-solid-svg-icons'

that's just because such import is not there - you can open library's sources and check. All icons are named as faPhone, not phone. So, in your case, working config is:

 modules: [
    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['faPhone', 'faAt', 'faEnvelope']
        },
        {
          set: '@fortawesome/free-brands-svg-icons',
          icons: ['faFacebook', 'faTwitter', 'faInstagram']
        }
      ]
    }],
  ],

Hope this helps, cheers:)

Soviut commented 5 years ago

Thanks, that's exactly what my problem was. Somehow I was able to get icons loading with icons: ['faPhone', 'faAt', 'faEnvelope'] but it stopped working when I added the brands icons.