feat(react): enable titleProp option for SVGR in JSX compiler (#412)

Author: ryougifujino

examples/vite-react/src/App.tsx

@@ -13,7 +13,7 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <ReactLogo style={{ fontSize: '3em' }} />
+        <ReactLogo title="React Logo" style={{ fontSize: '3em' }} />
         <span dangerouslySetInnerHTML={{ __html: RawReactLogo }}></span>
         <p>Hello Vite + React!</p>
         <p>

src/core/compilers/jsx.ts

@@ -18,6 +18,7 @@ export const JSXCompiler = (async (
     {
       plugins: ['@svgr/plugin-jsx'],
       ref: options.jsx === 'react',
+      titleProp: options.jsx === 'react',
     },
     { componentName: camelize(`${collection}-${icon}`) },
   )

types/react.d.ts

@@ -1,12 +1,12 @@
 declare module 'virtual:icons/*' {
   import type { ForwardRefExoticComponent, SVGProps } from 'react'
 
-  const component: ForwardRefExoticComponent<SVGProps<SVGSVGElement>>
+  const component: ForwardRefExoticComponent<SVGProps<SVGSVGElement> & { title?: string }>
   export default component
 }
 declare module '~icons/*' {
   import type { ForwardRefExoticComponent, SVGProps } from 'react'
 
-  const component: ForwardRefExoticComponent<SVGProps<SVGSVGElement>>
+  const component: ForwardRefExoticComponent<SVGProps<SVGSVGElement> & { title?: string }>
   export default component
 }