{"_id":"@ecomfe/svg-mixed-loader","_rev":"7-94c0cb03f25e9d7398a9da4005e33287","name":"@ecomfe/svg-mixed-loader","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ecomfe/svg-mixed-loader","version":"1.0.0","keywords":[],"author":"","license":"ISC","_id":"@ecomfe/svg-mixed-loader@1.0.0","maintainers":[{"name":"leeight","email":"leeight@gmail.com"},{"name":"otakustay","email":"otakustay@gmail.com"},{"name":"ecomfe-admin","email":"ecomfe@gmail.com"},{"name":"ecomfe-core","email":"ecomfe@gmail.com"},{"name":"errorrik","email":"errorrik@gmail.com"},{"name":"gdjinbo","email":"wfsr@foxmail.com"},{"name":"justineo","email":"justice360@gmail.com"},{"name":"luyuan","email":"luyuan.china@gmail.com"},{"name":"ksky521","email":"ksky521@gmail.com"},{"name":"lang","email":"shenyi.914@gmail.com"},{"name":"sunxiaoyu011","email":"1641731459@qq.com"}],"homepage":"https://github.com/ecomfe/svg-mixed-loader#readme","bugs":{"url":"https://github.com/ecomfe/svg-mixed-loader/issues"},"dist":{"shasum":"5af5baf8019c2b32e31d1c82ced31250e255334e","tarball":"https://registry.npmjs.org/@ecomfe/svg-mixed-loader/-/svg-mixed-loader-1.0.0.tgz","fileCount":17,"integrity":"sha512-PBreZeqwu8Un7AbLYMnQQVS6ndfdN4UNigOqxf04pISD3P/K9HUHiFgZPK7JaQ41z4D/IV+DzSuV03V/Q3D7Ag==","signatures":[{"sig":"MEQCIGz5NYVKDE/U2uiKrFS9+7tWPjmXnMSLO0HufB9B+UVTAiAjT8q5mmE+OcSsZtwJRas4Ak26h28mvPKFCD3zSJ7olA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22611,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2aF+CRA9TVsSAnZWagAAyAIP+gO9K+XvZDCfXGUsyD3K\nvMLZrUxgO7OeuJKvg8vi5neQfLWiqN4WpIt5887PHn1jl8TQbbEu4hWQiYF4\nvswk9MBIgKFI5fEIhwZAOYzpYoVBhOrJTJe/MKT1aflv188nKkdwtuMgbQ1D\nsJg/Xu4QRx4R2QU2SJ29DjCvEX/okg7ukvoDzY0EGOr/6XjYlSzNdd+HtVIZ\nFs8mG8XzZL4rQs4N7NKOqIYEdS9WZMkGjI4GGGlVTknOhl7SoGz0e3OkaTIj\nJolXEnPQ8MDNPLV3dCsXwHeaImkGa050fQtrLzBxaPFbmhkyjVqRQBiDMIFx\nswKTNAU4ItRod+oOKDedfcv1Ug9jyJeQlAa7Ccj1ECLgbrbQzfaCRQhSrrpm\nPtfULxoWfYfCrwhPlV59OIJxxZYr3fffCdhQ3SZCIN/+JV1aMSzEFJ5N2/qB\nun4luLge8RhPHBWLyduzLQ6QDr2ZTZpWeoWWBhOwouEq3qsWbXdMS0Kd4eGo\nf36Ex5OJmfb7h+yGcxozL+6t/DSBeFu7LLF61POxE6N3sDLzL2EspKsa0Lya\nJKKKSwCB4QLSYXjGGtp62oKdIpeJUohFVCppmRaqLC9oTc89R8P0FFGWOnAn\noWpEE7G7j9AsuNKMY++qL1GbVfamtNwbOOsWzvMbzsq6UnLzJumt7PoIViOk\nbMxK\r\n=Y86f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","husky":{"hooks":{"pre-commit":"npm run ci"}},"gitHead":"7c56535ff72f8a0b99f462112fe6d80afd60f3c7","scripts":{"ci":"npm run lint && npm run test","lint":"eslint src","test":"jest","release":"standard-version","prepublishOnly":"npm run ci"},"_npmUser":{"name":"otakustay","email":"otakustay@gmail.com"},"repository":{"url":"git+https://github.com/ecomfe/svg-mixed-loader.git","type":"git"},"_npmVersion":"7.0.14","description":"Webpack loader resolving svg into url string and multiple component formats.","directories":{},"_nodeVersion":"15.3.0","dependencies":{"svg-to-jsx":"^1.0.2","@babel/core":"^7.11.6","change-case":"^4.1.1","loader-utils":"^2.0.0","schema-utils":"^2.7.1","@babel/preset-react":"^7.10.4"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.4.2","husky":"^4.3.0","eslint":"^7.8.1","webpack":"^4.44.1","url-loader":"^4.1.0","file-loader":"^6.1.0","babel-eslint":"^10.1.0","standard-version":"^9.0.0","eslint-plugin-jest":"^24.0.0","eslint-plugin-babel":"^5.3.1","@ecomfe/eslint-config":"^5.0.1"},"peerDependencies":{"url-loader":"^4.1.0","file-loader":"^6.1.0"},"_npmOperationalInternal":{"tmp":"tmp/svg-mixed-loader_1.0.0_1608098173597_0.2959299498383676","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@ecomfe/svg-mixed-loader","version":"1.0.1","keywords":[],"author":"","license":"ISC","_id":"@ecomfe/svg-mixed-loader@1.0.1","maintainers":[{"name":"leeight","email":"leeight@gmail.com"},{"name":"otakustay","email":"otakustay@gmail.com"},{"name":"ecomfe-admin","email":"ecomfe@gmail.com"},{"name":"ecomfe-core","email":"ecomfe@gmail.com"},{"name":"errorrik","email":"errorrik@gmail.com"},{"name":"gdjinbo","email":"wfsr@foxmail.com"},{"name":"justineo","email":"justice360@gmail.com"},{"name":"luyuan","email":"luyuan.china@gmail.com"},{"name":"ksky521","email":"ksky521@gmail.com"},{"name":"lang","email":"shenyi.914@gmail.com"},{"name":"sunxiaoyu011","email":"1641731459@qq.com"}],"homepage":"https://github.com/ecomfe/svg-mixed-loader#readme","bugs":{"url":"https://github.com/ecomfe/svg-mixed-loader/issues"},"dist":{"shasum":"df57b054d2065f77e1b0394dc5c4271bf309e4b8","tarball":"https://registry.npmjs.org/@ecomfe/svg-mixed-loader/-/svg-mixed-loader-1.0.1.tgz","fileCount":17,"integrity":"sha512-peTWPkITbvoM5g2/99b3Xtxk8vv0R7UNxwJq72KHvK5Fo7jzoxfpnzQPyfYil0OM67xO1llcJRBJUkVvMf2EGg==","signatures":[{"sig":"MEUCIAzgYHGlWqFjPVoUlWH8sRhwfB+EkJ+IE+S7ghtKfuFpAiEAuYQn7oVF8eZjMQT+5Q0sFOrUbulMW/iiyWTlX8YOb+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf21bSCRA9TVsSAnZWagAARBQP/0XE145UAn8/dBiR4b6E\n1JVnFGreiotZdcSNPgkipxfY0Xc/d3eFFP8bO+HZx5hPX0ON+hm1DJ0FZIAh\nxUB+vS5uD6LET1XHRj/tOPDwMi1n1T8ceIsq7GmJUsvPVV7HTQG5hsv/oBxL\ntdMkdHKVQl6TVTnJYZiiwmRGAgz0ARYCknXvY1MtMvXCr1a08GiChgro8naK\npn5H+XTzxhzIaarlcL1afturemG9DAfAQN9xA18GZKm5Ks1zNxtq91sm7xxT\nJUCi69tgIYAUDASLEnOOEGmF0+k71U49bjEboTA180hEeiPBmY/u+WtEsno0\nocxFZ3tTCYC9tiVvl24djCYN3Q0fKhKNFkdlaeFf0HYyFg1ve9JNd1v+H5lD\nAn53NMWzkx70hO21OgUJBD1it4uYF+qrvbfCeqZsAzWUT9ANsnZv9Jy4HTBx\nf8CUHFTOBJforqOQ3fznsO4S/CheB28Xi03JMIyqcw6xGqxRXizxbuzbXjyH\nn5AqKw2Q/QHaQ3k1mKk+pT/rVw0H1Ne7xlny/w4TcLFXTgvu8IELbehpdkCn\nUWm4n7xgC05RFlQF2Z3/eTvjD9Qs1Aq0OtbyP1BA56WGezWAhElBhR3x2brm\nJv6Bs444ROAyQ1tquPNg2P/JV6WEYft9ln8hUI4HUNALLSNU/5+QELXlFc6w\nEzEk\r\n=g0W2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","husky":{"hooks":{"pre-commit":"npm run ci"}},"gitHead":"b9418b085765b108d1efc2beaeba1a101a9a7b9d","scripts":{"ci":"npm run lint && npm run test","lint":"eslint src","test":"jest","release":"standard-version","prepublishOnly":"npm run ci"},"_npmUser":{"name":"otakustay","email":"otakustay@gmail.com"},"repository":{"url":"git+https://github.com/ecomfe/svg-mixed-loader.git","type":"git"},"_npmVersion":"7.0.14","description":"Webpack loader resolving svg into url string and multiple component formats.","directories":{},"_nodeVersion":"15.3.0","dependencies":{"svg-to-jsx":"^1.0.2","@babel/core":"^7.12.10","change-case":"^4.1.2","loader-utils":"^2.0.0","schema-utils":"^3.0.0","@babel/preset-react":"^7.12.10"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","husky":"^4.3.6","eslint":"^7.15.0","webpack":"^5.10.3","url-loader":"4.1.1","file-loader":"6.2.0","babel-eslint":"^10.1.0","standard-version":"^9.0.0","eslint-plugin-jest":"^24.1.3","eslint-plugin-babel":"^5.3.1","@ecomfe/eslint-config":"^6.2.1"},"peerDependencies":{"url-loader":"^4.1.1","file-loader":"^6.2.0"},"_npmOperationalInternal":{"tmp":"tmp/svg-mixed-loader_1.0.1_1608210129916_0.5311905052212393","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-12-16T05:56:13.550Z","modified":"2026-04-08T11:20:25.138Z","1.0.0":"2020-12-16T05:56:13.903Z","1.0.1":"2020-12-17T13:02:10.113Z"},"bugs":{"url":"https://github.com/ecomfe/svg-mixed-loader/issues"},"license":"ISC","homepage":"https://github.com/ecomfe/svg-mixed-loader#readme","keywords":[],"repository":{"url":"git+https://github.com/ecomfe/svg-mixed-loader.git","type":"git"},"description":"Webpack loader resolving svg into url string and multiple component formats.","maintainers":[{"email":"leeight@gmail.com","name":"leeight"},{"email":"otakustay@gmail.com","name":"otakustay"},{"email":"ecomfe@gmail.com","name":"ecomfe-admin"},{"email":"ecomfe@gmail.com","name":"ecomfe-core"},{"email":"errorrik@gmail.com","name":"errorrik"},{"email":"wfsr@foxmail.com","name":"gdjinbo"},{"email":"justice360@gmail.com","name":"justineo"},{"email":"luyuan.china@gmail.com","name":"luyuan"},{"email":"ksky521@gmail.com","name":"ksky521"},{"email":"shenyi.914@gmail.com","name":"lang"},{"email":"steinitz@qq.com","name":"jinzhan"},{"email":"kaivean@outlook.com","name":"kaivean"},{"email":"3372353368@qq.com","name":"hixuanxuan"}],"readme":"# svg-mixed-loader\n\nWebpack loader resolving svg into url string and multiple component formats.\n\n## Background\n\nIn community svg files are commonly used to introduce icons to web apps, in this case developers are tend to import and svg as a component:\n\n```jsx\nimport IconPlus from './icon-plus.svg';\n\nconst CreateButton = () => (\n    <Button>\n        <IconPlus />\n        Create New\n    </Button>\n);\n```\n\nAlso, svg, when itself is a common image format, may used as an image:\n\n```jsx\nimport logoURL from './logo.svg';\n\nconst Header = () => (\n    <div style={{display: 'flex'}}>\n        <img width={180} height={30} src={logoURL} />\n        <div style={{flex: 1}}>\n            {/* navigation}*/}\n        </div>\n    </div>\n);\n```\n\nAs these use cases are conflicting to each other, this loader sovles this by export multiple possible formats from an svg file.\n\n## Install\n\n`@ecomfe/svg-mixed-loader` requires url-loader and file-loader as peer dependencies.\n\n```shell\nnpm install -D @ecomfe/svg-mixed-loader url-loader file-loader\n```\n\n## Usage\n\n```js\n// webpack.config.js\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                test: /\\.svg$/,\n                use: [\n                    {\n                        loader: '@ecomfe/svg-mixed-loader',\n                        options: {\n                            // options\n                        },\n                    },\n                    // You may add other preprocess loaders like svgo-loader or img-loader here\n                ],\n            },\n        ],\n    },\n};\n```\n\n## Output\n\nThis loader currently create a default export of image URL, and a named export `ReactComponent` as a react component.\n\n```js\nimport React from 'react';\n\nexport default 'data:image/svg;...';\n\nexport const ReactComponent = props => React.createElement(/* ... */);\nReactComponent.displayName = 'AutoResolvedComponentName';\n```\n\n## Options\n\n```js\n{\n    // This option will be forwarded to url-loader, can set to false to disable generation of default export\n    url: {\n        limit: 1024,\n    },\n    // Can be:\n    //\n    // 1. true: generate react component as ReactComponent named export with default option\n    // 2. false: don't generate react component\n    // 3. object: customize react code generation, see below\n    //\n    // Default to false.\n    react: {\n        // Can be multiple formats:\n        //\n        // 1. true: auto resolve a component name from resource path\n        // 2. false: remove display name from output\n        // 3. string: a static display name\n        // 4. function: customize display by (resourcePath) => string\n        //\n        // Default to true.\n        displayName: true,\n    }\n}\n```\n\nBy default `@ecomfe/svg-mixed-loader` generates only default export, behaves exactly the same as `url-loader`,\nif `ReactComponent` named export is wanted, pass `{react: true}` as options is a quick solution.\n","readmeFilename":"README.md"}