Link

src/components/link.tsx
import NextLink, { type LinkProps } from 'next/link'
import { forwardRef } from 'react'
import { Icon } from '@/components/icon'
import { clsx } from 'clsx'
type LinkWithIconProps = LinkProps &
React.ComponentPropsWithoutRef<'a'> & {
icon?: { body: string; width?: number; height?: number }
iconPlacement?: 'before' | 'after'
iconSize?: string
}
export const Link = forwardRef(function Link(
{
icon,
iconPlacement = 'after',
iconSize = 'w-5 h-5',
children,
className,
...props
}: LinkWithIconProps,
ref: React.ForwardedRef<HTMLAnchorElement>
) {
const iconElement = icon ? (
<Icon
icon={icon}
className={clsx(
iconSize,
iconPlacement === 'before' && children ? 'mr-2' : '',
iconPlacement === 'after' && children ? 'ml-2' : ''
)}
/>
) : null
return (
<NextLink
ref={ref}
className={className}
{...props}
>
{iconPlacement === 'before' && iconElement}
{children}
{iconPlacement === 'after' && iconElement}
</NextLink>
)
})

Support

Talk to the developers of this project to learn more

We have been building professional websites for big clients for over 15 years. Gallop templates and blocks is our best foundation for SEO websites and web apps.

© 2026 Web Plant Media, LLC