From 2c6a21d9f475741208d25c41da89dd308bb4fabb Mon Sep 17 00:00:00 2001 From: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com> Date: Wed, 12 May 2021 00:57:31 -0700 Subject: [PATCH] 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 * Update README.md Co-authored-by: David Leal * Update README.md Co-authored-by: David Leal * Change release message step name * Update CONTRIBUTING.md Co-authored-by: David Leal * Update CONTRIBUTING.md Co-authored-by: David Leal * Update CONTRIBUTING.md Co-authored-by: David Leal * Update CONTRIBUTING.md Co-authored-by: David Leal * Update CONTRIBUTING.md Co-authored-by: David Leal * Update CONTRIBUTING.md Co-authored-by: David Leal * Changed all 'svg' to "SVG" Co-authored-by: Clemens Bastian <8781699+amacado@users.noreply.github.com> Co-authored-by: David Leal --- .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 +- CONTRIBUTING.md | 149 +++++++++++++------- README.md | 40 +++--- 9 files changed, 147 insertions(+), 289 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..1340610c8 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 features since last release runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v2 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7820950c2..3565290f8 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

  • Terms
    • -
  • Overview on Submitting Icon
    • +
  • Overview on Submitting Icon (start here if new)
  • Naming Conventions
    • -
  • SVG Standards
    • +
  • SVG Standards
  • Organizational Guidelines
  • Updating the devicon.json
    • -
  • Example
    • +
  • Example of Submitting An Icon
  • Requesting An Icon
  • Maintainer/Reviewer/Teams
  • The Build Script: how it works and its quirks
    • @@ -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,16 +33,15 @@ 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
      2. -
    2. Put the svgs of each Icon into its own folders in /icons
      3. +
    3. Create the SVGs for each SVG versions that you have. Follow the convention listed.
      4. +
    4. Put the SVGs of each Icon into its own folders in /icons
    5. Update the devicon.json to include the new Icon
    6. Create a separated pull request (PR) towards the develop branch for each Icon.
    7. Include the name of the Icon in the pull request title in this format: new icon: Icon name (versions)
      8. -
    8. Optional: Add images of the new svg(s) to the description of the pull request. This would help speed up the review process
    9. Optional: Reference the issues regarding the new icon.
      10. -
    10. A bot will check your SVGs. If there are any errors, please fix them as instructed.
      11. -
    11. Wait for a maintainer to review your changes. They will run a script to check your icons.
      12. -
    12. 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.
      13. +
    13. Some bots will check your SVGs. If there are any errors, please fix them as instructed.
      14. +
    14. Wait for a maintainer to review your changes. They will run the peek-bot to check your icons.
      15. +
    15. 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.
    @@ -53,17 +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. So far, we have:

-
    -
  • original: the original logo. Can contain multiple colors. Example
    • -
  • original-wordmark: similar to the above but must contain the name of the technology. Example
    • -
  • plain: a one-color version of the original logo. Example
    • -
  • plain-wordmark: a one-color version of the original logo but with wordmark. Example
    • -
  • line: a one-color, line version of the original logo. Example
    • -
  • line-wordmark: a one-color, line version of the original logo but with wordmark. Example
    • -
-

Notes

+

Each icon/SVG can come in different versions:

+ + + + + + + + + + + +
+

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

+
+
+ +

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. @@ -72,35 +102,38 @@ First of all, thanks for taking the time to contribute! This project can only gr The plain and line versions (with or without wordmark) are designed to be available in the final icon font.
  • - The original version are only available in svg format, so they do not need to be as simple and can contain numerous colors. + 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. 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 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 mandatory. If you are wondering which name to use, just pick original
      • +
-

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 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. We will strip the color when turning it into icons so they can have any color. +
  • 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.
    • -
  • Optimize/compress your SVGs. You can use a service like compressor or SVG Editor.
    • +
  • 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.
    • -
  • 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 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"
    • -
  • Each .svg must use the fill attribute instead of using classes for colors. See here for more details.
    • +
  • 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.

Organizational Guidelines

    -
  • Each icon has its own folder located in the icons folder
    • -
  • Each folder may contain one .eps file
    • (optional) -
  • The .eps file should contains all available versions of an icon. Each version is contained in a 128px by 128px artboard
    • -
  • Each folder must contain all the .svg files for the Icon
    • +
  • Each icon has its own folder located in the icons folder. All the .svg files for the Icon must go in the same folder
    • +
  • Optional: Each folder may contain one .eps file. The .eps file should contains all available versions of an icon. Each version is contained in a 128px by 128px artboard
@@ -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:

    -
  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. @@ -165,15 +198,15 @@ 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. +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.
        • @@ -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
      • Create a separate pull request (PR) for each Icon.
          -
        • This means you would have to create two PRs
          • -
        • For Amazon Web Services, the branch name would be icons/amazonwebservices.
          • -
        • For Redhat, the branch name would be icons/redhat.
          • +
        • This means you would have to create one PR for Amazon Web Services and one PR for Redhat.
      • @@ -311,10 +343,21 @@ 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:

        +
          +
        • 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..
          • +
        • 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 5b08278d5..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).

    @@ -110,44 +110,48 @@ yarn add devicon

    Start using icons with <i>-tag

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

    - 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

    +

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

    You can also use the img tag and referencing an 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.