Depax/Shield
Installation
Install the package normally using NPM or Yarn.
yarn add @depax/shield
Usage
To generate a shield with a label and subject, and save it to a file;
import Generate from "@depax/shield";
await Generate("code coverage", "passed", "/filename/of/shield.svg");
A shield could also be generated with only the label;
import { GenerateValueless } from "@depax/shield";
await GenerateValueless("documentation", "/filename/of/shield.svg");
// Or you could just send null to the Generate function (this is what GenerateValueless does);
await Generate("code coverage", null, "/filename/of/shield.svg");
Styles
Three styles have been provided internally, these are GreenShieldStyle
, RedShieldStyle
and YellowShieldStyle
. The style can be passed into the Generate
or GenerateValueless
functions;
import Generate, { GenerateValueless, YellowShieldStyle } from "@depax/shield";
await Generate("code coverage", "passed", "/filename/of/shield.svg", YellowShieldStyle);
// Or valueless;
await GenerateValueless("code coverage", "/filename/of/shield.svg", YellowShieldStyle);
Additionally, custom styles can be created manually;
import Generate, { IShieldStyle } from "@depax/shield";
const MyCustomShieldStyle: IShieldStyle = {
borderRadius: 4,
font: { family: "DejaVu Sans,Verdana,Geneva,sans-serif", size: 10 },
label: { background: "#555", foreground: "#FFF" },
value: { background: "#97CA00", foreground: "#FFF" },
xPadding: 10,
yPadding: 2,
};
await Generate("code coverage", "passed", "/filename/of/shield.svg", MyCustomShieldStyle);
Flat style
By default the shields have a gradient overlay to give a smooth effect. This can be disabled to give a more material or flat feel;
import Generate, { DefaultShieldStyle, GenerateValueless } from "@depax/shield";
await Generate("code coverage", "passed", "/filename/of/shield.svg", DefaultShieldStyle, false);
// Or valueless;
await GenerateValueless("code coverage", "/filename/of/shield.svg", DefaultShieldStyle, false);