https://github.com/asnowwolf/markup-inline-loader
a webpack loader to embed svg/MathML to html
https://github.com/asnowwolf/markup-inline-loader
loader svg webpack webpack-loader
Last synced: about 1 year ago
JSON representation
a webpack loader to embed svg/MathML to html
- Host: GitHub
- URL: https://github.com/asnowwolf/markup-inline-loader
- Owner: asnowwolf
- Created: 2016-07-09T00:16:53.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-08-08T00:23:00.000Z (almost 3 years ago)
- Last Synced: 2025-04-22T13:56:23.741Z (about 1 year ago)
- Topics: loader, svg, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 1.76 MB
- Stars: 25
- Watchers: 3
- Forks: 13
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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
### v0.2
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
### Configuration
```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.
### Original HTML
```html
```
### Translated HTML
```svg
```
So we can apply css styles to `svg > path {}`.
or
```svg
.st0{fill:#DD0031;}
.st1{fill:#C3002F;}
.text{fill:#FFFFFF;}
```
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!