Ecosyste.ms: Awesome

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

https://github.com/kai-oswald/vue-svg-transition

Create 2-state, SVG-powered transitions
https://github.com/kai-oswald/vue-svg-transition

svg transition vue vue-component vuejs

Last synced: about 1 month ago
JSON representation

Create 2-state, SVG-powered transitions

Lists

README 

        
# vue-svg-transition

> Create 2-state, SVG-powered animated icons



![Demo](/assets/demo.gif)



[Codesandbox Demo](https://codesandbox.io/s/6v20q76xwr)



inspired by [Icon Transition Generator](https://blog.nucleoapp.com/create-2-state-svg-powered-animated-icons-76ed19160a7e)



[![npm version badge](https://img.shields.io/npm/v/vue-svg-transition.svg)](https://www.npmjs.com/package/vue-svg-transition)



## Quick start



```

npm install --save vue-svg-transition

```

```js

import Vue from 'vue';

import SvgTransition from 'vue-svg-transition';



Vue.use(SvgTransition);

```



## Template Example

It is recommended to use [`vue-svg-loader`](https://www.npmjs.com/package/vue-svg-loader) so we can import our SVGs from external files.

But it's possible to use inline SVG as well.



```vue



    

        

        

    



import MyIcon from "./assets/MyIcon.svg";

import MyOtherIcon from "./assets/MyOtherIcon.svg";



export default {

    components: {

        MyIcon,

        MyOtherIcon

    }

    data() {

        return {

            size: {

                width: 48,

                height: 48

            }

        }

    }

}



```



Trigger programmatically via `ref`



```vue



export default {

    mounted() {

        this.$refs.transition.performTransition();

    }

}



```



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