Usage

Using vue-svg-loader, we can import SVGs and use them like vue components.
This leads to a very concise syntax.

<template>
    <svg-transition>
        <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
    }
}
</script>

And that's already all the magic. By default the transition triggers on click, but you can also pass hover or none with the trigger prop.

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

You can also trigger the transition programmatically using ref.

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

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

kai-oswald / vue-svg-transition

Create 2-state, SVG-powered transitions

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&gt
    <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>