Skip to content

VueJS directive for animate font awesome icons.

License

Notifications You must be signed in to change notification settings

Aspedm/fa-animate

Repository files navigation

fa-animate

VueJS directive for animate font awesome icons.

Installation

yarn fa-animate

or

npm install fa-animate

Install in components

import faAnimate from 'fa-animate';

<script>
export default {
  ...
  directives: {
    faAnimate,
  },
  ...
}
</script>

Global installation

import Vue from 'vue'
import App from './App.vue'
import faAnimate from 'fa-animate/dist/fa-animate.common.js';

Vue.use(faAnimate);

new Vue({
  el: '#app',
  render: h => h(App)
})

</script>

Using directives if set globally

<template>
    <div>
        <font-awesome-icon icon="bomb" id="test-icon" v-fa-animate="animateOptions" />
    </div>
</template>

<script>
import { library } from "@fortawesome/fontawesome-svg-core";
import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faBomb);

export default {
  components: {
    FontAwesomeIcon
  },

  data() {
    return {
      animateOptions: {
        type: "delayed",
        duration: 200
      }
    };
  }
};
</script>

Options

You can passed options for directive:

Name Type Description Default
stroke string Stroke color 'currentColor'
fill string Fill color 'transparent'
strokeWidth integer Stroke width 1

Vivus options

All Vivus options are available. Version 0.1 not suported callback function

Credits

A big thanks to:

About

VueJS directive for animate font awesome icons.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published