Почему моя конфигурация vue-svg-loader не распознает файлы SVG?

Question

Я использую vue-cli для своего приложения и соответственно добавил соответствующую конфигурацию в мой файл config/index.js (за https://vue -svg-loader.js.org / # vue-cli ):

module.exports = {
  build: {
    // Omitted for brevity
  },
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
  dev: {
    // Ommitted for brevity
  }
}

vue-svg-loader был установлен в моем проекте с использованием npm install --save vue-svg-loader.

Мой компонент выглядит следующим образом:

<template>
  <div>
    <svg-logo />
  </div>
</template>

<script>
  import svgLogo from './logo.svg'

  export default {
    name: 'app',
    components: {svgLogo}
  }
</script>

Ошибка Iкогда я пытаюсь загрузить страницу, появляется сообщение на консоли сервера:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|     <g fill="none" fill-rule="evenodd" stroke="#314659" opacity=".5">
|         <rect width="19" height="11" x="2.5" y="6.5" rx="2"/>

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 98:0-74
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Каждый SVG, который я пытаюсь загрузить, приводит к той же самой ошибке.

Есть ли что-то очевидное, что не так смои настройки?