Skip to content

Commit e9c25c2

Browse files
tariq86tariq86
committed
Merge remote-tracking branch 'upstream/develop' into feature/306-jenkins
* upstream/develop: Fix the delete-branch arg in the workflow yaml Built new icons, icomoon.json and devicon.css Fix the yunohost-plain.svg Add new_icons.png to gitignore. Fixed yunohost, clojure, clojurescript, and redux Built new icons, icomoon.json and devicon.css Add screenshot code, update the CONTRIBUTING.md and fix clojure Built new icons, icomoon.json and devicon.css Fix it so mocha now have a plain font Fix an error in CONTRIBUTING.md Added a section on svg standards to CONTRIBUTING.md Built new icons, icomoon.json and devicon.css Added code to ensure we always get run log Added colored class and change README.md Updated the CONTRIBUTING.md, README.md and code doc
2 parents ec72578 + efa33b8 commit e9c25c2

18 files changed

Lines changed: 626 additions & 62 deletions

‎.github/scripts/build_assets/SeleniumRunner.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@ def upload_svgs(self, svgs: List[str]):
130130
self.test_for_possible_alert(self.SHORT_WAIT_IN_SEC, "Dismiss")
131131
self.remove_color_from_icon()
132132

133+
# take a screenshot of the icons that were just added
134+
self.driver.save_screenshot("new_icons.png");
133135
self.click_hamburger_input()
134136
select_all_button = WebDriverWait(self.driver, self.LONG_WAIT_IN_SEC).until(
135137
ec.element_to_be_clickable((By.XPATH, "//button[text()='Select All']"))

‎.github/scripts/build_assets/filehandler.py‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
def find_new_icons(devicon_json_path: str, icomoon_json_path: str) -> List[dict]:
1010
"""
1111
Find the newly added icons by finding the difference between
12-
the devicon_test.json and the icomoon_test.json.
13-
:param devicon_json_path, the path to the devicon_test.json.
12+
the devicon.json and the icomoon.json.
13+
:param devicon_json_path, the path to the devicon.json.
1414
:param icomoon_json_path: a path to the iconmoon.json.
1515
:return: a list of the new icons as JSON objects.
1616
"""
@@ -33,8 +33,8 @@ def is_not_in_icomoon_json(icon, icomoon_json) -> bool:
3333
Checks whether the icon's name is not in the icomoon_json.
3434
:param icon: the icon object we are searching for.
3535
:param icomoon_json: the icomoon json object parsed from
36-
icomoon_test.json.
37-
:return: True if icon's name is not in the icomoon_test.json, else False.
36+
icomoon.json.
37+
:return: True if icon's name is not in the icomoon.json, else False.
3838
"""
3939
pattern = re.compile(f"^{icon['name']}-")
4040

@@ -46,7 +46,7 @@ def is_not_in_icomoon_json(icon, icomoon_json) -> bool:
4646

4747
def get_svgs_paths(new_icons: List[dict], icons_folder_path: str) -> List[str]:
4848
"""
49-
Get all the suitable svgs file path listed in the devicon_test.json.
49+
Get all the suitable svgs file path listed in the devicon.json.
5050
:param new_icons, a list containing the info on the new icons.
5151
:param icons_folder_path, the path where the function can find the
5252
listed folders.
@@ -66,7 +66,9 @@ def get_svgs_paths(new_icons: List[dict], icons_folder_path: str) -> List[str]:
6666
aliases = [] # create empty list of aliases if not provided in devicon.json
6767

6868
for font_version in icon_info["versions"]["font"]:
69+
# if it's an alias, we don't want to make it into an icon
6970
if is_alias(font_version, aliases):
71+
print(f"Not exist {icon_info['name']}-{font_version}.svg")
7072
continue
7173

7274
file_name = f"{icon_info['name']}-{font_version}.svg"

‎.github/workflows/build_icons.yml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,16 @@ jobs:
2727
./icomoon.json ./devicon.json ./icons ./ --headless
2828
- name: Upload geckodriver.log for debugging purposes
2929
uses: actions/upload-artifact@v2
30+
if: ${{failure()}}
3031
with:
3132
name: geckodriver-log
3233
path: ./geckodriver.log
34+
- name: Upload screenshot of the newly made icons
35+
uses: actions/upload-artifact@v2
36+
if: ${{success()}}
37+
with:
38+
name: new_icons
39+
path: ./new_icons.png
3340
- name: Running npm task for building devicon.min.css
3441
if: ${{ success() }}
3542
run: npm run build-css
@@ -41,4 +48,4 @@ jobs:
4148
commit-message: 'Built new icons, icomoon.json and devicon.css'
4249
title: 'bot:build new icons, icomoon.json and devicon.css'
4350
body: 'Automated font-building task ran by GitHub Actions bot'
44-
delete-branch: true
51+
delete-branch: ${{true}}

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ node_modules
33
.idea
44
geckodriver.log
55
__pycache__
6-
*.pyc
6+
*.pyc
7+
new_icons.png

‎CONTRIBUTING.md‎

Lines changed: 217 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,239 @@
22
<p>
33
First of all, thanks for taking the time to contribute! This project can only grow and live by your countless contributions. To keep this project maintable we developed some guidelines for contributions.
44
</p>
5-
<h2>Submitting icon</h2>
5+
6+
<h2>Table of Content</h2>
67
<ul>
7-
<li>Create a separated pull request for each icon (no matter how many variations)</li>
8-
<li>Include the name of the icon in the pull request f.e. "new icon: html5 (original, plain, line)"</li>
9-
<li>At least the plain or line version of the icon is required (since those are required for the icon font)</li>
10-
<li>Modify <a href="https://github.com/konpa/devicon/blob/master/devicon.json">devicon.json</a> to include the icon (or variations)</li>
11-
<li>Modify <a href="https://github.com/konpa/devicon/blob/master/devicon-colors.css">devicon-colors.css</a> to include the colored version of the icon</li>
12-
<li>optional: Add a image of the new icon(s) to the description of the pull request</li>
13-
<li>optional: Reference the issues regarding the new icon</li>
8+
<li><a href="#overview">Overview on Submitting Icon</a></li>
9+
<li><a href="#versionNaming">Naming Conventions</a></li>
10+
<li><a href="#svgStandards">SVG Standards</a></li>
11+
<li><a href="#orgGuidelines">Organizational Guidelines</a></li>
12+
<li><a href="#updateDevicon">Updating the <code>devicon.json</code></a></li>
13+
<li><a href="#example">Example</a></li>
14+
<li><a href="#requestingIcon">Requesting An Icon</a></li>
15+
<li><a href="#buildScript">Regarding the Build Script</a></li>
1416
</ul>
15-
<h3>Icon formats and naming conventions</h3>
16-
<p>Each icon comes in different variations:</p>
17+
18+
<hr>
19+
<h2 id="overview">Overview on Submitting Icon</h2>
20+
<p>Here is an overview of what you have to do to submit your icons to the repo.</p>
21+
<ol>
22+
<li>Create the svgs for each logo versions that you have </li>
23+
<li>Put the svgs for each logo into its own folders in <code>/icons</code> </li>
24+
<li><a href="#updateDevicon">Update the <code>devicon.json</code> to include the new icon</a> </li>
25+
<li>Create a separated pull request (PR) for each icon (no matter how many versions). </li>
26+
<li>Include the name of the icon in the pull request title. Follow this format: <code>new icon: {{logoName}} ({{versions}})</code> </li>
27+
<li><i>Optional</i>: Add images of the new icon(s) to the description of the pull request. This would help speed up the review process </li>
28+
<li><i>Optional</i>: Reference the issues regarding the new icon. </li>
29+
<li>Wait for a repo maintainer to review your changes. Once they are satisfied, they will <a href="#buildScript">build your repo </a>. This will create a PR into your branch.</li>
30+
<li>Review the PR. It should contain the icon versions of your svgs. Accept the changes if you are satisfied</li>
31+
<li>Once you accept the changes, a maintainer will accept your PR into the repo.</li>
32+
</ol>
33+
34+
<hr>
35+
<h2 id='versionNaming'>Versions and Naming Conventions</h2>
36+
<p>Each icon can come in different versions. So far, we have:</p>
1737
<ul>
18-
<li>original</li>
19-
<li>original-wordmark</li>
20-
<li>plain</li>
21-
<li>plain-wordmark</li>
22-
<li>line</li>
23-
<li>line-wordmark</li>
38+
<li><b>original</b>: the original logo. Can contains multiple colors. <a href="https://github.com/devicons/devicon/blob/master/icons/amazonwebservices/amazonwebservices-original.svg"> Example </a> </li>
39+
<li><b>original-wordmark</b>: similar to the above but must contain the name of the technology.<a href="https://github.com/devicons/devicon/blob/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg"> Example </a></li>
40+
<li><b>plain</b>: a one-color version of the original logo.<a href="https://github.com/devicons/devicon/blob/master/icons/android/android-plain.svg"> Example </a></li>
41+
<li><b>plain-wordmark</b>: a one-color version of the original logo but with wordmark.<a href="https://github.com/devicons/devicon/blob/master/icons/android/android-plain-wordmark.svg"> Example </a></li>
42+
<li><b>line</b>: a one-color, line version of the original logo.<a href="https://github.com/devicons/devicon/blob/master/icons/apache/apache-line.svg"> Example </a></li>
43+
<li><b>line-wordmark</b>: a one-color, line version of the original logo but with wordmark.<a href="https://github.com/devicons/devicon/blob/master/icons/apache/apache-line-wordmark.svg"> Example </a></li>
2444
</ul>
2545
<p>
26-
This is not mandatory, an icon can only have one or two variations available. Just keep in mind that the minimum is 1 and the maximum 6 (for now).
46+
It is not mandatory to have 6 versions for each icon. An icon can only have one or two versions available. Just keep in mind that the minimum is 1 and the maximum 6 (for now). You must also have at least one version that can be make into an icon.
2747
</p>
2848
<p>
29-
The plain and line variations (with or without wordmark) are designed to be available in the final icon font. So they need to stay as simple as possible (one color and ensure that the paths are united before to export to svg). You can use a service like <a href="https://compressor.io/">compressor</a> or <a href="https://petercollingridge.appspot.com/svg-editor">SVG Editor</a> in order to optimize the svg file.
49+
The <b>plain</b> and <b>line</b> versions (with or without wordmark) are designed to be available in the final icon font.
3050
</p>
3151
<p>
32-
The original versions are only available in svg format, so they do not need to be as simple and they can contain numerous colors.
52+
The <b>original</b> version are only available in svg format, so they do not need to be as simple and can contain numerous colors.
3353
</p>
3454
<p>
35-
Some icons are really simple (like the apple one), so the original version can be used for the icon font. In this case, I'll add an alias so they can be found with the "original" or "plain" naming convention.
55+
Some icons are really simple (like the Apple one), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make only one of the version (either "original" or "plain"). You can then add an alias in the <code>devicon.json</code> so they can be found with either the "original" or "plain" naming convention.
3656
</p>
37-
<h3>Organizational guidelines</h3>
57+
58+
<hr>
59+
<h2 id='svgStandards'>SVG Standards</h2>
60+
<p>Before you submit your logos/svgs, please ensure that they meet the following standard:</p>
3861
<ul>
39-
<li>Each icon has his own folder located in the "icons" folder</li>
40-
<li>Each icon folder contains one .eps file and as many .svg files as versions available</li>
41-
<li>The .eps file contains all available versions of an icon. Each version is contained in a 128px by 128px artboard</li>
42-
<li>Each .svg file contains one version of an icon in a "0 0 128 128" viewbox</li>
43-
<li>The naming convention for the svg file is the following: (icon name)-(original/plain/line)-(wordmark)</li>
62+
<li>The background must be transparent.</li>
63+
<li>The <b>plain</b> and <b>line</b> versions (with or without wordmark) need to stay as simple as possible. They must have only one color and the paths are united before exporting to svg.
64+
</li>
65+
<li>Optimize/compress your SVGs. You can use a service like <a href="https://compressor.io/">compressor</a> or <a href="https://petercollingridge.appspot.com/svg-editor">SVG Editor</a>.</li>
66+
<li>
4467
</ul>
45-
<h2>Requesting a icon</h2>
68+
69+
<hr>
70+
<h2 id='orgGuidelines'>Organizational Guidelines</h2>
71+
<ul>
72+
<li>Each icon has its own folder located in the <code>icons</code> folder</li>
73+
<li>Each icon folder contains one <code>.eps</code> file and as many <code>.svg</code> files as versions available</li>
74+
<li>The <code>.eps</code> file contains all available versions of an icon. Each version is contained in a 128px by 128px artboard</li>
75+
<li>Each <code>.svg</code> file contains one version of an icon in a <code>0 0 128 128</code> viewbox</li>
76+
<li>The naming convention for the svg file is the following: <code>(icon name)-(original|plain|line)-(wordmark)</code></li>
77+
</ul>
78+
79+
<hr>
80+
<h2 id='updateDevicon'> Updating the <code>devicon.json</code> </h2>
81+
<p>
82+
Before you open a PR into Devicon, you'd have to update the <code>devicon.json</code>. This is essential for our build script to work and to document your work.
83+
</p>
84+
<p>
85+
Here is the object that each of your logo must have:
86+
</p>
87+
88+
<pre>
89+
<code>
90+
{
91+
"name": string, // the official name of the technology. Must be lower case, no space or use the dash '-' character.
92+
"tags": string[], // list of tags relating to the technology for search purpose
93+
"versions": {
94+
"svg": VersionString[], // list the svgs that you have
95+
"font": VersionString[] // list the fonts acceptable versions that you have
96+
},
97+
"color": string, // the main color of the logo. Only track 1 color
98+
"aliases": AliasObj[] // keeps track of the aliases
99+
}
100+
</code>
101+
</pre>
102+
103+
<p>
104+
Here is the AliasObj interface:
105+
</p>
106+
<pre>
107+
<code>
108+
{
109+
"base": VersionString, // the base version
110+
"alias": VersionString // the alias version that's similar to the base version
111+
}
112+
</code>
113+
</pre>
114+
115+
<p>
116+
Here is what VersionString means:
117+
</p>
118+
<ol>
119+
<li> If you have "html5-original", the version string would be "original" </li>
120+
<li> If you have "react-line-wordmark", the version string would be "line-wordmark" </li>
121+
<li> See <a href="#iconFormat">Icon Formats and Naming Conventions</a> for more details </li>
122+
</ol>
123+
124+
<hr>
125+
<h2 id='example'>Example </h2>
126+
<p>
127+
As an example, let's assume you have created the svgs for Amazon Web Services and Redhat logos.
128+
</p>
129+
<p>For the Amazon Web Services svgs, you have the following versions: "original", "original-wordmark", "plain-wordmark". However, the "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.</p>
130+
<p>For the Redhat svg, you have the "original", "original-wordmark", "plain", "plain-wordmark" versions. </p>
131+
<ol>
132+
<li>
133+
Put the svgs for each logo that you have into its own folders in <code>/icons</code>
134+
<ul>
135+
<li>This means you would create two folders: one for <code>amazonwebservices</code> and one for <code>redhat</code></li>
136+
<li><b>Note</b>: don't do this in the same commits. We want to have each logo in its own PR so don't create these two folders in the same commit</li>
137+
</ul>
138+
</li>
139+
<li>
140+
<a href="#updateDevicon">Update the <code>devicon.json</code> to include the icon (or variations)</a>
141+
<ul>
142+
<li>For the <code>amazonwebservices</code>, you would do this
143+
<pre>
144+
<code>
145+
{
146+
"name": "amazonwebservices",
147+
"tags": [
148+
"cloud",
149+
"hosting",
150+
"server"
151+
],
152+
"versions": {
153+
"svg": [ // here are the versions that are available in svgs
154+
"original",
155+
"original-wordmark",
156+
"plain-wordmark"
157+
],
158+
"font": [ // here are the versions that will be used to create icons
159+
"original", // original is simple enough to be used as plain
160+
"plain-wordmark",
161+
]
162+
},
163+
"color": "#F7A80D", // note the '#' character
164+
"aliases": [
165+
{
166+
"base": "original", // here is the base version aka the one that we will upload to Icomoon
167+
"alias": "plain" // this is its alias. Our script will create a reference so we can search using "original" or "plain"
168+
}
169+
]
170+
}
171+
</code>
172+
</pre>
173+
</li>
174+
<li>For the <code>redhat</code>, you would do this
175+
<pre>
176+
<code>
177+
{
178+
"name": "redhat",
179+
"tags": [
180+
"server",
181+
"linux"
182+
],
183+
"versions": {
184+
"svg": [
185+
"original",
186+
"original-wordmark",
187+
"plain",
188+
"plain-wordmark"
189+
],
190+
"font": [
191+
"plain",
192+
"plain-wordmark"
193+
]
194+
},
195+
"color": "#e93442",
196+
"aliases": [] // no aliases
197+
},
198+
</code>
199+
</pre>
200+
</li>
201+
<li><b>Note</b>: again, don't do this in the same commits. We want to have each logo in its own PR so don't create two folders in the same commit</li>
202+
</ul>
203+
</li>
204+
<li>Create a separated pull request (PR) for each icon (no matter how many variations).
205+
<ul>
206+
<li>This means you would have to create two PRs</li>
207+
<li>For Amazon Web Services, the branch name would be icons/amazonwebservices. </li>
208+
<li>For Redhat, the branch name would be icons/redhat. </li>
209+
<li> </li>
210+
</ul>
211+
</li>
212+
<li>
213+
Include the name of the icon in the pull request. Follow this format: "new icon: {{logoName}} ({{versions}})"
214+
<ul>
215+
<li>For Amazon Web Services, your PR title should be "new icon: amazonwebservices (original, original-wordmark, plain-wordmark)"</li>
216+
<li>For Redhat, your PR title should be "new icon: redhat (original, original-wordmark, plain, plain-wordmark)"</li>
217+
</ul>
218+
</li>
219+
<li>For the rest of the steps, you can follow <a href="#overview">Overview on Submitting Icon</a></li>
220+
</ol>
221+
222+
<hr>
223+
<h2 id='requestingIcon'>Requesting an Icon</h2>
46224
<p>When you want to request a new icon please feel free to create a issue following some simple guidelines:</p>
47225
<ul>
48226
<li>Search for other issues already requesting the icon</li>
49-
<li>Create an issue naming it "Icon request: <i>name-of-the-icon</i>"; please create separated issues for each icon</li>
227+
<li>If an issue doesn't exist, create an issue naming it "Icon request: <i>name-of-the-icon</i>". </li>
228+
<li>Please create separated issues for each icon</li>
50229
<li>optional: Include links where the icon can be found</li>
51230
</ul>
231+
232+
<hr>
233+
<h2 id='buildScript'>Regarding The Build Script</h2>
234+
<p>To make adding icons easier for repo maintainers, we rely on GitHub Actions, Python, Selenium, and Gulp to automate our tasks.</p>
235+
<p>So far, the tasks that we have automated are:</p>
236+
<ul>
237+
<li>Upload svgs to <a href="https://icomoon.io/app/#/select">icomoon.io</a> and get the icons back. For details, see <a href="https://github.com/devicons/devicon/issues/252"> the original disscussion</a>, <a href="https://github.com/devicons/devicon/pull/268">this PR that introduce the feature</a> and <a href="https://github.com/devicons/devicon/issues/300">the final changes to it.</a></li>
238+
<li>Build, combine, and minify CSS files. For details, see <a href="https://github.com/devicons/devicon/pull/290">this</a></li>
239+
<li>Ensure code quality is up to standard</li>
240+
</ul>

‎README.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
Devicon aims to gather all logos representing development languages and tools.
66
Each icon comes in several versions: font/svg, original/plain/line, colored/not colored, wordmark/no wordmark.
77

8-
Devicon it's 80+ icons and 200+ versions. And it's growing!
8+
Devicon has 80+ icons and 200+ versions. And it's growing!
99

1010
See all available icons on the [new website](https://devicons.github.io/devicon/).
1111

@@ -43,13 +43,11 @@ _2 ways of using devicon:_
4343

4444
#### Icons font
4545

46-
- Upload devicon.css and font files to your project
46+
- Upload devicon.min.css and font files to your project
47+
- Note: the `devicon.css` file is not the same as the `devicon.min.css`. It doesn't contain any colors or aliases.
4748

4849
```html
49-
<link rel="stylesheet" href="devicon.css">
50-
51-
<!-- if you want colored versions -->
52-
<link rel="stylesheet" href="devicon-colors.css">
50+
<link rel="stylesheet" href="devicon.min.css">
5351
```
5452

5553
- Add icon using `<i>` tag
@@ -104,10 +102,10 @@ if you like to restore the settings stored in the configuration file.
104102

105103
The next step is to click on **Generate font** and download the resulting archive. Extract it
106104
contents and you will find a [fonts](./fonts) directory next to a `style.css`. Replace the content of the `fonts` folder,
107-
merge the `style.css` with [devicon.css](./devicon.css) and follow the next step to build the final stylesheet.
105+
rename the `style.css` to [devicon.css](./devicon.css) and follow the next step to build the final stylesheet.
108106

109107
### Build and minify stylesheet
110108
Run the following command to build the resulting file `devicon.min.css`
111109
```bash
112-
gulp default
110+
npm run build-css
113111
```

0 commit comments

Comments
 (0)