title: SVG loading vue-svg-loader; [Vue warn]: Invalid Component definition
body: <p>If I want to use <code>vue-svg-loader</code> in an existing vue-cli application, I get the error message </p>
  
  <pre><code>[Vue warn]: Invalid Component definition: /img/logout.b0c3dfb7.svg
  </code></pre>
  
  <p>Following Steps are already done:</p>
  
  <p>1) Install <code>vue-svg-loader</code> as devDependency</p>
  
  <p>2) Add Webpack Config in <code>vue.config.js</code> (root directory):</p>
  
  <pre><code>module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.svg$/,
            loader: 'vue-svg-loader', 
          },
        ],
      }      
    }
  };
  </code></pre>
  
  <p>3)  Import SVG and inject as Component</p>
  
  <pre><code>import Logout from '@/assets/img/icons/logout.svg';
  
  export default {
      components: {
        Logout,
      },
  ...
  }
  </code></pre>
  
  <p>4) Use it in the template (vuetify as UI-Framework)</p>
  
  <pre><code>&lt;v-btn icon @click="logout()"&gt;
      &lt;Logout class="icon" /&gt;
  &lt;/v-btn&gt;
  </code></pre>
  
  <hr>
  
  <p>3 Questions:</p>
  
  <ol>
  <li>What is my mistake? </li>
  <li>How/where can/should I add new Webpack settings </li>
  <li>or modify/overwrite/delete existing ones </li>
  </ol>
  
  <p>in a vue-cli (V3) project? </p>