title: Storybook does not load SVGs in Components of Vue project
body: <p>I have created a Vue project with <code>vue-cli</code> and installed <code>storybook</code> later via <code>npm install --save-dev storybook</code> as a dependency to show my created components.</p>
  
  <p>The storybook webpack config looks like this:</p>
  
  <pre><code>const path = require('path')
  
  module.exports = async ({ config, mode }) =&gt; {
    config.module.rules.push(
      {
        test: /\.svg$/,
        use: ['vue-svg-loader']
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: false,
              data: '@import "./src/assets/styles/main.scss";'
            }
          }
        ],
        include: path.resolve(__dirname, '../')
      }
    )
  
    return config
  }
  
  </code></pre>
  
  <p>and the story <code>index.js</code> like this:</p>
  
  <pre><code>import Vue from 'vue';
  import { storiesOf } from '@storybook/vue';
  import Alert from '../src/components/buttons/Alert.vue';
  
  storiesOf('Components', module)
    .add('Alert', () =&gt; ({
      components: { Alert },
      template: '&lt;Alert /&gt;'
    }))
  </code></pre>
  
  <p>for some reason when trying to load a component which consists of a SVG I'm getting:</p>
  
  <p><a href="https://i.stack.imgur.com/w4nj0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w4nj0.png" alt="enter image description here"></a></p>
  
  <p>The component itself is displayed but the part where the SVG sits no SVG is showing.</p>
  
  <p>Interestingly though it works just fine when trying to display the component in the Vue's main app. The <code>vue.config</code> looks like this:</p>
  
  <pre><code>module.exports = {
    css: {
      loaderOptions: {
        sass: {
          data: `@import "./src/assets/styles/main.scss";`
        }
      }
    },
    chainWebpack: config =&gt; {
      const svgRule = config.module.rule("svg");
  
      svgRule.uses.clear();
  
      svgRule.use("vue-svg-loader").loader("vue-svg-loader");
    }
  };
  </code></pre>
  
  <p>Why does <code>storybook</code> does not load the svgs properly while the main Vue app can?</p>
  
  <p><strong>Edit:</strong> I have gone ahead and simply used webpacks <code>file-loader</code> too to make sure it has nothing to do with <code>vue-svg-loader</code>:</p>
  
  <pre><code>{
    test: /\.(png|jpg|gif|svg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {},
      },
    ],
  },
  </code></pre>
  
  <p>but I am getting the same error.
  After trying to apply the first answer to replace <code>push()</code> to rules with <code>unshift()</code> I am getting this error: <code>Error in parsing SVG: Non-whitespace before first tag</code>.</p>
  
  <p><strong>Edit2</strong>:</p>
  
  <p>This is one of the SVGs I'm trying to load:</p>
  
  <pre><code>&lt;svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"&gt;&lt;path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"&gt;&lt;/path&gt;&lt;/svg&gt;
  </code></pre>
  
  <p><strong>Edit3</strong>: *Alert.vue in <code>projectroot/src/components/banners/Alert.vue</code>, Webpack config of Storybook is in <code>projectroot/.storybook/webpack.config.js</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div v-if="show" :class="`alert_wrap ${model}`"&gt;
      &lt;IconBase&gt;
        &lt;component :is="iconComponent" /&gt;
      &lt;/IconBase&gt;
      &lt;div class="alert_text"&gt;
        &lt;p v-if="title"&gt;{{ title }}&lt;/p&gt;
        &lt;p&gt;{{ msg }}&lt;/p&gt;
      &lt;/div&gt;
      &lt;IconBase&gt;
        &lt;TimesIcon @click="show = !show" aria-hidden="Close" /&gt;
      &lt;/IconBase&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import IconBase from "../icons/IconBase.vue";
  import CautionIcon from "../../assets/icons/exclamation-triangle-solid.svg";
  import InfoIcon from "../../assets/icons/info-circle-solid.svg";
  import SuccessIcon from "../../assets/icons/check-circle-solid.svg";
  import TimesIcon from "../../assets/icons/times-solid.svg";
  
  export default {
    name: "Alert",
    components: {
      CautionIcon,
      InfoIcon,
      SuccessIcon,
      TimesIcon,
      IconBase
    },
    props: {
      msg: {
        type: String,
        required: true
      },
      title: {
        type: String
      },
      model: {
        type: String,
        default: "info",
        validator(type) {
          return ["caution", "info", "success"].includes(type);
        }
      }
    },
    computed: {
      iconComponent() {
        return `${this.model}-icon`;
      }
    },
    data() {
      return {
        show: true
      };
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped lang="scss"&gt;
    /* some styles depending on the props passed */
  &lt;/style&gt;
  </code></pre>