Skip to content
Public Information Symbols

@public-information-symbols/assets

Installation

Section titled “Installation”
Terminal window
npm install @public-information-symbols/assets

Directory layout

Section titled “Directory layout”

Assets are organised by category and symbol code. Each symbol folder contains SVG files at several sizes.

assets/
  accessibility/
    ac-001/
      ISO_7001_PI_AC_001_240.svg
      ISO_7001_PI_AC_001_512.svg
      ISO_7001_PI_AC_001_768.svg
      ISO_7001_PI_AC_001_1024.svg
      ISO_7001_PI_AC_001_2048.svg
  public-facilities/
    pf-001/
      ISO_7001_PI_PF_001_240.svg
      …
  transportation/
    …

Available sizes

Section titled “Available sizes”
Size (px)File suffix
240_240.svg
512_512.svg
768_768.svg
1024_1024.svg
2048_2048.svg

Importing by path

Section titled “Importing by path”

You can import individual SVG files directly when your bundler supports asset imports.

import symbol240 from '@public-information-symbols/assets/accessibility/ac-001/ISO_7001_PI_AC_001_240.svg';
import symbol1024 from '@public-information-symbols/assets/accessibility/ac-001/ISO_7001_PI_AC_001_1024.svg';

Resolving assets via the core API

Section titled “Resolving assets via the core API”

Use getSymbol() from @public-information-symbols/core to retrieve the full asset map for a symbol without hard-coding paths.

import { getSymbol } from '@public-information-symbols/core';


const symbol = getSymbol('ac-001-full-accessibility-or-toilets-accessible');


if (symbol) {
  console.log(symbol.assets);
  // {
  //   240:  'accessibility/ac-001/ISO_7001_PI_AC_001_240.svg',
  //   512:  'accessibility/ac-001/ISO_7001_PI_AC_001_512.svg',
  //   768:  'accessibility/ac-001/ISO_7001_PI_AC_001_768.svg',
  //   1024: 'accessibility/ac-001/ISO_7001_PI_AC_001_1024.svg',
  //   2048: 'accessibility/ac-001/ISO_7001_PI_AC_001_2048.svg',
  // }
}