How do I change the icon variant when using React?

[maks-oleksyuk]

I'm using the @thesvg/react package and trying to change the variant for the Apple icon

import { Apple } from '@thesvg/react';

<Apple height={24} width={24} />

The website shows several versions of this icon, but I couldn't find a way to use any of the others
https://thesvg.org/icon/apple?variant=mono

Is there any way to change this variant, or would this be a request to improve the system and add this feature?

[IshmamDC217]

The @thesvg/react components don't expose a variant prop like each one only renders the default variant and accepts standard SVGProps (width, height, className, fill, etc.), so there's currently no way to get mono through @thesvg/react.
You have two options today:

1. Use the CDN URL with an (variants are supported here):
   jsx
2. Use the core thesvg package, which exposes a .variants map and inline the SVG:
   jsximport apple from "thesvg/apple";

<span
  style={{ width: 24, height: 24 }}
  dangerouslySetInnerHTML={{ __html: apple.variants.mono }}
/>

If you specifically want support in @thesvg/react, that would be a feature request which is worth opening as an issue since the variant data already exists in the registry.

[maks-oleksyuk]

Support was added in #617