1.0.0 • Published 11 months ago

@ilo-org/brand-assets v1.0.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
11 months ago

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

ImageLanguageFiletypeExported asFilename
Englishpnglogo_en_horizontal_blue_pnglogo_en_horizontal_blue.png
Englishsvglogo_en_horizontal_blue_svglogo_en_horizontal_blue.svg
Englishpnglogo_en_horizontal_white_pnglogo_en_horizontal_white.png
Englishsvglogo_en_horizontal_white_svglogo_en_horizontal_white.svg
Frenchpnglogo_fr_horizontal_blue_pnglogo_fr_horizontal_blue.png
Frenchsvglogo_fr_horizontal_blue_svglogo_fr_horizontal_blue.svg
Frenchpnglogo_fr_horizontal_white_pnglogo_fr_horizontal_white.png
Frenchsvglogo_fr_horizontal_white_svglogo_fr_horizontal_white.svg
Spanishpnglogo_es_horizontal_blue_pnglogo_es_horizontal_blue.png
Spanishsvglogo_es_horizontal_blue_svglogo_es_horizontal_blue.svg
Spanishpnglogo_es_horizontal_white_pnglogo_es_horizontal_white.png
Spanishsvglogo_es_horizontal_white_svglogo_es_horizontal_white.svg
Arabicpnglogo_ar_horizontal_blue_pnglogo_ar_horizontal_blue.png
Arabicsvglogo_ar_horizontal_blue_svglogo_ar_horizontal_blue.svg
Arabicpnglogo_ar_horizontal_white_pnglogo_ar_horizontal_white.png
Arabicsvglogo_ar_horizontal_white_svglogo_ar_horizontal_white.svg
Chinesepnglogo_zh_horizontal_blue_pnglogo_zh_horizontal_blue.png
Chinesesvglogo_zh_horizontal_blue_svglogo_zh_horizontal_blue.svg
Chinesepnglogo_zh_horizontal_white_pnglogo_zh_horizontal_white.png
Chinesesvglogo_zh_horizontal_white_svglogo_zh_horizontal_white.svg
Dutchpnglogo_nl_horizontal_blue_pnglogo_nl_horizontal_blue.png
Dutchsvglogo_nl_horizontal_blue_svglogo_nl_horizontal_blue.svg
Dutchpnglogo_nl_horizontal_white_pnglogo_nl_horizontal_white.png
Dutchsvglogo_nl_horizontal_white_svglogo_nl_horizontal_white.svg
Germanpnglogo_de_horizontal_blue_pnglogo_de_horizontal_blue.png
Germansvglogo_de_horizontal_blue_svglogo_de_horizontal_blue.svg
Germanpnglogo_de_horizontal_white_pnglogo_de_horizontal_white.png
Germansvglogo_de_horizontal_white_svglogo_de_horizontal_white.svg
Italianpnglogo_it_horizontal_blue_pnglogo_it_horizontal_blue.png
Italiansvglogo_it_horizontal_blue_svglogo_it_horizontal_blue.svg
Italianpnglogo_it_horizontal_white_pnglogo_it_horizontal_white.png
Italiansvglogo_it_horizontal_white_svglogo_it_horizontal_white.svg
Japanesepnglogo_ja_horizontal_blue_pnglogo_ja_horizontal_blue.png
Japanesesvglogo_ja_horizontal_blue_svglogo_ja_horizontal_blue.svg
Japanesepnglogo_ja_horizontal_white_pnglogo_ja_horizontal_white.png
Japanesesvglogo_ja_horizontal_white_svglogo_ja_horizontal_white.svg
Portuguesepnglogo_pt_horizontal_blue_pnglogo_pt_horizontal_blue.png
Portuguesesvglogo_pt_horizontal_blue_svglogo_pt_horizontal_blue.svg
Portuguesepnglogo_pt_horizontal_white_pnglogo_pt_horizontal_white.png
Portuguesesvglogo_pt_horizontal_white_svglogo_pt_horizontal_white.svg
Russianpnglogo_ru_horizontal_blue_pnglogo_ru_horizontal_blue.png
Russiansvglogo_ru_horizontal_blue_svglogo_ru_horizontal_blue.svg
Russianpnglogo_ru_horizontal_white_pnglogo_ru_horizontal_white.png
Russiansvglogo_ru_horizontal_white_svglogo_ru_horizontal_white.svg
Turkishpnglogo_tr_horizontal_blue_pnglogo_tr_horizontal_blue.png
Turkishsvglogo_tr_horizontal_blue_svglogo_tr_horizontal_blue.svg
Turkishpnglogo_tr_horizontal_white_pnglogo_tr_horizontal_white.png
Turkishsvglogo_tr_horizontal_white_svglogo_tr_horizontal_white.svg
Vietnamesepnglogo_vi_horizontal_blue_pnglogo_vi_horizontal_blue.png
Vietnamesesvglogo_vi_horizontal_blue_svglogo_vi_horizontal_blue.svg
Vietnamesepnglogo_vi_horizontal_white_pnglogo_vi_horizontal_white.png
Vietnamesesvglogo_vi_horizontal_white_svglogo_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.

ImageDescriptionDimensionsFiletype
favicon.ico32x32.ico
mstile-270x270x.png270x270.png
apple-touch-icon.png180x180.png
android-chrome-192x192.png192x192.png
android-chrome-512x512.png512x512.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.

1.0.0

11 months ago

0.5.3

1 year ago

0.5.2

1 year ago

0.5.1

1 year ago

0.5.0

1 year ago

0.4.0

1 year ago

0.3.1

1 year ago

0.3.0

1 year ago

0.2.0

2 years ago

0.1.0

2 years ago

0.0.2

2 years ago

0.0.1

3 years ago