57 lines
1.2 KiB
Plaintext
57 lines
1.2 KiB
Plaintext
---
|
|
import type { HTMLAttributes } from 'astro/types';
|
|
import { iconPaths } from './IconPaths';
|
|
|
|
interface Props {
|
|
icon: keyof typeof iconPaths;
|
|
color?: string;
|
|
gradient?: boolean;
|
|
size?: string;
|
|
}
|
|
|
|
const { color = 'currentcolor', gradient, icon, size } = Astro.props;
|
|
const iconPath = iconPaths[icon];
|
|
|
|
const attrs: HTMLAttributes<'svg'> = {};
|
|
if (size) attrs.style = { '--size': size };
|
|
|
|
const gradientId = 'icon-gradient-' + Math.round(Math.random() * 10e12).toString(36);
|
|
---
|
|
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 256 256"
|
|
aria-hidden="true"
|
|
stroke={gradient ? `url(#${gradientId})` : color}
|
|
fill={gradient ? `url(#${gradientId})` : color}
|
|
{...attrs}
|
|
>
|
|
<g set:html={iconPath} />
|
|
{
|
|
gradient && (
|
|
<linearGradient
|
|
id={gradientId}
|
|
x1="23"
|
|
x2="235"
|
|
y1="43"
|
|
y2="202"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="var(--gradient-stop-1)" />
|
|
<stop offset=".5" stop-color="var(--gradient-stop-2)" />
|
|
<stop offset="1" stop-color="var(--gradient-stop-3)" />
|
|
</linearGradient>
|
|
)
|
|
}
|
|
</svg>
|
|
|
|
<style>
|
|
svg {
|
|
vertical-align: middle;
|
|
width: var(--size, 1em);
|
|
height: var(--size, 1em);
|
|
}
|
|
</style>
|