gradient-badge

Badge generator with gradient support


Keywords
badge, badgen, badges, color, colors, colour, gradient, gradients, readme, shields, style, readme-badges, shield
License
MIT
Install
npm install gradient-badge@1.3.1

Documentation

gradient-badge

npm Build Coverage Demo code style

Badge generator with gradient support 🍭

Check out the demo to make your own badge

Install

$ npm i gradient-badge

Usage

gradient-badge works exactly like badgen, with the gradient parameter in addition.

Node.js

const gradientBadge = require('gradient-badge');

const svgString = gradientBadge({
    subject: 'version', // <text>
    status: 'v1.2.3', // <text>
    style: 'flat', // 'flat' or undefined, optional
    // And any other parameter supported by badgen (icon, scale...)
    gradient: ['pink', 'F78642'], // array of colors (Hexadecimal or name)
});

Browser

<script src="https://cdn.jsdelivr.net/npm/gradient-badge"></script>
<script>
    var svgString = gradientBadge({
        /* same as above */
    });
</script>

Result: Result

Adding a gradient to a badge

You can apply a color gradient to any badge already generated with badgen:

const { badgen } = require('badgen');
const { applyGradient } = require('gradient-badge');

const originalBadge = badgen({
    /* ... */
});
const svgString = applyGradient(originalBadge, ['B65CFF', 'cyan']);

Examples

Here are a few more examples of what you can do.

Check out the demo to make your own

Stars Standard Patreon Instagram Vue.js Rainbow

Dependencies

  • badgen - Fast handcraft svg badge generator.

See also