From 80a9ccdc01e7cf1ab75c3399781926dcdb050a5e Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Sat, 1 May 2021 11:25:31 -0700 Subject: [PATCH 01/16] Updated CONTRIBUTING --- CONTRIBUTING.md | 71 ++++++++++++++++++++++++++++++------------------- 1 file changed, 44 insertions(+), 27 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7820950c2..2f0a31236 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,12 +6,12 @@ First of all, thanks for taking the time to contribute! This project can only gr

Table of Content

-

Each icon/svg can come in different versions. So far, we have:

+

Each icon/svg can come in different versions:

Notes

@@ -84,23 +103,22 @@ First of all, thanks for taking the time to contribute! This project can only gr

Before you submit your logos/svgs, please ensure that they meet the following standard:

Organizational Guidelines

@@ -165,7 +183,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
-

Example

+

Example of Submitting An Icon

As an example, let's assume you have created the svgs for Redhat and Amazon Web Services logos.

@@ -237,6 +255,7 @@ 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 this is now optional. You do not need to create aliases from now on. The attribute needs to stay though. } ] } @@ -247,9 +266,7 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
  • Create a separate pull request (PR) for each Icon.
  • From 5b784e0ddf34ef501d9e1d4b65f34b44a882f893 Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Sun, 2 May 2021 20:53:10 -0700 Subject: [PATCH 02/16] Clean up various scripts (no functional changes) --- .github/drafts/check_svgs_monthly.py | 26 ----- .github/drafts/check_svgs_monthly.yml | 42 -------- .github/drafts/peek_icons imgur.yml | 109 -------------------- .github/scripts/build_assets/arg_getters.py | 15 --- .github/scripts/build_assets/filehandler.py | 2 +- .github/scripts/check_svgs_on_pr.py | 51 ++++----- .github/workflows/get_release_message.yml | 2 +- README.md | 8 +- 8 files changed, 36 insertions(+), 219 deletions(-) delete mode 100644 .github/drafts/check_svgs_monthly.py delete mode 100644 .github/drafts/check_svgs_monthly.yml delete mode 100644 .github/drafts/peek_icons imgur.yml diff --git a/.github/drafts/check_svgs_monthly.py b/.github/drafts/check_svgs_monthly.py deleted file mode 100644 index 440e2fcb5..000000000 --- a/.github/drafts/check_svgs_monthly.py +++ /dev/null @@ -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() \ No newline at end of file diff --git a/.github/drafts/check_svgs_monthly.yml b/.github/drafts/check_svgs_monthly.yml deleted file mode 100644 index 5e0655aaf..000000000 --- a/.github/drafts/check_svgs_monthly.yml +++ /dev/null @@ -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 diff --git a/.github/drafts/peek_icons imgur.yml b/.github/drafts/peek_icons imgur.yml deleted file mode 100644 index 90ed6fbac..000000000 --- a/.github/drafts/peek_icons imgur.yml +++ /dev/null @@ -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<> $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: - - ![Peeked Icons (top left)]({0}) - - 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}} diff --git a/.github/scripts/build_assets/arg_getters.py b/.github/scripts/build_assets/arg_getters.py index ebe37ea7d..705a0ab14 100644 --- a/.github/scripts/build_assets/arg_getters.py +++ b/.github/scripts/build_assets/arg_getters.py @@ -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. diff --git a/.github/scripts/build_assets/filehandler.py b/.github/scripts/build_assets/filehandler.py index c30c7b65f..a73433500 100644 --- a/.github/scripts/build_assets/filehandler.py +++ b/.github/scripts/build_assets/filehandler.py @@ -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) diff --git a/.github/scripts/check_svgs_on_pr.py b/.github/scripts/check_svgs_on_pr.py index 64b8fba35..52c4322b6 100644 --- a/.github/scripts/check_svgs_on_pr.py +++ b/.github/scripts/check_svgs_on_pr.py @@ -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) diff --git a/.github/workflows/get_release_message.yml b/.github/workflows/get_release_message.yml index 292525e93..6f231274e 100644 --- a/.github/workflows/get_release_message.yml +++ b/.github/workflows/get_release_message.yml @@ -2,7 +2,7 @@ name: Get Release Message on: workflow_dispatch jobs: build: - name: Get Fonts From Icomoon + name: Get release message runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v2 diff --git a/README.md b/README.md index 5b08278d5..f59b9f326 100644 --- a/README.md +++ b/README.md @@ -127,7 +127,7 @@ yarn add devicon An alternate way to use devicon is by copy/paste the raw svg code to your project.

    -

    Copy/paste svg code (from the svg folder or the project page

    +

    Copy/paste svg code (from the svg folder or the project page)

    ```html @@ -148,6 +148,12 @@ Add css rules in your stylesheet } ``` +

    Using the img tag and referencing a svg directly from the repo.

    + +```html + +``` +

    Requesting icon

    When you want to request a icon please feel feel to create a issue. See our contribution guidelines for more information. From 17029be64818f03ca1300f41963ad80b994065b0 Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Mon, 3 May 2021 22:13:03 -0700 Subject: [PATCH 03/16] Update CONTRIBUTING.md Co-authored-by: Clemens Bastian <8781699+amacado@users.noreply.github.com> --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2f0a31236..38495b039 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -103,7 +103,7 @@ First of all, thanks for taking the time to contribute! This project can only gr

    Before you submit your logos/svgs, please ensure that they meet the following standard:

    • The background must be transparent.
      • -
    • The icon is centered within the file.
      • +
    • The icon is centered horizontally and vertically within the viewBox.
    • The svg name follows this convention: (Technology name)-(original|plain|line)(-wordmark?).
    • The plain and line 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 .svg can have any color.
      • From 7c8e5c49740c2e3207550bce0424ac09012e9801 Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Tue, 4 May 2021 11:14:44 -0700 Subject: [PATCH 04/16] Change icons to use devicon in README and CONTRIBUTING --- CONTRIBUTING.md | 69 ++++++++++++++++++++++++++++++------------------- README.md | 30 ++++++++++----------- 2 files changed, 56 insertions(+), 43 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 38495b039..669191793 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -52,33 +52,48 @@ First of all, thanks for taking the time to contribute! This project can only gr
    • Amazon Web Services becomes amazonwebservices
    • Microsoft SQL Server becomes microsoftsqlserver
    +

    Each icon/svg can come in different versions:

    -
      -
    • original: the original logo. Can contain multiple colors. Example:
      - gimp-original.svg - -
    • original-wordmark: similar to the above but must contain the name of the technology. Example:
      - gimp-original-wordmark.svg -
      • + + + + + + + + + + + +
      +

      original: the original logo. Can contain multiple colors.

      + +

      devicon-original.svg

      +       		+

      plain: 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.

      + +

      devicon-plain-wordmark.svg

      +       		+

      line: 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.

      + +

      apache-line.svg

      +
      +

      original-wordmark: similar to the above but must contain the name of the technology.

      + +

      devicon-original-wordmark.svg

      +       		+

      plain-wordmark: 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.

      + +

      devicon-plain-wordmark.svg

      +       		+

      line-wordmark: 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.

      + +

      apache-line-wordmark.svg

      +
      +
      -
    • plain: 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. Example:
      - gimp-plain-wordmark.svg -
      • - -
    • plain-wordmark: a one-color version of the original logo but with wordmark. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. Example:
      - gimp-plain-wordmark.svg -
      • - -
    • line: 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. Example:
      - apache-line.svg -
      • - -
    • line-wordmark: a one-color, line version of the original logo but with wordmark. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. Example:
      - apache-line-wordmark.svg -
      • -
    -

    Notes

    +

    Notes:

    • 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. @@ -90,10 +105,10 @@ First of all, thanks for taking the time to contribute! This project can only gr The original 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.
    • - 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 devicon.json so they can be found with either the "original" or "plain" naming convention. + 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 devicon.json so they can be found with either the original or plain naming convention.
      • This only applies to font icon versions only, not the SVG versions.
        • -
      • Aliases are no longer mandated. If you are wondering which name to use, just pick original
        • +
      • Aliases are no longer mandatory. If you are wondering which name to use, just pick original
    @@ -266,7 +281,7 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
  • Create a separate pull request (PR) for each Icon.
  • diff --git a/README.md b/README.md index f59b9f326..1809698c1 100644 --- a/README.md +++ b/README.md @@ -110,17 +110,17 @@ yarn add devicon

    Start using icons with <i>-tag

    ```html - - + + - - + + - - + + - - + + ```

    @@ -130,28 +130,26 @@ yarn add devicon

    Copy/paste svg code (from the svg folder or the project page)

    ```html - - - - + + ``` 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; } ``` -

    Using the img tag and referencing a svg directly from the repo.

    +

    You can also use the img tag and referencing a svg directly from the repo.

    ```html - + ```

    Requesting icon

    From 1ad9ccd9f57ab14f7a61d0a03553b9740c231106 Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Wed, 5 May 2021 18:05:14 -0700 Subject: [PATCH 05/16] Add optimize-bot into CONTRIBUTING.md --- CONTRIBUTING.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 669191793..b6f189148 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -40,8 +40,8 @@ First of all, thanks for taking the time to contribute! This project can only gr
  • Include the name of the Icon in the pull request title in this format: new icon: Icon name (versions)
  • Optional: Reference the issues regarding the new icon.
  • Some bots will check your SVGs. If there are any errors, please fix them as instructed.
    • -
  • Wait for a maintainer to review your changes. They will run a script to check your icons.
    • -
  • If there are no issues, they will accept your pull request and merge it using squash merging. If there are any problems, they will let you know and give you a chance to fix it.
    • +
  • Wait for a maintainer to review your changes. They will run the peek-bot to check your icons.
    • +
  • If there are no issues, they will run the optimize-bot on your svgs then merge it using squash merging. If there are any problems, they will let you know and give you a chance to fix it.
    • @@ -343,7 +343,18 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web

    The Build Script: how it works and its quirks

    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.

    -

    So far, the tasks in the build script are:

    + +

    Here are the main bots/script that we use:

    + + +

    Here are the modular tasks in the build script:


    -

    Each icon/svg can come in different versions:

    +

    Each icon/SVG can come in different versions:

    From 8aa586b46a8c2623d4deef93701531b6ffed78d9 Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Tue, 11 May 2021 14:20:19 -0700 Subject: [PATCH 13/16] Update CONTRIBUTING.md Co-authored-by: David Leal --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 67a619822..4ea69e251 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -122,7 +122,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
  • The svg name follows this convention: (Technology name)-(original|plain|line)(-wordmark?).
  • The plain and line 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 .svg can have any color.
    • -
  • Each .svg file contains one version of an icon in a 0 0 128 128 viewbox. You can use a service like resize-image for scaling the svg.
    • +
  • Each .svg file contains one version of an icon in a 0 0 128 128 viewbox. You can use a service like resize-image for scaling the SVG.
  • The icon's strokes and texts must be fills. This is to satisfy our conversion website's requirements.
  • The svg element does not need the height and width attributes. However, if you do use it, ensure their values are either "128" or "128px". Ex: height="128"
  • Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
    • From 436adbf42bf8225529a99af3bf905459e608e186 Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Tue, 11 May 2021 14:20:32 -0700 Subject: [PATCH 14/16] Update CONTRIBUTING.md Co-authored-by: David Leal --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4ea69e251..7e035defd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -126,7 +126,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
  • The icon's strokes and texts must be fills. This is to satisfy our conversion website's requirements.
  • The svg element does not need the height and width attributes. However, if you do use it, ensure their values are either "128" or "128px". Ex: height="128"
  • Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
    • -
  • Each .svg must use the fill attribute instead of using classes for colors. This is to prevent class name clashing when using inline svg. See here for more details.
    • +
  • Each .svg must use the fill attribute instead of using classes for colors. This is to prevent class name clashing when using inline SVG. See here for more details.
    • From cc411c067fed85333c57b4a153450be0327d3a54 Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Tue, 11 May 2021 14:20:41 -0700 Subject: [PATCH 15/16] Update CONTRIBUTING.md Co-authored-by: David Leal --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7e035defd..da71171e7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -348,7 +348,7 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
    • peek-bot: Upload the icons to Icomoon and see what it looks like. Doesn't download any icons at this time.
    • build-bot: Build the icons by uploading them to Icomoon and download the resulting icon files. Also update the css file
      • -
    • optimize-bot: Optimize the svgs by minifying them and prefixing their ids with the file names. This is done so using inline svgs from this repo will not cause id clash.
      • +
    • optimize-bot: 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.
    • check-svg-bot: Check the SVGs uploaded and ensure they have the correct view box, fills, etc..
    • npm-release-bot: Update the NPM package.
    • release-message-bot: Create the release message for the PR.
      • From 53ca936a1adadfb8dd479c53c5832b914f28acd1 Mon Sep 17 00:00:00 2001 From: Thomas Bui Date: Tue, 11 May 2021 14:24:44 -0700 Subject: [PATCH 16/16] Changed all 'svg' to "SVG" --- CONTRIBUTING.md | 46 +++++++++++++++++++++++----------------------- README.md | 8 ++++---- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index da71171e7..3565290f8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,7 +8,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
    • Terms
    • Overview on Submitting Icon (start here if new)
    • Naming Conventions
      • -
    • SVG Standards
      • +
    • SVG Standards
    • Organizational Guidelines
    • Updating the devicon.json
    • Example of Submitting An Icon
      • @@ -24,8 +24,8 @@ First of all, thanks for taking the time to contribute! This project can only gr

      Here are some terms that we will use in this repo:

      1. "Technology" is used to describe a software, libraries, tool, etc...
        2. -
      2. "Icon" refers to the svgs and icons version of a technology as a whole.
        3. -
      3. "SVG/svg" refers to the svg versions of the Icons.
        4. +
      4. "Icon" refers to the SVGs and icons version of a technology as a whole.
        5. +
      5. "SVG/SVG" refers to the svg versions of the Icons.
      6. "icon" (lowercase) refers specficially to the font icon versions of the Icons.
      @@ -33,7 +33,7 @@ First of all, thanks for taking the time to contribute! This project can only gr

      Overview on Submitting Icons

      Here is what you have to do to submit your icons to the repo.

        -
      1. Create the SVGs for each SVG versions that you have. Follow the convention listed.
        2. +
      2. Create the SVGs for each SVG versions that you have. Follow the convention listed.
      3. Put the SVGs of each Icon into its own folders in /icons
      4. Update the devicon.json to include the new Icon
      5. Create a separated pull request (PR) towards the develop branch for each Icon.
        6. @@ -114,18 +114,18 @@ First of all, thanks for taking the time to contribute! This project can only gr
    -

    SVG Standards

    -

    Before you submit your logos/svgs, please ensure that they meet the following standard:

    +

    SVG Standards

    +

    Before you submit your logos/SVGs, please ensure that they meet the following standard:

    • The background must be transparent.
    • The icon is centered horizontally and vertically within the viewBox.
      • -
    • The svg name follows this convention: (Technology name)-(original|plain|line)(-wordmark?).
      • +
    • The SVG name follows this convention: (Technology name)-(original|plain|line)(-wordmark?).
    • The plain and line 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 .svg can have any color.
    • Each .svg file contains one version of an icon in a 0 0 128 128 viewbox. You can use a service like resize-image for scaling the SVG.
    • The icon's strokes and texts must be fills. This is to satisfy our conversion website's requirements.
      • -
    • The svg element does not need the height and width attributes. However, if you do use it, ensure their values are either "128" or "128px". Ex: height="128"
      • -
    • Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
      • +
    • The SVG element does not need the height and width attributes. However, if you do use it, ensure their values are either "128" or "128px". Ex: height="128"
      • +
    • Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
    • Each .svg must use the fill attribute instead of using classes for colors. This is to prevent class name clashing when using inline SVG. See here for more details.
    @@ -156,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[] @@ -179,7 +179,7 @@ First of all, thanks for taking the time to contribute! This project can only gr Here is what VersionString means:

      -
    1. It's the version part of an svg file's name
      2. +
    2. It's the version part of an SVG file's name
    3. If you have "html5-original", the version string would be "original"
    4. If you have "react-line-wordmark", the version string would be "line-wordmark"
    5. See naming conventions section for more details
      6. @@ -200,13 +200,13 @@ First of all, thanks for taking the time to contribute! This project can only gr

      Example of Submitting An Icon

      -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.

      -

      For the Redhat svg, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions.

      -

      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.

      +

      For the Redhat SVG, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions.

      +

      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.

      1. - Put the svgs for each logo that you have into its own folders in /icons + Put the SVGs for each logo that you have into its own folders in /icons
        • This means you would create two folders: one for amazonwebservices and one for redhat
        • Note: don't do this in the same commits; we want to have each Icon in its own PR.
          • @@ -225,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", @@ -253,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" @@ -269,7 +269,7 @@ 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. } ] @@ -349,15 +349,15 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
        • peek-bot: Upload the icons to Icomoon and see what it looks like. Doesn't download any icons at this time.
        • build-bot: Build the icons by uploading them to Icomoon and download the resulting icon files. Also update the css file
        • optimize-bot: 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.
          • -
        • check-svg-bot: Check the SVGs uploaded and ensure they have the correct view box, fills, etc..
          • +
        • check-SVG-bot: Check the SVGs uploaded and ensure they have the correct view box, fills, etc..
        • npm-release-bot: Update the NPM package.
        • release-message-bot: Create the release message for the PR.

        Here are the modular tasks in the build script:

      diff --git a/README.md b/README.md index f1719db4a..bd5aca733 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@

      About the project

      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!

      @@ -78,7 +78,7 @@

      Getting started

      For a super fast setup go check devicon.dev.
      - You can either use the raw svg icons or our devicon font (which is + You can either use the raw SVG icons or our devicon font (which is also available via CDN).

      @@ -124,7 +124,7 @@ yarn add devicon ```

      - An alternate way to use devicon is by copy/paste the raw svg code + An alternate way to use devicon is by copy/paste the raw SVG code to your project.

      Copy/paste SVG code (from the svg folder or the project page)

      @@ -146,7 +146,7 @@ Add css rules in your stylesheet } ``` -

      You can also use the img tag and referencing an SVG directly from the repo.

      +

      You can also use the img tag and referencing an svg directly from the repo.

      ```html