{"_id":"@chaoyang805/svg-sprite-webpack-plugin","_rev":"1-43cd352223d0d29fd7774abb687744c2","name":"@chaoyang805/svg-sprite-webpack-plugin","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@chaoyang805/svg-sprite-webpack-plugin","version":"0.1.1","main":"lib/cjs.js","author":{"name":"chaoyang805","email":"zhangchaoyang805@gmail.com"},"repository":{"type":"git","url":"https://github.com/chaoyang805/svg-sprite-webpack-plugin.git"},"keywords":["webpack","plugin","loader","icon","svg","sprite"],"license":"MIT","scripts":{"clean":"rimraf lib","build":"babel -x .ts src --out-dir lib --copy-files","lint":"eslint 'src/**/*.{js,ts}'"},"types":"types/index.d.ts","peerDependencies":{"webpack":"^4.44.0"},"dependencies":{"core-js":"^3.6.5","loader-utils":"^2.0.0","schema-utils":"^3.0.0","svgo":"^1.3.2"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/plugin-transform-typescript":"^7.12.1","@babel/preset-env":"^7.12.10","@babel/preset-typescript":"^7.12.1","@typescript-eslint/eslint-plugin":"^4.13.0","@typescript-eslint/parser":"^4.13.0","eslint":"^7.18.0","eslint-config-prettier":"^7.1.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-promise":"^4.2.1","prettier":"^2.2.1","rimraf":"^3.0.2","typescript":"^4.0.5"},"description":"A webpack plugin and loader for combining individual svg icons into a single svg sprite file, just like css image sprite.","licenseText":"MIT License\n\nCopyright (c) 2021 chaoyang805\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@chaoyang805/svg-sprite-webpack-plugin@0.1.1","dist":{"shasum":"0614b269df4d6fac28dcd72ecffbbd315a460ea6","integrity":"sha512-w0cP2/kvbDQSmfyw6yYKzW3Kbgsxnu/n2QeUtG3VQrwHkTMsnvNF98oaS2CpSB9RRoxAqarbuIdGe6rBhLfKvQ==","tarball":"https://registry.npmjs.org/@chaoyang805/svg-sprite-webpack-plugin/-/svg-sprite-webpack-plugin-0.1.1.tgz","fileCount":11,"unpackedSize":17342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBS9NCRA9TVsSAnZWagAA+AQP/AjdrZ3pzjSWi56udABs\n55jbduytshiETDnSTqEmRsM4jttPHowCmMCG+AmaCfTl1ZyKW8t+O6EtVyav\nc9SQwJ8pe7PSQ71upqOv6dnUXATmuuMqK578whUBpZPoIfDvPkRJdnzw6H9C\nizmfuSZzFy1+/sS9bgvceClBxFWrDXtSMmOdn5RN+lYYZMMJBMRKi0twwHS4\n4uxcCFqUknVNn5FMEqz4pIO1v7/78LcA3EDND4/KI+bqhHSMmYfJB9OyB0wF\naddZA+l202d75RsX4aAOImV/XrJeVRe5AuRdB8RgNXiqybS6urqUWlHCRmnN\nRgrT0mr2WWCEQ6B6vE4OTKjuUi8lJUJNiy9FUIZ9KtfQQYc8ONvgnXDQ04Vj\nhRuYuBf9CypNQLKWhUtTtVos86cWx63N/Wu9sa3FEom0vuySGQynCDrqDFMw\n4c7f8DsmI4JU02Y8gnBM3/aqEqBkMRPYv97UudU3X6tN3cAT14v4h5++iCpy\nFApxbi6CZABYQ8r/HyufyB6CI9w4lrQ7nsn/m71cHtw3Bx/lvO4G7wKncxGw\nzQYOLf+OliVYRuwh/g8il07tImyuh83rVMs0Kken/tDM3hGygd95gZpVu5E8\nB1LhCSw/WOU6lVplI88TAy4Km9OdopMDCcsJsY4bmL6gYHxhAvPDsZ53+WY+\nvwhq\r\n=Vip/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC16lD6UxmLjqJeAy8sajyWJkPC20p22K4eViIwmNJTigIgKuXlZCPO53KWwbi1M6tTN07mlE1ewLdwooc9ODdTpMw="}]},"_npmUser":{"name":"chaoyang805","email":"zhangchaoyang805@gmail.com"},"directories":{},"maintainers":[{"name":"chaoyang805","email":"zhangchaoyang805@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-sprite-webpack-plugin_0.1.1_1610952524798_0.8495035485957103"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-18T06:48:44.761Z","0.1.1":"2021-01-18T06:48:44.957Z","modified":"2022-04-04T22:31:24.453Z"},"maintainers":[{"name":"chaoyang805","email":"zhangchaoyang805@gmail.com"}],"description":"A webpack plugin and loader for combining individual svg icons into a single svg sprite file, just like css image sprite.","keywords":["webpack","plugin","loader","icon","svg","sprite"],"repository":{"type":"git","url":"https://github.com/chaoyang805/svg-sprite-webpack-plugin.git"},"author":{"name":"chaoyang805","email":"zhangchaoyang805@gmail.com"},"license":"MIT","readme":"# svg-sprite-webpack-plugin\n\nA webpack plugin and loader for combining individual svg icons into a single svg sprite file, just like css image sprite.\n\n## Installation\n\n`npm install --save-dev @chaoyang805/svg-sprite-webpack-plugin`\n\n## Fundamental\n\nThis tool loads your svg icons into a single svg file containing several `` nodes. Then you can refrence this svg icons via attribute `xlink:href=\"/img/icons.svg#icon-avatar\"` in `` node of the `` tag. For example, assume you have these icons:\n\n```xml\n\n\n\n\n\n```\n\n```xml\n\n\n\n\n\n\n\n```\n\nafter use this plugin and loader in you webpack project, these svg icons will be combined to a new svg file like below:\n\n```xml\n\n \n \n \n \n \n \n \n\n```\n\nyou can use these icons in html\n\n```html\n\n \n\n```\n\nYou need first import it in you js code, of course.\n\n```javascript\nimport iconAvatar from '@/assets/icon-avatar.svg' // iconAvatar = 'img/icons.svg#icon-avatar-2ce6a7dd'\n```\n\n## Usage\n\n### config webpack\n\n```javascript\n// webpack.config.js\nconst SvgSpritePlugin = require('@chaoyang805/svg-sprite-webpack-plugin');\n\nmodule.exports = {\n ...\n module: {\n rules: [\n ...\n // add svg-sprite-loader here before any other svg loaders\n {\n test: /\\.svg$/,\n use: SvgSpritePlugin.loader,\n },\n ...\n ],\n },\n plugins: [\n new SvgSpritePlugin({\n // filename represents the output svg file name. it only supports static name for now\n filename: 'img/icons.svg',\n }),\n ...\n ]\n ...\n}\n```\n\nIf you are using vue-cli，create a vue.config.js file and add code:\n\n```javascript\n// vue.config.js\nconst path = require('path')\nconst SvgSpritePlugin = require('@chaoyang805/svg-sprite-webpack-plugin');\nmodule.exports = {\n ...,\n chainWebpack(config) {\n config.plugin('svg-sprite').use(SvgSpritePlugin, [{ filename: 'img/icons.svg' }])\n config.module.rule('svg')\n .test(/\\.svg$/i)\n .use('svg-sprite')\n .before('file-loader')\n .loader(SvgSpritePlugin.loader)\n .end()\n },\n ...\n}\n```\n\n### Use in Vue component\n\n```vue\n\n\n\n```\n\n### Use in plain javascript\n\nfirst import icon in you javascript code\n\n```javascript\nimport iconAvatar from '@/assets/icon-avatar.svg' // iconAvatar = 'img/icons.svg#icon-avatar-2ce6a7dd'\n\n// do not forget svg tag is created by createElementNS method.\nconst svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\nconst use = document.createElementNS('http://www.w3.org/2000/svg', 'use');\nuse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconAvatar);\n\nsvgIcon.appendChild(use);\ndocument.body.appendChild(svgIcon);\n```\n","readmeFilename":"README.md"}