search

devicons / devicon

Set of icons representing programming languages, designing & development tools
https://devicon.dev
MIT License
9.65k stars 2.3k forks source link

[OTHER] Extending wiki with tutorials for each recommended tool #1306

Open Snailedlt opened 2 years ago

Snailedlt commented 2 years ago

I have searched through the issues and didn't find my problem.

What would you like to share?

It would be nice if we had a wiki page with tutorials for all the recommended tools. This can of course be added incrementally.

@BenSouchet Has already made a quick tutorial for a new tool recommendation here -> https://github.com/devicons/devicon/issues/1279#issuecomment-1195433256

We could follow the same format for the other tools that we have in the Recommended resources and tools wiki page, then add a link back in the table on that page.

Example

Tool Name Link Description & Usage Tutorials
Inkscape https://inkscape.org/ Free desktop application for editing and making SVGs how to foo, how to bar
Visual Studio Code https://code.visualstudio.com/ A code editor for editing code how to vscode
vscode.dev https://vscode.dev/ Visual Studio Code in the browser how to vscode
Iloveimg https://www.iloveimg.com/resize-image/resize-svg Resizing SVGs (this doesn't work with SVGs containing complex elements like gradients, etc.). Still have to add the attribute viewBox="0 0 128 128" manually to your resized files. cool tutorial
svgviewer.dev https://www.svgviewer.dev/ View, save, and optimize SVGs tutorial1
Vecta.io https://vecta.io/nano Compress and optimize SVGs tutorial1

Additional information

I propose the following additions

Snailedlt commented 1 year ago

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

  1. Using Inkscape: https://github.com/devicons/devicon/pull/1428#issuecomment-1271702666
  2. Using Online tools (often better and faster): https://github.com/devicons/devicon/pull/1961#issuecomment-1788123861
Snailedlt commented 1 year ago

How to unite/unify paths in Inkscape: https://github.com/devicons/devicon/pull/1468#issuecomment-1290185341

Snailedlt commented 1 year ago

How to optimize and minimize SVG's with SVGOMG: https://github.com/devicons/devicon/issues/1279#issuecomment-1195433256

lunatic-fox commented 1 year ago

Instructions of how to resize to square in Inkscape: #1465 (comment)

lunatic-fox commented 1 year ago

Checking grouped layers in Inkscape: #1468 (comment)

kilianpaquier commented 1 year ago

Transforming plain or original logos into outline ones :

  1. First of all, select the path (right panel, section Layers and Objects) you want to transform into an outline.
  2. Head to the section Fill and Stroke on the right panel and select the sub-section Stroke paint.
  3. Here, select the first option Flat color.
  4. If needed, you can adjust the border width on the sub-section Stroke style of the same section Fill and Stroke.
  5. Now that you are all set, head to the top navigation and open the Path menu, select Stroke to Path.
  6. Now, you can head back to the section Layers and Objects, you'll now see a folder containing both the stroke (as a path) and the initial path.
  7. Move the stroke to the root of the SVG, and delete both the folder and the initial path.
  8. You're all set, you should have a beautiful outline path.

NB : Keep in mind that the width will also vary if you resize the logo afterhand. You also can't modify the outline width after the transformation Stroke to Path.

Snailedlt commented 10 months ago

How to resize and center a SVG in Inkscape: https://github.com/devicons/devicon/pull/1938#discussion_r1378205483