vue-svg-icon-loader

Vue SVG Icon Loader for webpack

This is a webpack loader that turns SVG icons into directly-importable vuejs components. You can import these and use them directly in your Vue applications:

<template>
  <div>
    <my-icon width='1.5em' height='1.5em'/>
  </div>
</template>
 
<script>
import MyIcon from './my-icon.svg'
 
export default {
  components: {
    MyIcon
  },
}
</script>

SVG attributes can be overridden with CSS or inline on the icon element in your template. See the example project for more usage examples.

Caveats

While the 1.x version of this project was originally designed to work with svg-sprite-loader, this was no longer necessary for my use-case and I found the loader only added complexity without offering a lot of benefit. If down the line other users want to take advantage of the sprite loader then I'm glad to add that back in as a possible configuration option, but it didn't make sense to support without knowing people were using it. The 1.x branch should still work for you, however

Getting Started

Examples

There is a sample Vue + Webpack project in the examples/ directory that shows how to use this in an application.

Installation

yarn add -D vue-svg-icon-loader

or

npm install --save-dev vue-svg-icon-loader

You will also need to add a runtime dependency on vue-svg-component-runtime: yarn add vue-svg-component-runtime

Configuration

Create or update webpack.config.js like so:

  module.exports = {
    entry: './app.js',
    output: {
      filename: 'bundle.js'
    },
    module: {
      rules: [
        // ... other configured loaders
        {
          test: /\.svg$/,
          use: [
            'vue-svg-icon-loader',
          ],
        }
      ]
    }
  }

Options

You an also provide options to the loader:

{
  test: /\.svg$/,
  use: [
    {
      loader: 'vue-svg-icon-loader',
      options: {
        defaultScale: number | undefined
      }
    }
  ]
}

defaultScale

default = 1

Setting this to an integer will multiply the SVG viewBox dimensions by this number in each component. This can be overridden per component instnace by passing a scale prop.

Typescript

Importing svg files as Vue components in typescript requires one additional setup step. You will need to provide a type definition for .svg files so that typescript knows to treat them as a vue component. If you haven't done this, you'll see typescript reporting "module not found" errors. Create a svg.d.ts file wherever you store external type defintions, and add the following content:

declare module "*.svg" {
  import Vue from 'vue'
  export default Vue
}

Note: If anyone knows a way for this loader to provide this for projects automatically, please open an issue and let me know!

Contributing

I want you to help make this even better. Please feel free to contribute; if you have any problems or feature suggestions, please open an issue on Github.

License

MIT License