v-vectors 📈

Features

• Dynamic Vue Component to render vector graphics
• Built from scratch usign Vue 3 with TypeScript

Table of Contents

• v-vectors 📈
  • Features
  • Table of Contents
  • Demo
  • Requirements
    • Installation
    • Build Setup
  • Usage
    • Globally
      • As a component
      • As a plugin
    • Locally
      • Example
  • API
    • Props
  • Built with
  • Contributing
  • Author

Demo

Requirements

• vue ^3.x

Installation

npm install --save v-vectors

CDN: UNPKG | jsDelivr (available as window.VVectors)

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

Usage

Globally

As a component

Vue.component('VVectors', require('v-vectors'));

As a plugin

import Vue from 'vue';
import VVectors from 'v-vectors';

Vue.use(VVectors);

Locally

import { VSvg } from 'v-vectors';

Example

<v-svg :marker="marker" />

import { VSvg } from 'v-vectors';

Vue.component('example-component', {
  components: {
    VSvg
  },
  data() {
    return {
      marker: {
        viewBox: "0 0 24 24",
        paths: [
          {
            d:
              "M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7",
          },
        ],
      },
    };
  },
});

API

Props

| Name | Type | Required? | Default | Description | | -------------- | ------ | --------- | --------- | ----------------------------------------------------------- | | marker | Object | Yes | '' | Paths or Circles Array of objects, check interfaces. |

Built with

• TypeScript.
• Vue 3

Contributing

1. Fork it ( https://github.com/vinayakkulkarni/v-vectors/fork )
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -Sam 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature)
5. Create a new Pull Request

Note:

1. Please contribute using Github Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
3. PS. Ensure your commits are signed. Read why

Author

v-vectors © Vinayak, Released under the MIT License. Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k