Skip to content

🔨 A webpack loader that allows to use SVG files as Vue Components.

License

Notifications You must be signed in to change notification settings

o-alexandrov/vue-svg-loader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-svg-loader

A webpack loader that allows to use SVG files as Vue Components.

Installation

npm install --save-dev vue-svg-loader
yarn add --dev vue-svg-loader

Configuration

{
  test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    // optional [svgo](https://github.com/svg/svgo) options
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true}
      ]
    }
  }
}

Example code

<template>
  <nav id="menu">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>

The idea behind this was inspired by react-svg-loader.

About

🔨 A webpack loader that allows to use SVG files as Vue Components.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%