fix(v2): refactor icons in theme-classic, fix swizzle issue

[Simek]

Motivation

Fixes #3830

This PR refactor all SVG usages in the theme-classic and introduces three new and swizzable icon components:

• IconArrow,
• IconEdit,
• IconMenu.

I have tried to add define them in the icons folder but there were some wired import issues on build, maybe some one will be able to improve the directory structure in the future.

This refactor also fixes the swizzle problem, which occurs currently for DocPage and DocSidebar.

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

Local run of V2 Docusuaurs website with swizzled DocSidebar component.

Related PRs

• ci(v2): test swizzle on CI using v2 website #3840 - after this PR merge the CI Swizzle, after rebase,, should also be successful.

[netlify]

Deploy preview for docusaurus-2 ready!

Built without sensitive environment variables with commit 6d7e32f

https://deploy-preview-3854--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	68
🟢 Accessibility	99
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-3854--docusaurus-2.netlify.app/classic/

[github-actions]

Size Change: +22 B (0%)

Total Size: 157 kB

ℹ️ View Unchanged

Filename	Size	Change
website/build/blog/2017/12/14/introducing-docusaurus/index.html	20.7 kB	+1 B
website/build/docs/introduction/index.html	180 B	0 B
website/build/index.html	5.86 kB	0 B
website/build/main.********.js	113 kB	+21 B (0%)
website/build/styles.********.css	17.6 kB	0 B

_{compressed-size-action}

[slorber]

thanks, that's a helpful refactor that we'd probably have to do to create the theme gallery anyway 👍

just I'd rather not hardcode a margin inside the SVG directly

[slorber]

"external" styles should rather be passed as props and keep in the parent component.

Some refs:
https://visly.app/blogposts/layout-isolated-components
https://mxstbr.com/thoughts/margin

[Simek]

just I'd rather not hardcode a margin inside the SVG directly

It was how the inline SVG code looked like before refactor.

I will extract the inilne styles in the next commit.

[slorber]

it was fine before because the svg was inlined, if we make a real comp we should only put "internal styles" in it, so that the component can be used safely in multiple different contexts.

[slorber]

Thanks

Actually I meant the styles like margin should not be at all in the IconEdit comp, but in the comps using them (ie <IconEdit className={styles.docEditButton}/>)

But in this case, it would create some duplication as the comp is used in the same way from 2 places, so let's merge and see 🤷‍♂️