Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

This issue does not impact the functionality of Docusaurus, but it does impact the developing experience.

For accessibility one might need to set the "title" tag for imported inline SVG React components. Docusaurus has SVGR loader configured such that it will accept a prop named "title", but this is not reflected in the type definition and TS server will complain.

I have a fix here which I will be happy to open a PR should this hacky solution to be correct, yet I don't know if there are less hacky ways to fix this issue, or if SVGR is the party to blame...

Reproducible demo

No response

Steps to reproduce

1. Fork a new website on docusaurus.new
2. Change <Svg className={styles.featureSvg} role="img" /> to be <Svg className={styles.featureSvg} role="img" title="Cool Dinosaur" />

Expected behavior

TS server will not complain about anything, and the site builds correctly

Actual behavior

TS server is unhappy and shows that

Type '{ className: string; role: "img"; title: string; }' is not assignable to type 'IntrinsicAttributes & SVGProps<SVGSVGElement>'.
  Property 'title' does not exist on type 'IntrinsicAttributes & SVGProps<SVGSVGElement>'.

Your environment

• Docusaurus version used: 3.0.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): TS Version 5.2.2 w/ VS Code 1.84
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.