Release 48 new icons and 14 updated icons (v2.6.0)

# New icons - YouTube Studio (#2481) - Cloudsmith (#1071) - easyJet (#2598) - Aer Lingus (#2607) - Ryanair (#2606) - JSON Web Tokens (#2605) - Google Earth (#2529) - SmartThings (#2618) - GitHub Actions (#2620) - XAML (#2522) - Google Street View (#2533, #2707) - DC (#2534) - Suzuki (#2630) - Mitsubishi (#2631) - General Motors (#2638) - Tata (#2637) - Porsche (#2635) - BMW (#2626) - LineageOS (#2609) - Archicad (#2633) - Stellar (#2613) - Try It Online (#2622) - Prezi (#2623) - The Washington Post (#2655) - CNN (#2656) - CloudCannon (#2662) - Craft CMS (#2666) - micro:bit (#2624) - Cesium (#2660) - Harbor (#2650) - QIWI (#2669) - Staffbase (#2673) - 1001Tracklists (#2678) - PlayStation 2 (#2679) - Antena 3 (#2680) - FIRST (#2681) - Poly (#2682) - Spinrilla (#2696) - Platzi (#2684) - GitKraken (#2697) - Threema (#2699) - Apollo GraphQL (#2589) - OnStar (#2701) - Elm (#2702) - Iconify (#2703) - Vivino (#2705) - Pokémon (#2408) - Hive (#2674) # Updated icons - Microsoft Access (#2541) - Microsoft Excel (#2549) - Microsoft Office (#2550) - Microsoft OneDrive (#2551) - Microsoft OneNote (#2552) - Microsoft PowerPoint (#2554) - Microsoft Teams (#2556) - Wix (#2596) - Microsoft Outlook (#2553) - Google Fit (#2707) - Google Lens (#2707) - Google Pay (#2707) - Google Play (#2707) - Google Wear OS (#2707)
simple-icons · Mar 1, 2020 · dfeaa3b · dfeaa3b
2 parents 4e02525 + 7ca6ce7
commit dfeaa3b
Show file tree

Hide file tree

Showing 69 changed files with 444 additions and 71 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contributing To Simple Icons
+# Contributing to Simple Icons
 
 Simple Icons welcomes contributions and corrections. Before contributing, please make sure you have read the guidelines below. If you decide to contribute anything, please do the following:
 
@@ -10,12 +10,11 @@ Simple Icons welcomes contributions and corrections. Before contributing, please
 
 ## Table of contents
 
