I find myself applying style={{ transform: "translateY(-3.5%)" }} to the svg tag of the icons regularly to make them visually aligned, so they look better next to text. The percentage value depends on the image itself.
Here's an example of visual alignment applied with some text next to it for reference:
| before |
after |
 |
 |
At the moment, the process is quite manual if you want to achieve this:
- Copy icon svg markup
- Create an svg file locally by pasting the markup
- Upload that svg file to https://svgtopng.com/ to transform it to PNG
- Download that png file
- Upload the png file to https://javier.xyz/visual-center/
- Copy the transform percentage
An option to copy items with the visually alignment transform in place would be nice to have.
Implementation
If we were to enable the functionality mentioned above, we'd need the following steps
Modify the build process
- use a package to convert each svg to png like (e.g.
svg-to-png or svg2img)
- use the visual-center package to find the visual center
- store that information in some json
Modify the site
- add a switch to toggle visual-centering mode
- when an icon is copied attach the
style object with the necessary transform
Does that sound like something you'd accept a PR for?
I find myself applying
style={{ transform: "translateY(-3.5%)" }}to thesvgtag of the icons regularly to make them visually aligned, so they look better next to text. The percentage value depends on the image itself.Here's an example of visual alignment applied with some text next to it for reference:
At the moment, the process is quite manual if you want to achieve this:
An option to copy items with the visually alignment transform in place would be nice to have.
Implementation
If we were to enable the functionality mentioned above, we'd need the following steps
Modify the build process
svg-to-pngorsvg2img)Modify the site
styleobject with the necessarytransformDoes that sound like something you'd accept a PR for?