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

+
-

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

- -

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:


-

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:


Organizational Guidelines


@@ -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. +
  3. It's the version part of an SVG file's name
  4. If you have "html5-original", the version string would be "original"
  5. If you have "react-line-wordmark", the version string would be "line-wordmark"
  6. See naming conventions section for more details
  7. @@ -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.