-* [Requesting An Icon](#requesting-an-icon)
-* [Adding or Updating An Icon](#adding-or-updating-an-icon)
-* [Labeling Issues](#labeling-issues)
-* [Building Locally](#building-locally)
+* [Requesting an Icon](#requesting-an-icon)
+* [Adding or Updating an Icon](#adding-or-updating-an-icon)
+* [Building the Website](#building-locally)
 
-## Requesting An Icon
+## Requesting an Icon
 
 We welcome icon requests. Before you submit a new issue please make sure the icon:
 
@@ -33,7 +32,7 @@ When submitting a request for a new or updated icon include helpful information
 
 * **Issue Body:** Links to official sources for the brand's icon and colors (e.g. media kits, brand guidelines, SVG files etc.)
 
-## Adding or Updating An Icon
+## Adding or Updating an Icon
 
 **Note**: If you decide to add an icon without requesting it first, the requirements above still apply.
 
@@ -47,12 +46,13 @@ Official high quality brand logos and brand colors can usually be found in the f
 1. Website headers (you can use [svg-grabber](https://chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg) for Chrome)
 1. Favicons
 1. Wikimedia (which should provide a source)
+1. GitHub repositories
 
 Working with an SVG version of the logo is best. In the absence of an SVG version, other vector filetypes may work as well (e.g. EPS, AI, PDF). In the absence of vector logos, a vector can be created from a high quality rasterized image, however this is much more labor intensive.
 
 For color, the brand's primary color should be used. The official color of a brand is usually found in their brand guidelines, media kits, or some of the other locations mentioned above. If no official color can be identified, use the brand's primary web color or the most prominent color in the logo itself (please indicate why you choose the particular color in your pull request). Simple Icons stores brand colors in the standard 6 character hexadecimal format.
 
-### 2. Extract The Icon From The Logo
+### 2. Extract the Icon from the Logo
 
 There are many different tools for editing SVG files, some options include:
 
@@ -71,7 +71,7 @@ Using your preferred tool you should:
 1. Remove all colors. The icon should be monochromatic.
 1. Export the icon as an SVG.
 
-### 3. Optimize The Icon
+### 3. Optimize the Icon
 
 All icons in Simple Icons have been optimized with the [SVGO tool](https://github.com/svg/svgo). This can be done in one of two ways:
 
@@ -86,7 +86,7 @@ All icons in Simple Icons have been optimized with the [SVGO tool](https://githu
   * Leave the remaining settings untouched (or reset them with the button at the bottom of the settings).
   * Click the download button.
 
-### 4. Annotate The Icon
+### 4. Annotate the Icon
 
 Each icon in Simple Icons has been annotated with a number of attributes and elements to increase accessibility. These include:
 
@@ -106,7 +106,7 @@ Here is _part of_ the svg for the Adobe Photoshop icon as an example:
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Adobe Photoshop icon</title>...</svg>
 ```
 
-### 5. Check The Icon
+### 5. Check the Icon
 
 The final icon should:
 
@@ -129,13 +129,13 @@ Here is the svg for the Adobe Photoshop icon as an example:
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Adobe Photoshop icon</title><path d="M0 .3v23.4h24V.3H0zm1 1h22v21.4H1V1.3zm4.8 4.48c0-.067.14-.116.224-.116.644-.033 1.588-.05 2.578-.05 2.772 0 3.85 1.52 3.85 3.466 0 2.54-1.842 3.63-4.102 3.63-.38 0-.51-.017-.775-.017v3.842c0 .083-.033.116-.115.116H5.916c-.083 0-.115-.03-.115-.113V5.78zm1.775 5.312c.23.016.412.016.81.016 1.17 0 2.27-.412 2.27-1.996 0-1.27-.786-1.914-2.122-1.914-.396 0-.775.016-.957.033v3.864zm8.607-1.188c-.792 0-1.056.396-1.056.726 0 .363.18.61 1.237 1.155 1.568.76 2.062 1.485 2.062 2.557 0 1.6-1.22 2.46-2.87 2.46-.876 0-1.62-.183-2.05-.43-.065-.033-.08-.082-.08-.165V14.74c0-.1.048-.133.114-.084.624.413 1.352.594 2.012.594.792 0 1.122-.33 1.122-.776 0-.363-.23-.677-1.237-1.205-1.42-.68-2.014-1.37-2.014-2.527 0-1.287 1.006-2.36 2.755-2.36.86 0 1.464.132 1.794.28.082.05.1.132.1.198v1.37c0 .083-.05.133-.15.1-.444-.264-1.1-.43-1.743-.43z"/></svg>
 ```
 
-### 6. Update The JSON Data For SimpleIcons.org
+### 6. Update the JSON Data for SimpleIcons.org
 
 Icon metadata should be added to 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's primary color. All uppercase and without the `#` pound symbol.)
-  * The `source` URL of the logo being used. This is used to find updates if the logo ever changes.
+  * The `source` URL of the logo being used. There are [more details below](#source-guidelines).
 
 Here is the object for The Movie Database as an example:
 
@@ -149,7 +149,56 @@ Here is the object for The Movie Database as an example:
 
 Make sure the icon is added in alphabetical order. If you're in doubt, you can always run `npm run our-lint` - this will tell you if any of the JSON data is in the wrong order.
 
-### 7. Create a pull request
+#### SVG Filename Convention
+
+The filename of the SVG should correspond to the `title` used in the JSON file mentioned above, and it should follow the rules below. If you're in doubt, you can always run `npm run get-filename -- Brand name` to get the correct filename.
+
+1. Use **lowercase letters** without **whitespace**, for example:
+
+    ```yml
+    title: Adobe Photoshop
+    filename: adobephotoshop.svg
+    ```
+
+1. Only use **latin** letters, for example:
+
+    ```yml
+    title: Citroën
+    filename: citroen.svg
+    ```
+
+1. Replace the following symbols with their alias depending on their position in the title:
+
+    | Symbol | Start | Middle | End  |
+    | :----: | ----- | ------ | ---- |
+    |   +    | plus  | plus   | plus |
+    |   .    | dot-  | -dot-  | -dot |
+    |   &    | and-  | -and-  | -and |
+
+    for example:
+
+    ```yml
+    title: .Net
+    filename: dot-net.svg
+    ```
+
+#### Source Guidelines
+
+We use the source URL as a reference for the current SVG in our repository and as a jumping-off point to find updates if the logo changes. If you used one of the sources listed below, make sure to follow these guidelines. If you're unsure about the source URL you can open a Pull Request and ask for help from others.
+
+If the SVG is sourced from:
+
+- **Branding page**: For an SVG from a branding page the source URL should simply link to the branding page.
+- **Company website**: If the SVG is found on the company website (but there is no branding page) the source URL should link to a common page, such as the home page or about page, that includes the source material.
+- **GitHub**: For an SVG from a GitHub (GitLab, BitBucket, etc.) repository the source URL should link to the file that was used as source material. If the color comes from another file in the repository the URL should link to the repository itself.
+
+  In any case the commit hash should be part of the URL. On GitHub, you can get the correct URL by pressing <kbd>y</kbd> on the GitHub page you want to link to. You can get help at the [getting permanent links to files page](https://help.github.com/en/github/managing-files-in-a-repository/getting-permanent-links-to-files).
+
+- **Wikipedia**: For an SVG from Wikipedia/Wikimedia the source URL should link to the logo file's page on the relevant site, and not the brand's Wikipedia pages. For example, [this is the link for AmericanExpress](https://commons.wikimedia.org/wiki/File:American_Express_logo.svg).
+
+In general, make sure the URL does not contain any tracking identifiers.
+
+### 7. Create a Pull Request
 
 Once you've completed the previous steps, create a pull request to merge your edits into the *develop* branch.
 
@@ -160,7 +209,7 @@ Once you've completed the previous steps, create a pull request to merge your ed
 * Build and run the website locally using `$ jekyll serve`.
 * Connect to the website in your browser via the "Server address" provided by the output of this command, e.g. `http://localhost:4000/`
 
-## Building In Your Browser
+## Building in Your Browser
 
 Alternatively, you can build and run the website in a readily configured online workspace:
 

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 </a>
 <h3 align="center">Simple Icons</h3>
 <p align="center">
-Free SVG icons for popular brands. See them all on one page at <a href="https://simpleicons.org">SimpleIcons.org</a>. Contributions, corrections & requests can be made on GitHub. Started by <a href="https://twitter.com/bathtype">Dan Leech</a>.</p>
+Over 1000 Free SVG icons for popular brands. See them all on one page at <a href="https://simpleicons.org">SimpleIcons.org</a>. Contributions, corrections & requests can be made on GitHub. Started by <a href="https://twitter.com/bathtype">Dan Leech</a>.</p>
 </p>
 
 ## Usage
@@ -76,7 +76,15 @@ console.log(icon);
 */
 ```
 
-### PHP usage
+#### TypeScript Usage
+
+There are also TypeScript type definitions for the Node package. To use them, simply run:
+
+```
+$ npm install @types/simple-icons
+```
+
+### PHP Usage
 
 The icons are also available through our Packagist package. To install, simply run: