Code Monkey home page Code Monkey logo

custom-icon-badges's Introduction

Custom Icon Badges

stars issues license discord

Allows users to more easily use Octicons and their own icons and logos on shields.io badges.

โšก How to use

  1. Get a badge URL from shields.io.

  2. Replace img.shields.io with custom-icon-badges.demolab.com

  3. Use any available slug as the logo query parameter or upload your own.

https://custom-icon-badges.demolab.com/badge/custom-badge-blue.svg?logo=paintbrush&logoColor=white

Preview:

img

  1. You're done! Use the image URL in your HTML or markdown! Star this repo if you find it useful! โญ

๐Ÿ–ผ๏ธ Existing logos

The following are examples of existing icons and logos that are already available.

Simple Icons

Over 2,000 brand icons from Simple Icons are already supported by shields.io.

You can find a list of slugs for each brand here.

Octicons

All 250+ Octicons from GitHub are supported by Custom Icon Badges.

Slug Example
issue-opened issue-opened
repo-forked repo-forked
star star
git-commit git-commit
repo repo
git-pull-request git-pull-request
heart heart
mail mail
More Octicons View all โ‡จ

Miscellaneous

ceylon color-swatch controller issue
fire flag translate trending-up
trending-down phone pygame grey-pygame
Add your own! Upload Icon

โž• Adding a new logo

Upload new icons using the demo site!

The file type can be SVG, PNG, etc. but only SVG format supports the logoColor parameter for overriding the color of the logo.

If you think your icon is useful to others, feel free to open a PR to add it to the README above!

Demo site: https://custom-icon-badges.demolab.com

image

๐Ÿš€ Example Usage

Click to get the URL!

stars open issues license build last commit total contributions

code size pr closed tag rating github streak

followers stars fork watch downloads social

my repos downloads phone email location

open issue discuss install package use template github action

๐Ÿ–ฅ๏ธ Using a Different Badge Host

By default, fetching a badge from Custom Icon Badges will use img.shields.io as the badge host.

You can set the host parameter to one of the following to override the hostname of the badge URL:

If you would like to use a different badge host, fork and modify this repository. Create a PR if it may be useful to others.

๐Ÿค— Contributing

We welcome contributions!

Please see CONTRIBUTING.md for details.

๐Ÿ“ค Deploying it on your own

Deploying on your own is optional. See the steps below.

Deploy to Heroku
  1. Sign in to Heroku or create a new account at https://heroku.com
  2. Click the Deploy button below

Deploy

  1. Add the URL of a Mongo database as the DB_URL config var. The database should have a collection called icons. See getting started for more info on setting up a free Mongo Atlas database.

image

  1. Click "Deploy App" at the end of the form
  2. Once the app is deployed, you can use <your-app-name>.herokuapp.com in place of custom-icon-badges.demolab.com

๐Ÿ’ฌ Questions?

Feel free to open an issue.

๐Ÿคฉ Support

๐Ÿ’™ If you like this project, give it a โญ and share it with friends!

YouTube Sponsor with Github Buy me a coffee

๐Ÿ‘จโ€๐Ÿ’ป Technologies

MongoDB Express React Node.js

Uses Shields.io Made with TypeScript Powered by Heroku

custom-icon-badges's People

Contributors

dependabot[bot] avatar denvercoder1 avatar fleker avatar armakuji avatar sapphire-code avatar mr4s avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.