Skip to content

Instantly share code, notes, and snippets.

@msukmanowsky
Created April 15, 2023 18:43
Show Gist options
  • Save msukmanowsky/2cc17d7daf70764ede9bbf025282f45e to your computer and use it in GitHub Desktop.
Save msukmanowsky/2cc17d7daf70764ede9bbf025282f45e to your computer and use it in GitHub Desktop.
type Props = {
color: string;
};
export default function CrescentSpinner({
color = "gray",
}: Props) {
return (
<div aria-label="Loading..." role="status">
<svg className="h-6 w-6 animate-spin" viewBox="3 3 18 18">
<path
// This works!
className="fill-gray-200"
// This doesn't work
// className={`fill-${color}-200`}
d="M12 5C8.13401 5 5 8.13401 5 12c0 3.866 3.13401 7 7 7 3.866.0 7-3.134 7-7 0-3.86599-3.134-7-7-7zM3 12c0-4.97056 4.02944-9 9-9 4.9706.0 9 4.02944 9 9 0 4.9706-4.0294 9-9 9-4.97056.0-9-4.0294-9-9z"
></path>
<path
// This works!
className="fill-gray-800"
// This doesn't work
// className={`fill-${color}-800`}
d="M16.9497 7.05015c-2.7336-2.73367-7.16578-2.73367-9.89945.0-.39052.39052-1.02369.39052-1.41421.0-.39053-.39053-.39053-1.02369.0-1.41422 3.51472-3.51472 9.21316-3.51472 12.72796.0C18.7545 6.02646 18.7545 6.65962 18.364 7.05015c-.390599999999999.39052-1.0237.39052-1.4143.0z"
></path>
</svg>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment