@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
Image | Language | Filetype | Exported as | Filename |
---|---|---|---|---|
English | png | logo_en_horizontal_blue_png | logo_en_horizontal_blue.png | |
English | svg | logo_en_horizontal_blue_svg | logo_en_horizontal_blue.svg | |
English | png | logo_en_horizontal_white_png | logo_en_horizontal_white.png | |
English | svg | logo_en_horizontal_white_svg | logo_en_horizontal_white.svg | |
French | png | logo_fr_horizontal_blue_png | logo_fr_horizontal_blue.png | |
French | svg | logo_fr_horizontal_blue_svg | logo_fr_horizontal_blue.svg | |
French | png | logo_fr_horizontal_white_png | logo_fr_horizontal_white.png | |
French | svg | logo_fr_horizontal_white_svg | logo_fr_horizontal_white.svg | |
Spanish | png | logo_es_horizontal_blue_png | logo_es_horizontal_blue.png | |
Spanish | svg | logo_es_horizontal_blue_svg | logo_es_horizontal_blue.svg | |
Spanish | png | logo_es_horizontal_white_png | logo_es_horizontal_white.png | |
Spanish | svg | logo_es_horizontal_white_svg | logo_es_horizontal_white.svg | |
Arabic | png | logo_ar_horizontal_blue_png | logo_ar_horizontal_blue.png | |
Arabic | svg | logo_ar_horizontal_blue_svg | logo_ar_horizontal_blue.svg | |
Arabic | png | logo_ar_horizontal_white_png | logo_ar_horizontal_white.png | |
Arabic | svg | logo_ar_horizontal_white_svg | logo_ar_horizontal_white.svg | |
Chinese | png | logo_zh_horizontal_blue_png | logo_zh_horizontal_blue.png | |
Chinese | svg | logo_zh_horizontal_blue_svg | logo_zh_horizontal_blue.svg | |
Chinese | png | logo_zh_horizontal_white_png | logo_zh_horizontal_white.png | |
Chinese | svg | logo_zh_horizontal_white_svg | logo_zh_horizontal_white.svg | |
Dutch | png | logo_nl_horizontal_blue_png | logo_nl_horizontal_blue.png | |
Dutch | svg | logo_nl_horizontal_blue_svg | logo_nl_horizontal_blue.svg | |
Dutch | png | logo_nl_horizontal_white_png | logo_nl_horizontal_white.png | |
Dutch | svg | logo_nl_horizontal_white_svg | logo_nl_horizontal_white.svg | |
German | png | logo_de_horizontal_blue_png | logo_de_horizontal_blue.png | |
German | svg | logo_de_horizontal_blue_svg | logo_de_horizontal_blue.svg | |
German | png | logo_de_horizontal_white_png | logo_de_horizontal_white.png | |
German | svg | logo_de_horizontal_white_svg | logo_de_horizontal_white.svg | |
Italian | png | logo_it_horizontal_blue_png | logo_it_horizontal_blue.png | |
Italian | svg | logo_it_horizontal_blue_svg | logo_it_horizontal_blue.svg | |
Italian | png | logo_it_horizontal_white_png | logo_it_horizontal_white.png | |
Italian | svg | logo_it_horizontal_white_svg | logo_it_horizontal_white.svg | |
Japanese | png | logo_ja_horizontal_blue_png | logo_ja_horizontal_blue.png | |
Japanese | svg | logo_ja_horizontal_blue_svg | logo_ja_horizontal_blue.svg | |
Japanese | png | logo_ja_horizontal_white_png | logo_ja_horizontal_white.png | |
Japanese | svg | logo_ja_horizontal_white_svg | logo_ja_horizontal_white.svg | |
Portuguese | png | logo_pt_horizontal_blue_png | logo_pt_horizontal_blue.png | |
Portuguese | svg | logo_pt_horizontal_blue_svg | logo_pt_horizontal_blue.svg | |
Portuguese | png | logo_pt_horizontal_white_png | logo_pt_horizontal_white.png | |
Portuguese | svg | logo_pt_horizontal_white_svg | logo_pt_horizontal_white.svg | |
Russian | png | logo_ru_horizontal_blue_png | logo_ru_horizontal_blue.png | |
Russian | svg | logo_ru_horizontal_blue_svg | logo_ru_horizontal_blue.svg | |
Russian | png | logo_ru_horizontal_white_png | logo_ru_horizontal_white.png | |
Russian | svg | logo_ru_horizontal_white_svg | logo_ru_horizontal_white.svg | |
Turkish | png | logo_tr_horizontal_blue_png | logo_tr_horizontal_blue.png | |
Turkish | svg | logo_tr_horizontal_blue_svg | logo_tr_horizontal_blue.svg | |
Turkish | png | logo_tr_horizontal_white_png | logo_tr_horizontal_white.png | |
Turkish | svg | logo_tr_horizontal_white_svg | logo_tr_horizontal_white.svg | |
Vietnamese | png | logo_vi_horizontal_blue_png | logo_vi_horizontal_blue.png | |
Vietnamese | svg | logo_vi_horizontal_blue_svg | logo_vi_horizontal_blue.svg | |
Vietnamese | png | logo_vi_horizontal_white_png | logo_vi_horizontal_white.png | |
Vietnamese | svg | logo_vi_horizontal_white_svg | logo_vi_horizontal_white.svg |
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.
Image | Description | Dimensions | Filetype |
---|---|---|---|
favicon.ico | 32x32 | .ico | |
mstile-270x270x.png | 270x270 | .png | |
apple-touch-icon.png | 180x180 | .png | |
android-chrome-192x192.png | 192x192 | .png | |
android-chrome-512x512.png | 512x512 | .png | |
safari-pinned-tab.svg | - | .svg |
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.