Add migration from iTwinUI guide

[GerardasB]

Changes

This PR adds a migration guide that describes how to migrate from iTwinUI to StrataKit.

Currently it is mostly intended to expose the iTwinUI -> StrataKit icon mappings available in https://www.figma.com/design/fVdjw14c6U6qRjzZwUwq9x/Icons-Parity-iTwinUI-vs-Strata

In addition I've filled out the initial ## Migration steps based on structure of legacy StrataKit migration.
Other information, like component mapping/guidance will be filled out later.

Note to reviewers: Icon mappings will need some work/validations, see comments below.

Created a script to extract available iTwinUI icons: #1643 (comment)

Testing

https://stratakit.bentley.com/1643/docs/getting-started/migration-from-itwinui/

[FlyersPh9]

Nicely structured page. I read through all of it and it made sense. However, I did not review the icon mapping and will defer to the designers on that.

[GerardasB]

While working on iTwin/appui#1587 I've noticed that some mappings in the table are incorrect. Pushed a bunch of changes.

This gives some ground to run a script that verifies existence of SVGs in the second column.

---

After running a script there are some more fixes to be made:

Script

import { readFile } from "node:fs/promises";
import { fileURLToPath } from "node:url";

import iconsList from "./packages/icons/icons-list.json" with { type: "json" };

const mdxPath = fileURLToPath(
	new URL(
		"./apps/website/src/content/docs/getting-started/migration-from-itwinui.mdx",
		import.meta.url,
	),
);

const content = (await readFile(mdxPath, "utf8")) as string;

let isHeader = true;
const badIcons: string[] = [];
for (const line of content.split("\n")) {
	const trimmed = line.trim();

	// Consider table only
	if (!trimmed.startsWith("|") || !trimmed.endsWith("|")) continue;

	// Skip header
	if (isHeader) {
		if (line.startsWith("| --")) {
			isHeader = false;
		}
	}

	const cells = trimmed
		.slice(1, -1)
		.split("|")
		.map((cell) => cell.trim());

	const [_, icon] = cells;
	if (icon === "-") continue;
	if (iconsList.includes(icon)) continue;

	badIcons.push(icon);
}

console.table(badIcons);

Output

┌─────────┬────────────────────────────────┐
│ (index) │ Values                         │
├─────────┼────────────────────────────────┤
│ 0       │ 'remove.svg'                   │
│ 1       │ 'column-manager.svg'           │
│ 2       │ 'distribute-bottom.svg'        │
│ 3       │ 'folder-minimize.svg'          │
│ 4       │ 'forms.svg'                    │
│ 5       │ 'hide-manually-suppressed.svg' │
│ 6       │ 'hide-rule-suppressed.svg'     │
│ 7       │ 'plugin.svg'                   │
│ 8       │ 'suppress-manually.svg'        │
│ 9       │ 'tree-navigate-down.svg'       │
│ 10      │ 'tree-navigate-up.svg'         │
│ 11      │ 'visibility-emphasize.svg'     │
└─────────┴────────────────────────────────┘

Fixed now

[mayank99]

Step 4 makes it seem like it would be enough to replace the imports. Should briefly clarify that the usage itself will need to be updated.

In a future PR, we can add a separate section that lists all components and their replacements, linking to each one's docs.

[mayank99]

Should be colorScheme={theme}.

[mayank99]

After #1863, the .svg extension can be removed.

Suggested change

	+ import svgAdd from "@stratakit/icons/add.svg";
	+ import { svgAdd } from "@stratakit/icons/add";

[mayank99]

The "accent color" part feels bolted on here. Might be worth explaining in its own paragraph or separate section.

[mayank99]

iTwinUI icons are often used directly as React components from @itwin/itwinui-icons-react. Is it worth including those in this list? That would make it easy to search.

2d (`Svg2D`)

Similarly, StrataKit icons can include the named exports from #1863:

2d (`svg2D`)