SVG-BELT

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

Highlights

Install

npm install svg-belt

IMPORTANT: Chalk 5 is ESM. If you want to use Chalk with TypeScript or a build tool, you will probably want to use Chalk 4 for now. Read more.

Usage

<script setup lang="ts">
   import {SVGBelt, BeltProps, BeltSystem, ibjjfJSON} from 'svg-belt'

   const ibjjfSystem: BeltSystem = new BeltSystem(ibjjfJSON);

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

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

Chalk comes with an easy to use composable API where you just chain and nest the styles you want.

import chalk from "chalk";

const log = console.log;

// Combine styled and normal strings
log(chalk.blue("Hello") + " World" + chalk.red("!"));

// Compose multiple styles using the chainable API
log(chalk.blue.bgRed.bold("Hello world!"));

// Pass in multiple arguments
log(chalk.blue("Hello", "World!", "Foo", "bar", "biz", "baz"));

// Nest styles
log(chalk.red("Hello", chalk.underline.bgBlue("world") + "!"));

// Nest styles of the same type even (color, underline, background)
log(
  chalk.green(
    "I am a green line " +
      chalk.blue.underline.bold("with a blue substring") +
      " that becomes green again!"
  )
);

// ES2015 template literal
log(`
CPU: ${chalk.red("90%")}
RAM: ${chalk.green("40%")}
DISK: ${chalk.yellow("70%")}
`);

// Use RGB colors in terminal emulators that support it.
log(chalk.rgb(123, 45, 67).underline("Underlined reddish color"));
log(chalk.hex("#DEADED").bold("Bold gray!"));

Easily define your own themes:

import chalk from "chalk";

const error = chalk.bold.red;
const warning = chalk.hex("#FFA500"); // Orange color

console.log(error("Error!"));
console.log(warning("Warning!"));

Take advantage of console.log string substitution:

import chalk from "chalk";

const name = "Sindre";
console.log(chalk.green("Hello %s"), name);
//=> 'Hello Sindre'

GitHub

View Github