Awesome

vue-svg-transition

Create 2-state, SVG-powered animated icons

Codesandbox Demo

inspired by Icon Transition Generator

Quick start

npm install --save vue-svg-transition

import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';

Vue.use(SvgTransition);

Template Example

It is recommended to use vue-svg-loader so we can import our SVGs from external files. But it's possible to use inline SVG as well.

<template>
    <svg-transition :size="size">
        <MyIcon slot="initial" />
        <MyOtherIcon />
    </svg-transition>
</template>

<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";

export default {
    components: {
        MyIcon,
        MyOtherIcon
    }
    data() {
        return {
            size: {
                width: 48,
                height: 48
            }
        }
    }
}
</script>

Trigger programmatically via ref

<svg-transition ref="transition" trigger="none">
<!-- your icons -->
</svg-transition>

<script>
export default {
    mounted() {
        this.$refs.transition.performTransition();
    }
}
</script>

Documentation

Props

size

The size of the SVG viewbox.

• type: Object
• default: { width: 32, height: 32 }

duration

The duration of the transition in ms

• type: Number
• default: 200

trigger

The action that triggers the transition. Can be click, hover or none (if you want to trigger it programmatically).

• type: String
• default: click

Slots

initial

The SVG that will be initially displayed

default

The other SVG that will be transitioned to