Preact class is ignored

[bensaufley]

First off, thanks for making this! Please let me know if this should go to the SVGR repo, because it's definitely possible.

I'm using Preact and my config in vite.config.ts (sorry, private repo) looks like this:

    svgr({
      exportAsDefault: true,
      svgrOptions: {
        // Types are out of sync with package & docs
        // https://react-svgr.com/docs/options/#jsx-runtime-import-source
        // @ts-ignore
        jsxRuntimeImport: {
          importSource: 'preact',
          specifiers: ['h'],
        },
      },
    }),

Note: I originally used jsxRuntime: 'classic-preact', but for one reason or another (it's been a bit) it didn't work, so that's how I ended up here. As you can see there seem to be some mismatches between docs and the types, at least—maybe the logic, too.

Passing class rather than className, as is the standard in Preact, means the value is effectively ignored. It's a small thing and I can just use className here, but I thought it was worth pointing out.

Expectation

Given foo.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="foo default-class" viewBox="0 0 16 16">
  <!-- … -->
</svg>

The following code in Preact:

import Foo from './foo.svg';

<Foo class="bar" />;

Should render:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bar" viewBox="0 0 16 16">
  <!-- … -->
</svg>

But it renders:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="foo default-class" viewBox="0 0 16 16">
  <!-- … -->
</svg>

The below produces the expected result:

import Foo from './foo.svg';

<Foo className="bar" />;