https://github.com/skyscanner/bpk-svgs
Backpack SVGs for design system icons
https://github.com/skyscanner/bpk-svgs
Last synced: about 1 month ago
JSON representation
Backpack SVGs for design system icons
- Host: GitHub
- URL: https://github.com/skyscanner/bpk-svgs
- Owner: Skyscanner
- License: apache-2.0
- Created: 2023-09-28T10:48:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-29T02:59:59.000Z (7 months ago)
- Last Synced: 2025-05-05T21:16:01.065Z (7 months ago)
- Language: JavaScript
- Size: 2.42 MB
- Stars: 0
- Watchers: 121
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# bpk-svgs
[](https://github.com/Skyscanner/bpk-svgs/actions)
> Backpack's collection of SVGs.
## Installation
```sh
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](https://react-svgr.com/) 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](CONTRIBUTING.md).