Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/shrpne/vue-inline-svg

Dynamically loads an SVG source and inline <svg> element so you can manipulate the style of it
https://github.com/shrpne/vue-inline-svg

dynamic inline load svg

Last synced: about 1 month ago
JSON representation

Dynamically loads an SVG source and inline <svg> element so you can manipulate the style of it

Lists

README 

        
# Vue Inline SVG



[![NPM Package](https://img.shields.io/npm/v/vue-inline-svg.svg?style=flat-square)](https://www.npmjs.org/package/vue-inline-svg)

[![Minified Size](https://img.shields.io/bundlephobia/min/vue-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-inline-svg)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/shrpne/vue-inline-svg/blob/master/LICENSE)



Vue component loads an SVG source dynamically and inline `` so you can manipulate the style of it with CSS or JS.

It looks like basic `` so you markup will not be bloated with SVG content.

Loaded SVGs are cached so it will not make network request twice.



[ci-img]:  https://travis-ci.org/shrpne/vue-inline-svg.svg

[ci]:      https://travis-ci.org/shrpne/vue-inline-svg



- [Install](#install)

  - [NPM](#npm)

  - [CDN](#cdn)

  - [Vue 3](#vue-v3)

- [Usage](#usage)

  - [props](#props)

    - [src](#--src)

    - [title](#--title)

    - [keepDuringLoading](#--keepduringloading)

    - [transformSource](#--transformsource)

  - [SVG attributes](#svg-attributes)

  - [events](#events)

    - [loaded](#--loaded)

    - [unloaded](#--unloaded)

    - [error](#--error)

- [Comparison](#comparison)

- [Changelog](#changelog)

- [Contributing](#contributing)

- [License](#license)



## Install



### NPM



```bash

npm install vue-inline-svg

```



Register locally in your component

```js

import InlineSvg from 'vue-inline-svg';



// Your component

export default {

    components: {

        InlineSvg,

    }

}

```



Or register globally in the root Vue instance

```js

import Vue from 'vue';



// as a plugin

import {InlineSvgPlugin} from 'vue-inline-svg';

Vue.use(InlineSvgPlugin);



// or as a component

import InlineSvg from 'vue-inline-svg';

Vue.component('inline-svg', InlineSvg);

```



### CDN



```html



// Register as a plugin

Vue.use(VueInlineSvg.InlineSvgPlugin);



// or as a component

Vue.component('inline-svg', VueInlineSvg.InlineSvgComponent);



new Vue({

// ...

});



```



### Vue v3



Version of `vue-inline-svg` with support of Vue v3 is available under `next` tag

from NPM

```bash

npm install vue-inline-svg@next

```

or from CDN

```html



```



## Usage



```html



``` 

[Example](https://github.com/shrpne/vue-inline-svg/blob/master/demo/index.html)



### props

#### - `src`

Path to SVG file



```html



```



Note: if you use vue-loader assets or vue-cli, then paths like '../assets/my.svg' will not be handled by file-loader automatically like vue-cli do for `` tag, so you will need to use it with `require`:

```html



```

Learn more:

- https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules

- https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling



#### - `title`

Sets/overwrites the `` of the SVG



```html



```



#### - `keepDuringLoading`

`true` by default. It makes vue-inline-svg to preserve old image visible, when new image is being loaded. Pass `false` to disable it and show nothing during loading.



```html



```



#### - `transformSource`

Function to transform SVG source

 

This example create circle in svg:

```html



const transform = (svg) => {

    let point = document.createElementNS("http://www.w3.org/2000/svg", 'circle');

        point.setAttributeNS(null, 'cx', '20');

        point.setAttributeNS(null, 'cy', '20');

        point.setAttributeNS(null, 'r', '10');

        point.setAttributeNS(null, 'fill', 'red');

        svg.appendChild(point);

    return svg;

}

// For cleaner syntax you could use https://github.com/svgdotjs/svg.js



```



### SVG attributes

Other SVG and HTML attributes will be passed to inlined ``. Except attributes with `false` or `null` value.

```html



``` 



### events

#### - `loaded`

Called when SVG image is loaded and inlined.

Inlined SVG element passed as argument into the listener’s callback function.

```html



```



#### - `unloaded`

Called when `src` prop was changed and another SVG start loading.

```html



```



#### - `error`

Called when SVG failed to load.

Error object passed as argument into the listener’s callback function.

```html



```



## Comparison



- This module: [![Minified Size](https://img.shields.io/bundlephobia/min/vue-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-inline-svg)

- [vue-simple-svg](https://github.com/seiyable/vue-simple-svg): [![Minified Size](https://img.shields.io/bundlephobia/min/vue-simple-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-simple-svg), does not cache network requests, has wrapper around svg, attrs passed to `` are limited, converts `` tag into `style=""` attr

- [svg-loader](https://github.com/visualfanatic/vue-svg-loader) uses different approach, it inlines SVG during compilation. It has pros that SVG is prerendered and no http request needed. But also it has cons that markup size grows, especially if you have same image repeated several times. (Discussed in [#11](https://github.com/shrpne/vue-inline-svg/issues/11))



## Changelog

[CHANGELOG.md](https://github.com/shrpne/vue-inline-svg/blob/master/CHANGELOG.md)



## Contributing

[CONTRIBUTING.md](https://github.com/shrpne/vue-inline-svg/blob/master/CONTRIBUTING.md)



## License



MIT License