https://github.com/e-e-e/rollup-plugin-vue-inline-svg

rollup plugin to convert svg files to optimised vue components
https://github.com/e-e-e/rollup-plugin-vue-inline-svg

Last synced: about 1 month ago
JSON representation

rollup plugin to convert svg files to optimised vue components

• Host: GitHub
• URL: https://github.com/e-e-e/rollup-plugin-vue-inline-svg
• Owner: e-e-e
• Created: 2017-09-03T07:18:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T05:42:53.000Z (almost 2 years ago)
• Last Synced: 2024-02-15T09:32:18.396Z (10 months ago)
• Language: JavaScript
• Size: 536 KB
• Stars: 15
• Watchers: 2
• Forks: 7
• Open Issues: 7
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome - vue-inline-svg - Import SVG files as Vue components. (Plugins / Frameworks)

README

        
# rollup-plugin-vue-inline-svg

[![Unit tests](https://github.com/e-e-e/rollup-plugin-vue-inline-svg/actions/workflows/tests.yml/badge.svg)](https://github.com/e-e-e/rollup-plugin-vue-inline-svg/actions/workflows/tests.yml)

A simple plugin to import svg files as vue components. This is intended to be used with [rollup-plugin-vue](https://www.npmjs.com/package/rollup-plugin-vue) and is based on [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader).

## installation

```sh

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

```

## usage

**rollup.config.js**

```js

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

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

export default {

  // ...

  plugins: [

    svg(config)

    vue(), // optional

  ]

}

```

### config

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.

```js

// `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](https://github.com/svg/svgo) for configuration options that it accepts.

### Import svgs from `node_modules`

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

```js

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](https://nodejs.org/api/process.html#process_process_cwd), from where the process has started.