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

An investigation into the future architecture of theguardian.com.

needs to be formalised still

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>

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>