Didn’t expect this to blow up on Hacker News on the weekend! We’re a small company based out of Vancouver, BC that creates software tools (https://www.checkersoftware.ca/).
Thanks for posting it and thank you all for your kind words.
In most of the examples, there's many paths with long sequences of numbers, so it's not obvious which path corresponds to which shape in the image.
I wonder if you could make it temporarily change the color or outline of a path when the cursor is on its code in the editor? (and similarly for text selections)
I actually tried to implement this exact feature about a year ago, but gave up after a day of working on it because it seemed too difficult. Given this feedback, it might be worth trying again. Thank you!
Not the person you're replying to - but in my experience, it can be easier to put the SVG in a component by itself to make changes to it wherever it may be used by just navigating to the path of the SVG itself rather than digging up the actual component it's used in.
There are very minor differences between what's a valid SVG and what's valid JSX, and web apps like this one will often offer to translate those fields for you as well as add the rest of the "component stuff" to make it copy-pastable.
Presumably, it would let you dynamically update the SVG the same way that React lets you dynamically update HTML. As simple examples, imagine an SVG clock or some map-based data visualization.
Thanks for posting it and thank you all for your kind words.
Let me know if you have any questions!