npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

next-manifest-loader

v1.0.4

Published

A favicon and manfiest generator module for Next.js with built-in webpack loader

Downloads

13

Readme

next-manifest-loader npm version license downloads

Features:

  • Favicon & manifest generator Using the favicons package generates favicons and manifests for all required platforms
  • Single JSON formatted file input Generates everything off a single favicons config (as JSON) file import
  • Webpack loader Simple installation as Next.js plugin automatically installs a dedicated webpack loader for the manifest
  • Generates HTML helmet data Returns the HTML header links for all generated icons and manifest info
  • React generator The HTML header links are already React elements ready for you to insert using react-helmet or next/head

Table of contents

Installation

npm install --save-dev next-manifest-loader
# or
yarn add -D next-manifest-loader
// next.config.js

const { withManifest } = require('next-manifest-loader')(/* loader options can come here */)

const nextConfig = {
  /* your Next.js config */
}

module.exports = withManifest(nextConfig)

Loader Options

You can adjust these options: | Option | Type | Default | Description | | :--- | :--: | :-- | :---------- | | outputPath | string | static/manifest | Where to put the generated files. | | forceEmit | boolean | false | Development mode by default only emits single image and link tag, enable this to run the full favicons generation suite. | | test | RegExp | /\.manifest$/ | Allow overriding test clause to use for webpack loader. If using TypeScript, by overriding this, you also need to provide your own declare module "*.<ext>"; type. |

Usage

You can now simply create a single svg1 file of your favicon, add path to it in your app.manifest file using sourceImage key (relative to manifest file), require the manifest file in _app.js in your Next.js app, and in Dev mode a simple favicon will be set (with updating hashname so you can see the updates on refresh) and in production builds a full set of icons and browser manifest will be generated and the associated HTML react components returned.

1: Not limited to svg, can also make a png, but make sure it's bigger than 512x512.

Example

Create an app.manifest file specifying properties for favicons config, additionally specifying sourceImage where the loader should look for the single image file to generate all icons for all platforms and sizes.

// app.manifest

{
  // Specify from which image to generate all icons (relative to imported file)
  "sourceImage": "./app-icon.svg",
  // Any config option as supported by `favicons` package
  "appName": "Novela by Narative",
  "appShortName": "Novela",
  "background": "#fff",
  "theme_color": "#fff",
  "display": "standalone"
}

Assuming the app.manifest example above is put in your apps root.

// pages/_app.tsx

import type { AppProps } from 'next/app'
import Head from 'next/head'
import Manifest from '../app.manifest' // <-- load the manifest config

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        {Manifest} <!-- add assembled link and meta tags to <head /> -->
      </Head>
      <Component {...pageProps} />
    </>
  )
}

If using TypeScript, import module type in a d.ts file (so TS doesn't scream when you import app.manifest) or provide your own declaration in case you overrode test regex for loader options.

Make sure to add the d.ts file to include section of tsconfig.json as well.

// types.d.ts

/// <reference types="next-manifest-loader/module" />

// or

declare module '*.manifest' {
  import React from 'react'
  const Meta: React.ReactElement[]
  export default Meta
}

TODO

  • [ ] Try to make it work with _document
  • [ ] Handle all the TODO comments in code
  • [ ] Clean up repository from unncessary stuff
  • [ ] CI/CD

License

Licensed under the MIT license.

© Heavily based on next-favicon-loader by Guy Barnard and Tinia Labs contributors