mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
2.5 KiB
JSON
17 lines
2.5 KiB
JSON
{
|
|
"id": "7676a1984eac44b31157b259",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "link",
|
|
"content": "---\ntitle: Link\norder: 2\nuse_cases: 'adding favicon, stylesheets, external resources, preloading assets, web fonts'\ntags:\n - link\n - favicon\n - stylesheet\n - assets\n - head\n - resources\nversion: '1.0'\ndescription: \u003e-\n Add external resources like stylesheets and favicons to your Solid app. Learn\n to use the Link component for optimal resource loading and icons.\n---\n\nThe Link component establishes a connection between the page and an external resource.\nCommonly, this is used for linking stylesheets and other associations.\n\nThis component renders a [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element within the document's `\u003chead\u003e`.\n\n```tsx twoslash\nimport { Link } from \"@solidjs/meta\";\n\u003cLink rel=\"icon\" href=\"/favicon.ico\" /\u003e;\n```\n\n## Usage\n\n### Adding a favicon\n\nTo add a favicon in an app, `\u003cLink\u003e` can be used to point to the asset:\n\n```tsx twoslash\nimport { MetaProvider, Link } from \"@solidjs/meta\";\n\nexport default function Root() {\n\treturn (\n\t\t\u003cMetaProvider\u003e\n\t\t\t\u003cLink rel=\"icon\" href=\"/favicon.ico\" /\u003e\n\t\t\u003c/MetaProvider\u003e\n\t);\n}\n```\n\n### Using an emoji as a favicon\n\nTo use an emoji as a favicon, first create a function that returns a data URI containing an SVG image:\n\n```jsx\nconst emojiSvg = (emoji) =\u003e {\n\treturn (\n\t\t`data:image/svg+xml;utf8,` +\n\t\t`\u003csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22\u003e\u003ctext y=%22.9em%22 font-size=%2290%22\u003e${emoji}\u003c/text\u003e\u003c/svg\u003e`\n\t);\n};\n```\n\nFollowing this, include the emoji as an argument within that function in the `href` property of the Link component:\n\n```jsx\nimport { MetaProvider, Link } from \"@solidjs/meta\";\n\nexport default function Root() {\n\treturn (\n\t\t\u003cMetaProvider\u003e\n\t\t\t\u003cLink rel=\"icon\" href={emojiSvg(\"😎\")} /\u003e\n\t\t\u003c/MetaProvider\u003e\n\t);\n}\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/link.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-meta/reference/meta/link.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 1753,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "0992fdc97a7f27289597b5d1a835524ce3d4332a7b6aa032ab18e3b58bf4b9fe",
|
|
"timestamp": "2026-02-23T11:43:00.191238471+01:00"
|
|
} |