Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

SuperTinyIcons/CONTRIBUTING.md

Go to file
 
 
Cannot retrieve contributors at this time
New File Guidelines Edit Readme Reference Image Reference Page (Optional) Create Android Version
79 lines (49 sloc) 2.95 KB
Raw Blame
Open in GitHub Desktop

Thanks for submitting or fixing an icon! Here is a helpful guide to what you need to include.

  • New file which is under 1,024 bytes

Additionally, you can do these helpful things if you have time:

  • Edit Readme
  • Add reference image
  • Edit reference page
  • Android Image

New File

Filename should be nameofservice.svg - all in lower-case. If a special character must be used, please replace it with an underscore (not a dot nor a dash).

Place the file in /images/svg/

At a minimum, your icon needs these components, in this layout:

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="..." role="img"
viewBox="0 0 512 512"><rect
width="512" height="512"
fill="#fff"/>...</svg>

Please keep the whitespace as-is. This makes viewing diffs easier. Please use UNIX line-endings LF rather than Windows-style CRLF.

If you can, remove the end of line at the end of the file:

  • VIm: :set noeol (optionally :set nofixendofline)
  • perl: perl -pi -e 'chomp if eof' $filename
  • shell: printf %s "$(cat $filename)" > filename-without-nl.svg

Please remove any trailing newlines from the file with:

sed -i -z s/\\n$// filename.svg

Guidelines

This is the standard guideline. Use this to help with sizing your icons and they will look good no matter what border radius is chosen.

A template for logos

  • Green is the safe zone, where the main body of the icon should be.
  • Yellow is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments.
  • Red is off limits. It should not be touched by the icons. Red is also how a circular icon would look.

Edit Readme

You will need to generate a new table for the README. To do this, run:

python3 generate_readme_table.py

Copy the output and paste it over the old table.

Reference Image

  • Find an official logo.
  • Add it to /images/reference/

Reference Page

  • Edit the file images/reference/index.md
  • Add a link to the official style guide or brand guidelines.
  • For example | <img src="/images/svg/nameofservice.svg" width="256" /> | <img src="/images/reference/nameofservice.jpg" width="256" /> | https://example.com/press |

(Optional) Create Android Version

To convert in Android Studio, go to Tools ➡ Resource Manager ➡ Drawable ➡ + ➡ Import Drawables ➡ then select the SVGs.

Note Android Studio doesn't like rounded corners with a percentage length value. Before importing, run sed -i '/rx\=\"15\%\"/d' ./*.svg to remove the corner or sed -i -e '/rx\=/s/\"15\%\"/\"77\"/' ./*.svg to replace the percentage length value with a corresponding fixed length value.

See: https://issuetracker.google.com/issues/176694227

Or, use https://inloop.github.io/svg2android/ to create an Android-compatible XML file.

Add the file to /images/android-vector-drawable/