Vue file-loader generates correct path, but doesn't copy files

Question

I'm working on a component to render icons from a folder by name. This is my component file:

<template>
  <div>
    <img :src="path">
  </div>
</template>

<script>
export default {
  name: 'ballicon',
  computed: {
    path () {
      return require(`./svg/${this.name}.svg`)
    }
  },
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

I have an entry in my Webpack config for file-loader:

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[hash:7].[ext]',
      publicPath: '../../',
      outputPath: utils.assetsPath('img/') // = static/img
    }
  }
}

When my component is rendered, it correctly inserts the name, hash and extension:

<div>
  <img src="../../static/img/airplane.f6d83ef.svg">
</div>

However, no files are copied to the /static/img directory, so the image fails to load.