# Contributing

## Adding Icons from Sketch
Use the Sketch file included in this repo to help export svg icons that need to be added to the design system. Please follow these steps to ensure your icon is formatted correctly.

1. Copy and paste your icon into the page title ‘Icon Artboard’ within this template.
2. Remove any folders or invisible shapes from the original icon. Typically Streamline icons have multiple folders to group pieces of an icon together. They sometimes include invisible shapes to ensure everything is 24x24.
3. Outline your icon. Streamline ships icons with shapes that have strokes instead of fills. This is great to allow flexibility, however, if we don’t outline our icons at 24x24, the width of the lines can become inconsistent. Select all the pieces of your icon and press `SHIFT + COMMAND + O`, or use Sketch’s menu, `Layer > Convert to Outlines`. Make sure each piece of your icon now has a fill and not a stroke. We prefer you set the fill to black, or `#000000` to maintain consistency with our other icons.
4. Create a `Union` with all the pieces of your icon. This will merge individual pieces together to create one shape.  You can find the Union tool in Sketch’s toolbar at the top.
5. Double check your icon is centered on the artboard both vertically and horizontally.
6. Export the icon artboard (not the combined shape) as an SVG. The example artboard is already setup to do this, just delete the example icon and replace with your new formatted icon.

## Adding Icons to this repo
1. Clone this repo on your local machine
2. Create a new branch and title it with the name or theme of the icon(s) you're adding.
3. Place your new svg icon in the `/svg/` folder of this repo, following the naming patterns outlined with our existing icons.
4. Commit your changes and push your branch to GitHub
5. Open a pull request and verify you've followed all the steps above.
6. A member from the Design Systems team will review your icon and merge your changes after it has been verified.

## Troubleshooting
If you run into any issues with creating your icon, double check you’ve followed all the steps. In the past, we’ve seen icons that had small artifacts, or missing pieces because of the order of the paths within the union.

Get in touch with Design Systems through Slack: 
`#help-sg-design-system`