perf: remove svg icon components and use css mask-image

[oriverk]

related issues

Fixes #

Changes proposed in this pull request

• remove svg icon components such as <GitHubIcon />, <XIcon /> ...
• create a Icon component with css mask-image

<span class="icon github small" />

.icon {
    display: flex;
 }

 .icon::before {
    content: '';
    display: inline-block;
    mask: no-repeat center;
    mask-size: contain;
    background-color: currentColor;
 }

.small::before {
    width: 1rem;
    height: 1rem;
}

.github::before {
    mask-image: url('/assets/github.svg');
 }

the background (as memo)

• CSS Modules で作る SVG Icon Component
• Breaking Up with SVG-in-JS in 2023 | Jacob Groß | kurtextrem.de
• 🦊⚛ on X: "Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage. This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused. https://t.co/G1IgOjTeIT" / X