Select Git revision
@astrojs__starlight@0.25.0.patch
@astrojs__starlight@0.25.0.patch 1.42 KiB
diff --git a/user-components/Icon.astro b/user-components/Icon.astro
index 7575cc787022f2d4baed7fe543aa2604e5438c2c..07eccbb21052fed519d094f4eea525d7ec7c69aa 100644
--- a/user-components/Icon.astro
+++ b/user-components/Icon.astro
@@ -1,5 +1,6 @@
---
import { Icons } from '../components/Icons';
+import 'iconify-icon';
interface Props {
name: keyof typeof Icons;
@@ -13,21 +14,37 @@ const { name, label, size = '1em', color } = Astro.props;
const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const);
---
-<svg
- {...a11yAttrs}
- class={Astro.props.class}
- width="16"
- height="16"
- viewBox="0 0 24 24"
- fill="currentColor"
- set:html={Icons[name]}
-/>
+{
+ (Icons[name] ?
+ <svg
+ {...a11yAttrs}
+ class={Astro.props.class}
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ set:html={Icons[name]}
+ /> :
+ <iconify-icon
+ icon={name}
+ {...a11yAttrs}
+ class={Astro.props.class}
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ ></iconify-icon>)
+}
<style define:vars={{ 'sl-icon-color': color, 'sl-icon-size': size }}>
- svg {
+ svg, iconify-icon {
color: var(--sl-icon-color);
font-size: var(--sl-icon-size, 1em);
width: 1em;
height: 1em;
}
+ svg.inline, iconify-icon.inline {
+ display: inline !important;
+ }
</style>
+