use curly braces ({ }) as the icon for API Routes in the "capabilities" section of the home page

[thescientist13]

Summary

Coming out of #4 / #30 , I wanted to change the icon for the API Routes tab. I tried changing the icon for API Routes to use curly braces, but I wasn't able to get it centered. (also probably needed to increase the stroke width a bit)

Details

I got the icon from here and its already committed to the repo as src/assets/json.svg, just needs a little help. 😇

If someone works on this before #30 is merged, feel free to open a PR to that branch.

[DevLab2425]

@thescientist13

Do you have a recommendation on an SVG tool that might be help generate the markup?

Taking a look at this before I jump in and attempt to make some changes, but having some trouble viewing the existing SVG files in a few editors. When attempting to view the files, nothing seems to appear in the preview.

• https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview
• https://marketplace.visualstudio.com/items?itemName=henoc.svgeditor
• https://www.svgviewer.dev/s/wAuBfuQk (Greenwood HTML icon)

This is not the case with the example for the curly braces. That markup renders just fine.

• https://www.svgviewer.dev/s/eB7RI8NY (Curly brace example)

My experience with SVG markup is limited, but I'm wondering if there's a conflict between SVG versions? I did try the W3C validator, but that didn't reveal anything meaningful that may indicate an invalid format.

• https://validator.w3.org/#validate_by_input+with_options

I'll hold off on this one for now, but wanted to share what I found.

[thescientist13]

Thanks for taking a look @DevLab2425

Taking a look at this before I jump in and attempt to make some changes, but having some trouble viewing the existing SVG files in a few editors. When attempting to view the files, nothing seems to appear in the preview.
...
https://www.svgviewer.dev/s/wAuBfuQk (Greenwood HTML icon)

Some of the SVGs in the repo have the fill and stroke attributes in the SVG as not defined since depending on where the SVG is being used, we might want to change the color. So taking the example you linked of the HTML SVG, here's me setting the fill to green.

Do you have a recommendation on an SVG tool that might be help generate the markup?

The linked site in the description was what I used as the starting point for the json.svg file I committed, I was just having trouble trying to twiddle the knobs for viewBox and height / width so I could get it just centered just the way I wanted.

Admittedly, I only started diving deeper into SVGs for this project to build up more experience with them so I might be learning along with you as well on this. 😅

---

I'll also see if @Auhseh has any thoughts here, as the designer he might be able to get us one that is purpose fit in case we can't make anything work with what we have.