{"id":27916935,"url":"https://github.com/asnowwolf/markup-inline-loader","last_synced_at":"2025-05-06T16:44:11.629Z","repository":{"id":9660107,"uuid":"62924348","full_name":"asnowwolf/markup-inline-loader","owner":"asnowwolf","description":"a webpack loader to embed svg/MathML to html","archived":false,"fork":false,"pushed_at":"2023-08-08T00:23:00.000Z","size":1843,"stargazers_count":25,"open_issues_count":21,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-22T13:56:23.741Z","etag":null,"topics":["loader","svg","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asnowwolf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-09T00:16:53.000Z","updated_at":"2023-05-15T12:22:49.000Z","dependencies_parsed_at":"2024-06-18T18:27:54.724Z","dependency_job_id":"b79a0f7b-8297-4c60-a251-88964c16874b","html_url":"https://github.com/asnowwolf/markup-inline-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asnowwolf%2Fmarkup-inline-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asnowwolf%2Fmarkup-inline-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asnowwolf%2Fmarkup-inline-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asnowwolf%2Fmarkup-inline-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asnowwolf","download_url":"https://codeload.github.com/asnowwolf/markup-inline-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252722828,"owners_count":21794137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader","svg","webpack","webpack-loader"],"created_at":"2025-05-06T16:44:10.896Z","updated_at":"2025-05-06T16:44:11.623Z","avatar_url":"https://github.com/asnowwolf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What's this?\n\nThis is a webpack loader. It can inline SVG or MathML file to HTML, so that you can apply css to embedded svg.\n\n## Breaking changes\n\n### v0.2\n\nIn 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]`. \n\nAll elements that do not match these selectors are ignored.\n\n## Example\n\n### Configuration\n\n```js\nconst rules = [\n  {\n    test: /\\.html$/,\n    use: 'markup-inline-loader',\n  },\n];\n```\n\nIt will inline the svg file and return the inlined html (instead of js format)\n\nOr with `html-loader`:\n\n```js\nconst rules = [\n  {\n    test: /\\.html$/,\n    use: [\n      'html-loader',\n      'markup-inline-loader',\n    ],\n  },\n]\n```\n\nOr 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:\n\n```js\nconst rules = [\n  {\n    test: /\\.html$/,\n    use: [\n      'html-loader',\n      {\n        loader: 'markup-inline-loader',\n        options: {\n          svgo: {\n            plugins: [\n              {\n                removeTitle: true,\n              },\n              {\n                removeUselessStrokeAndFill: false,\n              },\n              {\n                removeUnknownsAndDefaults: false,\n              },\n            ],\n          },\n        },\n      },\n    ],\n  },\n];\n```\n\nBy default, it's apply to:\n\n```html\n  \u003cimg markup-inline src=\"./_images/camera.svg\" /\u003e\n```\n\nand\n\n```html\n  \u003cimg data-markup-inline src=\"./_images/camera.svg\" /\u003e\n```\n\nbut not apply to:\n\n```html\n  \u003cimg src=\"./_images/camera.svg\" /\u003e\n```\n\nWe call the `[markup-inline]` and `[data-markup-inline]` as `strict`.\n\nWe can also customize the `strict`. e.g.\n\n```\nconst rules = [\n  {\n    test: /\\.html$/,\n    use: [\n      'html-loader',\n      'markup-inline-loader?strict=[markup-inline]',\n    ],\n];\n```\n\nNote the strict value is a css selector, but currently we support attribute selector only.\n\n### Original HTML\n\n```html\n\u003cimg class=\"icon\" markup-inline height=\"1em\" src=\"./_images/camera.svg\" /\u003e\n```\n\n### Translated HTML\n\n```svg\n\u003csvg class=\"icon\" markup-inline height=\"1em\" viewBox=\"0 0 1024 1404.416\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cpath d=\"M960 440.384h-256v-128c0-35.312-28.656-64-64-64h-256c-35.344 0-64 28.688-64 64v128h-128v-64h-128v64c-35.344 0-64 28.688-64 64v704c0 35.376 28.656 64 64 64h896c35.344 0 64-28.624 64-64v-704c0-35.312-28.656-64-64-64z m-512-64h128v64h-128v-64z m448 768h-768v-576h768v576z m-384-128c106.032 0 192-85.938 192-192s-85.968-192-192-192-192 85.938-192 192 85.968 192 192 192z m0-256c35.344 0 64 28.624 64 64s-28.656 64-64 64-64-28.624-64-64 28.656-64 64-64z\"/\u003e\n\u003c/svg\u003e\n```\n\nSo we can apply css styles to `svg \u003e path {}`.\n\nor\n\n```svg\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003c!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --\u003e\n\u003csvg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n   viewBox=\"0 0 250 250\" style=\"enable-background:new 0 0 250 250;\" xml:space=\"preserve\"\u003e\n\u003cstyle type=\"text/css\"\u003e\n  .st0{fill:#DD0031;}\n  .st1{fill:#C3002F;}\n  .text{fill:#FFFFFF;}\n\u003c/style\u003e\n\u003cg\u003e\n  \u003cpolygon class=\"st0\" points=\"125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 \t\"/\u003e\n  \u003cpolygon class=\"st1\" points=\"125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 \t\"/\u003e\n  \u003cpath class=\"text\" d=\"M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1\n    L125,52.1z M142,135.4H108l17-40.9L142,135.4z\"/\u003e\n\u003c/g\u003e\n\u003c/svg\u003e\n```\n\nSo we can apply css animations to `svg \u003e .text`, for example:\n\n```css\n@keyframes rotate {\n  from {\n    transform: rotateY(0deg);\n  }\n  to {\n    transform: rotateY(-180deg);\n  }\n}\n\nsvg \u003e .text {\n  animation: 3s infinite rotate;\n  transform-origin: center;\n}\n```\n\n## Contributors\n\n\u003chttps://github.com/indirectlylit\u003e\n\n\u003chttps://github.com/premkumar-gg\u003e\n\n\u003chttps://github.com/boschr\u003e\n\nThank you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasnowwolf%2Fmarkup-inline-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasnowwolf%2Fmarkup-inline-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasnowwolf%2Fmarkup-inline-loader/lists"}