This example shows different ways to include an SVG in the application using Webpack.

In the HTML

Default: .

With ?viewbox&height=1em, 2rem, style on circle: .

With ?viewbox&height=1em, 4rem, style on circle: .

Font Awesome ?viewbox&height=2em, style fill: #65b0ff: .

With ?viewbox: .

With ?viewbox&width=3em: .

With ?viewbox&height=3em: .

As URL with ?url:

Note: in font, and in inline mode, CSS rules can be used to style the SVG.

In OpenLayers symbols

Using src (left to right):

• 'data:image/svg+xml;base64,' + btoa(require('./inline.svg'))
• 'data:image/svg+xml;base64,' + btoa(require('./inline.svg?viewbox&width=30px'))
• require('./url.svg?url')