5

After installing ionicons v3.0.0 with npm, I am having a lot of trouble importing the fonts into my app:

// /src/App.vue
@import '../node_modules/ionicons/dist/scss/ionicons.scss';

seems to point to the right path, however, I get a ton of errors such as

Cannot find module "../fonts/ionicons.eot?v=3.0.0-alpha.3

Obviously, this problem stems from the font files, because for example, the file above is actually ionicons.eot, and not ionicons.eot?v=3.0.0-alpha.3.

I also found a 3-year old discussion on Github and tried every single loader suggested in comments, but none of them worked. I am a newbie in Vue and webpack, so I am not sure what I am doing wrong.

Question: What do I need to do in order to be able to use Ionicons (or Font Awesome or any other font library really) in my app with vue-loader?

Alex
  • 3,719
  • 7
  • 35
  • 57

1 Answers1

0

Figured it out myself. You just need to add an appropriate loader for the fonts

{ test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader" }

to your webpack file. However, I also had to change the @import statement from scss to compiled css; otherwise, it wouldn't work (not sure why). Problem solved

Alex
  • 3,719
  • 7
  • 35
  • 57