add custom headings with deep link

src/components/Icon.astro

@@ -3,9 +3,10 @@ export interface Props {
     name: string,
     width?: string,
     height?: string,
+    display?: string,
 };
 
-const { name, width, height } = Astro.props;
+const { name, width, height, display } = Astro.props;
 
 const icons = import.meta.glob<{string: string}>('@components/icons/*.svg', { query: '?raw', import: 'default' });
 const path = `/src/components/icons/${name}.svg`;
@@ -17,8 +18,9 @@ const icon = await icons[path]();
 
 <span class="icon" set:html={icon} />
 
-<style define:vars={{ width, height }}>
+<style define:vars={{ width, height, display }}>
     .icon :global(svg) {
+        display: var(--display, block);
         width: var(--width, 100%);
         height: var(--height, 100%);
     }