Skip to content

DEVELOP.md

Latest commit

 

History

History
104 lines (65 loc) · 2.58 KB

DEVELOP.md

File metadata and controls

104 lines (65 loc) · 2.58 KB

Develop

Create new component

Follow the guidelines.

Create new theme

Follow the guidelines.

Documentation

We are using react-styleguidist. Documentation and examples are available here.

Build the doc:

pnpm doc

Run the doc on locahost:6060:

pnpm start

Tests

Run the tests in watch mode:

pnpm test --watch

Coverage

Run coverage:

pnpm coverage

Then open the file coverage/lcov-report/index.html in your browser.

Publish new version

We use standard-version to manage versioning and changelog generation.

Run publish:

pnpm publish:public

or for a beta version on beta channel:

pnpm publish:beta

How to use SVG

Before adding an SVG file in this folder please clean it using svgo or svgomg.

After optimization, verify you can use it Openlayers using this code sandbox.

By default the svg loader will load the svg file as a react component if you want to load svg file as a base64 data URI use the extension .url.svg :

// Import as a React component:
import NorthArrow from 'northArrow.svg';
// Use: <NorthArrow />

// Import as a base64 data URI (or with an url the file is too big):
import northArrow from 'northArrow.url.svg';
// northArrow = "data:image/svg+xml;base64,PHN2ZyB4...."

You could also use others loaders (ex: svg-inline-loader , svg-url-loader ...) . To use these loaders just adapt the extension of the svg file and add the loader config in styleguide.config.js, then you will be able to use it like this :

// Import as an inline svg:
import northArrow from 'northArrow.svginline.svg';
// northArrow = "<svg xmlns='http://www.w3.org/2000/svg' height='192' ...> ... </svg>"

// Import as an encoded inline svg data URI (or with an url the file is too big):
import northArrow from 'northArrow.svgurl.svg';
// northArrow = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='192' ...%3E ... %3C/svg%3E"

How to use SVG with a dynamic size

In case you want your SVG fits perfectly his parent div you need to remove width and height attributes of <svg> and replace it by a viewBox property, like this:

Replace

`<svg width="192" height="192">`

by

`<svg viewBox="0 0 192 192">`