Meta reference

Link

Edit this page

The Link component establishes a connection between the page and an external resource. Commonly, this is used for linking stylesheets and other associations.

This component renders a link element within the document's <head>.

import { 
const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>
Link } from "@solidjs/meta";
<
const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>
Link 
JSX.LinkHTMLAttributes<HTMLLinkElement>.rel?: string | undefined
rel="icon" 
JSX.LinkHTMLAttributes<HTMLLinkElement>.href?: string | undefined
href="/favicon.ico" />;

Usage

Adding a favicon

To add a favicon in an app, <Link> can be used to point to the asset:

import { 
const MetaProvider: ParentComponent
MetaProvider, 
const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>
Link } from "@solidjs/meta";


export default function 
function Root(): JSX.Element
Root() {
  return (
    <
const MetaProvider: ParentComponent
MetaProvider>
      <
const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>
Link 
JSX.LinkHTMLAttributes<HTMLLinkElement>.rel?: string | undefined
rel="icon" 
JSX.LinkHTMLAttributes<HTMLLinkElement>.href?: string | undefined
href="/favicon.ico" />
    </
const MetaProvider: ParentComponent
MetaProvider>
  );
}

Using an emoji as a favicon

To use an emoji as a favicon, first create a function that returns a data URI containing an SVG image:

const emojiSvg = (emoji) => {
  return (
    `data:image/svg+xml;utf8,` +
    `<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji}</text></svg>`
  );
};

Following this, include the emoji as an argument within that function in the href property of the Link component:

import { MetaProvider, Link } from "@solidjs/meta";


export default function Root() {
  return (
    <MetaProvider>
      <Link rel="icon" href={emojiSvg("😎")} />
    </MetaProvider>
  );
}
Report an issue with this page