What I am trying to do - load svg from a file and wrap it inside an anchor tag.

Reference: https://github.com/shuding/nextra/blob/main/docs/theme.config.tsx

In that file, we have something like so:

const logo = (<svg> .... </svg>)

I'm trying to do the same in a component like so:

const myLogo = (
  svg>
    .... the actual svg code...
  </svg>
)


const Logo = () => {
  return (
     // If I remove this anchor, it works without Hydration errors
    <a href='https://example.com' target='_blank'>
      {myLogo}
    </a >
  )
}

export default Logo

And then I use it from another component like so:

// app/page.tsx
import Logo from './components/Logo'

export function Home() {
  return (
    <div>
      <Logo />
    </div>
  )
}

Help? (Newbie to frontend).