search

FlorianWoelki / obsidian-iconize

Simply add icons to anything you want in Obsidian.
https://florianwoelki.github.io/obsidian-iconize/
MIT License
906 stars 62 forks source link

Doc guide on how to convert images to icons. #252

Open lorenzobrasil opened 1 year ago

lorenzobrasil commented 1 year ago

Is your feature request related to a problem? Please describe. Yes, I'm encountering an issue when trying to create icons from certain images. Despite resizing the images to standard icon dimensions like 32x32 or 16x16, the resulting icons appear distorted for reasons that are not immediately clear to me. This distortion makes it difficult to discern what the icon represents.

Describe the solution you'd like A dedicated section in the documentation providing a simple step-by-step guide on converting standard image formats (e.g., .png) into icons would be extremely helpful. This could serve as a comprehensive resource for users facing similar issues.

Describe alternatives you've considered I've experimented with resizing the images to various dimensions, but the distortion persists regardless of the size. The icons are so distorted that it's challenging to make out what they are supposed to represent.

FlorianWoelki commented 1 year ago

At the moment, I've never tested using images as icons. However, I'll keep this in mind and check if it makes sense to add a guide for e.g., png files.

Oddward commented 9 months ago

In the mean time, if your icon is a flat graphic you can try vectorizing it with a program like Adobe Illustrator (it can turn simple images into vectors by outlining them), that's called Image trace on desktop or Vectorize on iPad version if I'm not mistaken. (I can't outline a guide atm as I'm only on mobile, but check Adobe's site)

You could also try using the icon image as the fill/background of a basic shape like a square on a vector graphics editor like Illustrator or Figma (free) and then export it as SVG.

SVG is basically designed to fix the distortion issue you described because unlike raster images which are rendered from a grid of square pixels of individual colours, vector graphics are defined mathematically/algorithmically so the computer redraws it at whichever size it is — e.g. a perfect circle will be redrawn with a set radius every time it's rendered/resized — and it can be styled with CSS, plus it can be exported into other formats easily, that's why icon packs & icons in general are now typically SVG.