Padding VS Code Touch Bar Extension Icons


A couple of posts ago, in my (rather unique, if I may say so myself) zero-code VS Code Touch Bar Extension for Markdown, I used the standard Apple icons in the SF Symbols set. I found them a bit too large for the touchbar, and wated to shirink them slightly by padding them with extra pixels around the image.

Never run code you find off the Internet without understanding it!

I figured sips would do what I wanted - for each PNG:

  • get the width and height of the original PNG, sips -1 outputs a single line e.g. file.png| pixelWidth: 46| pixelHeight: 36|
  • place the output into an array, splitting it by the given delimiter IFS="|",
  • get the second item in the array, i.e. width, and again convert into an array, this time with the : delimiter
  • repeat for the third item i.e. height
  • I use let to add 40 to the height (you can also do the same for the width, but I didn’t)
  • finally use sips again with -p to “Pad image with pixels to fit specified size.”
  • and save the new image with the same filename in a sub-folder, edited
mkdir edited
for f in *.png; do
     o=($(sips -1 -g pixelWidth -g pixelHeight "$f"))
     let w=w[1]
     let h=h[1]+20
     sips -p $h $w -o "edited/$f" "$f"