v-triangle

Simple triangle icon which made by html element.

Usage no npm install needed!

<script type="module">
  import vTriangle from 'https://cdn.skypack.dev/v-triangle';
</script>

README

v-triangle

Build Status Version License

Simple triangle icon which made by html element.

Install

yarn add v-triangle

Demo

CodePen

Quick start

Import globally

// main.js or index.js

import Vue from 'vue';
import VTriangle from 'v-triangle';

Vue.use(VTriangle);

new Vue({
  ...
});

Import locally

// js in single file component

import VTriangle from 'v-triangle';
export default({
  components: {
      VTriangle
  }
})

Attributes

Name|Type|Required|Default|Description -|-|-|-|- height|String|:white_check_mark:||Height of triangle. Its unit could be ch, em, ex, rem, vh, vw, vmin, vmax, px, cm, mm, in, pc, pt. width|String|:white_check_mark:||Width of triangle. Its unit could be ch, em, ex, rem, vh, vw, vmin, vmax, px, cm, mm, in, pc, pt. direction|String||up|Direction of triangle. It could be up, down, left, right. color|String||black|Color of triangle. It could be any valid css color.

Road map

  • Set unpkg target.
  • Unit test.
  • Add Storybook.
  • Add up-right, up-left, down-right, down-left direction.