How to import svg and fonts?

Hi everyone! This isn’t a bug. But I’m a bit confused.

This is my project structure:

Font issue:

When I import a font with url in my sass file an error is shown in the build:

Module not found: Error: Can't resolve '../../fonts/BebasNeueBook.woff2'

Then in a .scss file (styles/base/reset.scss):

@font-face {
  font-family: 'BebasNeueBook';
  src: url('../../fonts/BebasNeueBook.woff2') format('woff2');
}

SVG issue:

I use the svg as follow:

<svg class="icon-menu">
    <use xlink:href="/icons/icons.svg#icon-menu"></use>
</svg>

But I can show this error in the dev tools console:

vue.esm.js?65d7:5819 GET http://localhost:9080/icons/icons.svg

Tell me about your development environment.

• Node version: 8.0.0
• NPM version: 5.3.0
• vue-cli version: 2.8.2
• Operating System: MacOS 10.12.6

Thanks for any help you can give me! Regards!

[hmaesta]

For future Googlers, that’s what worked for me.

• If use quote it doesn’t work
• Fonts under /src/assets/fonts
• Other formats were available (as SVG, for example), but when applied the font was ignored – so check every file format

@font-face {
    font-family: 'fontName';
    src:
       url(~@/assets/fonts/fontName.woff2) format('woff2'),
       url(~@/assets/fonts/fontName.woff) format('woff'),
       url(~@/assets/fonts/fontName.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

[SimulatedGREG]

@algil

For the font issue, you could try using the webpack alias with something like url(~@/assets/fonts/BebasNeueBook.woff2), where the @ provides you a reference to the src/ directory.

As for the SVG issue, you will not be able to use the xlink:href approach as vue-loader won’t treat that as a require statement. You could either alt for using a <img> tag, or place your icons within the static/ directory and access from there.