Generating SVG for icons

[elliothershberg]

Hey @samselikoff, awesome demo of the power of Framer Motion!

I've got a question for you: do you have a favorite tool for generating the SVG paths like below for the icons? Do you create them in a tool like Figma or Inkscape and then export them? I'd like to be able to do the same! Thanks.

ios-apple-music-clone/src/Icons.js

Lines 1 to 10 in bb7ed03

	export function Play(props) {
	return (
	<svg viewBox="0 0 40 40" fill="none" {...props}>
	<path
	d="M32.997 18.268c1.334.77 1.334 2.695 0 3.464L13 33.27c-1.333.769-2.999-.194-2.999-1.733V8.463c0-1.54 1.666-2.502 3-1.733l19.997 11.538z"
	fill="currentColor"
	/>
	</svg>
	);
	}

[samselikoff]

Hey there, and thanks!

For this one I believe I just grabbed them from the iOS 15 UI Kit for Figma. For my Tailwind course on Egghead I remember grabbing them just literally from the devtools on the Discord web app.

Usually I try to use heroicons since they already come in a React library. Otherwise you can find any SVG (either from a google search or from something you find/make in Figma (then click copy -> copy as SVG), and then head over to transform.tools, paste in the SVG on the left, and you'll get a nice React-ified version on the right!