Skip to content
This repository has been archived by the owner on Feb 9, 2022. It is now read-only.
/ frontend-future Public archive

An investigation into the client-side architecture of theguardian.com.

Notifications You must be signed in to change notification settings

guardian/frontend-future

Repository files navigation

This repo is no longer under development. Work has moved to https://github.com/guardian/guui.

guui

Build Status Coverage Status Known Vulnerabilities dependencies Status devDependencies Status

An investigation into the future architecture of theguardian.com.

#dotcom-future

Compilation

needs to be formalised still

Howtos

Use an SVG

Import the SVG as normal.

import MySVG from './my-svg.svg';

It will be loaded using frontend/ui/__tools__/svg-loader.js, which runs it through SVGO then returns it as a JSX object.

You can use the JSXified SVG as a normal JSX import:

<!-- my-svg.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="60"><path ... /></svg>
import MySVG from './my-svg.svg';

export default () => <div><MySVG /></div>;

// <div><svg width="320" height="60"><path ... /></svg></div>

Styling the SVG

It will also respond to an object on a block-styles prop:

<MySVG block-styles={{ red: { fill: "red" } }} />;

If a node in the original SVG has a data-block attribute, the loader will look for a key in the styles object that matches the value of data-block, and apply the styles inline:

<!-- my-svg.svg -->
<svg><path data-block="red" /></svg>
import MySVG from './my-svg.svg';

const styles = {
	red: { color: 'red' }
}

export default () => <MySVG block-styles={styles} />

// <svg><path data-block="red" style="color: red" /></svg>

You can use Sass in a similar way to non-SVG components:

<!-- my-svg.svg -->
<svg><path data-block="red" /></svg>
// styles.js.scss
red {
    fill: 'red'
}
import MySVG from './my-svg.svg';
import styles from './styles.js.scss';

export default () => <MySVG block-styles={styles} />

// <svg><path data-block="red" style="fill: red" /></svg>

About

An investigation into the client-side architecture of theguardian.com.

Topics

Resources

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •