[ICON REQUEST]: nano

[Snailedlt]

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

• Confirm

About the icon

GNU text editor in the terminal

Links and sources

Website

Images

PNG

PNG Wordmark (not official)

SVG
SVG doesn't show properly for some reason, so click the link to see it

Additional information

The original logo is just made out of ASCII art, so could be hard to find a good SVG for it.

Original logo from the website

                :::                           The                 
  iLE88Dj.  :jD88888Dj:                                           
.LGitE888D.f8GjjjL8888E;        .d8888b.  888b    888 888     888 
iE   :8888Et.     .G8888.      d88P  Y88b 8888b   888 888     888 
;i    E888,        ,8888,      888    888 88888b  888 888     888 
      D888,        :8888:      888        888Y88b 888 888     888 
      D888,        :8888:      888  88888 888 Y88b888 888     888 
      D888,        :8888:      888    888 888  Y88888 888     888 
      D888,        :8888:      Y88b  d88P 888   Y8888 Y88b. .d88P 
      888W,        :8888:       "Y8888P88 888    Y888  "Y88888P"  
      W88W,        :8888:                                         
      W88W:        :8888:      88888b.   8888b.  88888b.   .d88b. 
      DGGD:        :8888:      888 "88b     "88b 888 "88b d88""88b
                   :8888:      888  888 .d888888 888  888 888  888
                   :W888:      888  888 888  888 888  888 Y88..88P
                   :8888:      888  888 "Y888888 888  888  "Y88P" 
                    E888i                                         
                    tW88D             Text Editor Homepage        

[BenSouchet]

I created these SVGs, pretty heavy files (128kB et 343kB) since for compatibility font characters need to be vectors / paths):

[Snailedlt]

@BenSouchet Nice work!
How did you go about creating the icons? they look spot on

[BenSouchet]

@Snailedlt
With Adobe Illustrator, you have the possibility to convert text(s) to paths, then you export as SVG, after that I optimize the SVG via https://jakearchibald.github.io/svgomg/ , for me the best SVG optimizer available then I ensure the SVG is properly formatter (no style="").

When I need to create vectors from scratch, I start with Photoshop (I know it's weird, but for me way faster than using illustrator) then I import paths to illustrator, apply colors, resize in a 128x128 canvas, then save as SVG and Optimize with SVGOMG.

[Snailedlt]

@BenSouchet Nice, It's cool to see other people's processes, especially someone who works with these kinds of stuff professionally!

I've never used Illustrator nor Photoshop before, so I should probably try the free trial for them sometime. Haven't heard of SVGOMG before, looks neat! I'll try it for my next contribution :) Maybe we can add these to Recommended resources and tools too, if they are beginner friendly, or add a new heading for advanced tools if they aren't

[BenSouchet]

@Snailedlt

I think SVGOMG is in between beginners and advance users, it's a very good tool to properly optimize SVG files.

If you want for the documentation the steps are:

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

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

3. right-click and Paste

4. Now that the SVG has been loaded in the interface, it's time to set the parameters to use named "Features"

5. Disable Compare gzipped, and enable Multipass, dont touch the precision slidebar.
   Enable all the features EXCEPT:

• Remove xmlns
• Round/rewrite number lists
• Replace duplicate elements with links

6. Now click the copy button to copy to clipboard the SVG code.

7. Paste back in your SVG file the SVG code

8. Add an empty newline at end of file (to ensure compatibilty of SVG file)

9. Save the file, it's done !

[BenSouchet]

There is also pretty good features in https://www.svgviewer.dev/ but these aren't activate by default:
You need to click on Options

Then for example active the convertStyleToAttrs

Or the removeStyleElement