sage-nexus-ui
v1.4.5
Published
Nexus core components
Readme
Small component library for personal use.
Favicon usage
This package exports the favicon assets and a small helper to make adding favicon links in consuming apps trivial.
Files available in package:
nexus-logo-favicon.svg— modern SVG faviconfavicon.ico— multi-size ICO (legacy support)
Quick copy approach (recommended):
- Add and then run these asset copy scripts in the consuming project's package.json:
"scripts": {
"copy-sage-assets": "cpx \"node_modules/sage-nexus-ui/dist/assets/images/*\" public/assets/sage-nexus-ui/",
"postinstall": "npm run copy-sage-assets"
}- Add links in your HTML head:
<link
rel="icon"
type="image/svg+xml"
href="/assets/sage-nexus-ui/nexus-logo-favicon.svg"
/>
<link rel="icon" href="/assets/sage-nexus-ui/favicon.ico" />Or, use the React helper exported by this package:
import { FaviconLinks } from "sage-nexus-ui";
function AppHead() {
return <FaviconLinks />; // adds versioned SVG and ICO links
}Next.js example
If you use Next.js (Pages or App router), you can copy the built assets into your public/ folder and render the helper component from the app head so the favicon is present on first render.
- Copy assets during install/build (example
package.jsonscripts in the consuming app):
"scripts": {
"copy-sage-assets": "cpx \"node_modules/sage-nexus-ui/dist/assets/images/*\" public/assets/sage-nexus-ui/",
"postinstall": "npm run copy-sage-assets"
}- Pages router (
pages/_document.tsx) example — server-side rendered so the links are available immediately:
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import { FaviconLinks } from "sage-nexus-ui";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<FaviconLinks />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;- App router (
app/layout.tsx) example:
// app/layout.tsx
import { FaviconLinks } from "sage-nexus-ui";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head>
<FaviconLinks />
</head>
<body>{children}</body>
</html>
);
}Notes:
- Copying assets into
public/ensures the files are served as static assets (no runtime JS required) and avoids a flash-of-default-favicon. - The
FaviconLinkshelper uses versioned URLs by default to help cache-busting when you publish a new library version.