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

update icon: aarch64 (original, plain, line) #1961

Merged
merged 6 commits into from
Nov 1, 2023

Conversation

Snailedlt
Copy link
Collaborator

Double check these details before you open a PR

  • PR does not match another non-stale PR currently opened
  • PR name matches the format new icon: Icon name (versions separated by comma). More details here
  • PR's base is the develop branch.
  • Your icons are inside a folder as seen here
  • SVG matches the standards laid out here
  • A new object is added in the devicon.json file as seen here

Changes

Optimize icons, add alias to wordmark versions and add line version

@Snailedlt Snailedlt requested review from a team, ConX, weh, canaleal and lunatic-fox and removed request for a team October 30, 2023 20:10
@Snailedlt Snailedlt changed the title update icon: arch64 (original, plain, line) update icon: aarch64 (original, plain, line) Oct 30, 2023
@Snailedlt Snailedlt closed this Oct 30, 2023
@Snailedlt Snailedlt reopened this Oct 30, 2023
@Snailedlt Snailedlt added the feature:icon Use this label for pull requests when a new icon is ready to be added to the collection label Oct 30, 2023
Copy link
Member

@canaleal canaleal left a comment

Choose a reason for hiding this comment

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

JSON and the icon formats are good. Just wondering through but there appears to be some artifacts on the the SVGs.

image

Haven't found an HD version of the Icon anywhere, so I guess it was some artifacts left over from an image upscaler. It does seem to be a part of the original PR though:

If it's a non-issue, then I can approve the PR.

@Snailedlt
Copy link
Collaborator Author

@canaleal I saw that too, but assumed it was a part of the logo since it was there in the original version.
After looking online it seems like it shouldn't be there... So these icons need to be remade.
Ref: https://www.konsulko.com/home-servers-aarch64-and-you-well-me/aarch-64-logo-transp

@Snailedlt
Copy link
Collaborator Author

Snailedlt commented Oct 31, 2023

@canaleal The original icon was created by converting a PNG (since there were no SVG's available) in this PR: #507
I think the reason it got a bit messed up like that is because of the low resolution of the image.
image

I redid the icon using a slightly higher resolution JPEG, which I found with this reverse image search:
703efef0ad1aa23d216e6071d48e1798

Here's the resulting SVG after converting it using Inkscape:
aarch64-original

It looks a bit better compared to the old one:
aarch64-original (1)

It's not perfect... especially not the text, but I don't have the skills to fix it myself, so I suggest we merge this PR and create a separate issue about fixing the path of the icons, especially the text.

Converted to raster with: https://vectorizer.ai/
Corrected color palette with: https://svgcolor.com
@Snailedlt
Copy link
Collaborator Author

Actually I found an awesome tool to convert Raster images to PNG: https://vectorizer.ai/
After that I can changed the colors using this tool: https://svgcolor.com/

The end result is awesome imo!
aarch64-original
aarch64-plain
aarch64-line

Copy link
Member

@canaleal canaleal left a comment

Choose a reason for hiding this comment

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

Great find! Also nice work as always.

@Snailedlt
Copy link
Collaborator Author

How to convert bitmap/raster images (PNG, JPG, JPEG, ...) into SVG's

Using online tools

  1. Convert raster to svg
    1. Go to https://vectorizer.ai/ and upload your raster image
      image
    2. Click on Download
      image
    3. Group paths by color, and click download to download the .svg. Keep everything else the same... it should look like in the screenshot below:
      image
  2. (Optional) Simplify the color palette
    1. Upload the downloaded .svg file to https://svgcolor.com
      image
    2. Get the colors from the original raster image using another tool (I recommend using the Color Picker inside PowerToys if you're on windows... then you can pick a color using the keyboard combination: windows+shift+c)
    3. Back on svgcolor.com, replace similar colors with the picked colors in the color picker:
      image
  3. (Optional) Bring the image into Inkscape or vscode to remove any extra paths, for example outlines or backgrounds that didn't exist in the original raster image

@Snailedlt Snailedlt added the hacktoberfest-accepted Accepted to be counted towards Hacktoberfest label Oct 31, 2023
@Snailedlt
Copy link
Collaborator Author

Since this icon needs to be updated for the upcoming release, I'll merge it with only 1 approval. Please do review it even after it's merged though, so I'll know if something is wrong :)

@Snailedlt Snailedlt merged commit 1d68188 into devicons:develop Nov 1, 2023
5 checks passed
@Snailedlt Snailedlt mentioned this pull request Feb 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature:icon Use this label for pull requests when a new icon is ready to be added to the collection hacktoberfest-accepted Accepted to be counted towards Hacktoberfest
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants