LinearGradient id for svg icons are not unique

[GurovDmitriy]

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

LinearGradient id for svg icons are not unique.

Icons that use a gradient id must have a unique linearGradient id

<linearGradient id="uniq-id" ... gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="#e13fff"/>
    <stop offset=".09" stop-color="#c640fa"/>
 //...
 <path fill="url(#uniq-id)" fill-rule="evenodd" d...

after assembly or in development mode, ids look like a, b, c within one icon, that is, if you use several icons on a page, their gradients will intersect.
this happens when using inline icons

Reproducible demo

No response

Steps to reproduce

1 Icons should have gradients and linearGradient id with links to them.
2 Import icons into the project and use inline.

Expected behavior

linearGradient id should not be modified or should be done correctly, there should not be the same id between different icons

Actual behavior

linearGradient id of icons looks like a,b,c and is repeated between different icons

Your environment

No response

Self-service

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

[Josh-Cena]

Duplicate of #8297