Skip to content

Latest commit

 

History

History
60 lines (45 loc) · 1.94 KB

CONTRIBUTING.md

File metadata and controls

60 lines (45 loc) · 1.94 KB
Raw

Contributing

Thank you for reaching the contribution page and showing interest in Picto.

You came to the right place to start your contribution!

Icon Contributions

This is a very important one, in order to properly support current and future features of Picto, it's important to closely follow the guidelines.

The Guidelines

  • Icons must be SVG.
  • Icons viewbox should be 200x200px.
  • Inner content should be up to 150px width, or height, whichever is higher.
  • Tags shouldn't have any unnecessary attributes.
  • Background has to be a <rect>.
  • Classes should only be used for non-background elements.
  • Classes should be named following the pattern: {icon_name}--fragment-{n}.
  • Gradients should always go inside a <defs>.
  • If the icon has more than one <path>, they should be grouped in a <g>.
  • Naming the file should follow kebab-case, using only the name of the tool or language.
  • Background should always have --rx, --filter, and --bg variables.

Recommended flow to create an Icon

  1. Create the icon in any Vector Drawing Software of your liking.
  2. Avoid adding the background in this step.
  3. Export as SVG.
  4. Open the SVG in your editor and clean any useless code generated by the software.
  5. Create a <rect> to add the background.
  6. Commit your wonderful contribution ✨

SVG Tag for Copy-Paste

SVG Parent

<svg width="200" height="200" version="1.1" viewBox="0 0 200 200" xml:space="preserve"
    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
</svg>

Background

Background includes the fill and rx (rounded corner) properties as CSS variables.

  • Default value for bg will be shown if no background has been set by the renderer.
  • Default value for rx is always 24px.
  • --filter has no default value.
<rect width="200" height="200" style="fill: var(--bg, #fff); rx: var(--rx, 24px); filter: var(--filter); filter: var(--filter);" />