From 3691bed216fd710b669048c2264d1e20ab21173e Mon Sep 17 00:00:00 2001 From: Benjamin Willems Date: Fri, 16 Jun 2017 18:16:09 -0700 Subject: [PATCH] Add draft of CONTRIBUTING.md and use GitHub svg as example reference --- CONTRIBUTING.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++ icons/github.svg | 2 +- 2 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..45a75f734 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,52 @@ +# Contributing + +This repository welcomes contributions and corrections. Before submitting a pull request, ensure that you respect these guidelines for SVGs: + + - Include the SVG namespace declaration `xmlns="http://www.w3.org/2000/svg"`. This is not required if the SVG is included inline on HTML5 web pages. + - Include a descriptive `` element for accessibility. For example, `<title>GitHub icon`. + - Add `aria-labelledby="title"` and `role="img"` to the `` element to improve screen reader support. + - Use a `viewBox` of 24 by 24, following [Google’s Material Design guidelines for system icons](https://material.io/guidelines/style/icons.html#icons-system-icons). + - Ensure that all paths and strokes have been converted to fills. + - Ensure your SVG is monochromatic. Remove all fill colors so that icons default to black. + - Minify your SVG after exporting it. We recommend using [SVGO](https://github.com/svg/svgo) or [SVGOMG](https://jakearchibald.github.io/svgomg/) to automate this process. + +## JSON data for simpleicons.org + +In addition to following the guidelines for SVGs, list new icons in the `_data/simple-icons.json` file. Each icon in the array has three required values: + + - The `title` of the new SVG. + - A `hex` color value that matches the brand or logo's main accent color. (Without the `#` pound symbol.) + - The `source` URL of the logo being used. + +Here is the object for the GitHub logo as an example: + +```json +{ + "title": "GitHub", + "hex": "181717", + "source": "https://github.com/logos" +}, +``` + +## SVG example + +Before minification, your SVG should look follow the template below: + +```svg + + [BRAND] icon + + +``` + +While the parent `` element can sometimes contain other attributes, the attributes listed above are the only necessary ones. You can remove safely remove attributes like `width` and `height`, or clean them using a tool like [SVGO](https://github.com/svg/svgo) or [SVGOMG](https://jakearchibald.github.io/svgomg/). + +Here is the un-minified contents of the GitHub icon, for reference: + +```svg + + GitHub icon + + +``` + diff --git a/icons/github.svg b/icons/github.svg index 59d57b902..437efff43 100644 --- a/icons/github.svg +++ b/icons/github.svg @@ -1 +1 @@ - \ No newline at end of file +GitHub icon