Unable to swizzle sidebar category caret icon

Edited by @slorber, see https://github.com/facebook/docusaurus/issues/7902#issuecomment-1209598343

---

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

Changing the size of the IconArrow doesn’t reflect on site.

Reproducible demo

No response

Steps to reproduce

1. Swizzle IconArrow
2. Change size of svg Width and height
3. IconArrow doesn’t resize

Expected behavior

Expected IconArrow to resize according to size set in index.js

Actual behavior

Nothing, no change.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

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

[Josh-Cena]

I have a very fancy solution—we can automatically wrap every component when we build our own site, and use a switch on our site which, when enabled, displays a tooltip of the component’s name when you hover over every region.

[Josh-Cena]

It’s actually hard currently, and I’ve been thinking about what we can do. You would need to eject some higher-level components first, and see what subcomponents they each render. Ref. our docs:

Start with a higher-level component.

At the bare minimum we need to improve the component description. The current one is basically gibberish:

'The arrow icon component