NaNoWriMo Promotes Manuscription

    vue-inline-svg
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    Vue Inline SVG

    NPM Package Minified Size License: MIT

    Vue component loads an SVG source dynamically and inline <svg> so you can manipulate the style of it with CSS or JS. It looks like basic <img> so you markup will not be bloated with SVG content. Loaded SVGs are cached so it will not make network request twice.

    Install

    NPM

    npm install vue-inline-svg

    Register locally in your component

    import InlineSvg from 'vue-inline-svg';
    
    // Your component
    export default {
        components: {
            InlineSvg,
        }
    }

    Or register globally in the root Vue instance

    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

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Include the `vue-inline-svg` script on your page after Vue script -->
    <script src="https://unpkg.com/vue-inline-svg"></script>
    
    <script>
    // Register as a plugin
    Vue.use(VueInlineSvg.InlineSvgPlugin);
    
    // or as a component
    Vue.component('inline-svg', VueInlineSvg.InlineSvgComponent);
    
    new Vue({
    // ...
    });
    </script>

    Vue v3

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

    npm install vue-inline-svg@next
    <script src="https://unpkg.com/vue-inline-svg@next"></script>

    Usage

    <inline-svg 
        src="image.svg" 
        transformSource="transformSvg"
        @loaded="svgLoaded($event)"
        @unloaded="svgUnloaded()"
        @error="svgLoadError($event)"
        width="150" 
        height="150"
        fill="black"
        aria-label="My image"
    ></inline-svg>

    Example

    props

    - src

    Path to SVG file

    <inline-svg src="/my.svg"/>

    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 <img> tag, so you will need to use it with require:

    <inline-svg :src="require('../assets/my.svg')"/>

    Learn more:

    - title

    Sets/overwrites the <title> of the SVG

    <inline-svg :src="image.svg" title="My Image"/>

    - 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.

    <inline-svg :src="image.svg" :keepDuringLoading="false"/>

    - transformSource

    Function to transform SVG source

    This example create circle in svg:

    <inline-svg :src="image.svg" :transformSource="transform"/>
    
    <script>
    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
    </script>

    SVG attributes

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

    <!-- input -->
    <inline-svg 
        fill-opacity="0.25" 
        :stroke-opacity="myStrokeOpacity"
        :color="false"        
    ></inline-svg>
    
    <!-- output -->
    <svg fill-opacity="0.25" stroke-opacity="0.5"></svg>

    events

    - loaded

    Called when SVG image is loaded and inlined. Inlined SVG element passed as argument into the listener’s callback function.

    <inline-svg @loaded="myInlinedSvg = $event"/>

    - unloaded

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

    <inline-svg @unloaded="handleUnloaded()"/>

    - error

    Called when SVG failed to load. Error object passed as argument into the listener’s callback function.

    <inline-svg @error="log($event)"/>

    Comparison

    • This module: Minified Size
    • vue-simple-svg: Minified Size, does not cache network requests, has wrapper around svg, attrs passed to <svg> are limited, converts <style> tag into style="" attr
    • 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)

    Changelog

    CHANGELOG.md

    Contributing

    CONTRIBUTING.md

    License

    MIT License

    Install

    npm i vue-inline-svg

    DownloadsWeekly Downloads

    24,787

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    26.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • shrpne