CONTRIBUTING.md 5.14 KB
Newer Older
Jon Rohan's avatar
Jon Rohan committed
1
# Adding or Updating icons
Jon Rohan's avatar
Jon Rohan committed
2

Jon Rohan's avatar
Jon Rohan committed
3
If you plan to update an icon and/or add a new icon follow these steps. These steps will be the same for core primer members and contributors.
Jon Rohan's avatar
Jon Rohan committed
4

Jon Rohan's avatar
Jon Rohan committed
5
Complete steps 1 - 3 and notify us of your changes, either with a pull request or an issue describing your changes. Screenshots welcome! 🎉
Jon Rohan's avatar
Jon Rohan committed
6

Jon Rohan's avatar
Jon Rohan committed
7
## Step 1, Duplicate:
Jon Rohan's avatar
Jon Rohan committed
8

Jon Rohan's avatar
Jon Rohan committed
9
The first step is to make a copy of the [master Octicons file][master-octicons] to your drafts folder. You can do this from the dropdown menu, select "Duplicate to your drafts".
Jon Rohan's avatar
Jon Rohan committed
10

Jon Rohan's avatar
Jon Rohan committed
11
[<img src="https://user-images.githubusercontent.com/54012/37802948-c10dca06-2de9-11e8-98c3-dd45cd561865.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37802948-c10dca06-2de9-11e8-98c3-dd45cd561865.gif)
Jon Rohan's avatar
Jon Rohan committed
12

Jon Rohan's avatar
Jon Rohan committed
13
## Step 2, Edit:
Jon Rohan's avatar
Jon Rohan committed
14

Jon Rohan's avatar
Jon Rohan committed
15
In your duplicate file, make proposed changes. In the example, we’ll make the GitHub logo red. It will also simplify things if you give your file a unique name e.g. _Octicons (Jon’s Changes)_.
Jon Rohan's avatar
Jon Rohan committed
16

Jon Rohan's avatar
Jon Rohan committed
17
[<img src="https://user-images.githubusercontent.com/54012/37803022-14d1a0fe-2dea-11e8-862d-b7ef22c918cf.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37803022-14d1a0fe-2dea-11e8-862d-b7ef22c918cf.gif)
Jon Rohan's avatar
Jon Rohan committed
18

Jon Rohan's avatar
Jon Rohan committed
19
## Step 3, Share:
Jon Rohan's avatar
Jon Rohan committed
20

Jon Rohan's avatar
Jon Rohan committed
21
Make sure your duplicate file can be viewed by others. In the share menu "Anyone with link" should be set to "can view". Copy the link.
Jon Rohan's avatar
Jon Rohan committed
22

Jon Rohan's avatar
Jon Rohan committed
23
[<img src="https://user-images.githubusercontent.com/54012/37803059-3ca54432-2dea-11e8-8c27-36c83a2dc5cb.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37803059-3ca54432-2dea-11e8-8c27-36c83a2dc5cb.gif)
Jon Rohan's avatar
Jon Rohan committed
24

Jon Rohan's avatar
Jon Rohan committed
25
## Step 4, Pull Request: _(Optional)_
Jon Rohan's avatar
Jon Rohan committed
26

Jon Rohan's avatar
Jon Rohan committed
27
You can submit a pull request updating the `figma.url` configuration in the root [package.json](https://github.com/primer/octicons/blob/master/package.json#L10) with your figma file. Doing so will generate alpha releases of [all the libraries that distribute Octicons](https://github.com/primer/octicons#libraries).
Jon Rohan's avatar
Jon Rohan committed
28

Jon Rohan's avatar
Jon Rohan committed
29
Once the build passes on your pull request, you should see statuses with all the alpha versions of the libraries. You can then use these to test your changes.
Jon Rohan's avatar
Jon Rohan committed
30

Jon Rohan's avatar
Jon Rohan committed
31 32 33
[Here is an example pull request](https://github.com/primer/octicons/pull/206)

[<img src="https://user-images.githubusercontent.com/54012/37811102-45ec2abc-2e15-11e8-8c1d-2d162ddcdad2.png" width="700"/>](https://user-images.githubusercontent.com/54012/37811102-45ec2abc-2e15-11e8-8c1d-2d162ddcdad2.png)
Jon Rohan's avatar
Jon Rohan committed
34 35 36

---

Jon Rohan's avatar
Jon Rohan committed
37
# Maintainers accepting changes
Jon Rohan's avatar
Jon Rohan committed
38

Jon Rohan's avatar
Jon Rohan committed
39
Once submitted changes have been agreed upon, these instructions will guide core primer team members in merging in those changes.
Jon Rohan's avatar
Jon Rohan committed
40

Jon Rohan's avatar
Jon Rohan committed
41
## Step 1, Save:
Jon Rohan's avatar
Jon Rohan committed
42

Jon Rohan's avatar
Jon Rohan committed
43 44
Save the contributor’s figma file as a `.fig` file.

45
[<img src="https://user-images.githubusercontent.com/54012/37809888-940f5d38-2e0e-11e8-957f-99c162a1d4ff.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37809888-940f5d38-2e0e-11e8-957f-99c162a1d4ff.gif)
Jon Rohan's avatar
Jon Rohan committed
46

Jon Rohan's avatar
Jon Rohan committed
47
## Step 2, Import:
Jon Rohan's avatar
Jon Rohan committed
48

Jon Rohan's avatar
Jon Rohan committed
49
Drag and drop, or add the file to the main team project. Make sure its name is different from the master Octicons file.
Jon Rohan's avatar
Jon Rohan committed
50

51
[<img src="https://user-images.githubusercontent.com/54012/37809879-8d9824ee-2e0e-11e8-9b1d-e83316192eb0.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37809879-8d9824ee-2e0e-11e8-9b1d-e83316192eb0.gif)
Jon Rohan's avatar
Jon Rohan committed
52 53


Jon Rohan's avatar
Jon Rohan committed
54
## Step 3, Publish:
55

Jon Rohan's avatar
Jon Rohan committed
56
From the new imported file, publish the updated or new components to the team library. This published component makes importing into the master document easier.
57 58 59

[<img src="https://user-images.githubusercontent.com/54012/37807772-6734f926-2e04-11e8-98a0-9b4c73411bd3.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37807772-6734f926-2e04-11e8-98a0-9b4c73411bd3.gif)

Jon Rohan's avatar
Jon Rohan committed
60
## Step 4, Add:
61

Jon Rohan's avatar
Jon Rohan committed
62
In the Team Library you will see the new Octicons file, and all the components from that file. Add the new components to the master Octicons file. It makes changing easier if you drag it on top of the icon you are changing.
63 64 65

[<img src="https://user-images.githubusercontent.com/54012/37807775-6b1dea52-2e04-11e8-804a-a41c6bc04fd2.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37807775-6b1dea52-2e04-11e8-804a-a41c6bc04fd2.gif)

Jon Rohan's avatar
Jon Rohan committed
66
## Step 5, Replace:
67

Jon Rohan's avatar
Jon Rohan committed
68
Right click on the new component instance and select "Detach Instance". Then toggle both the old and new components open. Move the shape from the new component into the old component. Delete the old component’s shape. Delete the empty new component container.
69 70

[<img src="https://user-images.githubusercontent.com/54012/37807780-6ddba626-2e04-11e8-9a6b-749ac5b800fe.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37807780-6ddba626-2e04-11e8-9a6b-749ac5b800fe.gif)
Jon Rohan's avatar
Jon Rohan committed
71

Jon Rohan's avatar
Jon Rohan committed
72 73 74 75 76 77
## Step 6, Publishing:

Publish the component changes to your team library. You can now delete the imported `.fig` file from the contributor.

[<img src="https://user-images.githubusercontent.com/54012/37812350-cc2349ba-2e1c-11e8-8b80-d9ff2f8d4ea3.png" width="600"/>](https://user-images.githubusercontent.com/54012/37812350-cc2349ba-2e1c-11e8-8b80-d9ff2f8d4ea3.png)

Jon Rohan's avatar
Jon Rohan committed
78
Create a release branch, and run `npm run bump`. This will guide you through a prompt asking what all the new versions of the packages should be. After, push up your branch and open a pull request into master.
Jon Rohan's avatar
Jon Rohan committed
79

Jon Rohan's avatar
Jon Rohan committed
80
[master-octicons]: https://www.figma.com/file/FP7lqd1V00LUaT5zvdklkkZr/Octicons