{"id":17402335,"url":"https://github.com/malash/mp-svg-loader","last_synced_at":"2025-03-27T22:29:12.729Z","repository":{"id":57303487,"uuid":"142540724","full_name":"malash/mp-svg-loader","owner":"malash","description":"Webpack loader processing SVG in WeChat Mini Program.","archived":false,"fork":false,"pushed_at":"2018-07-30T06:08:03.000Z","size":388,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-04T16:43:45.653Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/malash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-27T07:05:45.000Z","updated_at":"2018-07-30T06:01:16.000Z","dependencies_parsed_at":"2022-09-19T12:23:51.234Z","dependency_job_id":null,"html_url":"https://github.com/malash/mp-svg-loader","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malash%2Fmp-svg-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malash%2Fmp-svg-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malash%2Fmp-svg-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malash%2Fmp-svg-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/malash","download_url":"https://codeload.github.com/malash/mp-svg-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245934123,"owners_count":20696380,"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":[],"created_at":"2024-10-16T17:26:19.741Z","updated_at":"2025-03-27T22:29:12.687Z","avatar_url":"https://github.com/malash.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mp-svg-loader\n\nA Webpack loader which processing SVG image by URI search params.\n\n```javascript\n// will add fill=\"red\" to svg element\nimport mySvg from './my.svg?fill=red';\n```\n\n# Why\n\nIn [WeChat Mini Program](https://mp.weixin.qq.com/cgi-bin/wx) development there are much lack of SVG image support. For example:\n\n* Don't support use [inline SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg).\n\n* Don't support changing fill / stroke color by CSS.\n\n* Don't support SVG without `xmlns` within `\u003cimage\u003e`'s `src` attribute. ( This is not only a Mini Program issue but also other browsers. )\n\nThis Webpack loader is designed for solving there problems if you are developing WeChat Mini Program with Webpack, e.g. [mina-webpack](https://github.com/tinajs/mina-webpack) or [wxapp-webpack-plugin](https://github.com/Cap32/wxapp-webpack-plugin) , or any Webpack project.\n\n# Setup\n\nInstall package to your project:\n\n```bash\nnpm i mp-svg-loader --save-dev\n```\n\nAdd `mp-svg-loader` to your Webpack config file.\n\nIn most case you also use other loader like `file-loader`, `url-loader` or `svg-inline-loader`. Here is an example works with `file-loader`:\n\n```javascript\n{\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: 'assets/[name].[hash:6].[ext]',\n            },\n          },\n          {\n            loader: 'mp-svg-loader',\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nOther examples can be found in [fixtures](./fixtures).\n\n\u003e Please not that the order of Webpack loaders is important. See [Loader Features - Webpack](https://webpack.js.org/concepts/loaders/#loader-features)\n\n# Usage\n\nAdd URI search params when `import` your SVG images.\n\nWebpack loader use `loader-utils`' [parseQuery](https://github.com/webpack/loader-utils#parsequery) for parse URI search params which is different with the [WHATWG URL](https://url.spec.whatwg.org/).\n\n\nAll rules here:\n\n| key    | type    | description                                                     | example                                                                                                                |\n| ------ | ------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| fill   | String  | Add `fill` attribute for `svg` element                          | `my.svg?fill=red` \u003cbr /\u003e `my.svg/fill=#008489` \u003cbr /\u003e `my.svg?fill=rgb(127%2C%20127%2C%200)` \u003cbr /\u003e( became `fill=\"rgb(127, 127, 0)\"`) |\n| stroke | String  | Add `stroke` attribute for `svg` element                        | Same as `fill`                                                                                                         |\n| xmlns  | Boolean | Add / remove `xmlns` attribute\u003cbr /\u003e( for inline / standalone image ) | `my.svg?+xmlns` \u003cbr /\u003e `my.svg?-xmlns`                                                                                      |\n\n\u003e If the rule you want to use is not listed above please create a [issue](https://github.com/malash/mp-svg-loader/issues) / [pull-request](https://github.com/malash/mp-svg-loader/pulls).\n\n# License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalash%2Fmp-svg-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalash%2Fmp-svg-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalash%2Fmp-svg-loader/lists"}