@ilo-org/brand-assets v1.0.0

ILO Design System - Brand Assets

Static brand assets for use in digital and software products using the ILO Design System.

Installation

npm i @ilo-org/brand-assets

Basic Usage

1. Import the image directly

This assumes that you're using a module bundler like Webpack that will allow you to import the image into a JavaScript file and then include it in a production bundle where the import will be interpolated into a file path.

In this example, we're importing a logo from the from @ilo-org/brand-assets package and providing it to a React component.

import ilo_logo from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";

export const Logo = (props) => <img src={ilo_logo} {...props} />;

If you're using Next.js, you should use its next/image component to do this.

2. Import the image URL

import { logo_en_horizontal_blue } from "@ilo-org/brand-assets";

export const Logo = (props) => <img src={logo_en_horizontal_blue} {...props} />;

This will give you a URL object with normalized path to the file's location in the package. This is the easiest solution if you're able to serve them directly from the node_modules folder.

Conversely, it will not work in build systems that wont't serve assets from node_modules and that need to bundle them directly.

List of Assets

Additional assets will be added to this package in future versions.

ILO Logo

Favicon

Various different favicon formats are available in the package. They are exported from the /dist/favicon directory. The following table lists the available formats and their dimensions.

Contributing

ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the contribution guidelines.