@nexusmutual/logos v0.0.21

@nexusmutual/logos

Installation

npm i @nexusmutual/logos

Usage

It is possible to import the logos as React components. This way they end up in the bundle and do not need to be loaded after the page is rendered like with the <img> tag.

import { NexusMutual } from "@nexusmutual/logos";

export default async function Example() {
  return <NexusMutual className="w-12" />;
}

Another option is to use the SVG files directly from the public folder. This way they can be loaded after the page is rendered and the bundle size is not affected.

export default async function Example() {
  return (
    <Image
      src="logos/nexusmutual.svg"
      alt="nexusmutual logo"
      width={24}
      height={24}
    />
  );
}

Or import the SVG file directly from the public folder, this way it also ends up in the bundle.

import NexusMutual from "public/logos/nexus-mutual.svg";

// Or this:
// import NexusMutual from '@nexusmutual/logos/dist/img/nexus-mutual.svg';

export default async function Example() {
  return (
    <Image src={NexusMutual} alt="nexusmutual logo" width={24} height={24} />
  );
}

Utilities

Some extra stuff is exposed to make it easier to work with the logos.

Types

The LogoFileName type is an union of all the logo names based on the file names.

import { LogoFileName } from "@nexusmutual/logos";

const name: LogoFileName = "nexus-mutual";

All logo names

The allLogoFileNames variable contains all the logo names based on the file names.

import { allLogoFileNames } from "@nexusmutual/logos";

export default async function Example() {
  return (
    {allLogoFileNames.map((name: LogoFileName) => (
      <Image key={name} src={`logos/${name}.svg`} alt={name} width={24} height={24} />
    ))}
  );
}

Contributing

Adding a new logo

To add a new logo, add the SVG file to the src/ folder and add the filename to scripts/data/product-logo-filenames.js. Then run npm run build to see if it worked.