New Icon: Forgejo (Original)

[Yashh56]

(Hacktobeberfest PR)

PR name matches the format new icon: Icon name (versions separated by a 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

This PR closes #1902

Link to prove your SVG is correct and up-to-date. https://codeberg.org/forgejo/governance/media/branch/main/branding/logo/forgejo.svg

[Yashh56]

Hey, Maintainer Please Review This PR !!

[Yashh56]

how should I convert the original to plain? @weh

[weh]

I prefer to use Inkscape for this. The goal is to "union all paths". you may need to convert some parts using "Object to Path" or "Stroke to Path" and finally mark all elements and use "path/Union"

Followed by

• Resize Page to Content (to remove padding)
• Change the Page format back to square
• Center the Logo
• Resize the image using Iloveimg
• Optimize using Vecta.io
• re-add the viewBox

That is my preferred workflow. You can find the Links here: https://github.com/devicons/devicon/wiki/Recommended-resources-and-tools

[Yashh56]

After merging the path it looks like this

[canaleal]

Hey @Yashh56 , sorry for the super long comment, but here's the workflow I follow to create new Icons.

Resize the SVG and Align Horizontally/ Vertically (Inkscape)

1. Inside Inkscape, select the File option from the toolbar and in the dropdown select Document properties.

2. Inside document properties change the width to 128.
3. Change the height to 128.

3. To resize the SVG while maintaining the Aspect Ratio, press ctrl-a to select all paths.
4. Right click on the SVG and then select group from the dropdown.

5. Click the lock icon in the toolbar.
6. Then select the largest of these 2 numbers (width or height) and change the value to 128. This will resize the icon to fit the viewbox. In the example below, the width was changed to 128.

7. To align the SVG, open the align menu.
8. Then click the center horizontally button.
9. Then click the align vertically button.

10. Right click on the SVG (Make sure all paths are selected using ctrl-a) and then select ungroup from the dropdown.

12. You can now save the SVG.
13. Make sure to optimize the SVG prior to making a new PR. You can follow the steps below to optimize the SVG.

Unify the Paths and create Plain Icons (Inkscape)

Shout out to @yeyeto2788 and @lunatic-fox for these steps.

1. Load the Icon inside inkscape and press ctrl-a to select all paths.
2. Right click on the SVG and select ungroup in the menu to ungroup all paths.

3. Next, click the Path option in the toolbar and in the the dropdown select union to combine all paths into 1 path.

4. Open the SVG inside your text editor (I use VS Code) and check that only 1 path exists.
5. Next, update the SVG fill to be in hexadecimal format and only use 1 color (The main/ most prominent color from original SVG, black, or white).

5. You can now save the SVG.
6. Make sure to resize and optimize the SVG prior to making a new PR. You can follow the steps below to optimize the SVG.

Why Optimize the SVG (Inkscape)

1. After making the changes and saving the SVG, Inkscape will add a lot of new attributes inside the SVG. These attributes are used when you need to edit the SVGs inside inkscape, but are not required in Devicon and they should be removed.

2. To remove the attributes from the SVG, use tools like SVGOMG or SVGViewer to optimize the SVG Code. I prefer using SVGOMG as you only need to select a few options to optimize the SVG.

Optimizing the SVG using SVGOMG

Shout out to @BenSouchet, all the steps I used were from this comment

1. Copy the full SVG code of the SVG you want to optimize.

2. Go to SVGOMG, and on the left side click on Paste markup.

3. Paste the SVG code into the input box.

4. Now that the SVG has been loaded in the interface, let's start optimizing the SVG using the Features menu.

5. Disable Compare gzipped, enable Multipass, and do not touch the precision slidebar.

6. Enable ALL the features EXCEPT:
   • Remove xmlns
   • Round/rewrite number lists
   • Replace duplicate elements with links

7. Click the copy button to copy the SVG code.

8. Paste the SVG code inside your SVG file.
9. Add an empty newline at the end of file to ensure compatibility with older Devicon versions.

[Yashh56]

Hey @canaleal Are these changes correct?

[Yashh56]

After merging the path I am facing the same issue

[canaleal]

Hey @Yashh56, I took a look at the Icon and I see what the problem is. The symbol on the left is a stroke, not an object. So when you try to unify all paths together, it gets messed up.

The strokes can be converted into paths by selecting all elements on the page ctrl-a and then doing ctrl + alt + a or selecting stroke-to-path in the path dropdown.

You can still follow the workflow I posted above to optimize, resize, and make plain SVGs.

Original SVG Wordmark

Here, I cleaned up the original SVG and converted it to object paths. This can be used to create the plain icons.

`

`

[Yashh56]

I will make this changes ASAP @canaleal Thanks for the help

[Yashh56]

Hey @canaleal Are these changes correct?

[Yashh56]

Hey, Maintainer Please Review This PR !!

[Yashh56]

thank you for the help @weh

[Snailedlt]

Wow great tutorial here @canaleal! https://github.com/devicons/devicon/pull/1926#issuecomment-1776317249

Would you mind adding the thing with objects, and adding it to this issue? https://github.com/devicons/devicon/issues/1306

[AnshSinghSonkhia]

Optimizing the SVG using SVGOMG

Optimizing is a 1 Click task with SVGVIEWER

I found it more easier to do with it.

1. Visit https://www.svgviewer.dev
2. Upload SVG or paste code

4. Click on Prettify Button.
5. Click on Optimize Button.

BOOM !!! The SVG is optimized, without ruining the viewbox.