vue-svg-belt v0.1.12

Vue 3 component to easily create any style martial arts belt in SVG format.

Highlights

• Vite + Vue + TypeScript
• SVG vector images
• Predefine belts
• Random belt generator
• Clean and focused
• Actively maintained

Install

npm install vue-svg-belt

Usage

JavaScript

// Get IBJJF White Belt
import { SVGBelt, BeltSystem, ibjjfJSON } from "vue-svg-belt";

const ibjjfSystem = new BeltSystem(ibjjfJSON);

const whiteBelt = ibjjfSystem.getBeltPropsByName("White", 0);

TypeScript

// Get IBJJF White Belt
import { SVGBelt, BeltProps, BeltSystem, ibjjfJSON } from "vue-svg-belt";

const ibjjfSystem: BeltSystem = new BeltSystem(ibjjfJSON);

const whiteBelt: BeltProps[] = ibjjfSystem.getBeltPropsByName("White", 0);

Vue Component

<template>
  <SVGBelt :beltProps="whiteBelt" />
</template>

Predefined Belts

• IBJJF Graduation System
• more to come..