vue-svg-symbol-loader

SVG symbol loader for Vue.


Keywords
symbol, sprite, loader, svg, vue, sprites, symbols, vue2, vuejs, webpack
License
MIT
Install
npm install vue-svg-symbol-loader@1.0.1

Documentation

vue-svg-symbol-loader

SVG symbol webpack loader for Vue.

Installation

npm i -D vue-svg-symbol-loader

Configuration

// webpack.config.js
{
  test: /\.svg$/,
  loader: "vue-svg-symbol-loader"
}

Example

<template>
  <nav>
    <ul>
      <li><UserIcon/> User</li>
      <li><ExitIcon/> Exit</li>
    </ul>
  </nav>
</template>

<script>
import UserIcon from "./assets/sprites.svg?user"; // "user" is the id inside the svg sprite file.
import ExitIcon from "./assets/sprites.svg?exit"; // "exit" is the id inside the svg sprite file.

export default {
  name: "ExampleComponent",
  components: {
    UserIcon,
    ExitIcon
  }
};

</script>