When you import the .svg file as a Vue component instead of using the URL to the file, you can style it with CSS and add addtional DOM properties or event handlers to the component directly.

The differences between this project and vue-svg-loader are:

• This one has built-in hot reloading support for webpack since the SVG code is compiled via vue-loader.
• The latter only supports class and style attributes on the generated component while we support all DOM props and events.
• This one supports project-wise and file-relative configuration for SVGO.

yarn add svg-to-vue-component --dev

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          // This loader compiles .svg file to .vue file
          // So we use `vue-loader` after it
          'vue-loader',
          'svg-to-vue-component/loader'
        ]
      }
    ]
  },
  // ...other configurations
}

Then you can import .svg files directly and use them as Vue functional components:

<template>
  <!-- Dom props and events are all available here -->
  <CheckIcon width="20px" height="20px" @click="handleClick" />
</template>

<script>
import CheckIcon from './check-icon.svg'

export default {
  components: {
    CheckIcon
  },

  methods: {
    handleClick() {
      console.log('It works!')
    }
  }
}
</script>

In your vue.config.js or poi.config.js:

module.exports = {
  chainWebpack(config) {
    // Remove existing SVG rule which uses file-loader
    config.module.rules.delete('svg')

    // Use our loader instead
    config.module.rule('svg')
      .test(/\.svg$/)
      .use('vue')
      .loader('vue-loader')
        .end()
      .use('svg-to-vue-component')
      .loader('svg-to-vue-component/loader')
  }
}

Pass loader options like this:

// ...
{
  test: /\.svg$/,
  use: [
    'vue-loader',
    {
      loader: 'svg-to-vue-component/loader',
      options: {
        // ...Your options here
      }
    }
  ]
}

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

svg-to-vue-component © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

Website · GitHub @EGOIST · Twitter @_egoistlily