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>