A simple plugin to import svg files as vue components. This is intended to be used with rollup-plugin-vue and is based on vue-svg-loader.

This fork:

• Let's rollup-plugin-vue compile the svg vue templates, make sure to configure rollup-plugin-vue as following: { include: [/\.vue$/i, /\.svg$/i] } (so that it also compiles the transformed svg files)
• Makes the templates functional

npm install --save-dev rollup-plugin-vue-inline-svg

rollup.config.js

import svg from 'rollup-plugin-vue-inline-svg';
import vue from 'rollup-plugin-vue'; // optional

export default {
  // ...
  plugins: [
    svg(config)
    vue(), // optional
  ]
}

By default this plugin will attempt to transform all files that end with the extension .svg. You can be more explicit by passing include and exclude options.

// `include` and `exclude` can each be a minimatch
// pattern, or an array of minimatch patterns, relative to process.cwd()
{
  include: string or array of minimatch,
  exclude: string or array,
  svgoConfig: svgo config object,
}

See SVGO for configuration options that it accepts.

The plugin is able to import svg files from node_modules packages:

import AlertSvg from 'octicons/build/svg/alert.svg'

The only important thing to remember is that the rollup build process needs to be started from the project root directory (e.g. via npm scripts). This is because the plugin will search the node_modules directory, via the process.cwd() node method, from where the process has started.