What's this?

This is a webpack loader. It can inline SVG or MathML file to HTML, so that you can apply css to embedded svg.

Breaking changes

$3

In previous versions, the strict option defaults to '', which means that it will handle all svg pictures. But it easily leads to unexpected results, and now we set it to [markup-inline]: svg[markup-inline], img[markup-inline], math[markup-inline], svg[data-markup-inline], img[data-markup-inline], math[data-markup-inline].

All elements that do not match these selectors are ignored.

Example

$3

``js
const rules = [
{
test: /\.html$/,
use: 'markup-inline-loader',
},
];
`

It will inline the svg file and return the inlined html (instead of js format)

Or with html-loader:

`js
const rules = [
{
test: /\.html$/,
use: [
'html-loader',
'markup-inline-loader',
],
},
]
`

Or with html-loader and a SVGO configuration. By default markup-inline-loader only enables the removeTitle plugin. You can overwrite this default behavior with following example:

`js
const rules = [
{
test: /\.html$/,
use: [
'html-loader',
{
loader: 'markup-inline-loader',
options: {
svgo: {
plugins: [
{
removeTitle: true,
},
{
removeUselessStrokeAndFill: false,
},
{
removeUnknownsAndDefaults: false,
},
],
},
},
},
],
},
];
`

By default, it's apply to:

`html

`

and

`html

`

but not apply to:

`html

`

We call the [markup-inline] and [data-markup-inline] as strict.

We can also customize the strict. e.g.

`
const rules = [
{
test: /\.html$/,
use: [
'html-loader',
'markup-inline-loader?strict=[markup-inline]',
],
];
`

Note the strict value is a css selector, but currently we support attribute selector only.

$3

`html

`

$3

`svg



`

So we can apply css styles to svg > path {}.

or

`svg


viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">







`

So we can apply css animations to svg > .text, for example:

`css
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-180deg);
}
}

svg > .text {
animation: 3s infinite rotate;
transform-origin: center;
}
``

Contributors

Thank you!