Skip to content

link.mdx

Latest commit

 

History

History
59 lines (45 loc) · 1.37 KB

link.mdx

File metadata and controls

59 lines (45 loc) · 1.37 KB
title Link
order 2

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 { Link } from "@solidjs/meta";
<Link rel="icon" href="/favicon.ico" />;

Usage

Adding a favicon

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

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

export default function Root() {
	return (
		<MetaProvider>
			<Link rel="icon" href="/favicon.ico" />
		</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` +
		`<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>
	);
}