Skip to content

Latest commit

 

History

History
58 lines (40 loc) · 2.7 KB

CONTRIBUTING.md

File metadata and controls

58 lines (40 loc) · 2.7 KB

Welcome to Bee Icons contributing guide

Thank you for investing your time in contributing to our project! This really helps us go bigger and farther!

Issues

Create a new issue

If you spot a problem, you can open a new issue.

Make Changes

Make changes locally

  1. Fork the repository so that you can make your changes without affecting the original project until you're ready to merge them.

  2. Create a working branch and start with your changes!

Here we have an example of an icon. There are some things we need to pay attention to:

{
    "id": 68,
    "name": "copy",
    "icon": {
      "xs": "",
      "sm": "",
      "md": "",
      "lg": "<svg class='bee bee-icons' width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(#copy-lg-clip)'><path d='M9 16V4C9 3.44772 9.44771 3 10 3H16.5507C16.804 3 17.048 3.09619 17.2332 3.26914L19.6825 5.55651C19.885 5.74563 20 6.01029 20 6.28737V16C20 16.5523 19.5523 17 19 17H10C9.44772 17 9 16.5523 9 16Z' stroke='currentColor' stroke-width='2' stroke-linecap='round'/><path d='M7.91774 8H5C4.44772 8 4 8.44772 4 9V21C4 21.5523 4.44772 22 5 22H14C14.5523 22 15 21.5523 15 21V17.9556' stroke='currentColor' stroke-width='2' stroke-linecap='round'/></g><defs><clipPath id='copy-lg-clip'> <rect width='24' height='24' fill='none'/></clipPath></defs></svg>",
      "xl": ""
    },
    "category": ["basic"],
    "tags": ["copy", "clipboard", "duplicate"]
  },
  • We are continuing with the id order.
  • We are deciding a name, so we will have to check if our name is not taken yet.
  • Then we are diving into the different sizes of the icon. The required one for the moment is 24x24 (which is 'lg').
  • A class bee bee-icons must be added in all the sizes.
  • Also take care that the clip-path values and ids say meaningful information about the icon, and not just the numbers generated by Illustrator or Figma, for example.
  • Replace every instance of 'black' with 'currentColor', so that every user can later use any color they want through the CSS color property.
  • Category refers to -but not only- the main category of the icon. For the moment we are placing all in basics, but soon a better categorization will be found.
  • Tags are words that we can insert in the search field that will lead to find your icon.

In case of doubt you can always share with us on an issue your project or create a Pull Request, and we will bee in touch with you as soon as we can!

Commit your update

Commit the changes once you are happy with them.

Pull Request

When you're finished with the changes, create a pull request, also known as a PR.

Your PR is merged!

Congratulations 🎉🎉 The Bee Icons team thanks you ✨.