LaravelLaravel & VueJsVueJs

Use an animated chevron icon component for Vue.js


vue-chevron can be used as an animated chevron icon in Vue.js projects.

Live demo page

To see how to implement Vue Chevron, follow the simple example below.


To start working with the component use the following command to install it:

npm install vue-chevron --save


yarn add vue-chevron

There are props and events below you can use to make it fit to your needs.


props: {
  // animation duration
  duration: {
    default: 300

  thickness: {
    default: 8

  angle: {
    default: 40

  round-edges: {
    default: true


Using some of the options above we can create the following example:

</template> import VueChevron from 'vue-chevron' export default { components: { VueChevron }, data() { return { pointDown: true, thickness: 12, duration: 400, angle: 60, roundEdges: false } }, methods: { toggle() { this.pointDown = !this.pointDown; } } }

Using a simple class, here chevron you can use your preffered color and size:

.chevron {
  color: #b50c0c;
  font-size: 80px;

And there it is, a toggleable element content easy and fast.

Note there is also an option for Easings but are not included to keep the library size minimum. Pass in your own easing functions to get the desired effect.

This project is open source available on GitHub made by @irkopal

★ READ ALSO ★  Don't design your emails - Freek Van der Herten's blog on PHP and Laravel

Source link

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.