psammead-assets - 
This package provides a collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts.
Exports
/amp-boilerplate - A helper, allowing projects using Psammead to easily pull in a versioned copy of AMP's required boilerplate scripts.
/svgs - SVG icons commonly required by projects using Psammead.
Installation
npm install @bbc/psammead-assets --save
Usage
import { BBC_BLOCKS, news } from '@bbc/psammead-assets/svgs';
import { AMP_SCRIPT } from '@bbc/psammead-assets/amp-boilerplate';
Service SVGs
Service brand SVGs, like news, are objects that contains an svg group, viewbox, ratio and height;
This package currently has brand SVGs for the BBC News World Services as well as for BBC News, BBC Scotland.
| Property | Type | Required | Default | Example |
|---|---|---|---|---|
group | node | Yes | N/A | <g fillrule="evenodd"><path d="M84.32" /></g> |
viewbox | object | Yes | N/A | { height: 24, width: 167.95 } |
ratio | number | Yes | N/A | 6.9979 |
The width of your SVG can be calculated using your desired height multiplied by the ratio value provided above.
Usage
const WrappingContainer = () => (
<svg viewBox={`0 0 ${news.viewbox.width} ${news.viewbox.height}`}>{news.group}</svg>
);
Core Icons SVGs
Core icons is an object containing styled SVG icons from GEL Iconography Core. By default Core icons are sized to work well alongside text from the GEL BodyCopy typography group.
Usage
import { coreIcons } from '@bbc/psammead-assets/svgs';
<p>{coreIcons.info} Did you know, in Switzerland it's illegal to own just one guinea pig?</p>
Media Icons SVGs
Media icons is an object containing styled SVG icons for video, audio, photogallery and guidance. Media icons are sized to work well alongside specific text with typography group GEL Minion. They are used in psammead-media-indicator and psammead-media-player components.
Usage
import { mediaIcons } from '@bbc/psammead-assets/svgs';
<span>
{mediaIcons.audio}
{duration && datetime && (<time dateTime={datetime}>{duration}</time>)}
</span>
Navigation Icons SVGs
Navigation icons is an object containing styled SVG icons for hamburger and cross. They are used in psammead-navigation component.
Usage
import { navigationIcons } from '@bbc/psammead-assets/svgs';
<span>
{navigationIcons.cross}
</span>
Contributing
When adding a new export to this utility package the export tests also need to be updated. When removing an exisiting export from this utility package the export tests need to be updated and the package version requires a major change (EG: 1.2.1 -> 2.0.0) as this would be considered a breaking change due to functionality being removed.
Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.
Code of Conduct
We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.
License
Psammead is Apache 2.0 licensed.