chemical-pictogram

Chemical Pictogram Package

This package provides a collection of chemical hazard pictograms along with their metadata and SVG content. It allows you to easily retrieve and display chemical hazard information in your applications. The package includes various functions to get all pictograms, search for a specific pictogram by name, and filter pictograms based on hazard type.

Demo Website

Installation

To install the package, you can use either npm or yarn. Run one of the following commands in your project directory:

npm install chemical-pictogram
# or
yarn add chemical-pictogram

Usage

Importing the Package

To use the functionality of the package in your project, import the required functions like so:

 import { getPictograms, findPictogram, searchPictogramsByHazard } from  'chemical-pictogram';

1. Get All Pictograms

You can use the getPictograms() function to get an array of all the available pictograms along with their metadata. The returned data includes each pictogram's code, name, hazard type, usage, example (if available), and the associated SVG data as a string.

const pictograms = getPictograms();
console.log(pictograms);

Each object in the returned array will have the following properties:

• code: The unique identifier of the pictogram (e.g., GHS01).
• name: The name of the pictogram (e.g., Explosive).
• hazard_type: The type of hazard that the pictogram represents (e.g., Physical Hazard).
• usage: A description of how and where the pictogram should be used.
• example: Optional; an example showing how the pictogram is used.
• pictogram: The filename of the associated SVG pictogram.
• usage_exclusion: Optional; exclusions for when the pictogram should not be used.
• note: Optional; additional notes or clarifications.
• svgData: The SVG content as a string, which you can use directly in your app.

2. Find a Specific Pictogram by Name

If you're looking for a specific pictogram, you can use the findPictogram() function. You just need to provide the name of the pictogram you're searching for, and it will return the corresponding pictogram object.

const explosivePictogram = findPictogram("Explosive");
console.log(explosivePictogram);

This function will return the pictogram object for the specified name. If no pictogram is found, it will return undefined.

3. Search Pictograms by Hazard Type

To find all pictograms related to a specific hazard type, use the searchPictogramsByHazard() function. You can filter pictograms by their hazard type, such as Physical Hazard, Health Hazard, etc.

const physicalHazardPictograms = searchPictogramsByHazard("Physical");
console.log(physicalHazardPictograms);

This will return an array of pictograms that are categorized under the given hazard type. If no pictograms are found for the specified type, it will return an empty array.