Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimized SVG using SVGO #597

Merged
merged 8 commits into from
May 15, 2021
Merged

Optimized SVG using SVGO #597

merged 8 commits into from
May 15, 2021

Conversation

Thomas-Boi
Copy link
Member

@Thomas-Boi Thomas-Boi commented May 4, 2021

This PR contains the new (under development) workflow that uses SVGO to optimize our svg files (minify + prefixing ids).

It also contains the optimized svg files. I did a few random checks and so far it look good. I'll manually go over each files in the next few days to ensure the svgs were optimized correctly.

Fun fact: we have 530-ish icons! This is a both an interesting and a bit daunting fact considering I'll have to check them all 🙃. I'll split them up into small chunks and update everyone on the result. After that, I'll make this into a workflow, update the Check SVG bot and CONTRIBUTING.md (again 😆) to reflect this new workflow.

EDIT: Checked 30/530 icons. So far so good. Also, note that the optimizer will now remove the width and height attribute but keep the viewBox. This means that the user can now scale the svg in the webpage using a wrapper container rather then changing the svg styling itself.

EDIT: Checked 201/534 files. Still good so far.
EDIT: Checked 310/534. No problem detected yet.
EDIT: Checked 403/534. No problem seen. Found out that the python-original.svg is not centered vertically though.

@Thomas-Boi Thomas-Boi marked this pull request as draft May 4, 2021 06:06
@Thomas-Boi
Copy link
Member Author

Checked all 534 SVGs! All of them looks good and did not change from the previous. A couple changed its size because we remove the width and height but since we keep the viewBox, everything should be fine. In fact, this will allow the SVG to scale based on the container it's in, rather than being restricted at 128px by 128px.

I also found a couple duplicated svgs (original and plain are similar etc...). I think we can remove the extra and update the devicon.json to reflect it. Rebuilding the icons would be unnecessary since the font will still look the same as the svg.

More features coming tomorrow.

@Thomas-Boi
Copy link
Member Author

Just tested the workflow. Everything works great and you can see the result here

I will now do some clean up and update the check-svg bot's check requirements.

@Thomas-Boi Thomas-Boi marked this pull request as ready for review May 6, 2021 00:31
@Thomas-Boi Thomas-Boi requested a review from amacado May 6, 2021 00:31
@Panquesito7 Panquesito7 added the devops Use this label for devops related enhancements label May 7, 2021
Copy link
Member

@Panquesito7 Panquesito7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

optimizer will now remove the width and height attribute but keep the viewBox

Wouldn't this make the bot create a warning? AFAIK, if you don't set width and height to 128 (or 128px), it'll display a warning.

Also: it's amazing how you have changed 10k+ lines. 😅

@Thomas-Boi
Copy link
Member Author

Thomas-Boi commented May 8, 2021

Wouldn't this make the bot create a warning? AFAIK, if you don't set width and height to 128 (or 128px), it'll display a warning.

Oh yeah, my plan is to remove that warning since our script would fix it for us. You can see it being removed in the check_svgs_on_pr.py.

Also: it's amazing how you have changed 10k+ lines.

Yeah, the optimizer did most the work. I still have to visually check the icon to ensure the optimization options won't mess anything up though. I think it took me at least 1-1.5 hour 😅

@Thomas-Boi
Copy link
Member Author

Hey @amacado , can you check this PR please?

amacado
amacado previously approved these changes May 12, 2021
Copy link
Member

@amacado amacado left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just looked trough 529 icons. Crazy.
image

I could not see any fail in transitioning the icons. And it's odly satisfying to see icons get into shape:
image
image

Thanks for all the effort you had to put into this patch! If you could resolve the conflict we can merge and release it!

@Thomas-Boi
Copy link
Member Author

Hey @amacado , thank you very much for reviewing this. I did not expected you to go over the 500 SVGs so I apologize if you felt rushed for doing so 😅.

I'll fix the conflict asap.

@amacado amacado merged commit d98a72c into develop May 15, 2021
@amacado amacado deleted the thomas/feature/updateSvgWorkflow branch May 15, 2021 19:14
Thomas-Boi added a commit that referenced this pull request Jun 13, 2021
* Add arduino icon

