Fancy Badges

Thank you for offering to contribute! Please review this page to understand how to contribute to this project.

Our badges fall under one of a few categories. When creating a new badge, fit it into the closest category. If none of the categories fit you can create a new one.

1. Create a new folder for the category
2. Add your category to the list by modifying src/utils/categories.ts. Insert a new item into the record with the key being the folder name, and the value being the description of the category.
3. Modify src/utils/badges.ts to create a new array to store this category's badges.

    // src/utils/badges.ts
   
   // replace [category] as appropriate
   const [category]Assets = [] as const;

   Then, modify the assets array to prefix your items

   ...prefixItems([category]Assets, '[folderName]')

Thank you for looking to create a new badge. To add a new badge follow these steps:

1. Download the template and upload to Figma
2. Follow the instructions to create, customise and export your icons
3. Determine which category the badges should fit in.
   • If it is distinct from all current categories, create a new folder for this category as explained above.
4. Create a new folder for the badge inside of the category
5. Upload your badges to this folder for each size in the .svg format (other formats get generated at build time). Their names should be the badge size.
   
   ℹ️ For badges requiring a singular and plural version, register tham as separate badges. Only include the minimal versions of the icon in the "singular" folder
   
   Some projects share badges in their minimal designs. To prevent duplication, upload the minimal badges to the primary project, and add an override in src/utils/overrides.ts by inserting a new record into the object, where the key is the badge name and the value is a reference to another badge, formatted as category/slug. Place it in the correct order alphabetically.

   export const pathOverrides: Partial<Record<Slug, Asset>> = {
   	"bitbucket-pipelines": "available/bitbucket",
   	...
   }

6. Register your badge by editing src/utils/badges.ts by modifying the category's array to also include your badge name. This should be the name of the folder you created for it.
   
   ⚠️ Do not use abbreviations in the badge name to help increase searchability.
   
   If you need to override the automatically generated name, you can edit the switch statement in src/utils/overrides.ts to modify the project name. Add your new case based upon where it falls where it is rendered on the page.