mirror of
https://github.com/konpa/devicon.git
synced 2025-03-13 17:29:42 +01:00
Clean up and CONTRIBUTING upgrade (#595)
* Updated CONTRIBUTING * Clean up various scripts (no functional changes) * Update CONTRIBUTING.md Co-authored-by: Clemens Bastian <8781699+amacado@users.noreply.github.com> * Change icons to use devicon in README and CONTRIBUTING * Add optimize-bot into CONTRIBUTING.md * Update CONTRIBUTING.md Co-authored-by: David Leal <halfpacho@gmail.com> * Update README.md Co-authored-by: David Leal <halfpacho@gmail.com> * Update README.md Co-authored-by: David Leal <halfpacho@gmail.com> * Change release message step name * Update CONTRIBUTING.md Co-authored-by: David Leal <halfpacho@gmail.com> * Update CONTRIBUTING.md Co-authored-by: David Leal <halfpacho@gmail.com> * Update CONTRIBUTING.md Co-authored-by: David Leal <halfpacho@gmail.com> * Update CONTRIBUTING.md Co-authored-by: David Leal <halfpacho@gmail.com> * Update CONTRIBUTING.md Co-authored-by: David Leal <halfpacho@gmail.com> * Update CONTRIBUTING.md Co-authored-by: David Leal <halfpacho@gmail.com> * Changed all 'svg' to "SVG" Co-authored-by: Clemens Bastian <8781699+amacado@users.noreply.github.com> Co-authored-by: David Leal <halfpacho@gmail.com>
This commit is contained in:
Thomas Bui
GitHub
parent
0b86f7c9cb
commit
2c6a21d9f4
26
.github/drafts/check_svgs_monthly.py
vendored
26
.github/drafts/check_svgs_monthly.py
vendored
@ -1,26 +0,0 @@
|
||||
import traceback
|
||||
import sys
|
||||
|
||||
# pycharm complains that build_assets is an unresolved ref
|
||||
# don't worry about it, the script still runs
|
||||
from build_assets import filehandler, arg_getters
|
||||
from build_assets import util
|
||||
|
||||
|
||||
def main():
|
||||
"""
|
||||
Check the quality of the svgs of the whole icons folder.
|
||||
"""
|
||||
args = arg_getters.get_check_svgs_monthly_args()
|
||||
|
||||
try:
|
||||
devicon_json = filehandler.get_json_file_content(args.devicon_json_path)
|
||||
svgs = filehandler.get_svgs_paths(devicon_json, args.icons_folder_path)
|
||||
util.check_svgs(svgs)
|
||||
print("All SVGs found were good. Task completed.")
|
||||
except Exception as e:
|
||||
util.exit_with_err(e)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
42
.github/drafts/check_svgs_monthly.yml
vendored
42
.github/drafts/check_svgs_monthly.yml
vendored
@ -1,42 +0,0 @@
|
||||
name: Check SVGs Monthly
|
||||
on: workflow_dispatch
|
||||
# schedule:
|
||||
# - cron: '0 0 1 * *'
|
||||
jobs:
|
||||
check_develop:
|
||||
name: Check the SVGs' quality in the `develop` branch
|
||||
runs-on: ubuntu-18.04
|
||||
steps:
|
||||
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
ref: develop
|
||||
|
||||
- uses: actions/setup-python@v2
|
||||
with:
|
||||
python-version: 3.8
|
||||
|
||||
- name: Install dependencies
|
||||
run: python -m pip install --upgrade pip
|
||||
|
||||
- name: Run the check_svg script
|
||||
run: >
|
||||
python ./.github/scripts/check_svgs_monthly.py ./devicon.json ./icons
|
||||
|
||||
check_master:
|
||||
name: Check the SVGs' quality in the `master` branch
|
||||
runs-on: ubuntu-18.04
|
||||
steps:
|
||||
|
||||
- uses: actions/checkout@v2 # check out default branch, which is master
|
||||
|
||||
- uses: actions/setup-python@v2
|
||||
with:
|
||||
python-version: 3.8
|
||||
|
||||
- name: Install dependencies
|
||||
run: python -m pip install --upgrade pip
|
||||
|
||||
- name: Run the check_svg script
|
||||
run: >
|
||||
python ./.github/scripts/check_svgs_monthly.py ./icomoon.json ./devicon.json ./icons
|
||||
109
.github/drafts/peek_icons imgur.yml
vendored
109
.github/drafts/peek_icons imgur.yml
vendored
@ -1,109 +0,0 @@
|
||||
name: Peek Icons
|
||||
on:
|
||||
pull_request:
|
||||
types: [labeled]
|
||||
jobs:
|
||||
build:
|
||||
name: Get Fonts From Icomoon
|
||||
if: contains(github.event.pull_request.labels.*.name, 'bot:peek')
|
||||
runs-on: windows-2019
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Setup Python v3.8
|
||||
uses: actions/setup-python@v2
|
||||
with:
|
||||
python-version: 3.8
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
python -m pip install --upgrade pip
|
||||
pip install -r ./.github/scripts/requirements.txt
|
||||
- name: Run icomoon_peek.py
|
||||
env:
|
||||
PR_TITLE: ${{ github.event.pull_request.title }}
|
||||
shell: cmd
|
||||
run: >
|
||||
python ./.github/scripts/icomoon_peek.py
|
||||
./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json
|
||||
./devicon.json ./icons ./ --headless --pr_title "%PR_TITLE%"
|
||||
- name: Upload geckodriver.log for debugging purposes
|
||||
uses: actions/upload-artifact@v2
|
||||
if: failure()
|
||||
with:
|
||||
name: geckodriver-log
|
||||
path: ./geckodriver.log
|
||||
- name: Upload screenshot of the newly made icons
|
||||
id: icons_overview_img_step
|
||||
uses: devicons/public-upload-to-imgur@v2.1
|
||||
if: success()
|
||||
with:
|
||||
path: ./screenshots/new_icons.png
|
||||
client_id: ${{secrets.IMGUR_CLIENT_ID}}
|
||||
- name: Upload zoomed in screenshot of the newly made icons
|
||||
id: icons_detailed_img_step
|
||||
uses: devicons/public-upload-to-imgur@v2.1
|
||||
if: success()
|
||||
with:
|
||||
path: ./screenshots/screenshot_*.png
|
||||
client_id: ${{secrets.IMGUR_CLIENT_ID}}
|
||||
- name: Generate the markdowns for the screenshot and put it in the DETAILED_IMGS_MARKDOWN env var
|
||||
if: success()
|
||||
env:
|
||||
IMG_URLS: ${{ steps.icons_detailed_img_step.outputs.imgur_urls }}
|
||||
run: |
|
||||
echo 'DETAILED_IMGS_MARKDOWN<<EOF' >> $GITHUB_ENV
|
||||
python ./.github/scripts/generate_screenshot_markdown.py >> $GITHUB_ENV
|
||||
echo 'EOF' >> $GITHUB_ENV
|
||||
shell: bash
|
||||
- name: Comment on the PR about the result
|
||||
if: success()
|
||||
uses: github-actions-up-and-running/pr-comment@v1.0.1
|
||||
env:
|
||||
OVERVIEW_IMG_URL: ${{ fromJSON(steps.icons_overview_img_step.outputs.imgur_urls)[0] }}
|
||||
MESSAGE: |
|
||||
Hi!
|
||||
|
||||
I'm Devicons' Peek Bot and I just peeked at the icons that you wanted to add using [icomoon.io](https://icomoon.io/app/#/select).
|
||||
Here is the result below:
|
||||
|
||||
|
||||
|
||||
Here are the zoomed-in screenshots of the added icons:
|
||||
{1}
|
||||
|
||||
Note: If the images don't show up, it's probably because it has been autodeleted by Imgur after 6 months due to our API choice.
|
||||
|
||||
The maintainers will now take a look at it and decide whether to merge your PR.
|
||||
|
||||
Thank you for contributing to Devicon! I hope everything works out and your icons are accepted into the repo.
|
||||
|
||||
Cheers :),
|
||||
|
||||
Peek Bot
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
message: ${{format(env.MESSAGE, env.OVERVIEW_IMG_URL, env.DETAILED_IMGS_MARKDOWN)}}
|
||||
- name: Comment on the PR about the result
|
||||
if: failure()
|
||||
uses: github-actions-up-and-running/pr-comment@v1.0.1
|
||||
env:
|
||||
MESSAGE: |
|
||||
Hi!
|
||||
|
||||
I'm Devicons' Peek Bot and it seems we've ran into a problem. I'm supposed to check your svgs but I couldn't do my task due to an issue.
|
||||
|
||||
Can you please double check and fix the possible issues below:
|
||||
|
||||
- Your svgs are named and added correctly to the /icons folder as seen [here](https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md#orgGuidelines).
|
||||
- Your icon information has been added to the `devicon.json` as seen [here](https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md#updateDevicon)
|
||||
- Your PR title follows the format seen [here](https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md#overview)
|
||||
|
||||
Once everything is fixed, the maintainers will try again. If I still fail, the maintainers will investigate what cause this problem.
|
||||
|
||||
Thank you for your help :smile:
|
||||
|
||||
Cheers :),
|
||||
|
||||
Peek Bot
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
message: ${{env.MESSAGE}}
|
||||
15
.github/scripts/build_assets/arg_getters.py
vendored
15
.github/scripts/build_assets/arg_getters.py
vendored
@ -55,21 +55,6 @@ def get_check_svgs_on_pr_args():
|
||||
return parser.parse_args()
|
||||
|
||||
|
||||
def get_check_svgs_monthly_args():
|
||||
"""
|
||||
Get the commandline arguments for the check_svgs_monthly.py.
|
||||
"""
|
||||
parser = ArgumentParser(description="Check the SVGs to ensure their attributes are correct. Run monthly.")
|
||||
parser.add_argument("devicon_json_path",
|
||||
help="The path to the devicon.json",
|
||||
action=PathResolverAction)
|
||||
|
||||
parser.add_argument("icons_folder_path",
|
||||
help="The path to the icons folder",
|
||||
action=PathResolverAction)
|
||||
return parser.parse_args()
|
||||
|
||||
|
||||
def get_release_message_args():
|
||||
"""
|
||||
Get the commandline arguments for get_release_message.py.
|
||||
|
||||
2
.github/scripts/build_assets/filehandler.py
vendored
2
.github/scripts/build_assets/filehandler.py
vendored
@ -234,7 +234,7 @@ def get_added_modified_svgs(files_added_json_path: str,
|
||||
|
||||
def write_to_file(path: str, value: any):
|
||||
"""
|
||||
Write the value to a JSON file.
|
||||
Write the value to a file.
|
||||
"""
|
||||
with open(path, "w") as file:
|
||||
file.write(value)
|
||||
|
||||
51
.github/scripts/check_svgs_on_pr.py
vendored
51
.github/scripts/check_svgs_on_pr.py
vendored
@ -57,39 +57,42 @@ def check_svgs(svg_file_paths: List[Path]):
|
||||
# batch err messages together so user can fix everything at once
|
||||
err_msgs = []
|
||||
for svg_path in svg_file_paths:
|
||||
tree = et.parse(svg_path)
|
||||
root = tree.getroot()
|
||||
namespace = "{http://www.w3.org/2000/svg}"
|
||||
err_msg = [f"{svg_path}:"]
|
||||
try:
|
||||
tree = et.parse(svg_path)
|
||||
root = tree.getroot()
|
||||
namespace = "{http://www.w3.org/2000/svg}"
|
||||
err_msg = [f"{svg_path}:"]
|
||||
|
||||
if root.tag != f"{namespace}svg":
|
||||
err_msg.append(f"-root is '{root.tag}'. Root must be an 'svg' element")
|
||||
if root.tag != f"{namespace}svg":
|
||||
err_msg.append(f"-root is '{root.tag}'. Root must be an 'svg' element")
|
||||
|
||||
if root.get("viewBox") != "0 0 128 128":
|
||||
err_msg.append("-'viewBox' is not '0 0 128 128' -> Set it or scale the file using https://www.iloveimg.com/resize-image/resize-svg")
|
||||
if root.get("viewBox") != "0 0 128 128":
|
||||
err_msg.append("-'viewBox' is not '0 0 128 128' -> Set it or scale the file using https://www.iloveimg.com/resize-image/resize-svg")
|
||||
|
||||
acceptable_size = [None, "128px", "128"]
|
||||
if root.get("height") not in acceptable_size:
|
||||
err_msg.append("-'height' is present in svg element but is not '128' or '128px' -> Remove it or set it to '128' or '128px'")
|
||||
acceptable_size = [None, "128px", "128"]
|
||||
if root.get("height") not in acceptable_size:
|
||||
err_msg.append("-'height' is present in svg element but is not '128' or '128px' -> Remove it or set it to '128' or '128px'")
|
||||
|
||||
if root.get("width") not in acceptable_size:
|
||||
err_msg.append("-'width' is present in svg element but is not '128' or '128px' -> Remove it or set it to '128' or '128px'")
|
||||
if root.get("width") not in acceptable_size:
|
||||
err_msg.append("-'width' is present in svg element but is not '128' or '128px' -> Remove it or set it to '128' or '128px'")
|
||||
|
||||
if root.get("style") is not None and "enable-background" in root.get("style"):
|
||||
err_msg.append("-deprecated 'enable-background' in style attribute -> Remove it")
|
||||
if root.get("style") is not None and "enable-background" in root.get("style"):
|
||||
err_msg.append("-deprecated 'enable-background' in style attribute -> Remove it")
|
||||
|
||||
if root.get("x") is not None:
|
||||
err_msg.append("-unneccessary 'x' attribute in svg element -> Remove it")
|
||||
if root.get("x") is not None:
|
||||
err_msg.append("-unneccessary 'x' attribute in svg element -> Remove it")
|
||||
|
||||
if root.get("y") is not None:
|
||||
err_msg.append("-unneccessary 'y' attribute in svg element -> Remove it")
|
||||
if root.get("y") is not None:
|
||||
err_msg.append("-unneccessary 'y' attribute in svg element -> Remove it")
|
||||
|
||||
style = root.findtext(f".//{namespace}style")
|
||||
if style != None and "fill" in style:
|
||||
err_msg.append("-contains style declaration using 'fill' -> Replace classes with the 'fill' attribute instead")
|
||||
style = root.findtext(f".//{namespace}style")
|
||||
if style != None and "fill" in style:
|
||||
err_msg.append("-contains style declaration using 'fill' -> Replace classes with the 'fill' attribute instead")
|
||||
|
||||
if len(err_msg) > 1:
|
||||
err_msgs.append("\n".join(err_msg))
|
||||
if len(err_msg) > 1:
|
||||
err_msgs.append("\n".join(err_msg))
|
||||
except et.ParseError as e:
|
||||
raise Exception(f"SVG Error in file: {svg_path}. Full Error: \n" + str(e))
|
||||
|
||||
if len(err_msgs) > 0:
|
||||
return "\n\n".join(err_msgs)
|
||||
|
||||
2
.github/workflows/get_release_message.yml
vendored
2
.github/workflows/get_release_message.yml
vendored
@ -2,7 +2,7 @@ name: Get Release Message
|
||||
on: workflow_dispatch
|
||||
jobs:
|
||||
build:
|
||||
name: Get Fonts From Icomoon
|
||||
name: Get features since last release
|
||||
runs-on: ubuntu-18.04
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
149
CONTRIBUTING.md
149
CONTRIBUTING.md
@ -6,12 +6,12 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
<h2>Table of Content</h2>
|
||||
<ul>
|
||||
<li><a href="#terms">Terms</a></li>
|
||||
<li><a href="#overview">Overview on Submitting Icon</a></li>
|
||||
<li><a href="#overview">Overview on Submitting Icon (start here if new)</a></li>
|
||||
<li><a href="#versionNaming">Naming Conventions</a></li>
|
||||
<li><a href="#svgStandards">SVG Standards</a></li>
|
||||
<li><a href="#SVGStandards">SVG Standards</a></li>
|
||||
<li><a href="#orgGuidelines">Organizational Guidelines</a></li>
|
||||
<li><a href="#updateDevicon">Updating the <code>devicon.json</code></a></li>
|
||||
<li><a href="#example">Example</a></li>
|
||||
<li><a href="#example">Example of Submitting An Icon</a></li>
|
||||
<li><a href="#requestingIcon">Requesting An Icon</a></li>
|
||||
<li><a href="#teams">Maintainer/Reviewer/Teams</a></li>
|
||||
<li><a href="#buildScript">The Build Script: how it works and its quirks</a></li>
|
||||
@ -24,8 +24,8 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
<p>Here are some terms that we will use in this repo: </p>
|
||||
<ol>
|
||||
<li>"Technology" is used to describe a software, libraries, tool, etc...</li>
|
||||
<li>"Icon" refers to the svgs and icons version of a technology as a whole.</li>
|
||||
<li>"SVG/<code>svg</code>" refers to the <code>svg</code> versions of the Icons.</li>
|
||||
<li>"Icon" refers to the SVGs and icons version of a technology as a whole.</li>
|
||||
<li>"SVG/<code>SVG</code>" refers to the <code>svg</code> versions of the Icons.</li>
|
||||
<li>"icon" (lowercase) refers specficially to the font icon versions of the Icons.</li>
|
||||
</ol>
|
||||
|
||||
@ -33,16 +33,15 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
<h2 id="overview">Overview on Submitting Icons</h2>
|
||||
<p>Here is what you have to do to submit your icons to the repo.</p>
|
||||
<ol>
|
||||
<li>Create the svgs for each <a href="#versionNaming"> svg versions </a> that you have</li>
|
||||
<li>Put the svgs of each Icon into its own folders in <code>/icons</code> </li>
|
||||
<li>Create the SVGs for each <a href="#versionNaming"> SVG versions </a> that you have. Follow the <a href="#SVGStandards">convention</a> listed.</li>
|
||||
<li>Put the SVGs of each Icon into its own <a href="#orgGuidelines">folders</a> in <code>/icons</code></li>
|
||||
<li><a href="#updateDevicon">Update the <code>devicon.json</code> to include the new Icon</a> </li>
|
||||
<li>Create a separated pull request (PR) towards the <code>develop</code> branch for each Icon.</li>
|
||||
<li>Include the name of the Icon in the pull request title in this format: <code>new icon: <i>Icon name</i> (<i>versions</i>)</code> </li>
|
||||
<li><i>Optional</i>: Add images of the new svg(s) to the description of the pull request. This would help speed up the review process </li>
|
||||
<li><i>Optional</i>: Reference the issues regarding the new icon. </li>
|
||||
<li>A bot will check your SVGs. If there are any errors, please fix them as instructed.</li>
|
||||
<li>Wait for a maintainer to review your changes. They will run a script to check your icons.</li>
|
||||
<li>If there are no issues, they will accept your pull request and merge it using <a href="https://github.com/devicons/devicon/discussions/470">squash merging</a>. If there are any problems, they will let you know and give you a chance to fix it.</li>
|
||||
<li>Some bots will check your SVGs. If there are any errors, please fix them as instructed.</li>
|
||||
<li>Wait for a maintainer to review your changes. They will run the <a href='#peekBot'><code>peek-bot</code></a> to check your icons.</li>
|
||||
<li>If there are no issues, they will run the <a href='#optimizeBot'><code>optimize-bot</code></a> on your SVGs then merge it using <a href="https://github.com/devicons/devicon/discussions/470">squash merging</a>. If there are any problems, they will let you know and give you a chance to fix it.</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
@ -53,17 +52,48 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
<li>Amazon Web Services becomes <code>amazonwebservices</code></li>
|
||||
<li>Microsoft SQL Server becomes <code>microsoftsqlserver</code></li>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
<p>Each icon/svg can come in different versions. So far, we have:</p>
|
||||
<ul>
|
||||
<li><b>original</b>: the original logo. Can contain multiple colors. <a href="https://github.com/devicons/devicon/blob/master/icons/amazonwebservices/amazonwebservices-original.svg"> Example </a> </li>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
<p> Notes <p>
|
||||
<p>Each icon/SVG can come in different versions:</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td style='width: 33%'>
|
||||
<p><b>original</b>: the original logo. Can contain multiple colors. </p>
|
||||
<img src='https://raw.githubusercontent.com/devicons/devicon/master/icons/devicon/devicon-original.svg' height='100px' width='100px' />
|
||||
<h4>devicon-original.svg</h4>
|
||||
</td>
|
||||
<td style='width: 33%'>
|
||||
<p><b>plain</b>: a one-color version of the original logo. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. </p>
|
||||
<img src='https://raw.githubusercontent.com/devicons/devicon/master/icons/devicon/devicon-plain.svg' height='100px' width='100px' />
|
||||
<h4>devicon-plain-wordmark.svg</h4>
|
||||
</td>
|
||||
<td style='width: 33%'>
|
||||
<p><b>line</b>: a one-color, line version of the original logo. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. </p>
|
||||
<img src='https://raw.githubusercontent.com/devicons/devicon/master/icons/apache/apache-line.svg' height='100px' width='100px' />
|
||||
<h4>apache-line.svg</h4>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style='width: 33%'>
|
||||
<p><b>original-wordmark</b>: similar to the above but must contain the name of the technology. </p>
|
||||
<img src='https://raw.githubusercontent.com/devicons/devicon/master/icons/devicon/devicon-original-wordmark.svg' height='100px' width='100px' />
|
||||
<h4>devicon-original-wordmark.svg</h4>
|
||||
</td>
|
||||
<td style='width: 33%'>
|
||||
<p><b>plain-wordmark</b>: similar to the above but must contain the name of the technology. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. </p>
|
||||
<img src='https://raw.githubusercontent.com/devicons/devicon/master/icons/devicon/devicon-plain-wordmark.svg' height='100px' width='100px' />
|
||||
<h4>devicon-plain-wordmark.svg</h4>
|
||||
</td>
|
||||
<td style='width: 33%'>
|
||||
<p><b>line-wordmark</b>: similar to the above but must contain the name of the technology. Note that the icon version will be stripped of all colors so you don't have to strip beforehand.</p>
|
||||
<img src='https://raw.githubusercontent.com/devicons/devicon/master/icons/apache/apache-line-wordmark.svg' height='100px' width='100px' />
|
||||
<h4>apache-line-wordmark.svg</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
|
||||
<p><b>Notes:</b><p>
|
||||
<ul>
|
||||
<li>
|
||||
You don't need 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.
|
||||
@ -72,35 +102,38 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
The <b>plain</b> and <b>line</b> versions (with or without wordmark) are designed to be available in the final icon font.
|
||||
</li>
|
||||
<li>
|
||||
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.
|
||||
The <b>original</b> SVG version do not need to be simple and can contain numerous colors/gradients. However, if it's intended to be made into an icon, keep it simple.
|
||||
</li>
|
||||
<li>
|
||||
Some icons are really simple (ex. Apple), 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 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. Note: this only applies to font icon versions only, not the SVG versions.
|
||||
Some icons are really simple (ex. Apple), 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 one of the version (either <b>original</b> or <b>plain</b>). You can then add an alias in the <code>devicon.json</code> so they can be found with either the <b>original</b> or <b>plain</b> naming convention.
|
||||
<ul>
|
||||
<li>This only applies to font icon versions only, not the SVG versions.</li>
|
||||
<li>Aliases are no longer mandatory. If you are wondering which name to use, just pick <code>original</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<h2 id='svgStandards'>SVG Standards</h2>
|
||||
<p>Before you submit your logos/svgs, please ensure that they meet the following standard:</p>
|
||||
<h2 id='SVGStandards'>SVG Standards</h2>
|
||||
<p>Before you submit your logos/SVGs, please ensure that they meet the following standard:</p>
|
||||
<ul>
|
||||
<li>The background must be transparent.</li>
|
||||
<li>The svg name follows this convention: <code>(Technology name)-(original|plain|line)(-wordmark?).</code></li>
|
||||
<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. We will strip the color when turning it into icons so they can have any color.
|
||||
<li>The icon is centered horizontally and vertically within the <code>viewBox</code>.</li>
|
||||
<li>The SVG name follows this convention: <code>(Technology name)-(original|plain|line)(-wordmark?).</code></li>
|
||||
<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. The color will be removed when being turned into icons so the <code>.svg</code> can have any color.
|
||||
</li>
|
||||
<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>
|
||||
<li>Each <code>.svg</code> file contains one version of an icon in a <code>0 0 128 128</code> viewbox. You can use a service like <a href="https://www.iloveimg.com/resize-image/resize-svg">resize-image</a> for scaling the SVG.</li>
|
||||
<li>The icon's strokes and texts must be fills. This is to satisfy our conversion website's <a href="https://icomoon.io/#docs/stroke-to-fill">requirements.</a></li>
|
||||
<li>Each <code>.svg</code> file contains one version of an icon in a <code>0 0 128 128</code> viewbox. You can use a service like <a href="https://www.iloveimg.com/resize-image/resize-svg">resize-image</a> for scaling the svg.</li>
|
||||
<li>The <code>svg</code> element does not need the <code>height</code> and <code>width</code> attributes. However, if you do use it, ensure their values are either <code>"128"</code> or <code>"128px"</code>. Ex: <code>height="128"</code></li>
|
||||
<li>Each <code>.svg</code> must use the <code>fill</code> attribute instead of using <code>classes</code> for colors. See <a href="https://github.com/devicons/devicon/issues/407">here</a> for more details.</li>
|
||||
<li>The <code>SVG</code> element does not need the <code>height</code> and <code>width</code> attributes. However, if you do use it, ensure their values are either <code>"128"</code> or <code>"128px"</code>. Ex: <code>height="128"</code></li>
|
||||
<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>
|
||||
<li>Each <code>.svg</code> must use the <code>fill</code> attribute instead of using <code>classes</code> for colors. This is to prevent class name clashing when using inline SVG. See <a href="https://github.com/devicons/devicon/issues/407">here</a> for more details.</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<h2 id='orgGuidelines'>Organizational Guidelines</h2>
|
||||
<ul>
|
||||
<li>Each icon has its own folder located in the <code>icons</code> folder</li>
|
||||
<li>Each folder <i>may</i> contain one <code>.eps</code> file</li> (optional)
|
||||
<li>The <code>.eps</code> file should contains all available versions of an icon. Each version is contained in a 128px by 128px artboard</li>
|
||||
<li>Each folder must contain all the <code>.svg</code> files for the Icon</li>
|
||||
<li>Each icon has its own folder located in the <code>icons</code> folder. All the <code>.svg</code> files for the Icon must go in the same folder</li>
|
||||
<li><i>Optional</i>: Each folder <i>may</i> contain one <code>.eps</code> file. The <code>.eps</code> file should contains all available versions of an icon. Each version is contained in a 128px by 128px artboard</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
@ -123,8 +156,8 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
|
||||
// keep tracks of the different versions that you have.
|
||||
"versions": {
|
||||
// list the svgs that you have
|
||||
"svg": VersionString[],
|
||||
// list the SVGs that you have
|
||||
"SVG": VersionString[],
|
||||
|
||||
// list the fonts acceptable versions that you have
|
||||
"font": VersionString[]
|
||||
@ -146,7 +179,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
Here is what VersionString means:
|
||||
</p>
|
||||
<ol>
|
||||
<li> It's the version part of an <code>svg</code> file's name</li>
|
||||
<li> It's the version part of an <code>SVG</code> file's name</li>
|
||||
<li> If you have "html5-original", the version string would be "original" </li>
|
||||
<li> If you have "react-line-wordmark", the version string would be "line-wordmark" </li>
|
||||
<li> See <a href="#versionNaming">naming conventions section</a> for more details </li>
|
||||
@ -165,15 +198,15 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
||||
</pre>
|
||||
<hr>
|
||||
|
||||
<h2 id='example'>Example </h2>
|
||||
<h2 id='example'>Example of Submitting An Icon</h2>
|
||||
<p>
|
||||
As an example, let's assume you have created the svgs for Redhat and Amazon Web Services logos.
|
||||
As an example, let's assume you have created the SVGs for Redhat and Amazon Web Services logos.
|
||||
</p>
|
||||
<p>For the Redhat svg, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions. </p>
|
||||
<p>For the Amazon Web Services svgs, you have the "original", "original-wordmark", "plain-wordmark" versions. The "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.</p>
|
||||
<p>For the Redhat SVG, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions. </p>
|
||||
<p>For the Amazon Web Services SVGs, you have the "original", "original-wordmark", "plain-wordmark" versions. The "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.</p>
|
||||
<ol>
|
||||
<li>
|
||||
Put the svgs for each logo that you have into its own folders in <code>/icons</code>
|
||||
Put the SVGs for each logo that you have into its own folders in <code>/icons</code>
|
||||
<ul>
|
||||
<li>This means you would create two folders: one for <code>amazonwebservices</code> and one for <code>redhat</code></li>
|
||||
<li><b>Note</b>: don't do this in the same commits; we want to have each Icon in its own PR.</li>
|
||||
@ -192,7 +225,7 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
|
||||
"linux"
|
||||
],
|
||||
"versions": {
|
||||
"svg": [ // here are the versions that are available in svgs
|
||||
"SVG": [ // here are the versions that are available in svgs
|
||||
"original",
|
||||
"original-wordmark",
|
||||
"plain",
|
||||
@ -220,7 +253,7 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
|
||||
"server"
|
||||
],
|
||||
"versions": {
|
||||
"svg": [ // here are the versions that are available in svgs
|
||||
"SVG": [ // here are the versions that are available in svgs
|
||||
"original",
|
||||
"original-wordmark",
|
||||
"plain-wordmark"
|
||||
@ -236,7 +269,8 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
|
||||
{
|
||||
"base": "original", // here is the base version that we will upload to Icomoon
|
||||
"alias": "plain" // this is its alias. Our script will create a reference so users can search using "original" or "plain" for this icon
|
||||
// note that you don't provide aliases for the svg version. If "original" can't be made into a font, there's no need to provide it with a plain alias
|
||||
// note that you don't provide aliases for the SVG version. If "original" can't be made into a font, there's no need to provide it with a plain alias
|
||||
// note that this is now optional. You do not need to create aliases from now on. The attribute needs to stay though.
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -247,9 +281,7 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
|
||||
</li>
|
||||
<li>Create a separate pull request (PR) for each Icon.
|
||||
<ul>
|
||||
<li>This means you would have to create two PRs</li>
|
||||
<li>For Amazon Web Services, the branch name would be icons/amazonwebservices. </li>
|
||||
<li>For Redhat, the branch name would be icons/redhat. </li>
|
||||
<li>This means you would have to create one PR for Amazon Web Services and one PR for Redhat.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -311,10 +343,21 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
|
||||
<hr>
|
||||
<h2 id='buildScript'>The Build Script: how it works and its quirks</h2>
|
||||
<p>We rely on GitHub Actions, Python, Selenium, Imgur, and Gulp to automate our tasks. Please feel free to take a look at the workflow files. The codes should be clear enough to follow along.</p>
|
||||
<p>So far, the tasks in the build script are:</p>
|
||||
|
||||
<p>Here are the main bots/script that we use:</p>
|
||||
<ul>
|
||||
<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> Used by <b>peek-bot</b> and <b>build-bot</b>.</li>
|
||||
<li>Preview what an svg would look like as an icon using the upload svgs script (see <a href="https://github.com/devicons/devicon/pull/412">this</a>). Used by <b>peek-bot</b>.</li>
|
||||
<li id='peekBot'><code>peek-bot</code>: Upload the icons to Icomoon and see what it looks like. Doesn't download any icons at this time.</li>
|
||||
<li id='buildBot'><code>build-bot</code>: Build the icons by uploading them to Icomoon and download the resulting icon files. Also update the css file</li>
|
||||
<li id='optimizeBot'><code>optimize-bot</code>: Optimize the SVGs by minifying them and prefixing their IDs with the file names. This is done so using inline SVGs from this repository will not cause ID clash.</li>
|
||||
<li id='checkSvgBot'><code>check-SVG-bot</code>: Check the SVGs uploaded and ensure they have the correct view box, fills, etc..</li>
|
||||
<li id='npmReleaseBot'><code>npm-release-bot</code>: Update the NPM package.</li>
|
||||
<li id='releaseMessageBot'><code>release-message-bot</code>: Create the release message for the PR.</li>
|
||||
</ul>
|
||||
|
||||
<p>Here are the modular tasks in the build script:</p>
|
||||
<ul>
|
||||
<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> Used by <b>peek-bot</b> and <b>build-bot</b>.</li>
|
||||
<li>Preview what an SVG would look like as an icon using the upload svgs script (see <a href="https://github.com/devicons/devicon/pull/412">this</a>). Used by <b>peek-bot</b>.</li>
|
||||
<li>Build, combine, and minify CSS files. For details, see <a href="https://github.com/devicons/devicon/pull/290">this</a>. Used by <b>build-bot</b>.</li>
|
||||
<li>Send screenshots to Imgur and upload it to a PR. See <a href="https://github.com/devicons/devicon/pull/398">the PR for the Imgur action</a> and <a href="https://github.com/devicons/devicon/pull/481"> the PR for uploading the pictures to a PR. Used by <b>peek-bot</b> and <b>build-bot</b>.</a>
|
||||
<li>Ensure code quality is up to standard</li>
|
||||
@ -356,7 +399,7 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
|
||||
<ul>
|
||||
<li>See <a href="https://github.com/devicons/devicon/pull/532">this PR</a>'s peek result.</li>
|
||||
<li>This is caused by a bug in Icomoon's parser (see <a href="https://github.com/devicons/devicon/pull/532#issuecomment-827180766">this</a>).</li>
|
||||
<li>Solution: Luckily this is an extremely rare case. Try remake the svg in a different way (using different paths/shapes) and test using Icomoon.</li>
|
||||
<li>Solution: Luckily this is an extremely rare case. Try remake the SVG in a different way (using different paths/shapes) and test using Icomoon.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
40
README.md
40
README.md
@ -58,7 +58,7 @@
|
||||
<h2 id="about">About the project</h2>
|
||||
<p>
|
||||
Devicon aims to gather all logos representing development languages and tools.
|
||||
Each icon comes in several versions: font/svg, original/plain/line, colored/not colored, wordmark/no wordmark.
|
||||
Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, wordmark/no wordmark.
|
||||
Devicon has 150+ icons. And it's growing!<br />
|
||||
</p>
|
||||
<p>
|
||||
@ -78,7 +78,7 @@
|
||||
<h2 id="getting-started">Getting started</h2>
|
||||
<p>
|
||||
For a super fast setup go check <a href="https://devicon.dev">devicon.dev</a>.<br />
|
||||
You can either <a href="#getting-started-svg">use the raw svg</a> icons or our <a href="#getting-started-font">devicon font</a> (which is
|
||||
You can either <a href="#getting-started-svg">use the raw SVG</a> icons or our <a href="#getting-started-font">devicon font</a> (which is
|
||||
also available via CDN).
|
||||
</p>
|
||||
|
||||
@ -110,44 +110,48 @@ yarn add devicon
|
||||
<p>Start using icons with <code><i></code>-tag</p>
|
||||
|
||||
```html
|
||||
<!-- for git plain version -->
|
||||
<i class="devicon-git-plain"></i>
|
||||
<!-- for devicon plain version -->
|
||||
<i class="devicon-devicon-plain"></i>
|
||||
|
||||
<!-- for git plain version with wordmark -->
|
||||
<i class="devicon-git-plain-wordmark"></i>
|
||||
<!-- for devicon plain version with wordmark -->
|
||||
<i class="devicon-devicon-plain-wordmark"></i>
|
||||
|
||||
<!-- for git plain version colored with git main color (devicon-color.css or devicon.min.css required) -->
|
||||
<i class="devicon-git-plain colored"></i>
|
||||
<!-- for devicon plain version colored with devicon main color -->
|
||||
<i class="devicon-devicon-plain colored"></i>
|
||||
|
||||
<!-- for git plain version with wordmark colored with git main color (devicon-color.css or devicon.min.css required) -->
|
||||
<i class="devicon-git-plain-wordmark colored"></i>
|
||||
<!-- for devicon plain version with wordmark colored with devicon main color -->
|
||||
<i class="devicon-devicon-plain-wordmark colored"></i>
|
||||
```
|
||||
|
||||
<p>
|
||||
An alternate way to use <code>devicon</code> is by copy/paste the raw svg code
|
||||
An alternate way to use <code>devicon</code> is by copy/paste the raw SVG code
|
||||
to your project.
|
||||
</p>
|
||||
<h4 id="getting-started-svg">Copy/paste svg code (from the <a href="https://github.com/devicons/devicon/tree/master/icons">svg folder</a> or the <a href="https://devicon.dev">project page</a></h4>
|
||||
<h4 id="getting-started-svg">Copy/paste SVG code (from the <a href="https://github.com/devicons/devicon/tree/master/icons">svg folder</a> or the <a href="https://devicon.dev">project page</a>)</h4>
|
||||
|
||||
```html
|
||||
<!-- for git plain version -->
|
||||
<svg class="devicon-git-plain" viewBox="0 0 128 128">
|
||||
<path fill="#F34F29" d="M124.742,58.378L69.625,3.264c-3.172-3.174-8.32-3.174-11.497,0L46.685,14.71l14.518,14.518c3.375-1.139,7.243-0.375,9.932,2.314c2.703,2.706,3.462,6.607,2.293,9.993L87.42,55.529c3.385-1.167,7.292-0.413,9.994,2.295c3.78,3.777,3.78,9.9,0,13.679c-3.78,3.78-9.901,3.78-13.683,0c-2.842-2.844-3.545-7.019-2.105-10.521L68.578,47.933l-0.002,34.341c0.922,0.455,1.791,1.063,2.559,1.828c3.779,3.777,3.779,9.898,0,13.683c-3.779,3.777-9.904,3.777-13.679,0c-3.778-3.784-4.088-9.905-0.311-13.683C58.079,83.169,59,82.464,60,81.992V47.333c-1-0.472-1.92-1.172-2.856-2.111c-2.861-2.86-3.396-7.06-1.928-10.576L40.983,20.333L3.229,58.123c-3.175,3.177-3.155,8.325,0.02,11.5l55.126,55.114c3.173,3.174,8.325,3.174,11.503,0l54.86-54.858C127.913,66.703,127.916,61.552,124.742,58.378z"/>
|
||||
</svg>
|
||||
<!-- for devicon plain version -->
|
||||
<svg id="Devicon" class='devicon-devicon-plain' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path id="plain" fill="#60be86" d="M64,7.83H4.77L14.95,95.13l49,25,.06,0,49.07-25L123.23,7.83Zm42.77,54.86c0,.88,0,1.67-.77,2L73.25,80.44l-2.42,1.13-.27-3.15V72.23l.24-1.57,1.09-.47L95.07,59.81l-21.54-9.6L64.35,68.34,58.9,78.87l-1.22,2.27-2.05-.9L22,64.71a2.42,2.42,0,0,1-1.45-2V56.91a2.39,2.39,0,0,1,1.42-2l34-15.73,3.21-1.44v9.66l.24,1.34-1.56.7L34.45,59.79,56.3,69.42l8.05-16,6.21-12.65,1.13-2.28,1.81.91L106,54.89c.73.35.76,1.14.76,2Z"/></svg>
|
||||
```
|
||||
|
||||
Add css rules in your stylesheet
|
||||
```css
|
||||
.devicon-git-plain {
|
||||
.devicon-devicon-plain {
|
||||
max-width: 2em;
|
||||
}
|
||||
|
||||
/* if you want to change the original color */
|
||||
.devicon-git-plain path {
|
||||
.devicon-devicon-plain path {
|
||||
fill: #4691f6;
|
||||
}
|
||||
```
|
||||
|
||||
<h4>You can also use the <code>img</code> tag and referencing an svg directly from the repo.</h4>
|
||||
|
||||
```html
|
||||
<img src='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/devicon/devicon-original.svg'>
|
||||
```
|
||||
|
||||
<h2 id="request-icon">Requesting icon</h2>
|
||||
<p>
|
||||
When you want to request a icon please feel feel to create a issue. See our <a href="/CONTRIBUTING.md#requestingIcon">contribution guidelines</a> for more information.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user