v-vectors
Version:
Scalable Vector Graphics 🤝 Vue 3
169 lines (124 loc) • 6.67 kB
Markdown
# v-vectors 📈
[](https://github.com/vinayakkulkarni/v-vectors/actions/workflows/ci.yml)
[](https://github.com/vinayakkulkarni/v-vectors/actions/workflows/shipjs-trigger.yml)
[](https://github.com/vinayakkulkarni/v-vectors/releases)
[](https://www.npmjs.com/package/v-vectors)
[](http://npm-stat.com/charts.html?package=v-vectors)
[](https://bundlephobia.com/package/v-vectors@latest)
[](https://github.com/vinayakkulkarni/v-vectors/blob/master/package.json)
[](https://deepscan.io/dashboard#view=project&tid=9055&pid=18281&bid=445180)
[](https://snyk.io/test/github/vinayakkulkarni/v-vectors)
[](https://lgtm.com/projects/g/vinayakkulkarni/v-vectors/alerts/)
[](https://lgtm.com/projects/g/vinayakkulkarni/v-vectors/context:javascript)
[](https://github.com/vinayakkulkarni/v-vectors/graphs/contributors)
[](https://github.com/vinayakkulkarni/janak)
[](https://eslint.org/)
[](https://prettier.io/)
[](https://rollupjs.org/guide/en/)
[](https://www.typescriptlang.org/)
[](https://vuejs.org/)
## Features
* Dynamic Vue Component to render vector graphics
* Built from scratch usign Vue 3 with TypeScript
## Table of Contents
- [v-vectors 📈](#v-vectors--)
- [Features](#features)
- [Table of Contents](#table-of-contents)
- [Demo](#demo)
- [Requirements](#requirements)
- [Installation](#installation)
- [Build Setup](#build-setup)
- [Usage](#usage)
- [Globally](#globally)
- [As a component](#as-a-component)
- [As a plugin](#as-a-plugin)
- [Locally](#locally)
- [Example](#example)
- [API](#api)
- [Props](#props)
- [Built with](#built-with)
- [Contributing](#contributing)
- [Author](#author)
## Demo
[](https://codesandbox.io/s/v-vectors-demo-bkd57?fontsize=14&hidenavigation=1&theme=dark)
## Requirements
* [vue](https://vuejs.org/) `^3.x`
### Installation
```sh
npm install --save v-vectors
```
CDN: [UNPKG](https://unpkg.com/v-vectors/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/v-vectors/dist/) (available as `window.VVectors`)
### Build Setup
``` bash
# install dependencies
$ npm ci
# package the library
$ npm run build
```
## Usage
### Globally
#### 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);
```
### Locally
```javascript
import { VSvg } from 'v-vectors';
```
#### Example
<details>
<summary>Locally imported as a component</summary>
<br />
```html
<v-svg :marker="marker" />
```
```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",
},
],
},
};
},
});
```
</details>
## API
### Props
| Name | Type | Required? | Default | Description |
| -------------- | ------ | --------- | --------- | ----------------------------------------------------------- |
| `marker` | Object | Yes | '' | Paths or Circles Array of objects, check [interfaces](./types/index.d.ts). |
## Built with
- [TypeScript](https://www.typescriptlang.org/).
- [Vue 3](https://v3.vuejs.org)
## Contributing
1. Fork it ( [https://github.com/vinayakkulkarni/v-vectors/fork](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](https://github.com/vinayakkulkarni/v-vectors/compare)
_Note_:
1. Please contribute using [Github Flow](https://guides.github.com/introduction/flow/)
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_
3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_
## Author
**v-vectors** © [Vinayak](https://vinayakkulkarni.dev), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-vectors/contributors)).
> [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k)