Skip to content

Backpack SVGs for design system icons

License

Notifications You must be signed in to change notification settings

Skyscanner/bpk-svgs

Folders and files

NameName
Last commit message
Last commit date
Mar 26, 2025
Mar 21, 2025
Mar 21, 2025
Feb 6, 2025
Oct 2, 2023
Oct 2, 2023
Oct 26, 2023
Oct 2, 2023
Oct 3, 2023
Jan 29, 2024
Oct 2, 2023
Oct 2, 2023
Oct 2, 2023
Oct 26, 2023
Oct 2, 2023
Apr 25, 2024
Oct 2, 2023
Feb 6, 2025
Mar 27, 2025
Mar 27, 2025

Repository files navigation

bpk-svgs

Build Status

Backpack's collection of SVGs.

Installation

npm install @skyscanner/bpk-svgs --save-dev

Usage

This package exposes Backpack SVGs in various formats:

  • React components

    dist/js/icons/lg/*
    dist/js/icons/sm/*
    dist/js/spinners/*
    
  • An icon font

    dist/font/BpkIcon.ttf
    

Implementation

.svg assets are stored within ./src and various different formats are generated based upon this source. The generation tasks are defined within gulpfile.mjs.

JS

For web consumption, .svg files are transformed into individual react components. svgr is used to power the transformation, optimisation and form of the resulting react component. The current svgr setup will create typescript components, in order to provide consumers with .js assets to consume within their react codebase, typescript is used to transpile from typescript to javascript. .d.ts files are nested alongside the original source to provide typescript types to consumers.

Contributing

To contribute please see contributing.md.