diff options
Diffstat (limited to 'examples/portfolio/src/components/Icon.astro')
| -rw-r--r-- | examples/portfolio/src/components/Icon.astro | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/examples/portfolio/src/components/Icon.astro b/examples/portfolio/src/components/Icon.astro new file mode 100644 index 000000000..92cff492a --- /dev/null +++ b/examples/portfolio/src/components/Icon.astro @@ -0,0 +1,56 @@ +--- +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> |