diff options
Diffstat (limited to 'src/components/Link.astro')
| -rw-r--r-- | src/components/Link.astro | 26 |
1 files changed, 7 insertions, 19 deletions
diff --git a/src/components/Link.astro b/src/components/Link.astro index d5a9fa7..4ffb04b 100644 --- a/src/components/Link.astro +++ b/src/components/Link.astro @@ -1,14 +1,5 @@ --- -import { componentIsHTMLElement } from "astro/runtime/server/render/dom.js"; -import Dribbble from "./icons/Dribbble.astro"; -import Facebook from "./icons/Facebook.astro"; -import Instagram from "./icons/Instagram.astro"; -import Linkedin from "./icons/Linkedin.astro"; -import Shop from "./icons/Shop.astro"; -import Twitch from "./icons/Twitch.astro"; -import Url from "./icons/Url.astro"; -import XTwitter from "./icons/X-twitter.astro"; -import Youtube from "./icons/Youtube.astro"; +import 'remixicon/fonts/remixicon.css' interface Props { icon: string; @@ -22,15 +13,7 @@ const { icon, title, description, url } = Astro.props; <a href={url} class="link"> <span class="link-icon"> - {icon === 'dribble' && <Dribbble></Dribbble>} - {icon === 'facebook' && <Facebook></Facebook>} - {icon === 'instagram' && <Instagram></Instagram>} - {icon === 'linkedin' && <Linkedin></Linkedin>} - {icon === 'shop' && <Shop></Shop>} - {icon === 'twitch' && <Twitch></Twitch>} - {icon === 'url' && <Url></Url>} - {icon === 'xtwitter' && <XTwitter></XTwitter>} - {icon === 'youtube' && <Youtube></Youtube>} + <i class={'ri-' + icon}></i> </span> <div class="link-content"> <h2 class="link-title">{title}</h2> @@ -58,6 +41,11 @@ const { icon, title, description, url } = Astro.props; align-items: center; } + .link-icon i { + font-size: 1.5rem; + color: var(--zinc-50) + } + .link-title, .link-description { font-size: 1rem; } |