https://github.com/rmosolgo/react-badges
Make custom badges, built with reactjs
https://github.com/rmosolgo/react-badges
Last synced: 3 months ago
JSON representation
Make custom badges, built with reactjs
- Host: GitHub
- URL: https://github.com/rmosolgo/react-badges
- Owner: rmosolgo
- Created: 2015-03-04T03:49:31.000Z (almost 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-03-04T04:08:08.000Z (almost 11 years ago)
- Last Synced: 2025-10-06T14:49:44.699Z (3 months ago)
- Language: HTML
- Size: 129 KB
- Stars: 22
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Badge
I thought it would be fun to make badges that were like github badges, but said whatever I wanted :) So I grabbed the SVG version from ... gemnasium, I think, then went to work.
You can [try it on github pages](http://rmosolgo.github.io/react-badges/)!
The interesting parts are:
- you can go from SVG to PNG in browser:
- Make a data URI from the SVG ([src](https://github.com/rmosolgo/react-badges/blob/master/index.html#L40))
- Make an image tag with that data URI for a `src` ([src](https://github.com/rmosolgo/react-badges/blob/master/index.html#L40-L43))
- After the image loads, write it to a canvas ([src](https://github.com/rmosolgo/react-badges/blob/master/index.html#L48-L49))
- Then get a new data URI (for a PNG) from the canvas ([src](https://github.com/rmosolgo/react-badges/blob/master/index.html#L50))
- you have to escape SVG before making into a data URI ([src](https://github.com/rmosolgo/react-badges/blob/master/index.html#L8))
- some parts of SVG weren't supported by React, so I had to sub them in manually ([src](https://github.com/rmosolgo/react-badges/blob/master/index.html#L37-L39))
- the SVG is actually hidden -- it's just used as a reference to generate the PNG ([src](https://github.com/rmosolgo/react-badges/blob/gh-pages/index.html#L76-L81))