inline markups to HTML, such as SVG, MathML.
npm install markup-inline-loaderThis is a webpack loader. It can inline SVG or MathML file to HTML, so that you can apply css to embedded svg.
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.
``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.
`html`
`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;
}
``
Thank you!