feat(doc): change layout of button in main page

docs/src/components/MyIcon.astro

@@ -0,0 +1,31 @@
+---
+import { Icons } from './icons';
+
+interface Props {
+	name: keyof typeof Icons;
+	label?: string;
+	color?: string;
+	size?: string;
+	class?: string;
+}
+
+const { name, label, size = '1em', color } = Astro.props;
+const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const);
+---
+
+<svg height="1em" viewBox="0 0 512 512"
+	{...a11yAttrs}
+	class={Astro.props.class}
+	fill="currentColor"
+	set:html={Icons[name]}
+/>
+
+
+<style define:vars={{ 'sl-icon-color': color, 'sl-icon-size': size }}>
+	svg {
+		color: var(--sl-icon-color);
+		font-size: var(--sl-icon-size, 1em);
+		width: 1em;
+		height: 1em;
+	}
+</style>