Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bokub/gradient-badge
🍭 Badge generator with color gradient support
https://github.com/bokub/gradient-badge
badge badgen gradient readme readme-badges shield
Last synced: 2 days ago
JSON representation
🍭 Badge generator with color gradient support
- Host: GitHub
- URL: https://github.com/bokub/gradient-badge
- Owner: bokub
- License: mit
- Created: 2018-08-14T11:22:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-06T07:49:41.000Z (about 2 months ago)
- Last Synced: 2024-10-14T04:12:38.210Z (21 days ago)
- Topics: badge, badgen, gradient, readme, readme-badges, shield
- Language: JavaScript
- Homepage: https://git.io/gradientbadge
- Size: 667 KB
- Stars: 73
- Watchers: 4
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- badges-awesome-badges - gradient-badge
- awesome-badges - gradient-badge
- awesome-github-profile - gradient badge
README
# gradient-badge
[![npm][version]](https://www.npmjs.com/package/gradient-badge)
[![Build][build]](https://travis-ci.org/bokub/gradient-badge)
[![Coverage][coverage]](https://codecov.io/gh/bokub/gradient-badge)
[![Demo][demo-src]][demo]
[![code style][prettier]](https://github.com/prettier/prettier)
> Badge generator with gradient support 🍭
#### Check out the [demo][demo] to make your own badge
## Install
```
$ npm i gradient-badge
```
## Usage
**gradient-badge** works exactly like [badgen](https://github.com/badgen/badgen), with the **`gradient`** parameter in addition.
**Node.js**
```javascript
const gradientBadge = require('gradient-badge');
const svgString = gradientBadge({
subject: 'version', //
status: 'v1.2.3', //
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**
```html
var svgString = gradientBadge({
/* same as above */
});
```
Result: ![Result][usage]
### Adding a gradient to a badge
You can apply a color gradient to any badge already generated with badgen:
```javascript
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][demo] to make your own
![Stars][stars] ![Standard][standard] ![Patreon][patreon] ![Instagram][instagram] ![Vue.js][vue] ![Rainbow][rainbow]
## Dependencies
- [badgen](https://github.com/badgen/badgen) - Fast handcraft svg badge generator.
## See also
- [badge-action](https://github.com/emibcn/badge-action) - Create a badge using GitHub Actions.
[version]: https://gradgen.bokub.workers.dev/npm/v/gradient-badge?gradient=b65cff,11cbfa
[demo-src]: https://gradgen.bokub.workers.dev/badge/demo/available?gradient=ffb836,fc6d60
[prettier]: https://gradgen.bokub.workers.dev/badge/code%20style/prettier?gradient=ff94c8,cacfda,61eddb
[build]: https://gradgen.bokub.workers.dev/github/checks/bokub/gradient-badge?gradient=ff9eec,d0a1fc
[coverage]: https://gradgen.bokub.workers.dev/codecov/c/github/bokub/gradient-badge?gradient=00db78,10cde6
[usage]: https://gradgen.bokub.workers.dev/badge/version/v1.2.3?gradient=pink,F78642&style=flat
[demo]: https://git.io/gradientbadge
[stars]: https://gradgen.bokub.workers.dev/badge/stars/★★★★☆?gradient=00a65e,abf269
[standard]: https://gradgen.bokub.workers.dev/badge/code%20style/standard?gradient=ff22aa,bf00ff&style=flat
[patreon]: https://gradgen.bokub.workers.dev/badge/become/a%20patron?gradient=f96854,f9be75
[instagram]: https://gradgen.bokub.workers.dev/badge/follow%20me/instagram?gradient=833ab4,fd1d1d,fcb045
[vue]: https://gradgen.bokub.workers.dev/badge/built%20with/Vue.js?gradient=42b883,35495e&style=flat
[rainbow]: https://gradgen.bokub.workers.dev/badge/rainbow/compatible?gradient=ff4564,ffa82e,ffff00,21ed28,19ffa7,2edcff,5490ff,a787ff,ea8fff,ff5e84