{"_id":"@0x-jerry/unplugin-svg-component","name":"@0x-jerry/unplugin-svg-component","dist-tags":{"latest":"0.5.1"},"versions":{"0.5.1":{"name":"@0x-jerry/unplugin-svg-component","type":"module","version":"0.5.1","packageManager":"pnpm@7.1.1","description":"generate a vue/react component through svg files, supporting svg file HMR and typescript intelligence prompt.","license":"MIT","homepage":"https://github.com/jevon617/unplugin-svg-component#readme","repository":{"type":"git","url":"git+https://github.com/jevon617/unplugin-svg-component.git"},"bugs":{"url":"https://github.com/jevon617/unplugin-svg-component/issues"},"keywords":["svg","svg-sprite","unplugin","vite","webpack","rollup","transform"],"exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","require":"./dist/vite.cjs","import":"./dist/vite.js"},"./webpack":{"types":"./dist/webpack.d.ts","require":"./dist/webpack.cjs","import":"./dist/webpack.js"},"./rollup":{"types":"./dist/rollup.d.ts","require":"./dist/rollup.cjs","import":"./dist/rollup.js"},"./esbuild":{"types":"./dist/esbuild.d.ts","require":"./dist/esbuild.cjs","import":"./dist/esbuild.js"},"./nuxt":{"types":"./dist/nuxt.d.ts","require":"./dist/nuxt.cjs","import":"./dist/nuxt.js"},"./types":{"types":"./dist/types.d.ts","require":"./dist/types.cjs","import":"./dist/types.js"},"./*":"./*"},"main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","typesVersions":{"*":{"*":["./dist/*","./*"]}},"peerDependencies":{"@vue/compiler-sfc":"^3.2.40","vue-template-compiler":"^2.6.12","vue-template-es2015-compiler":"^1.9.0"},"peerDependenciesMeta":{"@vue/compiler-sfc":{"optional":true},"vue-template-compiler":{"optional":true},"vue-template-es2015-compiler":{"optional":true}},"dependencies":{"cors":"^2.8.5","etag":"^1.8.1","fast-glob":"^3.2.12","local-pkg":"^0.4.2","svg-baker":"^1.7.0","svgo":"^2.8.0","unplugin":"^0.9.6"},"devDependencies":{"@antfu/eslint-config":"^0.27.0","@types/cors":"^2.8.12","@types/debug":"^4.1.7","@types/etag":"^1.8.1","@types/node":"^18.8.0","@types/svgo":"^2.6.4","bumpp":"^8.2.1","debug":"^4.3.4","eslint":"^8.24.0","esno":"^0.16.3","tsup":"^6.2.3","typescript":"^4.8.4","vitest":"^0.23.4"},"scripts":{"build":"tsup","dev":"tsup --watch src","build:fix":"esno scripts/postbuild.ts","lint":"eslint .","play:vite":"pnpm --filter vite-demo run dev ","release":"bumpp && npm publish","start":"esno src/index.ts","test":"vitest"},"_id":"@0x-jerry/unplugin-svg-component@0.5.1","_integrity":"sha512-bO6VyEbzFMl72qXfAyN5Q1yBXhIXGzn/2gqVfjoYtc5jQpqGUiedQAGV8SNpGzgIksjffikPxMpisAtIhcbL/g==","_resolved":"/private/var/folders/py/2nqsbfq15n53mqblr30qzgw00000gn/T/34168dfa5922c04253f7b3bf0aed9d11/0x-jerry-unplugin-svg-component-0.5.1.tgz","_from":"file:0x-jerry-unplugin-svg-component-0.5.1.tgz","_nodeVersion":"18.12.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-bO6VyEbzFMl72qXfAyN5Q1yBXhIXGzn/2gqVfjoYtc5jQpqGUiedQAGV8SNpGzgIksjffikPxMpisAtIhcbL/g==","shasum":"521cfa2d7d9fd05b76254d9a58acffff0c0af1a8","tarball":"https://registry.npmjs.org/@0x-jerry/unplugin-svg-component/-/unplugin-svg-component-0.5.1.tgz","fileCount":21,"unpackedSize":120189,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA7RRa/MNt0LbKi1xVhZOe2qbBcitxEkXmOyruoXqtWgIgWzBq6ytVaLf5lpMKxCAxYSjRjeq5xG49SBRezLING1I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkE8uXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVkg/9G7mxywins7NdiVPAY3/3ycCUGvNV2VX9YB3Z5pobtRQgdlGJ\r\n7S/GtVBlQZ7oz0mxLn9d9dqENmfIaK10aCGuKEII7/nrY8xXG2VXulT4tKaw\r\nqDureVtsSdS127j4I47PZOcJPIiPNfHL2rCRCRd9eMCc6KP/htjBJiMOmALJ\r\n1L3dD7Mo9PR3jlttNuWHvK9NCi3jhlMfITjqEf07/t6v3sXP5+Asj8rxjwUf\r\n0cKnaCwEFuGBVQG5hkoLpdY4b+sXhIem2exXeAfEXQb/xIb1UzfOksw+ThcH\r\nLp20W6iG80LIm7HMxqjJ6aJpkdPsUs+X7MLVbJhbjJrAdILtBVHVqnq3L8F2\r\ndgvgsDQD/65XoGT5ogfP9dJpSp5dfQIOS9Yh99zzi4X/yS1SwYKh+57SSoyc\r\nwP2EVdLnTbvprHVsU+7/LLFsvy/aW0P1qV/4pZhedHNPRYTxc2szTnJiT2Ci\r\nrXzImV5+59Ux67DITM0eY+cmY2OgGo28GzVwwuJQCkekQ6/+lB9ucYSDLigP\r\n9yhMVHm+COsL7MLq1+tAYNn7kMv4ruc+CjELZbi9wsO0ZoVZ3q8KOfY8xd3p\r\nPaXwVbLVAbQOCD8Tc7JctsLSFRUaPwhC457a/tifuLnGEyxRinCjU4KBVI/o\r\nlYO3W55mYLrAcimhV+uR49fHqYFHhuqZKSg=\r\n=2ALU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cwxyz","email":"x.jerry.wang@gmail.com"},"directories":{},"maintainers":[{"name":"cwxyz","email":"x.jerry.wang@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/unplugin-svg-component_0.5.1_1679018902899_0.14583074630440662"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-17T02:08:22.826Z","0.5.1":"2023-03-17T02:08:23.091Z","modified":"2023-03-17T02:08:23.275Z"},"maintainers":[{"name":"cwxyz","email":"x.jerry.wang@gmail.com"}],"description":"generate a vue/react component through svg files, supporting svg file HMR and typescript intelligence prompt.","homepage":"https://github.com/jevon617/unplugin-svg-component#readme","keywords":["svg","svg-sprite","unplugin","vite","webpack","rollup","transform"],"repository":{"type":"git","url":"git+https://github.com/jevon617/unplugin-svg-component.git"},"bugs":{"url":"https://github.com/jevon617/unplugin-svg-component/issues"},"license":"MIT","readme":"# unplugin-svg-component\n\n**English** | [中文](./README.zh_CN.md)\n\n[![NPM Version][npm-image]][npm-url]\n[![Downloads Stats][npm-downloads]][npm-url]\n\n> unplugin-svg-component inspired by [vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons), it will generate a Vue/React component through SVG files,  use the SVG icon through the component.\n\n## IDE Intelligent\n\n### Vue\n![image](./images/intellisense.jpg)\n\n### React\n![image](./images/intellisense-react.jpg)\n\n\n## Features\n\n* **intelligent**: When using components, the name of the SVG file will be prompted with Typescript\n* **HMR**: HMR for svg file\n* **Vue & React**: Support Vue&React and automatically detect project types.\n* **Tree-shaking**: Only bundle the icons you really use since **v0.5.0**.\n\n\n## Installation \n\n```shell\nyarn add unplugin-svg-component -D\n# or\nnpm i unplugin-svg-component -D\n# or\npnpm install unplugin-svg-component -D\n```\n\n## Usage\n\n<details>\n<summary>Vite config</summary><br>\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport UnpluginSvgComponent from 'unplugin-svg-component/vite'\nexport default defineConfig({\n  plugins: [\n    UnpluginSvgComponent({ /* options */ }),\n  ],\n})\n```\n<br></details>\n\n\n<details>\n<summary>Vue-cli config</summary><br>\n\n```js\n// vue.config.js\nconst { defineConfig } = require('@vue/cli-service')\nconst UnpluginSvgComponent = require('unplugin-svg-component/webpack').default\n\nmodule.exports = defineConfig({\n  configureWebpack: {\n    plugins: [\n      UnpluginSvgComponent({ /* options */ })\n    ]\n  }\n})\n```\n<br></details>\n\n<details>\n<summary>Webpack config</summary><br>\n\n```js\n// webpack.config.js\nconst UnpluginSvgComponent = require('unplugin-svg-component/webpack').default\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    UnpluginSvgComponent({ /* options */ }),\n  ],\n}\n```\n<br></details>\n\n<details>\n<summary>Rollup config</summary><br>\n\n```js\n// rollup.config.js\nimport UnpluginSvgComponent from 'unplugin-svg-component/rollup'\n\nexport default {\n  plugins: [\n    UnpluginSvgComponent({ /* options */ }),\n  ],\n}\n```\n<br></details>\n\n<details>\n<summary>Esbuild config</summary><br>\n\n```js\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport UnpluginSvgComponent from 'unplugin-svg-component/esbuild'\n\nbuild({\n  /* ... */\n  plugins: [\n    UnpluginSvgComponent({\n      /* options */\n    }),\n  ],\n})\n```\n<br></details>\n\n### Vue\n```ts\n// main.ts\nimport SvgIcon from '~virtual/svg-component'\napp.component(SvgIcon.name, SvgIcon)\n```\n\n### React\n```tsx\n// App.tsx\nimport SvgIcon from '~virtual/svg-component'\n\nfunction App() {\n  return (\n    <div className=\"logo\">\n      <SvgIcon name='icon-react'></SvgIcon>\n    </div>\n  )\n}\n```\n\n## Plugin Configuration\n\n| Parameter             | Type                       | Default                                        | Description                                         |\n| -----------           | ----------------------     | ---------------------                          | ------------                                        |\n| iconDir               | `string`                   | -                                              | the icon folder of the Sprite image                 |\n| projectType           | `vue \\| react \\| auto`     | auto                                           | the project type, detect automatically              |\n| dts                   | `boolean`                  | -                                              | whether generate d.ts file                          |\n| dtsDir                | `string`                   | -                                              | d.ts location                                       |\n| prefix                | `string`                   | -                                              | symbolId prefix                                     |\n| componentName         | `string`                   | SvgIcon                                        | the name of component                               |\n| componentStyle        | `string`                   | width: 1em; height: 1em; fill:currentColor;    | the style of component                              |\n| preserveColor         |`RegExp`                    | -                                              | usually, the plugin will set SVG's fill and stroke with 'currentColor', this option will perform regular matching on each SVG path, the successfully matched SVG will not do the replacement, but retain the original color.  |\n| symbolIdFormatter     | `(svgName:string, prefix: string)=>string` | [look this way](./src/core/utils.ts/#L33)               | the symbolId's formatter            |\n| optimizeOptions       | `SvgoOptions` | -          | svgo optimize [Options](https://github.com/svg/svgo) |\n| svgSpriteDomId        | `string`                   | __svg_sprite__dom__                            | Customize the ID of the svgDom                      |\n| vueVersion            | `2 \\| 3 \\| auto`           | auto                                           | Vue version                                         |\n| scanGlob            | `string[]`           | [look this way](./src/core/utils.ts/#L41)                        |  the glob pattern used in tree-shaking                                          |\n\n\n## Typescript support\n```json\n// tsconfig.json\n{\n  \"include\": [\"svg-component.d.ts\", \"svg-component-global.d.ts\"]\n}\n```\n\n## Best Practices\n\nYou can refer to [examples](./examples) as required. Note that the configuration in examples is the default configuration.\n\n## Contributing\n\n1. Fork it (<https://github.com/Jevon617/unplugin-svg-component/fork>)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n## License\nMIT License © 2022-PRESENT [Jevon617](https://github.com/Jevon617)\n\n\n<!-- Markdown link & img dfn's -->\n[npm-image]: https://img.shields.io/npm/v/unplugin-svg-component.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/unplugin-svg-component\n[npm-downloads]: https://img.shields.io/npm/dm/unplugin-svg-component.svg?style=flat-square\n[travis-image]: https://img.shields.io/travis/dbader/node-datadog-metrics/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/dbader/node-datadog-metrics\n[wiki]: https://github.com/yourname/yourproject/wiki\n","readmeFilename":"README.md"}