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

$3

``sh
npm install --save v-vectors
`

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

$3

` bash


install dependencies

$ npm ci

package the library

$ npm run build
`

Usage

$3

#### As a component
`javascript
Vue.component('VVectors', require('v-vectors'));
`

#### As a plugin

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

Vue.use(VVectors);
`

$3

`javascript
import { VSvg } from 'v-vectors';
`

#### Example


Locally imported as a component

`html

`

`javascript
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

$3

| 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