* Update all icon types

* Add to icon registry

* Update arduino icons

* Update arduino icons

* Remove vscode folder

* Update icons/arduino/arduino-original-wordmark.svg

* Update icons/arduino/arduino-original.svg

* Update icons/arduino/arduino-plain-wordmark.svg

* Update icons/arduino/arduino-plain.svg

* enhance guidelines for drafting a new release

* Bump ini from 1.3.5 to 1.3.8 (#562)

Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8.
- [Release notes](https://github.com/isaacs/ini/releases)
- [Commits](npm/ini@v1.3.5...v1.3.8)

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: Thomas Bui <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Clemens Bastian <[email protected]>

* Added a section for common bugs in the CONTRIBUTING (#563)

* new icon: nixos (original, original-wordmark, plain, plain-wordmark) (#564)

* new icon: nixos (original, original-wordmark, plain, plain-wordmark)

* icon nixos: optimize the svgs

* icon nixos: add newline at end of svgs

* icon nixos: remove extra line

* feat: Added perl icons

* chore: Simplify svg files

* fix: size fixes

* fix: Removed aliases from json

* Add aliases (fixes the script)

* Update devicon.json

* Update devicon.json

* fix: Renamed icons

* fix: Cleaned up svg files and ran svg opimizer

* Delete arduino-plain-wordmark.svg

Deleted the faulty svg

* Add Icomoon arduino-plain-wordmark.svg

* Rename arduino-plain-workmark.svg to arduino-plain-wordmark.svg

* Update devicon.json

Co-authored-by: David Leal <[email protected]>

* Script upgrades and updated CONTRIBUTING.md and README.md (#576)

* Updated README and CONTRIBUTING

* Added check for devicon object when peeking

* Added PR template

* Added a script to create release messages

* Updated CONTRIBUTING about new script

* Update .github/PULL_REQUEST_TEMPLATE/new_icon.md

Co-authored-by: David Leal <[email protected]>

* Update .github/scripts/build_assets/arg_getters.py

Co-authored-by: David Leal <[email protected]>

* Update .github/workflows/get_release_message.yml

Co-authored-by: David Leal <[email protected]>

* Update gulpfile.js

Co-authored-by: David Leal <[email protected]>

* Update .github/PULL_REQUEST_TEMPLATE/new_feature.md

Co-authored-by: David Leal <[email protected]>

* Update .github/PULL_REQUEST_TEMPLATE/new_feature.md

Co-authored-by: David Leal <[email protected]>

* Added a way for peek bot to comment error

* Update CONTRIBUTING.md

Co-authored-by: Clemens Bastian <[email protected]>

* Update .github/scripts/get_release_message.py

Co-authored-by: Malte Jürgens <[email protected]>

* Update .github/scripts/get_release_message.py

Co-authored-by: Malte Jürgens <[email protected]>

* Update .github/PULL_REQUEST_TEMPLATE/new_feature.md

Co-authored-by: David Leal <[email protected]>

* Clean up and updated CONTRIBUTING

* Updated CONTRIBUTING

* Add set up steps for release message workflow

* Refactored peek workflow

* Added requests library

* Reformat devicon object error messages

Co-authored-by: David Leal <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>
Co-authored-by: Malte Jürgens <[email protected]>

* new icon: tensorflow (original, original-wordmark, plain, plain-wordmark, line, line-wordmark)

* new icon: tensorflow (original, original-wordmark, plain, plain-wordmark, line, line-wordmark)

* resized svgs

* cleaned up svgs

* compressed svgs and updated viewboxes

* new icon: zig (original, original-wordmark, plain-wordmark)

* Replace raw.githubusercontent.com with jsdelivr (#586)

Co-authored-by: Clemens Bastian <[email protected]>

* recommended svg fixes

* Clean up and CONTRIBUTING upgrade (#595)

* Updated CONTRIBUTING

* Clean up various scripts (no functional changes)

* Update CONTRIBUTING.md

Co-authored-by: Clemens Bastian <[email protected]>

* Change icons to use devicon in README and CONTRIBUTING

* Add optimize-bot into CONTRIBUTING.md

* Update CONTRIBUTING.md

Co-authored-by: David Leal <[email protected]>

* Update README.md

Co-authored-by: David Leal <[email protected]>

* Update README.md

Co-authored-by: David Leal <[email protected]>

* Change release message step name

* Update CONTRIBUTING.md

Co-authored-by: David Leal <[email protected]>

* Update CONTRIBUTING.md

Co-authored-by: David Leal <[email protected]>

* Update CONTRIBUTING.md

Co-authored-by: David Leal <[email protected]>

* Update CONTRIBUTING.md

Co-authored-by: David Leal <[email protected]>

* Update CONTRIBUTING.md

Co-authored-by: David Leal <[email protected]>

* Update CONTRIBUTING.md

Co-authored-by: David Leal <[email protected]>

* Changed all 'svg' to "SVG"

Co-authored-by: Clemens Bastian <[email protected]>
Co-authored-by: David Leal <[email protected]>

* Optimized SVG using SVGO (#597)

* Added script to optimize svgs

* Updated the svgs using svgo

* Made the optimize svg script into a workflow

* Added npm install step

* Change the env variable bug

* Clean up and updated check svg

* Change label name

* Fix python wordmark icon (#103)

* Fix python wordmark icon

* Update icons/python/python-original-wordmark.svg

Co-authored-by: Clemens Bastian <[email protected]>

Co-authored-by: Clemens Bastian <[email protected]>
Co-authored-by: Thomas Bui <[email protected]>

* New icon: raspberrypi (original, original-wordmark, line, line-wordmark) (#609)

* Add rpi icon

* Add original. Remove `enable-background`. Fix font colors

* Add icons to list

* Fix formatting

* Add official RPi logo + eps. Update svg and font

* Updated raspberry icons

* Optimized the SVGs

Co-authored-by: Herman Singh <[email protected]>
Co-authored-by: Thomas-Boi <[email protected]>

* New icon: tailwindcss (plain) (#610)

* Bump hosted-git-info from 2.8.8 to 2.8.9

Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.8 to 2.8.9.
- [Release notes](https://github.com/npm/hosted-git-info/releases)
- [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md)
- [Commits](npm/hosted-git-info@v2.8.8...v2.8.9)

Signed-off-by: dependabot[bot] <[email protected]>

* Bump lodash from 4.17.20 to 4.17.21

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <[email protected]>

* Create README.md

* Add files via upload

* Delete README.md

* Update devicon.json

* new file added

* file added

* Delete jamstack-plain.svg

* Add files via upload

* Delete icons/jamstack directory

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Thomas Bui <[email protected]>

* Updated and optimized python svgs (#622)

* Updated and optimized python svgs

* Update icons/python/python-original.svg

Co-authored-by: David Leal <[email protected]>

Co-authored-by: David Leal <[email protected]>

* new icon: labview (original, original-wordmark, plain, plain-wordmark) (#626)

* add labview icon (original, plain, original-wordmark, plain-wordmark)

* Updated labview svgs

Co-authored-by: Marc LaBelle <[email protected]>

* new icon: modx (original, original-wordmark, plain, plain-wordmark) (#627)

* Submitting MODX logo

MODX is a popular open source PHP CMS. Its logo is also found in
FontAwesome, seems like it would be great for it to have

* Updated devicon.json and modx svg color

* Fixed issues reported by svg-checker bot

Co-authored-by: JP DeVries <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* new icon: knockout (plain-wordmark) (#628)

* Added Knockout icon (plain workmark only)

* Updated devicon.json

Co-authored-by: Adriano Ueda <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* new icon: embeddedc (original, plain, original-wordmark, plain-wordmark) (#625)

* add embeddedc icon (original, plain, original-wordmark, plain-wordmark)

* Convert style to fill

* Remove merge error in devicon.json

Co-authored-by: Marc LaBelle <[email protected]>

* Optimize bot is now a part of the build script (#624)

Co-authored-by: Clemens Bastian <[email protected]>

* Add extra requirement in new icon pr template (#642)

* Add extra requirement in new icon pr template

* Update .github/PULL_REQUEST_TEMPLATE/new_icon.md

Co-authored-by: Clemens Bastian <[email protected]>

Co-authored-by: Clemens Bastian <[email protected]>

* new icon: rstudio (orignal. plain) (#634)

Co-authored-by: Clemens Bastian <[email protected]>

* new icon: phalcon (original, plain) (#635)

* Add phalcon svgs

* Change style to fill attribute

Co-authored-by: Clemens Bastian <[email protected]>

* new icon: minitab (original, plain) (#636)

Co-authored-by: Clemens Bastian <[email protected]>

* new icon: bulma (plain) (#638)

Co-authored-by: Clemens Bastian <[email protected]>

* new icon: spss (original, plain) (#639)

* Add spss svgs

* Addressed svg bot's issues

Co-authored-by: Clemens Bastian <[email protected]>

* new icon: jest (plain) (#647)

Co-authored-by: Raúl Julián López Caña <[email protected]>

* update public-upload-to-imgur action v2.2.2 (#651)

* update public-upload-to-imgur action v2.2.2

* update imgur upload action to v2.2.2

* new icon: karma (original, plain) (#646)

Co-authored-by: Raúl Julián López Caña <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* new icon: circleci (plain, plain-wordmark) (#648)

Co-authored-by: Raúl Julián López Caña <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* new icon: shopware (original, original-wordmark) (#653)

* Shopware

Adding SHopware icons

* Fixed check svgbot issues

Co-authored-by: Mariya Videva <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* new icon: salesforce (original, plain) (#654)

* SalesForce

Adding SalesForce icons

* Fixed check svg errors

Co-authored-by: Mariya Videva <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* new icon: vuestorefront (original, plain) (#655)

* vue StoreFront

vue StoreFront icons

* Update vuestorefront-plain

Co-authored-by: Mariya Videva <[email protected]>

* new icon: codecov (plain) (#649)

* Add Codecov icons (plain)

* Update codecov-plain

* Centered codecov plain

Co-authored-by: Raúl Julián López Caña <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* Add Unix icon (#659)

Co-authored-by: Clemens Bastian <[email protected]>

* Peek bot won't check whether icon is in icomoon (#657)

Co-authored-by: David Leal <[email protected]>

* new icon: magento (original, original-wordmark, line) (#652)

* Magento

Adding Magento Icon

* Fix issues reported by check svg bot

* Fixed magento line

Co-authored-by: Mariya Videva <[email protected]>

* Fix svg checker double posting comment (#660)

Co-authored-by: Clemens Bastian <[email protected]>

* Update issue and PR templates (#658)

* Update issue and PR templates

* Added icon requirements to contributing

* Update .github/ISSUE_TEMPLATE/bug_report.md

Co-authored-by: David Leal <[email protected]>

* Update .github/ISSUE_TEMPLATE/bug_report.md

Co-authored-by: David Leal <[email protected]>

* Update .github/ISSUE_TEMPLATE/feature_request.md

Co-authored-by: David Leal <[email protected]>

* Update .github/ISSUE_TEMPLATE/feature_request.md

Co-authored-by: David Leal <[email protected]>

* Update .github/ISSUE_TEMPLATE/feature_request.md

Co-authored-by: David Leal <[email protected]>

* Update .github/ISSUE_TEMPLATE/icon-request.md

Co-authored-by: David Leal <[email protected]>

* Apply suggestions from code review

Co-authored-by: David Leal <[email protected]>

* Apply suggestions from code review

Co-authored-by: David Leal <[email protected]>

* Update bug_report.md

* Update .github/PULL_REQUEST_TEMPLATE/new_feature.md

Co-authored-by: David Leal <[email protected]>

* Update .github/PULL_REQUEST_TEMPLATE/new_feature.md

Co-authored-by: David Leal <[email protected]>

Co-authored-by: David Leal <[email protected]>

* new icon: godot (original, original-wordmark, plain, plain-wordmark) (#663)

* new icon: godot (original, original-wordmark, plain, plain-wordmark)

* Minor fix

Co-authored-by: Thomas Bui <[email protected]>

* new icon: vscode (original, original-wordmark, plain, plain-wordmark) (#664)

* new icon: julia (original, original-wordmark, plain, plain-wordmark) (#665)

* Bump hosted-git-info from 2.8.8 to 2.8.9

Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.8 to 2.8.9.
- [Release notes](https://github.com/npm/hosted-git-info/releases)
- [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md)
- [Commits](npm/hosted-git-info@v2.8.8...v2.8.9)

Signed-off-by: dependabot[bot] <[email protected]>

* Bump lodash from 4.17.20 to 4.17.21

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <[email protected]>

* new icon: julia (original, original-wordmark, plain, plain-wordmark)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Thomas Bui <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* new icon: matlab (line) (#640)

* Add matlab-line

* Fixed issues reported by check svg bot

* optimisation for svg (#643)

Co-authored-by: Clemens Bastian <[email protected]>
Co-authored-by: David Leal <[email protected]>

* new icon: crystal (original, original-wordmark) (#667)

* typo & grammar fixes in readme (#670)

* Bump hosted-git-info from 2.8.8 to 2.8.9

Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.8 to 2.8.9.
- [Release notes](https://github.com/npm/hosted-git-info/releases)
- [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md)
- [Commits](npm/hosted-git-info@v2.8.8...v2.8.9)

Signed-off-by: dependabot[bot] <[email protected]>

* Bump lodash from 4.17.20 to 4.17.21

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <[email protected]>

* Typo + grammar fixes.

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Thomas Bui <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>

* Build bot now build new SVGs in folder that were already built (#666)

* Refactor the pull request fetching code

* Refactor build script to use past PRs

* Added function to update icomoon json

* new icon: matlab (line) (#640)

* Add matlab-line

* Fixed issues reported by check svg bot

* optimisation for svg (#643)

Co-authored-by: Clemens Bastian <[email protected]>
Co-authored-by: David Leal <[email protected]>

* Add better logging to icomoon_build

Co-authored-by: Clemens Bastian <[email protected]>
Co-authored-by: David Leal <[email protected]>

* new icon: tailwindcss (wordmark) (#671)

* Bump hosted-git-info from 2.8.8 to 2.8.9

Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.8 to 2.8.9.
- [Release notes](https://github.com/npm/hosted-git-info/releases)
- [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md)
- [Commits](npm/hosted-git-info@v2.8.8...v2.8.9)

Signed-off-by: dependabot[bot] <[email protected]>

* Bump lodash from 4.17.20 to 4.17.21

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <[email protected]>

* added tailwindcss wordmark

* updated commit

* updated

* done

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Thomas Bui <[email protected]>

* Minor update to CONTRIBUTING and post peek (#672)

* Fix duplicated past icons in build process (#674)

* Fixed issue with wrong name referencing from github api (#677)

* bump npm version to v2.12.0

* Built new icons, icomoon.json and devicon.css (#678)

Co-authored-by: Thomas-Boi <[email protected]>

Co-authored-by: Herman Singh <[email protected]>
Co-authored-by: Enis Mulić <[email protected]>
Co-authored-by: David Leal <[email protected]>
Co-authored-by: Clemens Bastian <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: jeovazero <[email protected]>
Co-authored-by: Matt Koskela <[email protected]>
Co-authored-by: Malte Jürgens <[email protected]>
Co-authored-by: reevesba <[email protected]>
Co-authored-by: AtomToast <[email protected]>
Co-authored-by: Thomas-Boi <[email protected]>
Co-authored-by: Utkarsh Mishra <[email protected]>
Co-authored-by: Marc LaBelle <[email protected]>
Co-authored-by: JP DeVries <[email protected]>
Co-authored-by: Adriano Ueda <[email protected]>
Co-authored-by: Raúl Julián López Caña <[email protected]>
Co-authored-by: Mariya Videva <[email protected]>
Co-authored-by: Chrıs Seelus <[email protected]>
Co-authored-by: Ben Hampson <[email protected]>
Co-authored-by: Saket Kothari <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@Thomas-Boi Thomas-Boi mentioned this pull request Jun 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
devops Use this label for devops related enhancements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants