Vue-svg-loader: Not Working with Vue CLI 3

[edarioq]

The error I get is

This relative module was not found:

* ./public/assets/home/icon-notification.svg in ./src/pages/home/Home.js?vue&type=script&lang=js

This is all I'm doing in my component:

import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';
import NotificationIcon from './public/assets/home/icon-notification.svg';

export default {
  name: 'home',
  components: {
    Header,
    Footer,
    NotificationIcon
  }
};

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/vue-fontawesome": "^0.1.1",
    "@sendgrid/client": "^6.3.0",
    "@sendgrid/mail": "^6.3.1",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "bourbon": "^5.1.0",
    "buttercms": "^1.1.1",
    "dotenv": "^6.0.0",
    "i": "^0.3.6",
    "npm": "^6.4.1",
    "prerender-spa-plugin": "^3.4.0",
    "swiper": "^4.4.1",
    "vue": "^2.5.17",
    "vue-meta": "^1.5.4",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.0.4",
    "@vue/cli-service": "^3.0.4",
    "@vue/eslint-config-prettier": "^3.0.4",
    "ejs": "^2.6.1",
    "express": "^4.16.3",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "vue-svg-loader": "^0.10.0",
    "vue-template-compiler": "^2.5.17",
    "webpack-hot-middleware": "^2.24.2"
  },

In vue.config.js, I have:?

  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .loader('vue-svg-loader');
  },

[visualfanatic]

Are you sure the path to that file is correct? The component path is /src/pages/home/Home.js, but the path to SVG is ./public/assets/home/icon-notification.svg, so webpack is looking for a file in:

/src/pages/home/public/assets/home/icon-notification.svg

[edarioq]

Yea I've also tried all possible combinations. That's just what their docs say to use. I usually link other SVGs in other components with /assets/home/some-img.svg for example and they load fine. But I get the same error here.

[visualfanatic]

The error you are getting is not caused by the loader, but by wrong path. Is the public outside of src? Could you share your directory structure?

[edarioq]

Yes, public is outside of src:

[visualfanatic]

Have you tried this one?

import NotificationIcon from '../../../public/assets/home/icon-notification.svg';

[edarioq]

Oh wow, sorry.. yes that works. Thanks a lot and sry for the silly mistake. I wonder why the normal /assets/home/icon-notification.svg wasn't working.