SVG icons with invalid React DOM attributes

[beauja]

Bug report

Describe the bug

There are SVG elements within Icons.tsx that have invalid React DOM attribute names. These invalid names cause React to emit a warning when these SVG elements are used. I received these warnings when using the Azure provider.

To Reproduce

Use the Auth component with either the azure, bitbucket or notion providers

import { createClient } from '@supabase/supabase-js';
import { Auth } from '@supabase/auth-ui-react';

const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>');

const App = () => <Auth supabaseClient={supabase} providers={['azure', 'bitbucket', 'notion']}/>;

Expected behavior

All occurences of the HTML attributes clip-rule, fill-rule, stop-color and stop-opacity within Icons.tsx should be camel-cased, as specfied by the React docs.

System information

• OS: Windows
• Browser: Chrome
• Version of @supabase/supabase-js: 2.1.0
• Version of @supabase/auth-ui-react: 0.2.6
• Version of Node.js: 19.0.1

[beauja]

Opened a PR #75 with a fix.

[silentworks]

PR merged and will be included in the next release.