{"_id":"@design-systems/svg-icon-builder","_rev":"518-33fc7b1c183de147b6870168a6ac70c2","name":"@design-systems/svg-icon-builder","dist-tags":{"canary":"5.0.0--canary.729.20738.0","latest":"4.15.4","next":"5.0.0-next.0"},"versions":{"2.11.1-canary.614.14146.0":{"name":"@design-systems/svg-icon-builder","version":"2.11.1-canary.614.14146.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.11.1-canary.614.14146.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fd48b6dc43a812bccc683b84ffa9f2cdc23222d1","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.11.1-canary.614.14146.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-L2i/hG6SCCX+x45tvSSXflGuSVbu8f3sPya0FP/WGp5SmzcwZRf7lQfqaxmH9pOsWSaoVOPt4jtrqJwHpqH0pQ==","shasum":"49a976d15227078897aefcfdef591362b6a784c3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.11.1-canary.614.14146.0.tgz","fileCount":24,"unpackedSize":74089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAKbZCRA9TVsSAnZWagAA6TkP/0Kc827hw+jPPn1oICNk\nGbqcaqhOjifFCDqdNymCvAt01YWiG3oPh7rUyin2DUB2QXzB6/WCa6UIZuYC\nvknvh8VshKd3Iq0UlN3oMJdR2sj4XSwI9Bo1wH2Ps4VKpuUAAK2eIzwH7rqz\nZx6cidImMenKE0MJZCoasX87cQ0utE8zyUqmuXoqEorSYH3MlmxpO09KdwGn\nIaI2xFV+DRMwOAvy81ZyNbqCX8mo61e6M0PCmuffh+royPGPT03OefXb08kx\njwJqBy+wWd5MET4x+eWPvL53ziOg7qo2F1hdCLqPEboOcM5RJXRHg+Qj0Qz9\n0jSMueBuJ9Gp4a9N4DPbdPEpdGh0ow9kFmpzmaQm45hxYhO/KKZpOP0989Ug\nHEFs55ErdBCnf100mLFGxdjNhruzp+sbEQkbbVwXc6CmYOagHKwCvEhTQyyO\n93QLPGXm+rWyNQ5qVCVcfipN1xhalcU87tDOP68BEPBn1WT6zZQnyFuNboU3\nYU9Ui3Fk6nMWCa2wccs/DB+Hw+H1YqIzadAHnV0tfoxnAee2DsIrWblHxwKr\nyyo5dngxmThBnwTpvyxkfscuRVH8epH7pYXA5IiQif3BvnsBOcXv/fSKyHdL\nCz5o1jcdUK3dtjA4UquaYh23R/sI+6Gou+vSVlyqLwdqfsAhLVIa6mIpdUT2\n/bDc\r\n=1/cg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKYB/FQRI4rSyS+36v5AmLylwLtwIxdcLsLgpI9/O5TAiEAmpc9+4F+eo/9dMASxBC32vknU49OExywVvJ6P7M8W4w="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.11.1-canary.614.14146.0_1610655448622_0.33068029157464673"},"_hasShrinkwrap":false},"2.11.1-canary.614.14152.0":{"name":"@design-systems/svg-icon-builder","version":"2.11.1-canary.614.14152.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.11.1-canary.614.14152.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9cd8180827bb554c715cb16a307257cb0a624d16","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.11.1-canary.614.14152.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-iVky+AnoB38FDbZptDzizMapESVWOZIX9W/+Vd+hZvhLRBVNE0KuvAYYUvkxEo0D5dK0ci6Jh1V/b7f+2STfaQ==","shasum":"5a8e5b6811bce2f56fcfe49ad8a7e946a8c78982","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.11.1-canary.614.14152.0.tgz","fileCount":24,"unpackedSize":74405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgALeKCRA9TVsSAnZWagAAjMIP/ipZmCFrktjA5I97nU7i\nM9HRxu3J5mIJsVRnSyYl2P1dpHE27es0LJWaLhUY+9SkjUmrqcUneMnMdf6Q\nXnMe9whb9KHfaP+Z9PBnSx4PhKx7AdFlrNU5Wk7BhZ6zLqo6i8aRIRQf4t9D\nS77bVH9HclLMST2nCEfFiV04/+npzkQpsODn60u2U+gWastUdIRIpewNxieC\nsCvGJRSz71npkl8++ADkE3najtZnV3ueXvpYQOhNjobZYu/hOTlIY/zhOpAo\n7mVGW2QNeecLvcB+fTxTFy1jJuEMD9NdWJh3TFRzShMeD4UQg0SAeLAsbTPz\nbH13Gnbmj0LWfXgm5KFMuehSBR7U7AbMzcrvKbZOPW1Vn19aksjUc6XxZoMr\n3/QiWegQ/MZc7mf8jrsafFRaDDp/nuGPM78xiR7x7/KhLNvE1gYcB7f4PPV8\nRTj8k62MJ8xvYbd2aDtiEbQ/o5WjC5cDF4fjDO49AfQgQr3094Yl+pXh9NV1\niPmKgB2LtvVTxsJnQLl7HMIwN0WBgKRYnuoaefEZXzkMikd7re23NXqPv+GN\n9cN7Ebn/FERl6BBR4iU6RugWNcGIOAg2BPrmtdWJihVOU0TYFnXdcREQbsTy\n1On5lgr01anumUQQ1nxT2EqWIX+StqQ5ahkJexUveD5Xiz0zVeRYYP2mSLXV\n8zqe\r\n=DSvw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdQAz+Y9E4FtdShtKSfemQiNmzvSxRggVfDkZzHk0EJAiEA6L5JMqt6UFYcU2rIbzXYX9qjm+Dshp71kFfUgfxC1PM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.11.1-canary.614.14152.0_1610659721711_0.941549850593143"},"_hasShrinkwrap":false},"2.12.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"^2.12.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a39ab8efe2e7cbcd47e46dbdb72779764f8ddd84","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-mTxdbfRBLB6hEnLtJ8mMAPtrU2f0PIcLO8PtKfsBK/wi4W3Wi9MfUYNp5dkGamZKgn/AzGe9SdxN3yedi0nTmA==","shasum":"6fb7b65a088ddd54f3211a454c9bd82d86351f8f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.0.tgz","fileCount":25,"unpackedSize":74816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAMquCRA9TVsSAnZWagAA6VwP/iXuX0D9kZ2G8ldhMJd1\nL0qa2OfGsHMab3T23F+jBSrc0lPiZCBAmL3wCbb++0W26a+qwkS+P4BzTIHN\nfOY9OzKMX4V7EKWJBFOjDvuYKVNMA4592hJIjJzxZNmoUgZCscAkq6DvOn4B\nSQbiuJ7xBNbSkli6JILPb7CtWCWM/cZSFwTGiYoAWKYvkDMhpSpxlxbcWBzR\niK1wSUBnO6tJJIl/T2eZkWnep+SzafWFmJbLCXqp7DC7EcFepvB5WQzrAG8g\nvQkhUqXm2w2nBM/Qg655UlR8M60s5HRnmnoudFyV8LD1ZG0erUkWUfcIISvn\n35CbtxGkwd6LtgW9OcnptfXq9/0OA61bJY+6Ye0wRNAvo4eqnlYiXB8K/lEo\nEHMEIWl/P9P5lVaZO5f+mcjg3nr3dGNOWBO/EFE6JKNWYyut50uy7E0BAMc+\nq1yc4jKBtYyK4bscywg6LMwxmUdB8/M9vQf0fJ/Rus1BtHpkFYhn7VCLWr9/\nqn0pIyUVpuEzRqp0OBQgvkzW9al2E6RpA2hJEBTIqK0iQ2I+MGFJuXJrqcn4\nekSFGDRoM/KIqD48ZsR2Z7/arDZQc++CGGwa77XJ6QtMiO+G0bdPm6FFkWac\nhftkZ/VvH+1z5TjhoigrWWEDGySO9gjwQOj0n3eo8H4vPkqaO3xOnbYeB/zf\n8Cbc\r\n=pqFL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCU0ObR1xpTqKcHaKUr1LwdfLfuPoyMBhAm7p43WOa2WgIgOPa9Qoj7DXPrhXkNbHU2OdodXeymoACPvlgURHjep4A="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.0_1610664622348_0.3705429814405736"},"_hasShrinkwrap":false},"2.12.1-canary.562.14178.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.562.14178.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.562.14178.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.6","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"115c8d0541de8d96614c8bd1553541c38878be4c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.562.14178.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-5QXJuXUGrdpcyQ4MiqQianSl81q14ntoaz6aBDVgzVJdqrDZxRNC9LQtHr3vzYabUcVgBCNPzeeQHlujfwtPYw==","shasum":"bb087789575916e237a5aa751e794443b6f75b5c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.562.14178.0.tgz","fileCount":24,"unpackedSize":74405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAMvSCRA9TVsSAnZWagAA6IgP/0LWW/SdkQSj8bXOb3Hy\n6reX4cXeSUljiP1udwIno+x1ajt8G3iRox4CNf+5wgHWg+XLYW4GcGD9zp12\n+4E3o2jhQdadMgphdvovWEqbLjv/pS8BQ3WcuIzyFBsfPaBw8/5NUQDTcEZL\nEs0z174KboKDaGzoOM7jn10W5BeojhwypDiFNjSOPgegE+iJIp7IVfsMXvRm\nsEkuG84nn3EHzJA1DEf+G+GGQyXpLifbOVaUXCzkMVGiNSipbr240IXUphRx\nAQDLQVP84h9Er++kmYxTHdh+HlAtPTGO8BYXNBkZPMRUNRhqgs1H8BxgWhCJ\n39jsBbpmM/ktem53SSoSVQfQ/+DOK3ynXy9sSTeH5Ua2giJul4KlGPo16kMD\nXEc6NvXlB/tMCtzOQY/XMoahE0BMQgfgXgv0VKMgpIgnNTXxyCDNqycpWZfc\nZ8bO5kaWZYHlROWTn1rFH/yAPQM+aTWBmvTcXnu+1/ds5kyZVnD1ucJte7e+\nECAyww3wdyhO7lcHxu9/VeFswX8O2h54tzI3MINiv170uIufPfCBqJEJt6nh\n+G5nJGVWKN5036CFzwuXqSisNOenf2vfpFl/GqfEcbodyJ8PUWymTdqCzYYn\nMy1JwltWZPiYevUivDPTbgYQggxbDerxphMT03vz8dc+SoihNiTAaGd0A0fV\nKA40\r\n=xEUw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGShCVt7uQlNaYyVItd1FQHY7HQS7am+190kdQsvQlGVAiEA6ap4WY3gmq9m2zKsPqfBMycZu2S5zDOW2Vlw14Xgzd8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.562.14178.0_1610664913572_0.7496123985309693"},"_hasShrinkwrap":false},"2.12.1-canary.474.14185.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.474.14185.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.474.14185.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"dad0a2b429e4aab43a0c58fee0e2347de8b8435e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.474.14185.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Ti7iKNVMZSt1N+vHEfpaAWNtQOnkVwHloZiu953AEf9YogOCiVtze3bpj7DCxdB/c8ZFyNuAkE5uaShF/LgMtg==","shasum":"ce8a9f50663523b5320d00529d70fd90dd0d99f4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.474.14185.0.tgz","fileCount":24,"unpackedSize":74405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAM18CRA9TVsSAnZWagAA2IsP/iDAh6J8e/IjwcRubzkI\nizLczPGPfnp6Swkceqjobm2jpW0S4wJWjRRhSm5TzJstwtjoU0jlFQZ3bJuX\ngDOq2N+JrzrAaqMaJj3Nsb+UetGoiEqVwqw/AkQpRneMS73SqsHgqF71cxIO\nICRdvJs5kPwYReWIgcV6zQHpwSomsZS29bhwIAHa4fCtcuasDPcdbG4iYdJZ\nhM6DEQkS39D4bNVYVqbB+xMA2YgHrZ6nPrCuoPsCQpWqRP8UdXyAsqZev0n6\nXkmG2Ln7lT9Zvj73Iq/U9Tk0EUnUUvVbFY2maEhhWuf4ytfkiEVDIusghnbD\nfxv5SsqFcACixeqgHINu+1jexW80TDjdSamtpLAbXLSJ5DQVmnnTc/Y4zEhh\nMfk66uxmuD2rH5rUlhHXA3D5yILgujkrrwNixn03o8lEdZ/dm9SULdiGH2NL\nKfKE6e55AhB6kJA6Rz2yGNDDAwlvGIpfbvyswbqlk3XFiMGNE8ocpTx7Hty6\nvKpmFjX263lPixEGHcD+5vjpwX4cRlYEJmonSxN99hhdOlCvlf5yKSbgtZzd\nT7Q0j3QAIwt5nA4/5cBx7qsmWVax8DBhrZzn2ciVLP5l6GNr44q4CXFjmL/G\nJ7ti0MLQSseyk2FwR1PxyXLX0z/hDG0DxpVFhMdW+9EEWUcd4ZM9n7Pxc6cV\nY9GW\r\n=a/0O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFt8Zjx6kkLeZRxuuzIOoxp7X/UcUelTZ+HwoIGZiVD6AiEA7W/E9nvDG3opySTcDxywoREewKBsH00oF8SukGzBbGs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.474.14185.0_1610665339707_0.6498307241849559"},"_hasShrinkwrap":false},"2.12.1-canary.484.14191.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14191.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.9.1","@auto-it/slack":"10.9.1","@design-systems/cli":"2.12.1-canary.484.14191.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b3ea2421f70522e99080f8f6a85dd58096b4db14","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14191.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-T00aSFvgIYIdnWyQ/qtIcl//uaJRYCuS7m68EeGEIFvTBlzCJUaXkDzQD+V1x6vFJVz9JTfiOaHyPWArgajLrA==","shasum":"c23ff4a80123486959b84ef1c3c6550a594f16c0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14191.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgANJ5CRA9TVsSAnZWagAAaMcP/jI9CmZeCadS4wXQv069\n5Ia1BhKNioC74cGBUY5xaWbQP0W5oPTQMj6HChXDoHz3P6JfpnCmRh7JdNnv\n33qBXtoMlJI75OXz/IFvOy9bqz452orGDOuLdjDzQdVejkbwxLjJenbsrqsZ\nVMyE8wJqwdIAIwuivnwnz7Y1UU1TGBMjiErSIcUM3JD5Z4MxA/6rGvxdex1K\n+cN5kXl5+5zaKkLELH7P6xtOs2J/XyhIJVwnAmSeT6N3KE0Rmb5vcD6P0cvr\nFszsd4HDHV3iyQN0cwkAlGaCgUt+LGcOQU3JBhNcdFPDy8rcuo9O/FMSz+ZY\nOHESRn2JI7kI2K1bw2uuQUh1QTKG6IvE1Yax4piXjBd9gElpQ42pXe7fC6Tw\nrJaCFBI75xyMURQi0qZ/rpeMEH/U3BVNDjKYvsusF4YkMDKOI/RYlazO86L9\nfKv9cgMKTe9WDodZ8WoYtbHe4W+YVZDaCtRJiP8S/oJDSD3J+rCAgdNHEILa\ndybYR/P60Z1ueom7w1hC1pftZ5w7Ia4u7yecVZl0IK1FJUw2zrdqWT3qxKcj\nhOvihuknfYnOXY1FonF4IHE6jOfUEzLX+cmkIhULUGLRZKRTUumMFEwQrH6m\nYo1mEzc3twU+kYdooqPNSt24BVnQxQk3h6r8C3OA4e2p9AViw3ei4KPFQgiv\nOSEG\r\n=Utgv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCrbNWeIK8u7sBxNuUv+XwU/Fc8HTjlch0tgxP2/tnWwIhAJ8kRQ2PgSrVb9SurpG+1o/uD3zEbSpSrrJF7RmICxLh"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14191.0_1610666616507_0.28061581572000605"},"_hasShrinkwrap":false},"2.12.1-canary.568.14288.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.568.14288.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.568.14288.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f0a65876b9f7ed13216fe160204f12ea20ea119c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.568.14288.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-7ZG5H7cO54cBX2W0XuuLTotG6u5NoxdtgQ2KO4RTxpCRuEpMocFUHuiRzCgYingUDTtT2PrIDgfDmoKQ9BPiCA==","shasum":"40e6352dfd1487fbfaf7d038db8948aea57f0ce9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.568.14288.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAPu9CRA9TVsSAnZWagAAS/QP/3fVL/4jLrrc+mu+d2s7\nzHAvXaFkN9m95MUvRvHV8XuibIn9x6ZN2tB8C7F+PjDG8ed6h7TKQ3DxCaFF\nq6VbMo6BN+CzMPpUD4l5yza1w0xgH1Za9qH2YzfOXKOhG3uHSfBsmHi4rQGT\nwxhD6+mWTyL7YDmmXfOdXgW76V8brpNB37iNrF2nuBgZ7WdhpGlulpMucwpW\n2x21ApxU/qYHppbqtxaqlo/IyH/RNc1k97F9CL0M3kj4IJFMMjs0Cgaj7hsD\nuSleYJzCuC1k4JbgCL5lY+u0zH/t5nvmwkyj1NCnLUaRnMwb/Ql1mrEIqbvg\nzRNzPjEjsKDqNi/m3tu5zZw8KbxdMVvOBkBJOBsQAraPn/hqeMlBsqruy3MN\n0mdFL3n0HaWQY0CG/JPsCFrCPOKJtJlVGGQWgSKl7PYNfs2InWAjfUIdkQer\ndqZtbfGpgXBJtRmKN7/oK2uaWJiQGxkgVGFMsRC6BZhaDAdLX3HKjP/PJzga\n6mbv/Pngix9wUWSLj6kNi/wLeN/5nfEMWdkJjBHOlO6XfR3ECqlgVYbbZvvQ\nmjLmul8y7Ozj+3MvnE4BHn0Alnvn1t/z7juonat03347ou6yBoB7AfbtXlrr\niH4+ot9zB12J0bKj3GGBW+PZtJdbSaovA39zIVcOjfhn1O1HRLWMSVPUwEMy\nHhT9\r\n=hE+B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAiQQVjCD+t26XgIYSG+11WrN9XgNj/ukvflSj7XvPDWAiEAsx3Uvye5qjfPksKEPNygPoQ1gt2fgQXW4dvFtuWov+Y="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.568.14288.0_1610677181216_0.2540443079124972"},"_hasShrinkwrap":false},"2.12.1-canary.565.14298.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.565.14298.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.565.14298.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cc9b99c044dd62c3bb06235288879b8c37003920","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.565.14298.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-YXMbQXP/0NjN9nw0m0faIUsjULJ4OO+OI/QavVKw40fZC0nQcMuo3TeplQ6G/jhja5mrC9sGuzEhM18oaEen0g==","shasum":"6228e4465256cc611cabffd306bdae18e41391c6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.565.14298.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAP2ACRA9TVsSAnZWagAA5moP/jijyM7UjN2DlmHW7F3Q\nGrTgxpbbBacZWMZIy/Dv4L1kQyxBsjJYBiHqIzX8CJLMt316PdxwqkLgGC/k\nHDG9M53qG42rTDHq3WZBwQDxmuPPVmdgTdweMLgqacuedjCvDYif8QAV17IF\n83sNENwhVJZnMIrlzdJ/yA20DY47MN54MEIOe1zzGjL60etAOsoHgDvdlrq+\n+/KQPNYa3tsXx6+gaqVlk+fgafj0QY8H551Gko9xm4j77POpK/D1OjBGqwjB\nRdheWhKnAp/Lt6sOsdO4TLSP22CrmJw5xtmLxs9mA8CRZWuCde8jjmaU6Fkm\nrByQPj1gfBzIP3EcIZXJJGj6EIKArjaZ5RDRyQuClUuvQlpc0ES3ptDsthQl\nv2io4U7H5qWT7hRa/ewSyqyvAZFh1NbNRerldmoPmbR/TNpuW/1WJzbj7WN7\nqht1TPOLfxqsAyL0vsHqIGdvz8A1z+g7eIcwYkdVbeLa4sPgUx57iWjFRIxs\nRP0n8vtb3L73UaUjxzSgdLGng1i6tatgWz/rbTppzbrtvq+bHi9UebVScw7n\n6UYtkIfoc4fvshdDj0YiLAsSduz8nFivEc+tqUHO9si7/K6yCr9ACUKDmzR5\nMS7a3pLoFfMd0RKKBoZqDwisnfCvanUsRg/lBWv6tOQNNKsBqe4jnnYR+ojQ\nQ7/L\r\n=HMTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4tTocyj+PUlC0LPuycfBMaqQTXqEFF191HTzGkOxk6AIhAKnEV3gswMyb9qRiyDLO/m1OZfmc3ElUt+HeN9UwngSB"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.565.14298.0_1610677631636_0.008266724797245661"},"_hasShrinkwrap":false},"2.12.1-canary.587.14303.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.587.14303.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.587.14303.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2247ae9ff609e77a71e652e45efc63e95305f6de","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.587.14303.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-meG2edPaqhWHrvyaIn0d1pQLGypgGVs1iIm3cxsS1gNWL/ozRkIwvCZIzrOzayqviSLNJwwenamSyQDuLl93rA==","shasum":"e4c040919e450360b5257a290446073675b106b0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.587.14303.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAP8WCRA9TVsSAnZWagAAS64P/1iZ8URXtsBkgOL4xKfT\nY1+v/F8YnTA65ATNbqzua+2a5vZq/ypZb2G0GDrODpHom172wESNjqaY4CFk\nX6TrT5jxqUqpQawrm61xPXcmrAf1CPpnmRUrkOYAGOsaPeh5kk4W9EesssCR\nvntRzNKZ5Mthk3Z0BAxUacT4lfKmVyHI8ko/X1biikum/3tKlBdl2SOiaLcY\nWD+mn33bxYtmtW3K/PggBfsjwWqf1RKSZiEMP+dqEzbU87H271s5l1xpkJAB\nEsobCVMLgNsMmMFIhveyvVXxZqGKBxO/qgcYIogvbqa19bHRpwrnxwikSyDa\nQtf1lkxwoMoiknK4s6ETlAqYpJLs8t2p+b2yqVURGBJGx3GlF31Fu4L2Zwn0\n5iFyEcxvz6m3MQAC9bYInvJOqEJPpB+L3Dai0EBo4uA8smf/FVK2ELikDamh\n3VvrliYsxZs1FRMzalD1f+GfjHD0GQV5j46WpGPWztUrZw5wtuB+PodEjKW0\nR7M/6goWE28vB4fHZ06EiZIEPsIAAxMja4wX279IKlw85i1/TNmcIBDKPggs\n7hwwWja767YIIgby2NaziHnGysTfwMF/ZgfrEQhwuRAEayyTpnS0j6NWMM0H\n1l6oIPmK3B6L3V6oJjDR4YtovnO9VT+DyvNNvSYiqfnChrxxsWXWOKj5fXJ+\ncTeB\r\n=Frha\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0G+goRoZALNdJ60CScRW9HOXr4o0+OU4fmLpr8nWmxAiEA1HELc0T5yQwOzBX630rPXGlIBLYUlf55Uza4y7/bfNI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.587.14303.0_1610678038335_0.30307217100485007"},"_hasShrinkwrap":false},"2.12.1-canary.475.14302.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.475.14302.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.475.14302.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6ba7c950c081976de9e8e75a6ada1986a6bbb456","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.475.14302.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-d/QkFE6CXdiUkpbLegTwp7pYt8bcPcwZbWWlyt3tl6RQu1bT7D1fC/5tE+bfML0S3rtp7XykR71r0v31242y1g==","shasum":"9a867a14612d0d0532afb4447a8a92edc15fecbf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.475.14302.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAP8pCRA9TVsSAnZWagAAv0sP/2z9LFCRUIZJU16+WN/D\nybOT0qfiOFjY9t1XKCtm7vMsfa+6+LtzXh+bJRHPJe+GYUuCz6Kzywq07hBw\nT1+WxzHuQe9/Hetd8ELIBXugLiBjjOoP+2bKFmq/JrhZDEEJLQwA4UpQfk6d\nsju2wo/LqTWno0huq3cYZOg0iDIg6QQqiJQ8vkybDn9kCW/KMO2fKi6rHdfF\nlCjCwjbjYf7VCy87tvisJItAB4kD8QrQvVJeoMCLoDIuGMUW549J+9U2zLvT\nqk41hNS63CsOdKM56pPwDmjmD0wh8cY6DHCV1Cj044QfUAIt6i251Ew/OZks\nb7qBZ/LgUJnawSaL77HASZ/W3GWM2ETvgk/JTGBB8bZWUlZBr357qYuQx1/Z\n7Xj09f+39/uIYm3sxeOz8dK+Bq4sSof3hiLV7GM3a0HMjhWn2SrdFAc5SKxO\nQ2fGg5lU+M8x550vX3jDSHz4FrZyPqR1Fcoi3LXdXa08aI1gAYkMVLsbjnY9\nYy1/Jte9UAVm3JddyFLK4tpBa9K/6Kullb5odIpiK1pbMLd0arJF/DgWxJHn\nXl/LPex1gjG7Jcl2U/f2xg4QssFSrImHAJTFBQw3M5oBr8tnV1fD6erAvaDZ\ne14d9kxnAUOxAZBEK2ZrGK+kLfFOBC7XUwnfPHOzIBeb9Gv/J2OlvpDjJ+Oq\nxy83\r\n=ua/J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqMm2aDf+ZmItu/GrY3RTK4C0bjU/P3j6n3KXuF09skAiEAwsXtx9rlT8SPfmthnvA6RcpBldHinQs46tK4fqs33MA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.475.14302.0_1610678056918_0.5146748464575419"},"_hasShrinkwrap":false},"2.12.1-canary.542.14305.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.542.14305.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.542.14305.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c4e60e5c2abbb0c49ec11cf6e88cdc82faebb4f9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.542.14305.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-2bMDqPHgCOraD8Jdek8y51Lgyh2se+yVtLRboZwu3yujBOFTRYnKkszCktxKD6vT1vaiVaYq20PIFQRfCp8kaQ==","shasum":"234c42ef2cd76878177149af94255acfbf625d9a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.542.14305.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAP92CRA9TVsSAnZWagAAHd4QAIgMwCScNb/r4jG1fEn9\nOmZlTyIy4J0xK/smOeL2x7isJzEDdCNij4rlwZtP9H1uCEWWWLXhsILElGe1\nZWLfAKnFEFf+gkm+eamPGIdBNj06NkFgBdl6cMxQeSx+qb8LuUfpOqI51l/a\nDMxmJKe0cWLG6hLSxKasUX7zzBC2PlrICXuUHWzr1NYb6NQFiSg6pNboMUB4\nBAF+dZX+3uQVeXzrpWDnDuNaIBJgfEroS0AbPOHSRN+sAgOqjN7KmHhc9LJV\nTeTu4qKjlnNlqoYFBtKaFKiGagQxv5bhDMAc0yNe5up5OCA2cvqhFJftbd7X\nek0NUPru9x44u2gMupddMhhPQBKsC5llMYAw9Y73mTjLkr9v1Q08uJc9PgFo\nxAKbiSKn2hY1vCM3KErcAtC6wmvLBddBCs3ttT/vlV2eyA8vm76Q01SPMinH\n5bFUTe++Sz05lRVh1O97X4MOGh1ejmN2TDUei1DJAbIyq0/T+C4O4MqgY1vD\nqMfm3OBfV5R4K03Eyl28K/ZKz621k80bjcya5wKXXqcCpWuTV2M8v29UxGRi\n1833GxDsMSfMFQHvdkqMIyHsE+SNbTl2VI9Acd0QxEk/aY86qO/Y4uuK9JWq\nHa0Q8NryZgQ4KBouuysv1DDsZz5JIk+GAmbsgJ07W4kxc8JlONKFFr1tep/Z\nYVfn\r\n=TFYX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmZNRUrtRCsZEyh6sYlwys3Cqh/pYWZRqph34EyZ4KdwIgd/UeeTo65aVurCmwXu9nBNrcpXf5jZ92bj9aOpTYKJ4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.542.14305.0_1610678134033_0.16608935606613962"},"_hasShrinkwrap":false},"2.12.1-canary.543.14304.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.543.14304.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.543.14304.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ec8e00351ccd918ae17d1b5e42a089c83b9f8c9c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.543.14304.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-25lw3SkBQK1PkUYuqbji0bMQMROKf1AdTNmhWo34xbDzRTwqsHz8Y4iZWuwFPLd0APcPS8MB6Lavb+1DwRTNRw==","shasum":"617f5ba23ac202ddf6ea80ffc6d052c67110bbdd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.543.14304.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAP9+CRA9TVsSAnZWagAApB4P/1DkfXe2CD132xIuqtSY\npd7clQSb7r5B6xBDsTTz5Yd/eLdV9yNLl4j5ovDZs1HgFdlp6A/7CgMAp6PM\nBstzLNjwiWNp5bDVSwnT4ArHnzBzamBp62QGq6ul9dPGwjrvDRiUD2MsplhG\n03uxQ/RsjjLMIvR4dT6OUtiD395Ob0It9NKxB+KpXjRNG2nyDamMI6tNDmKp\nwajJ0NBDXLhPJj/NPk0ycyvq0wTarhjDhgIXfUZb3YkM00slR1+ceqk5/RuA\ndLpv7xzMAcv6qeplbiAfBV09b9IMrEGGL/ZcFAfos0qeLPmKp1phbB3CHzBw\n2WMquleU7tGH0WmLR96b6wQSIsV7sdJmkPpJbXChnpyPgzPfCTn7jf0UCaxT\nn4cZ7ZvJACH1IUHaFfJn9sQ3B5/Qp5HlUk+fg72pMgShWzQVmZjB9JtrqilK\nkkZY43fc4LsDCMErvd+14iaMXTpSMJdy43msBHESaH/G0LkeEtqFTG1L4Yoy\n+MwE6mkfibAtN3MuP8g2+kedIaV+vSJ1qA7fSSi0yNI70jlTTsDyTuTUk4Wp\nYiWTBM/8ATyTtPH+JczXLLDh4KhwkKRGOdWp8R3cfVYx9E6GzfdgJykBX+rk\nqVeYBpssBZmblF0dlpuTHwNn6WTFQJzusoFL6fzYAEX/r562ngEMiisdnybM\nSR5F\r\n=vqMw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTxooT6yh5JAO64ynQEVtQiYzW2phu6DN6k6ode4E6eAiB8LjCP3z8DRvIs5VFY6mZ/mAqognFbg45wkX2m2B0MWQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.543.14304.0_1610678142269_0.33295038127823307"},"_hasShrinkwrap":false},"2.12.1-canary.606.14307.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.606.14307.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.606.14307.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"684ff04582b0a3d63443dcd63069e03b66e1847e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.606.14307.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-oWWYeq3vNayvHzY+qQE1rb2aEYJ7XYGjlS8zUBVirASXU8ld0+AwoGK7rVHlBjXuVVAFCvsMILLsACDmwA98Sg==","shasum":"54b8ea1c3c33416bcda23a8b027659ce822f8b39","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.606.14307.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAP/JCRA9TVsSAnZWagAAbwcQAIjeky7bm/LpmEQpWnGd\nSuRwinr4Uidw1veZz2/wgrIkbReV77Noo1OEjejiqKWBJxmPw6cwG506mnVZ\nk5GOsSzt9slSml/H7+CdgUM54E6SPls6+6el3e6sTfzKvr6MuCl2enfIHNCb\n+YhwZYp6V6wQI7Q4TDtKhfs+ej7tuYxQZ++zASrZ7kmBwCE1+vI8Ql9tCdG+\n0ph/nNtrWLgWZ/GRsJMADCmLBbPxe/llg6DahjOmM6LR1zC0+GrRgi3+MMT0\nloyZRH+xbYssqq683YK3TNLhPqMusvzuKBgtZNGHvBqM8HlQOpLrO4gbTunE\nt9xXzRrwrXMPnyAI2jg9Tqwowrq+5tUdBBFG+MubI/xyf3MFwXijx3w05c7V\nQ57aTbd7zEtHD7GtucshKUvEdWgxFKUqEfZ9WB0KcU7J9RgAArWBHDNnaxlB\nZSqHVyo11m0X5aMrT/Ev1p+j2N9Woft/SWWZJhaa3Er+n3QzfHk0HMwqWBTB\nXTrSLqMCLFOpEsIO0giMxd4h6VIO/wwVVj1xO7ffUel2Zu7BtJd7FiWx7ju7\nErhJKhhBNyLfoI416sc77VV2VaYD94tHk1gxteypOgn8gBOO5XwESe4FWiWu\nwRQusGaqwcpYuPPHZeVxIYmpCjEaGPf+2/TxhVqHjnBZWTOXwrVt8mvNXbjn\nSpvn\r\n=a/rD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeUKMgZIkEABDss0Wi7hLcFMaMf0+8oESHjZifyBn9kgIgNprKYxdWwDLBc+XKnNsmtBoqKh5JcaMHcNSQu6pPBAY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.606.14307.0_1610678217331_0.9425510708399563"},"_hasShrinkwrap":false},"2.12.1-canary.477.14306.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.477.14306.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.477.14306.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"87b2485c3d3cb57fc517e5b608192b5ccd488268","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.477.14306.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-z3tFxVD4fa2Ljcq2R7hQ51y8bi6jWh4glYhG/Mw7ADY3R3FdABGFk3r9aVgo+XZnNf4TkA5S7eSnJuEfGXcW1w==","shasum":"cda5e4ffd21c99d100ba411059f826ef90a88877","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.477.14306.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAP/5CRA9TVsSAnZWagAAEw4P/2supKU+HfgWQ8j6S8Wy\nbc7EFfupp+mI4yAmZ4SFnJrl4xtKZzE4AyKdK+a/R3YuOUPmdJcloqwO91P1\ntYw3HfLNxVf9i6W6H3+Imf8Gkx9DQJHcWCEJ1VPAXrBZF++IxQMVaG2SO1bw\nvlb1TmsM6oZsQA5SvD5jIrQN/1LQgupPbSUQtexy90vseJNpDGq1YkM+JQP2\nVS9PbKgcXlSiorWvRig8OXgqleGV2CA9d0LGpFuJtMLkZ+D12I83fTC7Ptab\nz9yFiXoKgg6mpLcsjCLwllkYvQLMCtyW7K0zHlubvgaCpymhbu5EbziFjvTC\nK27dsfW/2EPL27L1q0+QsEzCfQQaVyNWr8Q+ExWKW9sHzxiUXm51vyasi71O\nzzdy9gjjYklvAEmsu+CnjOk8M6GJq6PEAr8M9jdH2BYl5Gf5m/aW1zJt8khW\n87WJMf9st3ELa896KMP6S4JYPfABDSysoMCGgtTGo2Fc2UaJI3l98c3xkMn1\nK4yNkUjLVDld/efonoNF/XAnCVrL83EO6g99eH19zixAHs+DghWky8VXN+dU\nZ5M1AC6hdfp4uC6hd7mGW7O3tUUo0LmVoYfCFU9ONbpOnXMzvHnER+hwOXBk\nzl/GmTGwkZu9j26TzvCnVXGeaDABno/zmUHEnTePzx0SW43MbnVXbl3/cWm5\n1o0Y\r\n=D/ar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWbjvTa8vYgAjfv305qGjETA3HvxbtQXjhsYq+N4dmCAiArirzOX9AZSb/sJJKCuWMltl6pgyTEWd8hxZCRPfcG/w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.477.14306.0_1610678265271_0.5631651682886634"},"_hasShrinkwrap":false},"2.12.1-canary.527.14309.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.527.14309.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.527.14309.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"26a6cee4d639737396f624e4b9d1e1a1cc4b9029","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.527.14309.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Fd29wVCrNgMNCB7ELONvMXbg8uyQpo6Py2nP/cTUJsGxbsc99S8iMILCcBEUlfuek7t5/EbuV+mnQGFj0D33Hw==","shasum":"676004ed7d8c0f3c33355d44682846171c88f5a1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.527.14309.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQBzCRA9TVsSAnZWagAAAjIP+gMXLaRngdmIjp8ihIzi\nLd4FNXRmU3KMeEDsmE+5+D6tQjGHZ7xFXf5lz1kW/2ShW8sfvBEOiarjxoid\nD+bOzhVL72YNx5BonEaNUsG8+cVgevrHvgzpFQEH8Rr4Q7EFzUmHzygEfby1\n6uL1Rd8w2mPpQXj24Vka8Awp4bPluXbJS0Ziys8rJftxdcFrtF4y9Rya4qph\nSC6iZimhN6WAhBS6rjS1GafNMhIqdPcpDj4bJ1fRkG6t+OzJEc+zNC1Oh2LH\nBKLc96WiD7Fq5vQ3iBo6vcRZGd1TphanRFk002R8DhbXMlHJ9dh9Z4ZJ2lBk\nE+QTVk/CJisyXYX9CAZOv8i9ovtJZhClnjbhl+xPgtUEFkFPecB1pmvrGx6N\ntXSGt4feu6UK70h6w8tDTZc2FZ3KgZJZ98XJh9xSx0xy5Zb4Nz6ehgDVHVez\n5uhLtN4Ibz0zVuc+0jK1f+fmfIz+RghQFpbC7EQVq7ChDjJFO7B7O3CW1ju4\n3/KIKBoOhqVX15fFI2591UQtYdHR8gUKQFcHahmHJId3draDnyj/RNwVOgUu\nvILS8vUagRx5uOo8zr7yYqn6JzY04iDA0H2o5v+YJuJFhZmE58zGNIAiqfgQ\n1U1IbZyMl3v1p0wkG1w58+jsw3hRM0NHhnVhnFStj+JPoCaWCgSYuVJIqO1k\njST+\r\n=qkIk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNDBq+1oDzjtmUiGxKpoMXnzQR9wr1UTVzjoigB2iwhAiEA80pRDdTFu6S8EgI9fj1Imnmeh99z+iwv0khC9vquEd4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.527.14309.0_1610678386535_0.0411250738324187"},"_hasShrinkwrap":false},"2.12.1-canary.481.14308.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.481.14308.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.481.14308.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"996cffa14c08a33ebb64226671551e380790ed5a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.481.14308.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-PA8FOlw4M2FN6EGP5NsXcWnpjMEpoooQy/0jSCcZbyCxba2nLPn2cVJSpzIWnliL/6GJ1xr3wmflF5rFumMlzA==","shasum":"62c9041d603bcda72bd08a33f4e7fddb461f1a11","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.481.14308.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQDmCRA9TVsSAnZWagAA+sIP/RVtmcUADWeNlk6PBYWS\nFtX0YNhnGlE6GEZGQiHwKBmnsfCHvCL5wyVNidTb+5fET00CGL359Ni4h6Hw\nD/7OHAOVsFUHa5cEY3c4TTgIMLaydE6XlzbTFraQxXn7vUSQx1B6D2O0S7Uw\ncDp2MpdNd//TjIZ7q4q1F9L1svm1y7X8jdqMZQ8hZ38acwR0yz51my47xVmi\n+XfQlEXMqgmNpoREb2/p+x/Di+GWGLPuIsxqH1/9nJkQ1a1RLtL75tDyBC5Y\nCWsbBi4pVCzycBOTGdcVZ1WyPtTki1Vy6mu9CriHSwZcfFE4Ti66cb2smH+C\nXaXnj5V478AKz2R/ixZG1sTfrRYxQA7jvGa80aBrNoJShm+PkQf8mp6wDY/J\nQus4jwNAczgy5otZUzJkQC29Jr6EROkLl4TG/fdA1q7zuOz7mftGQ2gLhJkx\n+h8O/ACXdJkAs6xW5sunRkNSTuyKqeOCFd1T8o70ZhXg4JN6WkJYQmMDzyoN\nsbXpTD1vhzO7z7rC+KOBdhSwmJ1E2Lwf84z4GRykuxEHFCfv1PRSF3M+w8xQ\nb7wHgbz+QDaGjTXIRd59ankNSN0csVU9j/0FKUbsHOb1KccOyotJiRjFoxN3\nPO8yZvKvR23dHkPI76EFko72piH0S8g7S6SCCTrCCz2+ckf5AFrR3Wqw1oOB\nt+h9\r\n=H9Pe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr1xOCPJxCIhLa2XFNPpbZ0xNtgMxx/oNVlKmqRMwaCAIgCRqo7zJZ4dqSSTIYpAkoJIMsxIqgtzr0SONuHgyGDmo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.481.14308.0_1610678502319_0.9953745450394393"},"_hasShrinkwrap":false},"2.12.1-canary.508.14311.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.508.14311.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.508.14311.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b185c79cb3bd9ee6e968e8a7e0ace1ded3139001","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.508.14311.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-cmNOGt770VXzEFc9HH9MBiFSX2ayAE93KTx8RPP5omzgyXjVGTvK0RGPpgNj3ajo6yYD7LUOWqENFItJqB0pGQ==","shasum":"0cd6b08ca478ac69c39d0eee1267f5e48e877881","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.508.14311.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQERCRA9TVsSAnZWagAAjwoQAJvm8It0eSprT+75zbPw\nx4Z1xWT47oX+U+JqCe9Ldw5p335Ek51lHHWSLss7xB+h0ByZrS+IkwPu9PzC\n7zfE8YWcicuuY5nUGetAyoCfsnUoxnkhyzQxNo9yXtPzjCvfuFIasLMAQc8s\nKIYuYoU6xDRLlVbCLDM+jnsr+qLbpVZw8/fEo+92ppy4nTBT3lHS6dT1TK7F\n2TkaIVqn9ZQbKhx7uq7/w+xR3ydDYFOSyXNpivs7ciYDoHqeDqNkzsfoFKqd\nvBEff5MGcqnnqVFMM6PYEnedfviQ5s7zSu18SJFTVkyr7pGrgrJILjBdSdCJ\nbAWVFr6etVyeDG7vPn3MVsNslZtDYwEK+uwtvuiaNt8sW+XxV3C7NRjkObEB\nhAZKU1pyVeNth152aqkszIR4+fHXs7JlIN0g0q2UihuqzLd8Wrd9EwUT8haX\nAM5GpcKhCP0vs3bWKyrRfm/ROJh9DtMFpmFbOW0TWqobRUu7h6X/bLoGgdBQ\nLZApJvw6X9QmiUasqND96k3aDYj3EaIu810LHcUc2wmckm+2cLVy1jBmqBQ9\n3alrxrrjfCKNQucwZ7JA9vIvM/Sd/KwYknItY0Wm2/gmQKGZexn+aDOZYO0K\nMfupiDtm3Mzx9duRYEI1m254cBkPY07n7ATRpLAgMuagf4HNrHGrHk4s2SdI\n1c1V\r\n=a1xr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0jDdBM9ppQDAjGr5DWoY9QrspqjH7qq554nT8DlGARQIhAMpUyXJlsSsLc3QtJrpdVgUlYXKIEBkNv2Ak79FyiWky"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.508.14311.0_1610678544802_0.9426332881709572"},"_hasShrinkwrap":false},"2.12.1-canary.605.14312.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.605.14312.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.605.14312.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6c2e6807439bb5a48a409c478655bf3a748e7c61","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.605.14312.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ASpRn5vaZb2WbftW15iQVMgALEfEaH59OwvD/UYIrnEQaloXTA2cAGH6qTvdf5FCQIFxyl31NQgpHOCKWXQI+w==","shasum":"f0f06c8d2e0aad459c37a4a06134e1ac02b71070","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.605.14312.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQE8CRA9TVsSAnZWagAACXYP/0PlMQm4L+JcQ9obrhnr\njbXCeiRLA+0SpgICgUmLsddG2XOy2Du8abW2eHTRhkTfM7Z3TGREbBWu9all\nSJsXmsWwG7Nbu5DdwTolQye/30DKezENsKxhCGO/Xtl8vJmSIuJQOLrLeYaO\nNn6wsvgXKtB5t7BfIIWq3OB2ISolraxXvFHbTKLUCmGPQIM4RzHsfGkSPDq7\nSlDFTQIX81udgq3jtDESXlFOdQmbN9fsKd8eMtsye6ZkHYmP52sUE2oUKQL6\n9EcAcUfByNDDYVaY+ZujW4ttKdMpE5QyX5ZZzImL64bP6ZMWg78fV/ezbSN9\nHguAovncBwqd2Rl6MmkRWYoUoB/brgOWsJxF4kF6laykLdRSPEWMlDEy9JLQ\nmGnsB8xZxFDPB6YqcYwyLrfjftLOCikcPiWRdgu9Hm3YKrjp1Zatl1oPRwJz\nMlQpCILxmARYv/HP5J0MSEC+e90KtmOkNSXadi+lLSZit8253aFUFhRpBYlP\nglIx/ACyY4bEwEF42JcOvI0XNN7uCirLLQh4hANO8+9sXb8RRZZ/dX//XCam\n5Vtxs1cRusN9hbiRbo1WSblG6spyQ6CVhQlwgrTUJsBqCiMB2rvgz8+XyMoS\ngzzhffQiDeu0dlINGdnePGJud0SYfQvHtZwwZit5CD4P6xDnk/wclCLmt/GQ\nHEjR\r\n=ZNho\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhcUbqo98WotQNNHxBga39KEt98rz+OKg239ykHcDoSgIhAJJFePCNJjXmjqv6t8/qe0BZyg3h5+Mx8TKOmEISNrw/"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.605.14312.0_1610678588477_0.8576003562471475"},"_hasShrinkwrap":false},"2.12.1-canary.574.14313.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.574.14313.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.574.14313.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e6ffb6f681db6ea08c44e110786bbffed9d2148f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.574.14313.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-79vZlyhDiSmnKKUXRw+B3w2Jp5guxBkqOGOekim6djeMoqTMQWPLnr0f7drvqp9yNbbpdNskhtNsc+JTmvtDqA==","shasum":"ed4a9d9e149eee03e4ac643b72069ee8af581a7d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.574.14313.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQHnCRA9TVsSAnZWagAAQa8P/16KMisRAfu2ibnxIc69\niiDssQpZC4Q0iWRqgh5Ppp+8cWPaqkUdArIhyrMja8xLKl41lMtRy97DpUQU\n3MQhSX3k4gD1+JIyaI3QESMQ80mBvkDMujLHumykIynym77Yk0i+7+n+Hecw\n7BbgYFBojf/g3MTH7kqakDFhj0THx7rmwXTofPtjghNuyQf7i3/5+7MMdZHF\nx5xCdQDlHSYWB+wbcmJyK81tGAqxOIke54aM5k6kJ9i5t+fXclLjpYPpLBGL\neCdaDDdDO/40dIykoFrxxnyx1bGo8MOHFts6cQgVYuqS3O8S67q4GJPuX0ls\nQqRbilrCeaOf+FhQnmId2iNZ3FDinhujKuUKPdZq/KaLWbgqYVPyUBkzmFWs\nf5+/YJBdNqtk/7uVhR3IuiZseTHVn81WlKnpYneZl0Ag7EqE56YtQnNkw+oC\nrRD3Wbuy1OqZ+0AFplegE11pm0YDuQRXT276tEujKVeeWeNIUuO/iNS2En2R\nFtk5hWW+fVGUCIrRSrcwJ7+2Jzinw5bZFFxcO2ATH6ccEK7FSNNeleIOm3+v\nntMbToyjVLO3UE4iCwoIVso9lQSYtMQyWGZClDeIvI7J5jsy+GwNSwn7wKHd\n5pvgCpQ+0GPcZloXvaKIimfVYbwm/PQpo6b4Wi8QIDn60yufdnh7UCiemc4V\njGQI\r\n=wrOP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/xuGbdrrRVhrhC9s4kDGJacfstrW0MqW195Rw8cHKcAiEAlTVW7L8q8yTWMsle/OcnY7t6RM11+0qEDyAdHNyyJLM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.574.14313.0_1610678759231_0.6791652692493497"},"_hasShrinkwrap":false},"2.12.1-canary.575.14315.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.575.14315.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.575.14315.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fa933ac67866905cb2b46cd6b17cc36297f8d506","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.575.14315.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-UDDnJz2+OAp8UVmmbf/ngywHiiqGwfvo9L3M5ZX7wcpHBAosSgOMHXiD1q6kwRFe/fV6Ih1F83qUCfeQWZEfyg==","shasum":"ae1278df3c4b8d203dbec9ebc5f453c676676f10","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.575.14315.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQJKCRA9TVsSAnZWagAAnlIP/2Yil8eS5yTK0XqNhFQb\nBwG9/VARvS/KVqNR61i/e+8Fm8YEEWR71SAh/rCs1nXCoR7+O8C6tyXbNW3u\nZ1vzIWXPVBfLIZseoWV1kVN9LiS0gGWBD30Pu3sQB5dekvGXnEEuChWVyVBX\n0h5n4FcrpQfqt4r1+ksICl6sHQGE4BFqr9DlulYJvJNLswVyXaZUNgxNSXGS\nuPb6u32WJCz8l21oAHMylEYxAnBkknZ+HOlUv4jBsCUkIshJEHqrE+CLud3u\nk84QD//sLRP4tKPGWjEoaJSLL0y3wveKqK66K0zq71Q9QHIRpmSepMwbWzMe\nIWGn+hLqoo9OVHyFaQuo2hFfMpQ7F9KhRN7UPnSndWdf7T6hgs7/ttkpeCBR\n02Rav3GWv5JNOloAUxKhl3yctMF/KzGe7Um+KIIVd3TvWhDHeJDfofU9uCAj\nFNd1qRIluCixAV00CDp+j0w+9+v19B2Yzb/4+uPKuFew2jw0WJMdvM/5mXub\n7VLSWwxn5KFrldhQw0mK+fnVxkGiLDdiiZNwSk4ybtXqKhhI9omR5QjD59sZ\nxayAPGy27fbubZPUz66GdijM/gaDq7ms4+MDFGXrFowpfP18fh/VMRS07EUE\nS2VgIeMI4nxAx4WAT1sXstuC5/EyKtKaJd3OzHAaf4kQJunvuyk9YEqbal8y\nghHF\r\n=9IKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmDV+xAmOwJzpK48M9ZUeWToTUxi2UOwX9u694/o3LWAIhAL0s8WhXSuZzoJk9kNQ1JajmI4o/HOEj3XDF2NlGg8Pp"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.575.14315.0_1610678857870_0.8452108868216608"},"_hasShrinkwrap":false},"2.12.1-canary.488.14314.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.488.14314.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.488.14314.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c927b95f23e19142483345f96730ccbbe7707b5b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.488.14314.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-gvJb1QbqvYgjWhqAFUgLPiRBgKlPDQhPVZk45WTr5Ea1MDnuJfWVBQQkuh0l14piA/ztoT7qDSE6YVMMnpxvIw==","shasum":"43d9479b4ae7ca6a1873c89a75468b808b74a278","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.488.14314.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQJYCRA9TVsSAnZWagAA8yAQAI7la/HoFwXR0g3n8nfW\nYJOXnW4+uuuPRgKFud9TgY6dUbMNrubFtkiDWLWiCuG2/D9UnzL3VKgW8M0E\nlsnKKCAM5YifaN/HOSo6UoICKCMAH1kayrFO203nJEolHb1y5y2oxIA2Agvg\n0lYh9USaGf3eR8CuEggma9XcKKTKdeLZKdFmPPj4UWTqeWbPqZbFkxNYJHlS\nin+jOjmG8qy6xp+PBrJ1k3J2nlLMYtYCOXZ9Kui7oHKaI2O/Z3DgZTuaIDkt\nPUf7IfipPCVBerCyHjUS8+6BPE/lnr2lRVdxLz3hDO6vwy7SlZPtUE7zsxF7\nK6a7RU3muceBsoQBNPKF+w5YIl39B2MKcsQzAqYAILWo3Nchjo4jQnRKAVXp\n3YBm0VVWHKAhgFr1/ElrP5/dX1SXraY0/xDrruCbMxIujt4cyxrYaASJ1YmK\nw1Th/RY+2vyqg+UM4X3lC8PCR6ryd8/ZHP80seK089szJhYSQTQDHPHGredf\nuekJm7szEJopSMf/KtkihvRW0702EmJU3+30cSMzNlmAIae2JE1TueVvQJge\naJu+FwhFx9kfOKTt86+Ul4lfXnhoNOJWuQEo89EQY6oKPYs8ahUXlaywnvUZ\neAgPB9N+86X2q1k6F3z/5SmN32KdExRrC3I0oM1tE0SCWmFy3xLmFyxu0+/e\nacCr\r\n=Wv/N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDguMhbWJeS9F4IDIpmofiTDxwaQiLpahDptQZARON6yQIgSXBPTKvMXfG0MthwcR3dGGMozIqYSqv2Uelxr2atiTU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.488.14314.0_1610678871993_0.6605319017070452"},"_hasShrinkwrap":false},"2.12.1-canary.607.14316.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.607.14316.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.607.14316.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fd79f981c20f95ce9dc17279aa54cbd744438bbf","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.607.14316.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-1Y1zuUrbrSzfn1xlO66BhRVMlVQe4IJxJNM+6sSw0kg9e3aateQJ6p6M0cM0Ad+8ef7blkCzEcncXtXPMim58A==","shasum":"d2538336cca66146a536817d6a4cc37aa842d608","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.607.14316.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQJuCRA9TVsSAnZWagAAAJQQAJGgBeOQnwC/pkkw00gm\n6onkmJ2AER+yz2uM8wKOXtOtZdtI+/9Wby74atMh/zaiv8zmLDe+SjKIEgbV\nVYMcQLyxBKJ2uDCjaWzq9NgIpBgvG1WNAEVHzrH9SLoVkQcGtyhhZGCnUjBr\n91LK+tv6AMaKhtwTk+bxSlsjiIJsNE7i0tH+t/qjoAK2sB0yQO676TgtJqYo\nUZmwwa06Fy6tb/EDU0JMejJvkz90R35lxJjlQtfB/h6bcJnTLwW0Frx7FyN6\ns5S5iPMNoMQtyVrcmxxsy23QkJ3Rb9NgLWzQNUDBLs4nc/j4sgxdDuDCzNjx\nyfgd8B9nf3Qe5D6+YPzxOKffb6hihYkqNXWWfaBp3XiZ6nNuuVG7nVblxLvv\nY8mO390Gng+GWiE5wMRhr2V1qDoWnCr4G78034wO406CVshyvpwyBcndoufw\nX5DL7DGkrTER8r5knJUHoC62SQtrRJ3bfEWy9V/SptmGHURl4ZOinunqgx5e\nRvKC90FfwYSPb2w32emJSHanbZapKpqndIy0H70/8DwYdmN1jk2zVbYCd0oN\n6AnD9bFsQP0l0+Ccra2WvxbtVxyBwvIWCPhmrtKXyxXB1Cjlt5qujQ0MlCZc\n5LlOXlX34crZTE9dPRzIWWqvjMkZAKHHT+Dhd7QXQDsTiyLSNT/0oUlOQdvV\nj595\r\n=oQ9t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/qRDhydBWnwgL1Z7f1ZXRzr3ERzVbmNJERq7Tq0OZjAiB0Myvog1uRdPtBfF3oAbZvGr7B5AkwM4f5JePnSmEq9w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.607.14316.0_1610678893731_0.8991831952422604"},"_hasShrinkwrap":false},"2.12.1-canary.559.14317.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.559.14317.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.559.14317.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8a2f18d8c36c654b052926e4c0794fd4c145ba5f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.559.14317.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-skofRT3tdbTW6DBnDHD/YQENfddf1/J9gDPKbvRtMW+yVuJxtm5lLw/LRTQurvcNZRxL6T9Ote1F/NrgHDltaQ==","shasum":"ce79b968acf6214a8d1c5f8f491c58be7dad7c3e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.559.14317.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQKJCRA9TVsSAnZWagAAlQ4P/1VMYaLyVV3P1d+UyzYh\nWfnAMMZetyntJ5NJQ0jf7+xQfziwm33gXLf+W06dzo3P306Hod73EqYsWWwh\n54q75c4A8gOTDQNXpnsvy5XEAePlT436uFOGLsiB0O97WiLp59RZ/UeHH2mw\neu5qeRyvPgG5R8N/TaA8trghXbBM+tiSM9+J1DpSSHJPmhgd6m1ALDO9TFA/\nSy8MdXFQDls2cd+LmGXboLsEiAE8LuWeTu1XAZWBA7b8Rv7qHPb9QEilwNlP\nuMmZM3EBc01vX+twIJlX95DujWGYvALSKVX+PuNXTbNpalnp5SmNG3Mg//lQ\nM1ItPhoytRC8OxpVv9LXOEOnkNM83UwT0n2aBO4DZsLW59uQwej1hL8cTKRX\nDmZACc8iLzBM7OOC7h9NzOH5jpE4mUP17s6MteiSGxo6tO5rPiMWnDi8kvKw\n15K9V18tGJ5gMJa2stlOPwcp0fRNNOxZ1m+n+ncBQzThKN1f1nPyUysqNPIn\nFFKud8aaes3RVfVJMbAmuU17axTlpoyIJWsNPL13DqurAgAOQBFtY2QQxHfg\nZf3EkorD/6TVpw5P4uI1xhyZWWN8cWadm7eM0Gdr2WfdQwi+75bp7whtHtFK\ntXjnuAwjNQEAHqXGFMiLvYhRZ4AVxDBmJnfgWiOeRiaQYVIbn8REePcVhumt\nQZ5a\r\n=ZYWZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhY09+mb5S4KjxiL1I8hN0zYrlEZfJHm9/Vjt/9bR9VAiAxzegs1o9Y4Z0MmNRe6IG9E3RqMBEQOVY7rSM5Wm6nxg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.559.14317.0_1610678920846_0.7023813558397882"},"_hasShrinkwrap":false},"2.12.1-canary.586.14318.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.586.14318.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.586.14318.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"df7bf491a2df545705060081e7a7d438a739e7ba","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.586.14318.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Ulth8ku29CRSvdPIDhb9yNtKMFB8kp2mOj7bJg3bRMIlkFgHrzUH5MOJi+LLaoCEe4lxkZO0mqpOu5D0lkn41w==","shasum":"60386d409ecfe0b7bd5c4e7c77141afb952a7652","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.586.14318.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAQObCRA9TVsSAnZWagAApgEP+wYZIDYpdFSlGBBCVzeZ\nJe7R+kPFcWPlnfJmFmQjyWL+EFi30izzYpUfCAW3ofwtP6srRCKQgfo45BsD\n3IH3AIoq0L98kGAYHHzCmurmrjAsBQXDzhA8cVhOgOKb7xtUKhPZM1YEzTwF\nDY0D0EjApf3IWdlZ+J8YAQgLQq86JcyZ68cNkASViMIcyW9S2zjH0pyqgzSe\nD0bsJQB3qvivk7RFKNBoi0P5nrojfn03bsWPpJzffL+b0FUy+N5tn5WPzs1X\nv4bkXiExCkqFsASQK2BU8eK8b/GiOVcSF4bIlFpovImSmdb+2hUPjn4QTkpG\nX37R6V8uzc5a2die1TjfgoGbfp8QAU71mVtc2LKOww36IA+q8VtWS1+V9eBS\nYFF2YnZhXHjy8pvgg5Smuyfs1wkr/bD9gUCX+beTj7XW2bwMPZXNcDY3ZlIw\ne2x0fpFay5Ewok5qGb5it8OUGC8k4VW036nfDau5GxOSYP6YLB4nKcjlxVAd\nOSOM8TL5flXUt8e5LtU1TnXhmr648cVRmYlibogkFoECSg9obI0pozo6rkIT\nMw9FBnR8yTMVivIwa3/XQzYwwgAMeG2SVn2WYJ40UtQZ2n64cdtkFkvr+sbH\nxMZfCMeGbsUTT3UwAbRw673whzVlYDT+K9q6Z62JRFlQ4Iyti1dOloAFHfI6\nKr1m\r\n=YFu1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSw2uI97I5N5OCdjHFHLwlGP2jrZWFEH+FQLaZBT94TwIhALN7fcIZEsfjMAznBxTdw5Uf7eL6+W/Fwi2/m4hNWX6Y"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.586.14318.0_1610679194894_0.6251512218913058"},"_hasShrinkwrap":false},"2.12.1-canary.565.14324.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.565.14324.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.565.14324.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c2c71196cf13dc4e4756397ac508b98c9b623b35","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.565.14324.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-eCjEMGTURy2X6pCeaGcWkbpGbRSukUGnHASqyKdDwlHOTaAGnoOX1NoKuYTYc6KRnJqxb90XJNL75Y1XThzXdA==","shasum":"d3b54201bfa00960fc6d012faf85cbf2c9f2d56d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.565.14324.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAbgiCRA9TVsSAnZWagAAuUMP+wX120fN78JBCHVpJkYt\nAF8fL+BZi+21CJ0qZOLgBB1Qb5Wl7edNfwgwDszG1LbIwet8muLtqGKdughx\noXrLvRE0btkXX5wdo3ugUFFAE+1cjsRDoSk313MmTNkLEN7ayI1pWvH9dkBD\nK7nne5KX9mA18WSx//5rMz/4gxigPHOBqYASvYLeU9SNEF/taxmUzOQW7ZQE\n2ZDr3+WbcE75kCxPePRQYUSfNz3GcugYZ+mAklhs/UuwpLJlTXgKmJDvbS9D\n/5pNTTQGTAOjghatKtWvRgm1taWOQJQJ1QygkGi39PNqzLjKTlhZezm17Uby\ntlg9dHmjMz3pZdphI85ESCVZjV4323p5E8wxApmlTtGDtt4SpkAIdSwdpqn0\n+L5Y9MYQXaukmR3Wn5qzOuU0uhyrB9y0d3Gy+BmDG4we0RjUgeyfjEf3Zf2J\nilU0qfUzGuL8IoIAGT/cdKcNFPcCsQqJUdLMKnLPLj3piDEkb+wXB9HxN7V3\n2fKSRXu3DwsqIIVqiGDPWhYXNY/65E4Lo8mWwO7FijmVse7ZeMHrrra9umhI\nT4fPDhKgNaACLbp1pXqRi6SWqYleirq2TYRmNunsDE4W3IrAacIegjrQkgv4\nGnbGGohN/yufzdD031mu9iimjPi3eZUlTJMbeUeeZgpbftpIUVEcj5DE0eRD\nFW4r\r\n=vYsI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICw5Jog0cpcxMVEwJXln+UxumScCeqx2tYJ0URnUDArjAiEA3julcleQpgD1uvcu9iSaMG7O7SDgMj4uibkvRr9v9Rw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.565.14324.0_1610725410210_0.7016722470797399"},"_hasShrinkwrap":false},"2.12.1-canary.574.14337.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.574.14337.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.574.14337.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7bad29e7d17e87d83167be7795f00c835c000cd2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.574.14337.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-UksgS2vpMP7n8Sfamb4NKqk6HI0yZsyhVMEz/WaMMv08qHmvQvwPxoFuU/5q+nLl3Ih5N1HI5ovn6FO+2/uEuw==","shasum":"bc9ba3030a8691af87353b81ad1cae80ab5e9c7a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.574.14337.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAjeuCRA9TVsSAnZWagAAIVgP/ixZuUFuADMbePP54vrg\nKi9tnt7Ca+c7sTEdLe7ePjWfk0TDr1G8Hm/QYizGilpplaYbZjVdkVwkaXnP\nPM9ZC5JagVx4SSDqqXHJghnemGl0/xTNa962fW8xnlsGxpXJiMTeI9XJiQwe\nmjsunsu84qpIrZQcF8onW8yVTSCarKhgbqz3unNa1tBwiZzEtcPLTDZUTUXr\n72iIVSrT+OKPeKAQ5VtZbX85XamP6oRlESyBPm/tVjT0SIb75XhACBe/pxG1\nkGrCj1fVPu7T2ocjgll02xz4XSk7RQb4Fa2huxZwx3iBQcDQDZW90eGyJ1Hw\nlX3fa1KaF93C7qKKewEPZC37qv6yOtqcxDhar0APvTD++55oj0iaQcpaL32A\nYwVUoRoG7yfIPn69E2vKmpO4Xjg2TDwhDNN9QJyVONuaJQSyvf8foSFrf46Q\neb6ON+Lhc8hYZ/42wa7m5fPXUlMqMHEZXfYk+iwNR+4Sjj2+YgP3jPm/ntJo\nL79syylZaDkd589KVMThPj3VPELKsOY8FkJJZwxDCqJjw1PmOOnUH7vLCVlA\nzPwb2KXbLvTxMrj540/tea3UhdBv/NRZjuOTnraUokHFGYplqifLpKdCRYZx\nI9tPsoA0tA5bAZHVTodeeeuVa9r9cw4u73Q6nAUlY0RiTuyzvGyaVkxY8aIC\nApm5\r\n=KD25\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEckFEO+WtuLCSnmfbihSUx9W4hok3YiWMrjazilH+jIAiB6bU9rHVOwhk6jNkRb9zOymgohcA2/EztzDNnnBO8ZQA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.574.14337.0_1610758062288_0.914392200885048"},"_hasShrinkwrap":false},"2.12.1-canary.484.14343.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14343.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.10.0","@auto-it/slack":"10.10.0","@design-systems/cli":"2.12.1-canary.484.14343.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5cad6b21df6d9adfed7835e82304e2b2b21faa4b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14343.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-md18cx6LW62RRvojrCrDDcRPYTjQpTn3dEbid8qPhq2nK/moScLRhlwKP/C6A1kTQVc6Ip2nvsKWkKRBakLuLA==","shasum":"d8553d1326cb8f9c82aff32bffd40689b9ba9667","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14343.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgA1DyCRA9TVsSAnZWagAALugP/1KMSlZx/I7urHpSMx7c\n10at+pF74LVlQlinWG0MU2YveKth/r1HEQhbaxtTk5ZeTgQnIJrztjEKKdqF\nxXtvGBpScq33LdMepV+Rb4iZ4BGhpXMMVXnJueghtaVl0p9hZzLpXc+jzagF\nKB09tBgNXHnUrRZEHcoQKqGvKEiJRbkOoeqhGG19+YhAnFSXxOhV3idsy2OS\nJZgtpgku965oloSwjXjmmTIzEbjg/JjGFhyYfp0/VW18sVA8cAa3PLGz6N85\n3Smy6UCUTyD7snMoyJD90V3qEBcBmBpXRE6KRgZtoDGAt15zB7Y92JqNjlKX\nMJSdLverfcBuJ+xIL1kDlQN3eVAMkkUdoBoJRhmZDcePBTUcEQcz4O1D2AI4\nE8FI7fiS7tgeyUnulFLr6YlneL2LqXGVu5ifN0l1aQR9m4uAEvMBsm7H9j2j\nbtB6O8MrHngPgnLap+5RT9UqAfOGdpUPEThbQQwh+QEhbNpPujrXhFKxzdui\nCGr4dMYgRQk6+y63ikKMIe9UdH5rfyb+ouz35iT3yIYlm8i6vD2e+Z23ThKv\ndaOqS39iSx7cWidLwQT2pNFAyUnPe1LFNr8RvwRCGoSOw0EETJUViDY/pQfO\n31hThUH4vsA+GS4AzbhyzI359L0TFRwhR9E44Mah8y9Xuv9DTkYXGTr7Up7j\nYHxT\r\n=oZKQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1KDB5RKAYr8ujGsQbqdpueD5Q4qs4IFeirSOCV4du+AiEA80fKmIhmuNwDwe9GjKjh9OzhTDQYt6l97Z1iTghZODQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14343.0_1610830065903_0.6575175148938714"},"_hasShrinkwrap":false},"2.12.1-canary.615.14349.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.615.14349.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.615.14349.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e3ad1b6517585ca906e3bd70a4fc13d72aaef6ea","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.615.14349.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-+GmRH1M2u2n9LDyy2hOoDj8tYePAOQogDU3rqt5OA+BxFlxKc9Doim7ViUhmWDiPTqg4wxMDpOznXkOifIoGXQ==","shasum":"8fc5ff36555c828b6ce4cd2147431d70f3bd115f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.615.14349.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBBR7CRA9TVsSAnZWagAA42oP/jSgVkG4e/P4fc7tkghz\nhq+A0JJA6BN+WiVhsZWC+n90FSnuBHYQzzmSGMa6yaSW+QCme5Q5OjNHXHhp\nObB/8+m2etNJ7ncDBDjOFB9c16jDvYiugp41ydUD9JtccMSG1h5wMFIGmqLG\nievbwzVsY4EPkmwzdD2PnbkimtlcSgG/7rzWhoc8SyL/AYCE/tn+kiIKu04F\n75vlt3phMz1ygbDRUNzqOJZLbQGETEstCirH4dSwu9lBaQStqppIqeecauRW\naWajAuDwN+B5BLfQFNJKrPPeC3IqzclNMeur9+28THLWwxMCMb+JLUraJaNM\neUpxE7hMEgMLI9+eYd9P4TXFnWPoHwrdFgSUiBL4BWoftNTJePcUamOuihKb\nNr1f3zG4n1TQoqPrC1DCg5gWFdClj1dI7hhejE8FS7XRKD7VYK9ySXbRFWz+\nWJiLQzvTHV5W3+9wFyn9RQg1s8UpGB0SY6bpz+lUISyuI6z20RJ4JRm0/oir\nHC9HtBNVHirn54115bQ6hxmJneQ+XYZGBlVsBndJZsjG2yzNBT4LRAgED4nt\nGbXJ74uEodYWJfidShkNhIyDU20qkfWCWIzGGURFu1X0O7g8CVLyLfL3TpgB\n0j3LOW5SCcYvRnryAX8S88rAGCUjOpGwucT/gI5qMQEfNiuca4p8FmCKDGJ4\nNsx9\r\n=UtTH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHL3IOkKhTw+lFI2cB7mTAmISZFPthNhMyFFeyfEgm5AIgKr73DIs2gREeP13WUNAQCpX/hJySYXaCQDiu05qiX2c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.615.14349.0_1610880122566_0.14837913849257323"},"_hasShrinkwrap":false},"2.12.1-canary.587.14375.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.587.14375.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.587.14375.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7e7c2624382c72d528520bcdd96f98d2178f968d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.587.14375.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-SK4UrEeUD2RlYunIuWMIKLZSSpKPq84nSMYlbxbC/5IuzPwtoQr6Nk/FWYlMEmeBcgk7W9AWeENz1iAtTrnq0A==","shasum":"cf10df583bfd6ee074374b6ae731b77dfbee6da5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.587.14375.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBpROCRA9TVsSAnZWagAA/mQQAKPAP1Sp4ET36kmUzMmO\nis8su66xWbMg0UBYXnqhqVaAT2W53ZjAhD2vgEPr3fNte0ndyFfjXsCBNwmE\nJQ3E7CCk/vB3aatVIK5oiPrZmhJcaA1ta4CvlgSUGMPVX8UMDYH0eNztctV3\nNUH3MutarBwFEAuLzXKONOOt9umSOUoU/bNQCJUmBGfJt1uflZvJ/i4xGHnZ\ngVhg7HuKw/nGcRb9zIw9xRYG/BDXxPIenh3sPDcm+GIXfuFuA3WpNWMLX+gf\nYjwf5+m9g25g5pbfCuE+6oN3B5eNosTNqgDTgmL/c9f+ndHg5XIS9kYgw+I6\neZL3kfGPJK4VWvownFFWqfpBvUnph+BFkmMiB2dYkJushg86eyr4DzdwfB03\nSfygAVW/qZVub3wuhcsUiIgaq1Jth2XxZjrPTqyv6IuWHnAaJFzzC9ocnk86\nWkjEVf/mi3a36FwXKM0Vp53dQXouqxIVo+4fRwneGsNMlAFGw3pOK4/wILxg\ntyZ/kB2kXhO3YHaP/oZD4J7HVjzt6WSwP7ezdiTKSuSYEMflJ/BEVe2SpjHk\nLGwMTqTWe0cmM/fPi1WjQTbq8SXdzAMUDrRt+muZjDgiT+ClgbnCHFifct9r\nwzcjqgBRFsznAQ5AWX2UCav8EILzmRyZTc2PmCrYYf0rds8Z5Vx+PRIwmBQr\n8Exo\r\n=AKMR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk/IXBuyrJ0GHlGskI5IdsXrI8K2eIr//svWnAkO6f/AIhANq32al68j0aTrRtdI8M88iN3W7RjQdfMhNFocwd72VB"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.587.14375.0_1611043917570_0.8072839972794725"},"_hasShrinkwrap":false},"2.12.1-canary.559.14381.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.559.14381.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.559.14381.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a6f8897174e31cb5a64f86947ec5da4695601ba8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.559.14381.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-4L4noxu2064vnsd4It3Jiuidc8QM/CLS4p3gVuxsTWhcfHbRO/41RUs1cbAzfxvSaSSySG69QgGWs3UAArJAlA==","shasum":"beb1f407c0eb7b6377359dcf5612ad45afe93b63","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.559.14381.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBtioCRA9TVsSAnZWagAAWf8P/i0FncAv6/53tYAIbrCp\nr6G9VeAh+QieJTPZBC4Vlmd3uHThPLR3vA63gG/qXJXJ5L6XMFjvfBVSdMzP\nQoJTk0iwYqqgmFvEb05PiRJrMgJY9FJt/3LYa/VKYgLyMNfU1f2mDsE84+qb\nPL1SyZEZSSba67CuY9+Xyd6xQVco5NHzPapSikBK+QfSZI87kMCIoFsq9vUq\nd5YtHGE8lwXOvYa/lxljO7OL9DZgni2xE54UMxWZl2cHcVRFpn82K7velrXP\nkOrsA8J0ABWVx2wdCH1/1k7LYBJ2LOnM9BFISIwmPqLIuUgy3VfImczUg6na\nu58TykVsndWDF9y2M4gb/2kzqnP8S+tbFf/a+Sz66bZ7/YiNtEHf9a9nnViD\nz0Ug6HLGv77QLCaQN3nZctkm6jJkN5XalXm8wq7BMsSIR0PvfjlMzoQUL3Sj\naX3a2d5RYf6Taqak4jmDXrP8Ft3q8GdyjSFgQbtsQ/jn8YZPFOmqer+CPLD5\nmmftstaUpAPjk7myycEoeL1h41dbJHhGsdckbtxqJhDbeuXMeSx1hX0dk79Y\n/qV+AbU+0me9O1xuYb6hpXui8BRAqsnpFuUd71UIv2WolKJ+teocwb1PyNXu\n4/gPNyIZJMpgu5Qb9tEkak3gcX9ygOLOBL0+OOLEvBdsDhoGrGU8sPSZNorF\nOnbP\r\n=udY3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlk3efgjnVgsHBZ9A5IUaEHXsW+fe8QuTcsQWXTlXViAiEAxLdfiYj54SgrBl469RYb1YzSx1p9q4rrvLZsYLalgEE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.559.14381.0_1611061415639_0.36235487054006654"},"_hasShrinkwrap":false},"2.12.1-canary.562.14389.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.562.14389.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.1.0","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.562.14389.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.6","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"68eb085a1bcbc23b6fc788afe22a3e872d77345b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.562.14389.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-IiYKRQiY4UYjhORKW9K0a5XfNYeEESEA7saa11y3kUwvnPQF1yXBrFIpJMZeuVkRx/mRro02EEJgxO/pssaqaw==","shasum":"e2f743da3a4593eb391bec9bb327a2bea07d3367","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.562.14389.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBy+MCRA9TVsSAnZWagAAmaUQAIxN8Cwd+dA/iwIgUgPC\nqT+3SdT+k7SdYN20z/30PRqzoKMNcQpGDi3jFaUiSJuMdQ/wDXieD/zpOEkd\n1u/0skm4kG0+7o2clFO9JXe1ikKct0c6hDnOEJTTSiw7LnierJrB85yBkObI\n8LoDw8zyWM3ZxDIMR5XGO/kzjIdJss4bj/ITcVaIkPFmosaNHhoPEd/yIN0T\ncTr9ywsd2D/ZdC+uA1RzdLutaiIHJ+w8bgciJ3YzjzUyMAiDysiJzQnpsoUj\nK6MabUrIm4qEctJwHOnFk0jLOykOubI648SsOqFq5zc2+3Ryc/Joph7QUK5q\nuXn1OX18mccCHBxs2pbGSHXTJVY6zwBsypJRd0yAWmznLVmZqG/1QTU8jpxG\nOkoHA9GA0gyJ6MhhERMbJC1FhUr7FzDm5hLX8UWbskT0Wf0QKWHpZgnw1dFp\n61XPe9TrfcP4xatuqJFMvO2QZoCpVue+sPEhqJoOZzxP0nVoUt28+uTUfS90\nV5qExcq01jm8oV3iyW4+asUeyaQ1pLxF9/mTuGAuHMlITjbESi1ROIGRW29M\nZULrg+TNQGGBEw2ThybENhrzdV7rsFPuudC7ky+BMumaQHBfg1I1Hahx9MJV\nnRuxZyAHZPOFdzknBr05bOup3xX22KCMYw4jnNQdKu9QrONNbi+njQhpYUTm\n1Lp+\r\n=Q/UX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUWj2rpVfvvzKdyi0JFI6kjY7mN0FTRgvk4crs/n7lmAIhAKsgFnK+jLUq8kXXxdLcv4uM/Nxke5IJQ/2XmdcEo2um"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.562.14389.0_1611083659668_0.036406564439506406"},"_hasShrinkwrap":false},"2.12.1-canary.488.14400.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.488.14400.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.488.14400.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9545d00033ff539c1682877f5ec9375c328c13db","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.488.14400.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-3aW8u3IZS6QX66/FDg+fVPOG6S+Riu+MO6nVmxVrqnbFW6TwiYDqGxfVcIeR+qxfTxhP6EmKgn1CAlBiObNoWQ==","shasum":"b7b93ff36d2bdecd50d2cf00e3dc564907a90fac","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.488.14400.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBz7FCRA9TVsSAnZWagAAVTgP/jG9njLNZ6AmmDFWWI5q\nEZko3bnX3Elz3jqDzpYu/96C59iOieORMbu4x/TSrfdCYP5tyOckbx/jbWEW\nntSguGYGRNWFihbRVAGICg0ORmrvje4oM7RRmUnJb06dG9Zx+VM/BvxJ4trx\nBxKTikJ1L4mSnRlaLc//w1ijRenVUaYzNpbDBJS0mZC14yQcGnznZHnyWO2I\n64CgZ0pcs9s2JH8P/9YqDTlGpWZoOauqE1OAYXUpw+DdotsTke79iZFZir7u\nnnXKo4YjeYrYrxV6m64ObxRfo0dpf9WfVBQJOAIIK0xWcVwaUU4sTHl+bKXM\nMBKwTW9/QI0GWBVTZ+Bq0YvHYQ58GdX6w0jW8Dt0YjJImC+HbHmqW3uMGnwu\nLyDAT2RtavM/SmBii2jMNSdxodRuOjbn1X8r540dks2Ra3hIMGmlW+r97HC6\nLr3RbtykI7kuqDhuD48SmQAbz7eX0ydR3hraFF6hAUgARDsI0meT5OGSWpHR\njl+ubEGcnlB/PoLCOuy0phRc9+O8GMi1Hcc720izcVEMLuoxAziQEwLEkvcG\n43d+4bzLB6uZe5/688lDXJ7ddtoSX/uclYK3EEmN+W6KbHyETpGDtOOaL5ph\n2Bft7DY230l/I0GzvfyksdBjN5hk6bG/QXw0UBBIp3bt40XKhZMN+DajFc2/\nhMTU\r\n=x3OD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCknhT7ctKGMIin5AoH4hmP6sV49KefB4tLWAvnixRYzAIhANGfZjQzN7B28/FTVA0Bp11+dy656tCNNkzIZTZcwdEr"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.488.14400.0_1611087557416_0.6769335709156552"},"_hasShrinkwrap":false},"2.12.1-canary.484.14401.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14401.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.10.1","@auto-it/slack":"10.10.1","@design-systems/cli":"2.12.1-canary.484.14401.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"61aa78828d0338bad759a36edbf8b59674c2c007","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14401.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-qiL8ZKEmEBr3RG62Gdgc8qEWwBCb5WMevAP1vNpf1DXAU8NfJ0QPO8ZbiJa+cOmW3G2uYtjRpi18eYxmRzm+9g==","shasum":"3700610796ede1a3a263f0e1393a1cb3cc7d5cf2","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14401.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB0C7CRA9TVsSAnZWagAAMkAQAIXISUnEIMYRbWBPkEcS\n3iZA5+BO7hmXvCcGMVYG0RI0zcd9/IosbR7GpnHfEt52SppYs7PmxMz+11Yk\nZRt7UAFBmfBVh12p01TuoEFoi7JSD8WMZlyUQ0QeyEVkZ8Mriq5r3e4vjnqI\nV1FvdsMbou7/OOHpgcVn21Y8U2jxpEoALQ+wKL/BP/i3LvWyy/e/Y1Aq8ZJL\naVb/YX5mrLJqE1fdld9rdMLRDRZxGvFfhGX+wJwqLKC0lFm8keGEU9N5oGH/\nTaUJIkPJkRU4wdh0EsnNCwSplSBf4ya7r4SOimTs6Lo5t0kIbEDfWKsiyw0s\ny1+olgqXJSZRCBC+vt4Je7XjedlH56TxfRzz4OHq2sMAPwf2bosDgWLKqrSe\n/Zk0WNxGSkf10XBbYAt8Ez15B5aOGSXHAVY6+aGqBzF7msXnNncKb69WvxKP\n5JuPCR8Res64GOLFUZ4ZRN89bqAabbEfxhX24qWqGXLKdPsW5yjRBHGWnRfy\neE7WBUgPxJ3w9zOBJrt7ZNSoItEXQq23jeaUa0v/YUJ9zKcQedWEzndQG70y\nGShoWWx9YpXD9LkeKfNCUzGMgfn+n8bG/ZbxoiC8Hprt5VoZKPaZY9jvtpOF\nfLRPMbRDDXKXvOum7knHdpZvzzlfmwmQJJySHYJ+XxDBkLAnvk2Etqt4ilzz\nvoBd\r\n=e752\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw68tnRsipVif5sspPZZ+OX+miHFtou+30AcI8cBXGagIhANEJWH1/xTIJZ7ZBoZ644yOKOp9DLoKMn2iuCH9a9GyJ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14401.0_1611088058548_0.9518664374072248"},"_hasShrinkwrap":false},"2.12.1-canary.474.14409.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.474.14409.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.474.14409.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"875adeccb736b064a96d0d71aa8c49d177fc05cb","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.474.14409.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-9IPqxBJvXCt2k0KJxt8KTsqUEBHEzU7sImno5lGWacZRxQlz1aSh2Fbd34tK/mQiKdPcu6iblnAam6AGQKV5OQ==","shasum":"32a25ecb32e9f0fdf875afcfda9fa62ba1aa8a19","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.474.14409.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CSCRA9TVsSAnZWagAAEIcQAKSqoKvIqaA1bG3dN8tx\nXFPDFCVx6O8UsU8ylICZL3cx/cJ02RBGYaYHzNS+4yFQ1UsKOJSVE0rmKOwR\npnzeJt3Thc3HqRWXVlHzXH2BtzyZjskXFRVVEIyXvjuvZnESjR3NtfCfwWFq\nTK2tSl3GNQHNKjW/lMQjciiYldyp3ktjJ4UZY0pBDWWFf4cDI4+8aWYEhDwA\npLxS38Zxz5kkpuj9+vuAQfu7A88DF9X++Ee4AesdDNIrmtM1P8OiQNjU2BIy\na/gOhauGVFjXIEOVmjIK3rwI4hjeUCg5wyTzeKWUB2CU0PEPgjB2MdOoX1kT\nzA1WgNasYm2wpSG3tE21p0NIP+onLPf4huL8K/vZuQJRuDqWJ/dxGUVqS9AI\ng3pLIcpOheAOcKdiFj8FxCBG+2lIbMZ1T8ETxWuIjLgxnPuZ3nWYwiywmrtC\nC8ITGUZ9q9AACN5xGyQFMPUqhLntFUtkWAmzf9L3ZlC3bT6MiG7G6rSpO0ep\nuZKiWkef0iinlT6pjvcVR996OFzjzIbQY+Qxt0YwuC0Jc0t6YcUqcf04Dk3q\nLg1Uqx11n3jB0dRGhg+rz8qiZpsqo1X7ffeyxUmGlypLiRQbtzLsdy1yVeZy\nySHp/wDszskzY2lFDAjRJk8FdKBPL5Vy/FyQUB/5TkRCn+j6TqwFs/t5JqKL\n0RfT\r\n=F3ym\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7nynAiuZcOTmFJJ5ZpcJis6p76HNm4IN6J0lzNE4REgIhAJcjrf+UxBaSvMgPMy/u819EXzKbkvb61HipWlHmRNzm"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.474.14409.0_1611104401901_0.35622433337397874"},"_hasShrinkwrap":false},"2.12.1-canary.611.14413.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.611.14413.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.611.14413.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"227eddd35047267b1c09a825ca869782ef7ff3fc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.611.14413.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-5MWT2AgzcNs1rtmfmw5VdnCHr2sGpsdrLfM23B84bQG5yalv+Cu+HHpbDgk/qoFlrnj5FRIBw1DPq81vo4k2yA==","shasum":"9edbea41c1e833f868e05fe26f7af4eaf79edb66","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.611.14413.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4FsCRA9TVsSAnZWagAALzwQAJYkc335+Vm0IUkaWU03\nHGSBEOB+5Kl+dcOru+w+2rekkY0TUR7zza8gnhCfPqe50mmf7ZsjSSMENJCq\nynQaAkxuSWlRvBsu55MsP3pj0qpbim7A/R0VYXqyfFB/kd+LB2dfpISMlBab\nLwEWcj4vlEb9V6u/UJW27ju2H3SCTpy+RI4bfZ/28j9Zre65wDG4uN3hh6dO\nqpRZoRd3sE41m4Mob+I7Tjvhuhmri/FAHCZbW5b9iSq/Uasj1SVObINLHzIF\nzYtyZanj0/moK+tpDhDmEdRt2cmXbfzXBWO5CPA71QARdlZ0a6BZWNFXVmJD\nPF0RMpxprjGfF04sM6YK95eFJCQo4pp0IjqDRhIY+diOAHaKQlkhvAwQZOBs\nh4GAwveNEcSNNkYWsnOA54WPXeF6e0XxCvpWuSu+6kifpLHVAcjiwIuVGumC\nFLpENR9GCXSNFJ8/ZIws76m9f5rUo00VSfR2CPZXUWjqxL49CMRIbBCywrBB\n5xCYQx9JzkeC0g2ev0KfGQUWEzfjYnbH43jBddeXxrsGGeuldY94fHPnWzRc\nKh+ArOkBdYwFnxNxUj5wLQvIwS4eQ46SzshB4pCjvbpiVFJA081aJJ25HNOv\npszt0y4TJ0qb4CZ02MSjy1mklKDleH4BbWDQ8ynb3am7ExIluBqS56VQw/wg\nW0Hg\r\n=SMmo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDM/1QITiOwx4id/HiJfsqCTNFc8wChD4+b5ZE8GX/gAiBundDx921ZeIrgF15DVtBKF9LIXD810LDCIAhd1INdoA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.611.14413.0_1611104619891_0.9498150145647704"},"_hasShrinkwrap":false},"2.12.1-canary.484.14419.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14419.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.11.0","@auto-it/slack":"10.11.0","@design-systems/cli":"2.12.1-canary.484.14419.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"253ee028261540a940b7ee1ace00235757be54e5","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14419.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Mp61qYU4DFuMzNnd41QwrgZ5QjbiXd+bfI7l/dYbstfpAyaRYx1yFXYQ0WfTp8H68AXQ5dnN3I9VzyGlzFylpA==","shasum":"84f70b0cde1d2eec3573dfa1fafdea74a54b895e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14419.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB5L0CRA9TVsSAnZWagAAu2oQAKDpMEGriNuibukLTOpV\n/6ImIJo8payJ5fFbFIjp18l4YYqSjm4FCDWASwMHgxrRrgJMRfWwT+swnkhh\ngX03cec7bXEXNNh8wPhOrov46dQrRKj8tHn6E2dGviu6hoU5ePas6jJMXDge\nhhgl+sX4zENnVZBRyz/AAgW4Ouu+AD1UHXWknDxZMT6AMAHcjVqF0ZN3eDGg\nqgqtjny7BGgbQ1B0TyOj1DvHGhDZ2REBH1iOZ3wCfz0mqbAaiYogspR8RleT\nbKt5MzXqfdwi3/xf+UIT7Tf8wrSiB3uDU/fJHYTy/7P5sF83aKSHDq8VbxVP\ndItTBJvyjztkXuyHpQ1lstk2WaJQmVZeOvs/X6sRtfFga5EmLyZsLjwihdVI\nbMeGp86PPJDNZkcjM34NKSSpVLczKmJIe1dU7FE1/ZD2fztVAJVve2QD9HHF\nueyB3vQL+BQ0neL7igw410lAvt/Vo+Vut8R/eZ8OQweRgsoZ2D+MHTVlrDJn\nsw8v9mvuoZ7y+hOUmciKtOIcPI7fUz7+nwihu/BThpLLDThfR7sNymdIn40g\nq+UA+8tlAuA5toEVaCIDHtid3IYQkhBk922BVNb34n2e61TZ37klXB+Tkysr\nkqitjc6K0SSlKESV/mpp1UJSoUVY3OBlhEYtjjr1bfjYu0Fv7ufU+FLtX7Yq\nXulW\r\n=Yd07\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWOGqzUSndIW8LlDcOcZJnEUmUS+9KkNr+zchZH8jZOAiApKObXtuFhoWAkohy/YgmfDKrCmzQhBq2XN9vUTEsuBQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14419.0_1611109108486_0.32870068261227336"},"_hasShrinkwrap":false},"2.12.1-canary.611.14430.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.611.14430.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.611.14430.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c1cfbcb87c0809cdc4ad805f6be65282e652f80d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.611.14430.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ccTCNKvQcgBzs5TxZGIuUYh6RZTJR3SOTeTNXZ98wwbHR+tZ4pGVmWwjgOsc6XVGkPQGeTxu6W2zU5MOlhsF/A==","shasum":"ca58db4940e9bd094d07949875e4b248b8a6d4b8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.611.14430.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLSVCRA9TVsSAnZWagAAMIsQAIAX6u2juKCeqcgtr8+S\niY8YWSE54Y1UA0ihlirAWtkrw/imv+JkaMEiOEF0nniIl2sOXD2UfOL0MzMk\nCGb/7BYASwGqQav4VQB2W/aIih6IvOz60vZosmZ5Rzny08QDO644AaqW/OUu\nIwCueuKh/aFh+76Blb1kfLFYbqi797Sx6MlnXPOEGnSdXHGjO7/rnpoWtEKv\nu7VuEdEncoNtMXajG6Avg+rftKPKkNFyiN65Jtf+jroB3ak4psRqItwrPAbg\nJ1OQDchuq+lFATvK/Vv6/E4mq3EuarIOeTxXaktVuBwD5S688pg1lOkBCSlM\noq+DMPb2A53pdgq7KpWrJQF768JI2089/hqUWhZjgoABGYdK+OhaRR1M8l+R\nW/HmSZ/dsRGBDF4T0Ca7wUJzP5VjWJw3mPk+vNFlbgeqfHQ/4ZYogAmXDbMv\nzc919vL++OIe4tSFPxmzrQsfCLGorg0WUmFV4i/G6hfCBhN9VrGnTgbmAxTX\nK7pmo+K01EMvUdN8SBeNdK7NFlZIFKr6nQG3iL4FrOr1jqJ6MZC/geas3p4b\nKxqGsH6gVktskueni3SlgJsfhitmGThIiYGGyavFJ+/sCuQFmQvO8VDjtBKp\nr1Wan6y+AuLCTGzaV7yb57+ocJf35H0EE0svFu+SijC88Kr4Y/WGqoGYqSVI\nDwwk\r\n=3ED8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPIMym5EidFAl+wVbkY2XH5jA0BjAc6Z7aFC8h4D2zuwIhAOT7Ns7gNK25eKce4Aid+OD8UNRga5ncdpfDBr18jRxR"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.611.14430.0_1611183253067_0.7660912827276498"},"_hasShrinkwrap":false},"2.12.1-canary.611.14436.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.611.14436.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.611.14436.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2551e58f9515e348216bd1a20a1278982802c007","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.611.14436.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-FSfXnHKA69tiJrXvGbwRapudlYG/NKYlg2kkUb2TX0a92DcC02r4c36/HH04DsqSiHPo+YwKT+KCN+Orhjjv4Q==","shasum":"47a1699b766fcd936dc7b8f8976e1e7402b94975","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.611.14436.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCQeZCRA9TVsSAnZWagAABkMP/0kMKKDhfkcusIbASIbS\naayydtl2UvWph845GRPO2alZT/3jMrbPpU0qPq1WOmkYQun+K+nWgWcJKezt\nPeYuCfg5PAEwWhSxQj6vQ01eviSY8PUjQ58ht47/FLSymw98Y4QO/zZT8RBd\nNplP+5/A45LtLrVAehAqpXWUdwq0No4hI0XNNG44Y1EvFuXbYTgqPtr/8lEg\n7zxFtyGLrMCNLNihH13J88s9ykoEs0Vg4ffdRQYNNOX05tHx8WBMFHPkWjgA\nwN01bfEoSzZb8B6HJQ4m9qeoBdq98CzEyWl1xLCETh7PULjuAxmjnSLVK9xN\n85/Wg7cdxVwHEnbQgHQeZKoNKDpuSDfYP7wddShMbvzBRYxp5tf1SyN4SEyG\nPCOepAcYBgkxDZcic7eMjygE9Yl/RujE5ul8oPVMYtCbNsH+2e7+r0WyAAqF\nT8VL5HKXQqc468gX5ky9QzaEVBuMD2aQGxo3vSXlEtArBL27pRCDMewQ/iBD\nxC93mzABBREvmglVB2IbyYVfcnHiLqtjbWYzz5GwLdFVC0efREEA4+jg0Lhz\niEmGVzsSJRyt2EH3TCUi93Wt38EJmo8gy/xxIFu+VgQ1gahmfd8T/DN+Vin5\n7hOUTPobSQZnL0b5SZ5d5IM8spU7C88YAVQA3a41DCjnI+B+90RL6d2TAjbQ\nrAI9\r\n=5iFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj9i04MrzjdCjRy8lv8vcgzAzegwbxjwNGWWE7pKvWYgIgGEnYE/2dQZKCHyxta6erCpin3OHkslnZ+R/OG6NmOeM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.611.14436.0_1611204505285_0.2503509087931375"},"_hasShrinkwrap":false},"2.12.1-canary.586.14442.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.586.14442.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.586.14442.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"05c9bd4bf68aea1ca8586bb5b8c42c10b1333b75","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.586.14442.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-+xKo3AlTVr9kCH/A1Rf4Cwxae3HEGD6TLLE4Q/xykb3UVUnIKZeG3WmyelK4JRwrJDlOJlyZSLTou1z/aUhK/w==","shasum":"071dfad67d5c65b64e9783f5050dcb77ed009b62","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.586.14442.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCVvpCRA9TVsSAnZWagAAwzQP/iyQm3Zbt4WAMLOp3zZg\nUGJwgHxM3rfRyz3iXwIF6kIBiwznNoHmAK/F1CujZ1GP60/BmGe5/mfMY6SC\ndGh1KyTNSF/xyr9Y/n8FWxAW0aQyMhT1VkEiqQQcdhLIxjrmFmtxj6TEmc3g\nS7AdxASkMrMgwi6OruImErJebsE7IgGdQhgveG14cAe5H7iEryP6Gqa7h/ny\nXe+y1Ox3UGIjv1iMERnjj/B/nbvdTpLUuc8IlDvv8wvTcLB94bCPe9MRYG3G\nmQ01bemtAjrgPX172+mpfzv9VsBLx8QNsiVeYwrysaDcc3joClBkMkk8ufkj\nyBXXWT27CosUQHpw7dYDHIMVefMctTOFu3OC4KNcM635XNexMFAiRjC8zxMX\nPHUlR7ESjfnXylFq31322eeU99CdrSKGBBKWt/eIf+7ruRTj/SuLs0kN8W4b\n7ew7pTMGHat8CbcecVodwAgHF41Ho2139yzPtVkkYOfKO0hXcU2FZTY0xXU0\n0ItzwoO5+ppz/dZyjC3cwdbEgsrjA2csj3Dj4hjph9owPeirxQPSH6znKpNy\nMK5L/R+xqi80K59zmMufSGPXhn4AcMI/+5c4/zoysK7c7O9o0yWkf+1OYhuG\nbiPtJXatIuPQ1B/m2q1aKzkBJ4dnNILOvkOEMsiiWx2tSD278z0Iy7/oMfc1\n5Nhh\r\n=rL6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMaI09XMuqMtoLQLAv8cmHIaw+LdNdnHf2yFl+hl2XZAiBSdZiisO5Zz1HeAhAah+C8RRvYD5MNVI3mi+MUWq2HPg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.586.14442.0_1611226088625_0.011476669297609599"},"_hasShrinkwrap":false},"2.12.1-canary.484.14448.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14448.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.12.0","@auto-it/slack":"10.12.0","@design-systems/cli":"2.12.1-canary.484.14448.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b4d4c8dfa11922ffec770bd954015170a9e42e51","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14448.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-j6DXvazjc1py7lzJ1iwI9kuDkKVKsUyD0O93hwELIuC2ukOOO0axRFcpYqc4vOjWqk4T2/g5+7MgrW+mVYnDvg==","shasum":"1f65204b43650baa22c036d8ef3797385a56ae24","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14448.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCgLhCRA9TVsSAnZWagAAZPAP/jHTQgJXpNbaQOxR9D9C\nx0KAzMny+KFOsdLsQhMkiFLAbqyrlrdJQD2lD5QOQnBsjvt/uQije2Wa4Qbc\nbSe3jM3p8A4tGOcLY1JgCQhm2isjSpqWFpLXObx1tJwXxwOnERukWwAU5j2T\npe2c3Fq4rUqVoS83Ksk57MpkkI141OJInaVaVllVi1TVdeOKRI7/f20Lz//9\nMrGM0jm05RUvXt4fjbEc/L0Ynr6OBg2x6Up0KAb+Wf4V9g9D+629T/saodmv\nUisXOuujijzIO8znpMYLsnirshbGNT50FfU2D6bVVjA9/cNScer8lZXzklqo\nQIYc/Qv9MBGhJxrtAhMUqsDs2augbQ/ayKH76a27Z+OILgKO4alUSfr0MUk/\nIz18X3NVrI/7Y6bv1mPU1cSVIg58w/uYP1jigoRpJVgDb+vy6j9WpC2w14o/\nK9VVGWdumrzqa5S0ZdMoN008AGUy4RhHCRSEhnlJsflbZ5/cBwJcHiHC6KUB\nYYx29Db1ogw46OU8pq7RFolQu9xJcAxshtqXsFsbAjDIr/Y3k1WwAdONRWy+\nRQS/gK4hkBay/Ssgk1ZgaOtfexFm+HRRIeWgnp+f3lLLVVDm/bl0X/BImR87\nDbsQcHbsJETQKIPKokIf0vg8Z8u1dOakEUG9s84gY+6aj5VJAcqIGceRvjG5\nSz+9\r\n=aAu4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoanpUKSj55/bW9rfGMXZBbFGMf6ERdLoQhXMC2I3jPQIgZbS0eKqXwzAEAW8Bc+1JYmiInkd+GDxmnGkZzwjs7HI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14448.0_1611268832879_0.40328839489508095"},"_hasShrinkwrap":false},"2.12.1-canary.484.14454.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14454.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.12.2","@auto-it/slack":"10.12.2","@design-systems/cli":"2.12.1-canary.484.14454.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bb458efa9c7d766e08be1454d642ca0668cbfdd1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14454.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-zvCJL0hJeus8qs8qfMBmk+OuJAU4krW6j/w1W5dgOfOy48kPfipJSG3KQVw01sjFkHeXGmUuFykwidVYABstag==","shasum":"bb0bb3fa9c716c5d2febad3529fa63c9f6393340","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14454.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChPjCRA9TVsSAnZWagAA/+AP/1e+Qw3tzaWFHEFYxXhC\nep7ZSgM5BXRVGlHYOBdgHtSI5YOCdINj2+GnIEUjHISChZONBNEa8Y0XdZQw\nP2qc9HFDnMUJWs31h1dqlbQmmYV8i8hnSP6FxvK4s3PB1xCqBTxxcV+ek6hl\n5UltHqMoFHZXZiMX3BnNhXDCgWMx1uzmOIGpR6Eod4xtAEXyfwt3YbPc/tGe\nqDKa9z4CanvmutY8xROXGke3MAuqIlWq7DVvp0wDiE1gfnvIFJnWE8LNy/yb\nb7OfbJzDSpRN+X77aUVY1tajsFx/hIuL2SfKq7W+pB/zdlMze/E42IIucEKg\niVp1BXaXM3U6XVqnHF9cbX8rJCiqODujWjm5gEDmDhdZnbZndI9GJeFiYN7Y\n+N1T8DkJEW8E5dHAL4l4zunL0y1xuKDkGSXKIdfA8nrOyh1ptc6FqwEyVmLF\n0Vnf2ZvxcXVR6+olXzW+IEStQfOCxtHanK59c0Kh+ebLbRLHmxjeyqWjxwTv\n+iosCMo8dZwRvBM4/4wB8GNfk5DAanu6CTG2oFDElFcUEDi1P5NK+dk7hO/p\ni1yzHMpKuW8HBfzzGriim5PiUuteTnIZwwLvFYHyx6m41c+L94RoW/v6mqz4\nxCDsz9xE2JIu50nqRYz+wcnlUXsUHXwITCaSmiKmeKxXDxDdxSNyq61agmV4\ncP7h\r\n=NTD0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6fdLaK3YlDFTRgp8qqHjTXW+TGZu5PuGkcJYTKWpVfgIgEm0ieaFrw3TOasviCy85UoMdlE/U7vRhkDp7s2AniFg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14454.0_1611273186750_0.19273687840196674"},"_hasShrinkwrap":false},"2.12.1-canary.475.14460.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.475.14460.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.475.14460.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"123638ab5847ee430f0a474f5a160308a1de0424","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.475.14460.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-eKFhID9W25arvUvDBX6bxgZti+6am9OGfRdI4aAyERPCV9pYgZvMej5fxll6d7RQCrqbKYm9h5/Ykb+Q8J1tbw==","shasum":"845c0f9a827ae8006fa558a49ef1438d3be000af","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.475.14460.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCpz7CRA9TVsSAnZWagAAUnIP+wdVPYU9Y+xudByKPa06\n968Fi4SFg8OqA/U84fQJuF7zmprkbeFfbEHMUJf5S9qZV0uTtwZxvW76GbA6\n/9grgRg0MtiEDM8CIIvQT00burz7TxChNzL34cYI8Y1g00YevGCaZAjaDwd0\nEm3hcoQwvkrulleMu/hCWP5dpOpqZC1gJKahHxZK6SkIErXfHELaz01rwhtQ\nkebVQQqlcKPcr6T5IEijwzqaXuaXuJZEKHYNh0Ro3EsAM1MHExkI7gU55Egk\nDRbPSGcV9a2PCxWHHhlRipUQ+TIET2QYM1sWRHvC53DbAPWocIWYEkIbRWL3\n+TtIceazRUdrZ+yozi1Ut1ROaeTL/9s5JqLE7RIrIR9+tK4w3abwrcMPZqfW\nJW5cUpLNt3PgXV44VMX/vOhomMMqAdwHve6En1cVS4/ofdMPi7PHL8iwJkTu\n3EcBgYNI0xAr0acaGG3eVtQb/MiZly+MPT4ysr+aWD/9anTUH4pdTdXTAFXp\nygIhGCfFR74xRiFAgwGJj0cANVVU3x7UKWZLBWBgEK4hPsDylk8TMke+tV+Q\nIvbqcxN+idV9r6fdirgHxGsfjukZx7e7X344X0WsNfWM1hBs9DohnFxEFZoo\npw8t7gLlxY7MdnuqRhfHX43lhPV0H6Vf7J6A0CNjytEoQcT8gHTRN5HzbQBf\nuTCL\r\n=iFRe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC44Kby8x022oogAvFTAH7oACSscgN650E/3KquTbg+igIhAJX92/WQRXKAGfnAAsLl291dfP+GV/qlHFcy/IJGYJ3K"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.475.14460.0_1611308282515_0.9370000613602785"},"_hasShrinkwrap":false},"2.12.1-canary.601.14470.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.601.14470.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.601.14470.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6e782592cc25dd424e9f4f6f079307ba3b248544","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.601.14470.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-xpU5uFtgBRDKeC2wokkzyQOT96Xz4NPZnPd2GYE3q1VE8e9PMp7VHVbZLK6gQcXkirwG37CBgyd9yvgW19A99A==","shasum":"0e71be2fbbca06ac4138258c158e1fc186e8e087","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.601.14470.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCvFgCRA9TVsSAnZWagAAYKYP/22Lp/y2qxE8jbU5QEag\nN3YZPkscy+Lg4TB+uLAyhzY7P4j0R/VA5puWNhqMboj4XuEsfU0fMTzJ7Mld\no69p4Psci838oGZvMbSUP4g6wJBDm2ytWznBfmrXm8a07FHPmjipSYXsz+aX\n8N8wG9KGjvh06p168TDqrFAS4BttLMcuDFvu+qL9pIN/N9Lw3LSklluZpVOX\npmZtZgu3V/MumeEP2awuTjD1P7nMrL3FQx5gmRDz+yhIEfCZFYCUnfwQYF7m\n5xQZqRii78fmx9on+F4vNJZ2Gq6K/Xd49TQVJaVgndkytqr1Cm1HL4CRe4Oh\nNw+xoUZLhXYjf0r5pZcKTtWr92VbuG3Pg63A9wtl78jLH4LEwlYeL8PAazK+\ncP2MqrVx8tDIfs5QXqkmWivfua/rq47/CeNinwk6ZfmSgIuw/C5B5UPVmZLK\nYL0NV40XtcaawZfbfgzBVQ2dxEsVUaE4adPoJIysH7qf68WaV9ep2UPEoCEZ\nPEBe6aDayQ1SGajhRY0gb6SasL50UvxWQKPfNHqxXT0aCs58KBLZCYZPqSG6\nSq3JqdvD+88cWafU/aILj9E39/E8ZM/ZL99n8EA1AkCy5tZdc+5KuLrM/pWO\nWFWCzVyFEWImJJEuJkjoWMZlUFLLRVSfhz703CqhUgLjbshkbGfdAlT63Gvx\nNpMa\r\n=CHNv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDAGx96ifKeqA1E3xzDg+sxIgCRbJwt3JDR/GaUVclVgIhAL/vbvFaYOPoIPOc5/kcdXGnE0fjq5r9eBJeCT/fJXQk"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.601.14470.0_1611329888508_0.9340397186301579"},"_hasShrinkwrap":false},"2.12.1-canary.481.14491.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.481.14491.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.481.14491.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"375738560b8c7c906123fe22043801785df09fb5","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.481.14491.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-xwwaJZxAVamXYLMDkVcp0LnDiSpdJ7xzTJEU7c0riq3tT4aEok1Nz8XB8WOV8VoXnKunUyRz/m3INYPeQ7/jIw==","shasum":"b5b59f01c66992feb23fddbb0559ad0f99180121","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.481.14491.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDNhUCRA9TVsSAnZWagAAM4UQAIfZRPNY/mWQvCTczcar\nznGXSdTAe4rn4B1wyvkm2Eg32B8auzn2lStiN/lgvkqtt62snhOEvdA0e1jB\n++MZkpd+vIEV3qkZ3sD8nMcClgMpP7UAJMf7DzyTJ5iuMzGB+wUgQ+OtusCF\no0/y2gYfYOL6PAnVE6bVrLsv5YeB6glVcyIZtTZxL9OCPn5UQRLLLT7tz6Al\nkpHXjTem3tpsDS5Xvn/bamO1IWM7m+EaE2wcP/c0RSfwCpV68eDFrBafycz+\nDYmzv4jlyK3bXodEubUwmYvxRqTwiNMLr0gUNKGVLtLu6qv8PQH4rgPGJcbH\nNbOuSZtCBxTtrCaOJ0a1z1Pjzu9YYhtEexg4aIEmVIANhykcJ0IKNvrfBub9\n/BkPxWV0/dSX9j8gdCTMKJMSCnW7f+fZepAIs1dqnQPF3d5BNaX/27VyPp9X\nrm2o6B+1llWtKexzDPDfX0fFuu3S2BcarTW2ff102bc/Vd/8GQtFGzsm+//M\nkNPfMCOigmCz8RZURvTPRek+yGYgE7OEqxQdOGmi3RbA5pe14P6lJTdBVsO5\nldtYe2jUcrrEHS0ZE/xo5N/Dpe5JzXAQZk5M19CT7YW91rReS72p1eQoOIq/\n8Pyzdy+6f/JcoJlQcQCZYf2b2hLt/KaTUjo1u4KXTadvLtS41bbMS9veIbcC\nYANa\r\n=B8M8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBKixA2CBfjAkyN/RnPPpGCqNWH8xaGGXG3TuC3rqCAgIgSykSeNztmPh77XmVG4dzvE/4ATme1S9b+Zorpx9xA3Q="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.481.14491.0_1611454547503_0.8190806113673121"},"_hasShrinkwrap":false},"2.12.1-canary.484.14519.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14519.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.13.0","@auto-it/slack":"10.13.0","@design-systems/cli":"2.12.1-canary.484.14519.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cb5a30c3113db3deb440e9143f4b01cb2ed8440e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14519.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-rjVMeA1W5lUO6aoNh7OgFZ8Kzn+HztOW3HAI7B5MUgoCIN23AfiamNAHtK38JXXpXMQiAm/RPLni/JA+7qeiIg==","shasum":"888e1b2b64aaff24c06b280a1cf470066a91b86a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14519.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDwqTCRA9TVsSAnZWagAA1+UQAImAa7z98ODb/0bEuSuI\n54cN0lqO3H7U098ZSmYcJBLLS4Uh4kxvMKp5DgSaM2ItTER0jxHPyj1XLhJR\nnNn7qvk+7jb6oAVCcXic6iRF53uFP2VF0rwAj3/fAv7rXW6mnPQe+QVvzm1S\nojSBTQTa3KGbNc0bnJLvSrzau9CvVLtafFzjSVsqq1waVQQektf1C8fjBeWl\n2G07wDMwInQpE6VRFIFmt8QBeiCEjKoYjxi3mmFxgUb2izXxUEIKnVz35v8F\nTR12CsYO1VWVaudtSY6E2AUFMj2vy1F1Hw/uYzivrGXLUjixQHgg6cYv49SK\n6pZ+kx+N83RQeR/H4TY3SHWcR0Rmt6g2Qw13j+nFoYV+8QbssUHpKjQpfHMP\nOqRMDlBXw2JiVAwok6cwg6S2IMVievzUlQV/fbVQ1MBVgKUaism7KgGf1pdY\n8QhYsXZ1NlXBa0tMpeOYGIGM3rtr4OJt0o1EDxgZwLDCWbY+l/Db6sQjYakH\nSWOLyWSRW7Bsevs9tYE7TsorQdeYH87FlwChfxktftp0bronj24X1CvmGlbN\n//yqdf7GwbprpUkxnDm82/StCCMoVguoHN7brnah1hGIncPb81vC/ZOolwLs\nvlFdRgQ5O4vaG6JJpfHX5WSl+KewFKnF/nbDD6mht3I6B7BmAtYAGrsgVbS9\nw8na\r\n=a6nK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA25oM0z3PEabweuX5ap+qVcAo/LITjCcBgUc6nEKw+LAiBmKwmVjlOCl6F8PPqIkamWpiguXqG5zoSriAhNVDI8WA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14519.0_1611598483187_0.18878969960128256"},"_hasShrinkwrap":false},"2.12.1-canary.484.14535.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14535.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.13.1","@auto-it/slack":"10.13.1","@design-systems/cli":"2.12.1-canary.484.14535.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b8536ecadbf4c2a6cbefc0dc96a1ba9d05f826d4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14535.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-zmO/xj/gD3GdTEjH65GHphs1+M/7is4x+TkL53OyaO2+nA1Ho5CJRTzMaoEaERMlaEb9uYn5A4oI2a9Um+Tv7A==","shasum":"e4c1087d2b8c923b5d8d20ab22b6f3ab89e0ea2a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14535.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDzQBCRA9TVsSAnZWagAAO1oP/if+cVhRw9M4wzji+otG\nxddxoV2AZIDXvy2QRrxjv0QCr/l0rE6LqypjqUiUzxoJ1iS92FKh7qR3ndNV\nna5BCwT1nQvnjuGkq8AzAU9k/0Jbd8qAJOQ71Ns697GGnsQCzK6kJDvJMB+Z\nGkj1KrjgJ5ZgP/zirHg95kCZd1JqRbmEDCG0JU/PneRDptzMywGu9+jarOhB\nBi5fyiW3rcY5ARPc1zLdMF9/zndc501VEWDpINCGd2Smh/H3X3D7gslyU6qi\nOlZa2qkHm5VtKvBYmbnwHN7EMTjJydACpEZaG6vyasDwkWNzDgu0Bt6rc1B2\nwT/8ns+fH+kyjsoaNnA9NYlTyl1GzKhj2+i0Pt9/rvxmGvevR7yzR0D6h715\nZAVhE31hNhjIWh578rr0uAfpx723P9UApXe5x9O6pP8BewhsBd4piH2/0xTE\n1cna3g3icNSG7zXkYOiG8cJqWhObwz8xaQQITJmY+FcQfrSUcoj8xRrZ1Ar7\nl/Ri5Cwatg548bpqmWEE4TKsLQT/43tXv7M5cT01M78IXAbeTrWJucZM7nWc\nwgVbKxNyjB2pgMNEx/xsEDgnBXpFhqKxEsXt1KDLlqMNWtdQheJlsdL7lYjZ\nhl+I751gQU07PLf2cugHweHmyHJFZzH6e6DCCoeH7gBpgk9a7TMIhXy3C7eD\nSsfd\r\n=O7gq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFatlHOC+UnhAL14kgUgVj0RnZYS+qDIvnRdkldVUofAiEA2IrgRl38cxteGO8Yw4J3psLF9zWQy0EkLsn3dOabQ9M="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14535.0_1611609089149_0.01998031577964765"},"_hasShrinkwrap":false},"2.12.1-canary.475.14536.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.475.14536.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.475.14536.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"58774d0e2484f736d9fac39f9fe5fc8055a60b61","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.475.14536.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-vPECJgUW7cmDkWeZ9OJziGx8dhb37kmV5ljJ8HaA3N4BbF8MLVJc5z2Jq/CPc4QcdkrWC/5AMz9WokCjauCFVA==","shasum":"434a3c48bd9161118d97e268e48df6fc7b7133cf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.475.14536.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDzQpCRA9TVsSAnZWagAAvDkP/ilDt9ulYXqDhEwxF8Ek\nL6u+FF74vyyCa8VHMyLhC0iRhwYul7Jka4386wyr24ci484glupdiE7Cq2pu\ncBLCW101KNIbKY2cX13DMo195MqGiX5UsYrmldPBEQnwawNteB6QoEeY+eTU\nCNfWOWTfY7gyR8SUz1G9mXO2IeMF5F4vGPa0PStpF1EyqFJyg2EBbYoO/2Au\nG61+zxqkckkdK5euGuQJmOIr7+6jGL4rlakchg2XR//nuDfUYKZVACMePku5\nikSzKMogqBuIRuM5SfuWstSgEGaDpidiVAVYF2wh5saUcmAuv7Nya5B5vk+7\nxPpc2UKrVehYZ8WUP3pqovkQtx/kdajflUX4+glPjk2CMuuERuSaC/VOKEV+\nj5WOvXqfHbCh1RLtCdh+pjbL1Ue1yeUXcMxXQs8roACXd4iVECTlzbyiPhI+\naL9NUxNUOqGJKNz94/wYZDIUriz5X+iRbVenaLEtCNZ9OUGoCKtZyWfXJG95\ndDCfY12TuMvNHwcm9STAnLAXa/1qyau77LdeUyImZ/b7blW16VOjeTliNlAK\nlVAigElRmN78I5Vj9W2zFjY0bQxf8IROdMVBTfwfQJdCoDmyzgemD7T6tqkg\nc83udzO7pJFlGaP9t1APKD3h2MRRrLAnfi/SknF8HVzzEJs+R9wCZgo5Zy2k\njsnB\r\n=PAL3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW1OnodbiiJvWQgfufJI0l9+a4tm5zF6++Q/tIMg8pOgIgTFkdVw3coOc/cSnmuEfanIdCyeAh8DHIWwhavrYjI28="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.475.14536.0_1611609128983_0.31464147296220335"},"_hasShrinkwrap":false},"2.12.1-canary.484.14542.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14542.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.13.2","@auto-it/slack":"10.13.2","@design-systems/cli":"2.12.1-canary.484.14542.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d2edb48f3283d74608c7e62018c729f2fe019598","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14542.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-6Jek6abTO/iF20zK7jiKo7y5BBrvJWymjI8bCYAYw4rJ8ZncPUppebCRjiobgD79OdMc3KwmMBOBNCgF9NdRbA==","shasum":"76b3caa8dd95ea0777f72674bcf3fd9db5d06fd0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14542.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0IlCRA9TVsSAnZWagAABpkP/06urW9h0hqyZI3lAl7n\n1B7nJ6U3em1lLJg82/PZ1ZVKF4+7GPKPPWjqVZdNfF8uExDAXPiyaKsGEn42\nwJvFyaoj11jTAqjV0vnUBReg6n+KcXvyaoteYn4QSbIqjFtHZBQyi/y3y4J4\n7bFzcO4Tn8yUs2Pz8sxVa6nn2uzWnCMibTUm7dzXbXqrKAgU8ZqrjyKnorNF\nGB2JWbRTe4PF7TNipxPE+JaN7j+tX5lc9uC4WtL37SMHWbD61S58IN3gsn/I\nlre0sJzt7zIJ/zrdXGxbT4xY9S7jBH6HVjg7l9btTtWFdKhjUHP0h5IHpH/Z\nZDZRnmy6PCoh1BynY35SgiNHdgJZadzkKldmvt0n9tsbdBOFslKYXt4qzk/h\nMSV3fJZqc+uqBbrLMAjOj2WJjsbp9n0liDdeyEtUe3z9IRm16esV0POrPw9F\nLv9oCWVVRYPIgPThCfVBPym17PCth3LqXLUfyfiqoEnvj2rblXh5dqghToqi\nD1v9bun6JIAdAeWeCOLqttEUfo+xVIQ4Dc/wFAERe5Nwqag5CIBNGXR4dfft\nOAJau+a6vgcKgHAYZTUi/rL4SCpvTcl0t+iFJaNXEiIhDrFmvg4fx1g9IxGZ\n3ewd51p7nwWxb1hxsIaU+/C5SIcj+bAiHy3Pg1M0666kMJZM9xK1kXxrYH+p\nLZbg\r\n=eR1f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBl3CJH51psN18EmH0QLnK9OzRHezHGEWhOvaSO3a90GAiAhpFwimp0cVqmEDDEanCzwCD1abdxlYpOk3mOUP36OCw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14542.0_1611612709417_0.49778245504327034"},"_hasShrinkwrap":false},"2.12.1-canary.578.14548.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.578.14548.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.578.14548.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0f4b2c6800190319854c736a6ef36dff7e3ce529","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.578.14548.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-g2ZEUSjaOrRKzoamOspOGvOqFp/DsBq0UyzJT8lxVpoY7BB9CzYA3uMNLOYRfGlwdA4SA1xmvfU2AYnGQLi7Og==","shasum":"c2e99ee59ce39f3db237fb3d97a3becea3aa6aad","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.578.14548.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0l/CRA9TVsSAnZWagAANuIP/RpVgLaCSXesYIYBS6iI\nD8Us3UCC250SxIu0uBMs8rJwYgG30orkmPtpROzPthWRUWEnm3Y8fiYw0cWm\naI+sYlABJuzSiJesqdIut4PIuyhNTVcaJuDzEYCVjf3hH4gDlkVyV9JHg4Nl\nIHsMK8Cvknjtc32YV/UZBXsTOKpCZeXxxIGHC1Zxpsq6XH1GwCZtrznS4Um4\nqrGtzb5V7FsHgG+mjoB2Ddnkkbv00AXnTxKbRQHgNKXN0pY4RJrjx4EZKH4s\nGP94aYFbSj10XxfpzPN130PxvHGJufWUnrrN9Nbqt0M3CMfQclKa+LCpXKun\nlCr+Ix0vcKzK7BILUH6e5Zz5XwXTtW03r90dGKWDyzI5vhw7KS1fkuYxkBKz\nuAbNRUO3mMQI503PBrZP59nWbu4JA74REFJXi2s4VmJTPB6J8jHdUXoEq4fV\nPswQfY4iBUMQKA2s2bojrtCko6oIZp5oxaYJu/fVA1Zjo2bDg9X9hvg8ik+3\nw9HxMXZV5bmcRnbFiLqVxlokTr9VOT+55n1VIJetQpuAyUSFg7V5XQcYylqF\nU0o+QI3r7zEetCR327UdfZLd6JFwjCujB0/smTCS0cnwK1u9zg/jmk9r0SI3\nggkVrW1Al5VxDnjrY+I0XmTyC8YK7bxCiHlx65Pz7ag17N1PQ24Oym6RWrf1\nMxGf\r\n=i5aF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwz57wvg+qm5laZ98cnml12PJE512X7M01e8hKYGPlKwIgbNij6FIUWl/W3o72puELPwD7wApPfUgRH6WvvOq2y00="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.578.14548.0_1611614591142_0.07526155830995296"},"_hasShrinkwrap":false},"2.12.1-canary.527.14554.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.527.14554.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.527.14554.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ea91c4abc5dee464e9943b3c2e28989b1badf4b3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.527.14554.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-66TOr1/3k72qkuSk22ShTj2JmTP1vL/yv+7O+gKjZSRqHIcUL6sPOwez69cpIYuca/a7n8cHGmkddlKB6TS+eQ==","shasum":"1be62d8767034f3b7739e3b355a2ea510b0f5661","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.527.14554.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEDFYCRA9TVsSAnZWagAAdjIP/28IXoJ/r94rjGNKoV7R\nRNFeammU7/nb/uA9irZjc9ox7R0xPE94UWyZvhncD20kYxdeGHhfAhpBh7/q\nO0P0qkq2QkaoQH9nWFe16NMYW30zxtOOLsboZsJvCYVRH2l7XabqNJhge753\nMbYyAUpCUkpnohWcPLj6bZNjkPpsoH4J1a1wl4CS8gwreD5F6aQKu6QZ6NXG\nBtcsq0HGDSE1/75+sL4KPGDYmsaC58aourbk+jQW0c88Gm9m6zRanPZblLl5\nncj730dKj1ms7zfbLe6XbB6k5TMsRXrZCC/dX8eKEu0ogHmEKC1qftsoDViR\nwO+ab6wLydQ3D2mEt8C1FrflUmJKdtF1NBztp8WI5y6hhuLeeEcArXQfJAVt\nI/4maqPVq58pG32EM8Szm5YMwK5svtdXZzD810GrvNoFV5CzNtIKuHk6o4zY\nOjOcCx/DusebKWh2B7UgqxI7fNJ1SY2Vt4GReuXlgeM1MzuqAjE5TGnwk/nm\nInC7oNnOHZ5qkCXi3Y5lbAIDDnvgoJuNVPnuQqsIaWcCe2Gtvpw1QFHjVicr\nPJWy9Bs+daEht+vcTDG73KRaW8pDGRQtWpZLRM8RitgycghiKUTRHyDMmHdo\nf2p0yJqKJQnH7JWRR2JFJqdYi2N23aLNenrvnqrCdlQ/JTON+Ir3UizHRWlX\njZhG\r\n=B5Ot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHUDQIAieD7Q3IUMG6qhGPBFBXMAuvTlwCLTUHtjU6CAiBEINIM4ejPJqP2M2gxX75v66NxJVcjvWBAHpq99zvxGA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.527.14554.0_1611673944181_0.9485316212040709"},"_hasShrinkwrap":false},"2.12.1-canary.553.14567.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.553.14567.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.553.14567.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8ca688128da16735ad97fce7909444ffff2bc5c7","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.553.14567.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-JJpbeTOZ0kY1DqTAsuPUjwvh2IOBQgxZo+lmlF7cej3ZEM0MkDF2QeOUHDcPvM2E2iHBjmy4ywMfQA4qoIf2yg==","shasum":"24558a3046e786beaa3c8729da50f5bde2f1e681","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.553.14567.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEq2aCRA9TVsSAnZWagAARDIP/1ENtkRlIRCDx4vrFXRn\nLOTPTFQAhAcLtR2f6dWX18SOWwRUqdrmRXIdotL0iufdCsNvbu676G5wp8RN\nlIuLxYmm1XtSOvOW9xxhGdswdx6UPo16fx1RQXOPTK2u/IG9aNuqVDasAhxl\nvNKly4GRoAjdsJu6+h7H0zmZfbSlJ1BDgwoDhGlaS1mxSAB75vxjR8/9jYnu\nT8GcZC9rIg6MgItYfDJrQ8hRUeFvJIUIgtID7/WI3xWfpIZMZJMsNOBXDun9\nKX9GnIj7ppYer37BiklUMInSCziPAyQ7r/r8qS/RvVi0/Fb/OGOmzV/5P4kk\nAz3ucm3waizxyfLAwyQmah9NLIOyVrI7PW4SxQfrEoFgf2o54Q9G9xpUuFe2\nm6y/8a2JisJsr7cJRVVyj67mxOjMZVr5dZ/5JM9IBYzbmY0n3ioXODoniP7/\n7ARwP/na1Le67IutIVE4ljPWe3mz0w+MnCJ7Qf+y4veeZCeU/MFWanPDrDYN\nmCqZDMdSExaQ7K1jgwHcIaQ9IsD1UAjwW1sutw8VjDUoE7ooUIR2JtdOFwBT\nhFhKg6qG8KXJklvuRrcVwiBulrbqMwMJpK8WdY9BQI1nhi6FiVfWf86spe7r\ndjyKyIjw2InZEtGV4PNFW1Uhwudf5BZlF5sli9vyoEXSOpuZOSzEl7HcweLg\noDsX\r\n=v4A3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwTLT3yhg0ef1+ZtxJpsKyJb9lRgRXtMGOmh2WNvZQVAiEAgEcdmsZIYnMNGmwP9P0nR5Mq38Hh+ThUs1YmnsQZXU8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.553.14567.0_1611836826349_0.15693824594822892"},"_hasShrinkwrap":false},"2.12.1-canary.484.14573.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14573.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.13.3","@auto-it/slack":"10.13.3","@design-systems/cli":"2.12.1-canary.484.14573.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"13e712da8667187e16048592099226428a357d1e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14573.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-OI7p3slZJs8AydwEMkK2xgsEnS6j3XdN6K3uqlqbTnAaeX5BBLhE3jvquwingp50KFQOHnnl2nuQJ8bFbR2gxQ==","shasum":"fab59aa7dc98feb0130af7b6a531066a14317c59","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14573.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEwCFCRA9TVsSAnZWagAALIkP/2R3+9RcSxC0FHePeER1\ny1G6Vh3QqpkMlX1kbI9x1XZj8tW0C66MFAnslG99mcGmS+TENjmnO8q84+NY\nzqKPD2rzVOuQ9kYFdcH1OLt8qtDGXHq5+eMv2DB5wsdOVX8ttaT929f/K7ns\nUQ/pFN8egajg9NtDTZMe6QwI5V3AzN/MVZReil2FVrgXsih2nQyf8TdwVdg5\n2JyuZ2tPPXd8h0z+giN8jFiETAxKhOGwB2zhnGy5x5dBGTrJjDIuJVBXP5/+\nq+1hoC04msIjv+PY/AsBKoJWouQ9e3H+0FhT25XakQcRjv7egzq+7HH1Anjf\nx8sePR/jDBpVyQLpKBo2Osc2/OR0lrAfP7nAkOx6gvaHm8quTqj6y7DLSX8Q\nXTCoLT9Z380NiukBuTz/AHZcSwPy6wkcTO0CmToz64afBmjlIenxdbd6mARX\nMjbaumLouqq1w1hHKxgXNGvbyP+dKpAa4AaWIZPv2r+lVQoHvpo2MfHczvif\nvWCAt55SzwNlJKdDPj5vtqgcNXJ6AOiA+2XgNiwvagTBPHf75UfwOgsSySjQ\n+H/z43SMYbHKyLxNgRp8i1a5MtMBfrtO0jqa1+wTsU2jEXrpbdJX8FhNKOLE\n8dr9GwBbzcRUuLzByakyXfs3YsG0OwnPn0d5FMtOMjhAoaB2OqHumCTRE6hs\n2+/P\r\n=7wJB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrTFzk6rH5k2fjpuE/HSwqku1qgdX0xlVtOBlT+uYtkAiEAjoNjSQVJyskgy9liO37jCWFo5AzjED3yvaybOqdtSJU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14573.0_1611858052733_0.20857235505408078"},"_hasShrinkwrap":false},"2.12.1-canary.616.14579.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.616.14579.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.616.14579.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7b707d4bb20189965c3971a0d859a37ef263c6d4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.616.14579.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-faegeUa4AeA8ODjKh+zo9lyTZGGEIGPnk/w08gcNgmaw37muSktOwf9BlfJgFJnnTdiuJE1rh0kHS2+j1AiI0g==","shasum":"b2043dd05e42c3863cec300a2e001507dac8e8a7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.616.14579.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFAUwCRA9TVsSAnZWagAAG64P/1XxosOn952rQxUkn3pq\nynsQk7z6t7F3/ueh0cyZtFVE0e8TMkZ1veZ1nEhDedIWF9y3wYsGlodSGmJn\nu7Bn+DW66IhKrpNYtQ8WgFxO1/A1PBElsTXrkqiXNw0G84Nn9pYkm4xPgu/C\nHFu+DuTnvVks5Kb4gmb8GD+rjXUBbXbRvPwJt62abf5021P4PfJafeK0Jx1L\n+43q1q7NzvjEiDY3JXKSiWrC5VVhzOZzRB8cT6ZRPY3tK+7oBXwGznJHU0MD\nrAlgGFRD6MFN8VowyltfV+yroR3E8hjupXAqwUmjpn+CfFg7E7xmAQmS/bgx\n9MCxuxZIernp4Toxu3rBH5S1XeAIWIipQQmmGALd9b0pLKpsIdijhu678VYU\njVn1GrlgGbUh4P4UAfpqiACUB/nj8eu7IIkFr1oRLMAfCk0UU1EG2+Rq2P2w\nAEA/FS1gqx1JAe/ta0XXPFCD2aFBA+W5X4tkeyST8M98QXkBCq79fpH+Skn7\nFlnBl/RF7zCyOMARayTnmlVK/G23v0Z9DWDU9kzIPUMpuQ3dRkNYWke0UDMo\nxzCOWvn1Dh2V6TKYOrIaEAHjIw5An9WBUR//JYASin3w4RrdFtAaKd+LxpAq\nu4e1pQDOHuIZg7SiAbcfgflnJ8g3PMyII2JKQHWr5k2tJK9xPaKE3JGqUUAE\ndTmv\r\n=WvR0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGiPBv7ZymTKUR0FQ7TReUnSgv+uCd9x281bDCaFxLDAiAv+XMzRhL8yS/bq9py+r8++ZR4DsV8/i3o8Zw8Iu68DA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.616.14579.0_1611924783870_0.9532775169722878"},"_hasShrinkwrap":false},"2.12.1-canary.616.14585.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.616.14585.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.616.14585.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b209416e6870ccd9da5eaed5a8e52d29d1a58c76","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.616.14585.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-1OE8hZ+e/tQ+g7W7Ck8weMODOyhCvZFwCjTNi1oa6x31S/wY3KvCf+zoCUwUg9olIKs8LjoMH9yL14KXJyMosg==","shasum":"ff5bf6aa9fd46aa4877cb5549b421f885bf49da5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.616.14585.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFEa4CRA9TVsSAnZWagAAsbAP/RR6uCNJfWig2G5q1NOE\nt2dZjOrKW37BLse+eQY3HEXhydzRtbbyUGclDzgGYqUMLuOLfzrVCh3euMvB\n59JxdjFHMRN/2OV9VQ1TFuUoCRVhsOvXuLnydIUXyZwD+ZFb6gihL1ArQagX\nSPXvBQZVeSrb9vGVNEeRMbss7Y5p1YMhrij7zvpA4OAjGKwocZYYe50IVwL+\nUEydgexjix9urfHlJW1SoqojfMSRMsuE3O0nG5Rdon5pHuan5+xbP4QQDRy0\n7v5CL5OCq2CcHME5zej9/NRY7bC0wy+b8YddyPHUSle74JylE+EGMXAiGz66\n002IyKfVgRv2qlqHhJY4XxYpIaQmHHjS9OePIYdNOOMX5KOPzevZ0Pv5ugJJ\nIUQKdskBmKJHuE+ptYL9hSEnpi1Y/kQz/dNQEQO2COaEl0dKtgV4xDFLhdQK\niWQbOZNNnsR5YSTRg7U7/K77Qd8LLAXmP/bb6RN0VpuZEuaeBVRrQM368pWq\nEPydu2bfkfC2dpgvgDz7g//U3L1GrGSAyKB0/ZspABO7C4gDfR/21WVbamig\nUBJOEsIIHj3xlPbVputi6kEZbZJlIt/ClGMZ5RWefRoHkAFg4aSGD9PNTLnE\nkfbExBLW6ZUqUavih70x8QxSMkKkFjGreZj5Wldw3WGKMIsQntAz/cEZ4/i1\nKLrh\r\n=hAU5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8Xbt4Ha83EFG9PmTYuFjXmJ4Kj+bKB6i7O/bSDjIyiAiEAzWW0wJMUfEiqvmFg7K25hctUutfeEv4BLMucZwsFPMg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.616.14585.0_1611941559921_0.2503803541524119"},"_hasShrinkwrap":false},"2.12.1-canary.484.14613.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14613.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.13.4","@auto-it/slack":"10.13.4","@design-systems/cli":"2.12.1-canary.484.14613.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"689398939f6fa8e3b43fb26ce5a4fca5a12fadc0","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14613.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-RzpDxotCxIMAU6HdBPIhD8LNLcgmjq1qtlF2HT/h9PISCz3NCKy6GnRaG7Uc/brU7GEp7qG0gc94CPjgJv9epA==","shasum":"4d291bf7d10f9db40a06bfdb72b212b3f04b4285","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14613.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGHjCCRA9TVsSAnZWagAACG4P/39bfyaCzoh3fB2O0+bX\nlaC26lI9Mzl5g6NHIfTqeQKPU6n148cfs6sO9PsDOS+j6atuMRFyI0hcCbEu\n3fhTciHLzCd0EFFxJofS8HqoYHLOHT/EqfgheAYaaxKNxUqHsavEi9sZUBXc\njtdBkkomt2YfsBBpl8b0JBv64r1KmU8Kny7u8jce9gxV7ola9gY23iMJGHgo\njsGoPYHQr4pXhvUAJZEOtI9yh/xCmeE1yjQLFcHrS1imPXM76UBfrd5LIu0W\nbWyMc7cSP4186eW+oYsEoMl+moQnsuqpmWq4D3LF1nFf8ZI7DWWPvUym0SrE\nE7eU9s63DzkEOJ8eRGP+efUfg+wNs119WbYhOyDjCWSsGeaOwhE0Kml/+LQ3\nlDQpTEydFtgYUYwoZeuYZnTN0sJXVaiBRE76kmcBjAk9KUQ1VGTA0pLSMiOG\n3KjX4PvFAXEkZk5MGEcjduQeP9Oksp+DFzRb678/7HjhlZoGkpos/lV9LSp4\n9i/iAu9YiYAjGh0opo6AaY4P5fgKz7eP4hUl1oa/SJjpDTs5X/kX2vdnZaBt\nLGfjcVUxsThaF96zusnBolZPJOVoxBqtBDLY+u2o+3TRZ6Jn5j+TQ0FTOqGj\nlZl2vdQm1lnEvSNTt8T1Tq5eyr1RN+aXoLmwtz2Em8np9vHS0bciQxw7IMh+\nb6Td\r\n=zBFw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2T1rhTz5T5A/qdWNNcl4jM/9c0+QveadnbkD2sGVI9gIhAMbSB9AsU//+XX5v84G8vmWAFdsJcd7kswxaQFTRR5af"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14613.0_1612216514280_0.1899335403876068"},"_hasShrinkwrap":false},"2.12.1-canary.601.14619.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.601.14619.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.601.14619.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f78f48885c749dc2e88d3ed51528c22ad3a1d3d5","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.601.14619.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-wQS8QewOlBLuJTtXpbMtRySYwuSuGzSleupsvBkCp6nuN0YnTXPxHCDP0Kc9nz39wfzq6MYx1SrJLdr5KZwhwQ==","shasum":"faead9130bca01bcef104873a5f159c6aa3c165f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.601.14619.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGL1JCRA9TVsSAnZWagAA5YoP/AvCpVth/Zo15APoe5D4\nCPX4fdOvafaR0CCxWEX9h3rFLyCC52NiRD0YxOW/kji70X1SCVtTzlAA5Vg7\negoxUJQ1LkpdtEBdbMA4LseU8IZbLoDewd/f7OkHhN40+ICTDkXU3vxA7aKC\n9uxdkO1qQDXd4gFAsNh0CxTmHnUGXqvU4SoRgZUzH0zhaZ+AGMDuqZPkcDAV\n+I5INbgOiiXW00xtJFZDuwTm7feFhojF2DWPd+oH6N02bHbvFt9q0XOy1UtJ\n9lojD+ma5ZBEQiXHCBQ6bIDrvMFLkMX/taBhdBznNZCmh0F7of07XNLUu5+n\nm9USiP99xwxLsI/ASh92bSATAjNL7WXpf5gl7XU5yJ8Xo58IGJVcFNuRmxdc\n3DasdTJpwEnQ4VrF6Yi2EldRplJC4TZsA2N1zauzIJniSFE3BQnQ2kn+axNI\nTEPscZ7hXK+M/aFdoRbnngp8ENZlCmNuwzZGFHWA4l15+rm2qrGqbt9JNUxf\nIEPn2+OcqIEdA5daxR50o6iYRUeFC9KVdYH6x5yu8I3OozZbmFdum5e8oZhK\njzCNXzfNuCTNW5/OTAebpowCCzuHIChKvoXE37VmWooFYwbf8tUa/q00tcvK\ntjZv1Ytmh7zvFICXmZIX0VP2BPH3xZsqLtTF6DSnpsZili1ERbg4jFKdQfQl\nq2ya\r\n=OntZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/pQ3jfWEj7gw+ATudWTHAR8KNamzbfba6uZcwLD6czAiEAmecx2wIZUybpbVxrdY8veOFv20Ki+Ha92jxjRY5E24U="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.601.14619.0_1612234056510_0.9400267921502801"},"_hasShrinkwrap":false},"2.12.1-canary.601.14625.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.601.14625.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.601.14625.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4d60551a6d41e85f69cbc1c88f3e0aaee4297e88","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.601.14625.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-FJczTwiUzd7S5o5ae7nS0fjiORIoFbn8JHH8Ijv9LEnoFf+AqApj//1FPFrlTVorg/MPfXCSdHXLbSpmRtH9mQ==","shasum":"cbebcfd49af2bf8c273f7fdca73ef65ef8aa4563","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.601.14625.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGNM0CRA9TVsSAnZWagAAHKAQAIa/xrTpHEmv9JkrFRRu\nfpcTKKuUF/VCW4K6jFOrMji7nlpBZFbcmv7gKstgSRpP9XBFtS3IFhkT+vb5\njw4ZHcr9dlPvd4ixR/b+GilqrYKZrFdyUeRhJMEMA7TXtOJctt/YBoC91Sg1\nWdc6vMseBuTqKk0G93fnoCF3UTH21glY3tE54JhDDxSoL+HWAjs501t3Y8gx\nLnQcmnFwHUHYwS28degavyPeuYXQNexcvUedCr7uMSy9EUy5vo1/AQ1hWQb1\nWEUJAJPzx3FSG7xKQBNq5bd2If8Y1sFz5lCNz2X0+aE6T7RsPCS4tkxKbPZ0\nLYsn6nmN1KYRJbpisJvHuXxy+prR/+UrXGDSXeh3sF7BL/HSYtswmhjY2z44\nr6Or5WtCUSGsKRZbHiR00p6N8Q1UDANAuWRri8blCTwY/mjaMNed56DtAt4E\n6ZqwHz7JkG3tPXcKjC1AkXioGfgaPim75WPbJIzsZaEEgL1ZjCuC3JkIzme7\nb075uGc6XJTcONsh1AOnPiBl+L+zRGtdQUKQaVF1gB5lJd1YurPTKJP210uf\nqCadpPnuDKYOAMHGRPvUHRdezypWcOWW0XZ160obZkTpTA6dXAxh8bGt1N1p\nEQ825ceSWrNzKSI0vjyUr2Zrk0H12yvMYr5t+mfxaBWY1r9t9TP8ueAkmcu7\nsABf\r\n=lo3i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUQnIithzaKipN+9tcc5jcGO/a7RJDYG7kDcTqV5nglwIgOXk1qotgAxVr3JUWDKVyCEzalBr8hrXsZPFFpc1w+n8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.601.14625.0_1612239667893_0.22327052147951654"},"_hasShrinkwrap":false},"2.12.1-canary.572.14631.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.572.14631.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.572.14631.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b866671e780bd46d58d5bcb92e4313e980e6720e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.572.14631.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-m7oZLmIREmZJUGYaGpiMrgmvhqiYpn/qo29YnKiVHKD0XYNtE8dEdgEBf9+gXx7BuP2TfedyWsWe/YcTDPBG7w==","shasum":"582539d4475cfd2e2999fdc51192095bc06cac2e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.572.14631.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGSkYCRA9TVsSAnZWagAAseQP+gN8RyZUGjsvRyqNFgOt\nbfc+N8WU5OsRDOdPOX2kLk3cV9ig6mE7oIFmwSfUfH3vXvEWCWGkVyVf6bGf\nKfBEl1W0f7q3QPrh7AUvoJq2XJ+BYx+c+ZRYsF0VkW5pPwjhVqLWL8TILUOQ\n1jrQ/VTtVrI5OJkMeBVMzhhs4Qqr1LToDC1if42cLGz2fMx0chcWg8TZvk7l\nchcl5qWiAdVNm/PCZKbFZvvF1kjhSLpwCa+o+cvOMuByPjRBrBizaEPFEhpZ\n7VimmzDt87mvuXISOByQNEO39UfNI9dV1SwqIpd0JKunpGkJggvS0lBiEwlc\nd6ujp0Bj2H6HlQCB872sjARPk5jOm/bzzOO4dZklyAPrHNYFh9Pw6PLI4hAt\ni/Vo6dJzLPvRHafJtvSusWnMFTz1ZzpwTWD9lrETgltMMeS/f5/cMUbyIsNk\nClDXR6QDAPm+UaMLeIiWuX7fvtm8SWMOV53U8Mo0rrHDQYTC5ErbWHivX2Qy\n2JP1dmYsHMz+cfgkroXTwCqWbWSVRNcnwU7vGq3Ob8Y13ug3/hoieKomWYMq\nShOYXiwclTlyCMxKJOLHjq5g1pn5tKx6n5i4fqoq9DSE9RXtPJPDxq5OeKv/\nmX/JzAfeJtG6sl+Bt7Gh8aPeu9L9eUuuMPeR/zwTJE9jkthjjLbV1CVZ60ld\nLVHh\r\n=kd7E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGldZgg8WDr/rfKpcEjgb5fADU6Ka7lYYw2K4JACiQtHAiB4mjHM+Sls3n3t/c64gOqSSYpjsfwmSNqhLj6/CjtjWg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.572.14631.0_1612261655117_0.2752791403566768"},"_hasShrinkwrap":false},"2.12.1-canary.572.14642.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.572.14642.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.572.14642.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"04719089986e28e8c38b27b6f47b2212cc7af6de","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.572.14642.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-HPvli0ZEmZNhtExkZPt7aGXogQ1rsesSju9ezHLIWuUd8PsfuwGsau+jiMvHAnj2wxwZf0FAwoOn4+UPRIPQEw==","shasum":"bed7e3d9769d2941278051b5a624d3f48bad3bbf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.572.14642.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZXFCRA9TVsSAnZWagAAfZwP/iJq3z+Cha1Dh3EIOt3z\nH7YDfrE67m+kxupaOHmAzZggZRUSn52Hw/ELPwBRsL14/gBygg+MNu5Mf44h\nV3IsEpxD0o2o+Uy3Pjt+2/65tGqD0g+TXlH3ZLCpniylpV40XcI/cI0hyJm3\ntD5Gs3iKjyMfN4PxeRS6pu8GBl3jRaZ7anzYdXboaiXnO6Gc+cHfiYBp/sun\naeMh2DIoNkXWslvFDKN9oHW+BcINtvK/XJ1N1d6qMw9Uyyv9jd2+nssz+KlJ\nhpWTKQ9sTiYN4dAXtLl4EafpRIv1Eost+GbOHSRHLJnFNg6uN+b5TM67aaZf\nOXk9wXuQSXXSsmoG4SirDih5UqJboRXzMMw22E3gF6osEKNJw0GSbvXQ2Gld\nL5c5hg37RicHUkPjaTtbawQawRLCWBZzrmvTcsvUFPOTk+HBtTIcDZlouADU\nvlEFBRifipQja54LztcvUGGoP67E77ag5Tm/AynRL/svAuTma+OFPf90I8xg\nwtvPPP5dUi2cq+nyg+bbPbN1Jn5K4z6PdkdiClElnALb/6ZONvek80tiqfpQ\n+EeOC0TKw0Brt7L3tSFq/OLTjd5DcntgFU5Ocfwl57hw094VsuFgWkqs+Wdg\nxbnFc0fFEqiRjgbIvcyqf/0t9GyiAHSverKvPezFF9hvslzy9zt7uB/hIl9q\nHjLF\r\n=QGET\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV+I04yxxRwRA++/qM4m9UNfnP/6f38alG5EH6AQ/rVQIhANb091O+BljzIcEb82zs7MJ0ZjUwoKPdrxdcHqjLkREZ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.572.14642.0_1612289477217_0.91574260873359"},"_hasShrinkwrap":false},"2.12.1-canary.559.14643.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.559.14643.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.559.14643.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2894d6335d8e0d1f156f2f3ae7a4beaf5f810434","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.559.14643.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-+eT/86Rv0amGEfTzo+wFJVpaUnkk6yVks4ejGe2K/T+J5ZP/lNYW4yYaHoq+HYvtPap4H0xDKp2uDy+dHF2H/A==","shasum":"7dfaa4e8d24dd2737c5c7607160a7f75dcd55c75","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.559.14643.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZXqCRA9TVsSAnZWagAARMsP/35AghQIT5iodZVTzFAw\nOpKj+B5r46kBBnVaVXmQZVy24Zxb/Hm0Fd6HcsNQFPDke7xaijvt8gYcpjqZ\nIuvzXNTNbvuwcOVnmYENuOfiyIYjf/WZjVTYBQTAPfzDGyRZTOtNjNfFunxg\nWIi1dhOeFSGFGX5J45lzpCd5CBePZaoLv7i96R6HJ0wgo7uExOL1v2HEMmm4\nwC4TmUc9UUYJoo7lN0l5a07AHyJPiQy4Tf4jPHFJwoOOWFSY9jHMTvq1iZR0\nb4y5jjxCF/U7MLNNxCk/dqfBOoM0LLSN7kSJ9U6EmxTqeGd6wIN5ZJsIG4pn\ny9i9djLovAjCVxKWc4ARzro9ojwt5D7Et0r/rIpKdzI1IS4KdiW1UsjS/8kl\nIe+4tjURSdmCjPe5gz9Lh0Up2IvYgnizVGt8WCR3wDqJ+6m7agRhxQUkz8/u\nyTPgfVvS4YwYz9ZG1uX7JgcQhlbEOoNcc45vDlhpEVe/Aoq0Y2+lPzSCJxJ4\ngq2SgoinPNHGIPEcGnjAsNHxYUQxm3eJkV4VNLeC9l7p1tZSyzDjPTkJ4RrL\nbLt6AerPj4MSDgcKUwDPK21h43pqdo8J9cnkKX7YWf7fXo844xQ7sETsD9lj\n3cjKJ4QAFZ67e21vo2/AaYk9KjdqGGKkC1jQXSFBL54D3qgpl3TXebpj61R1\nqWYd\r\n=dITL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF1aN7jjGZAjtStJTsu/KQqqm13oVfrEBmAq0SX9fZZwIgWh/J3zgNiUFJIFprz1r2sgNZDFXl1MoTSIGp7cWWZFQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.559.14643.0_1612289514285_0.0918857681855072"},"_hasShrinkwrap":false},"2.12.1-canary.475.14653.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.475.14653.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.475.14653.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f1b7e891d4d30f73b902cbb56c46b45c2f3c3487","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.475.14653.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-FmqE8qHKZ6+i0D7aA5RPZE2hYVFSdRS5btuk2dtd7rCgZH4DSu0h3Grl8t6RojSjD1GCTwuIak1HGzUeo93O5g==","shasum":"d8de178a8b2611949a91b2b6ff730a4ca1a90914","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.475.14653.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGiToCRA9TVsSAnZWagAAE9AP/RJDvdHg77KVBkktaTfP\n7iSVviBWdheXgVhJm4M5qLZInjkE6CjlmFXKLSFhWPMKo8/e3HuaL5yF/T9F\nLNzdKB6ri7EQ63Y0bgyljY09leYXaL0PpvYpd3yxg3iAqRZdsHPQHea6oiWi\ndioIGw7nVNezpA2T/K9Fn55H+m8i8qNAVJnVQUboTp6CMvc8Q8W2ZeBDRz1g\nU+M9Qzd5BMKW8pqjSE8jS2Byma/1SpypL67QXOQZJ3gdwlRMe3FjHbeQaLrr\nUksWb6fnCvhklCELDr/5Lj3ToXJmLUUvTOT9HvlRzcEb/dZr+vvak+mjAJsX\nyEtndvql4R1S5By1+taBLqyC9I68ufIAW9ICKknggPrVAgG4UT5dFSEaYQ3r\n4dsxbcZ6gtBFwuAjdnjuWXK/bCQukUmdbh0BC9zKziATK3ZIuCRNgi5WsYFu\ngn7andwWA6CgNDqAmx+VQn0DMbL9//QMe93ME+rk+1O0KeTKAwoOmJ9o3sua\n9J8wbnQdwD0ticfDF4IuB7V1f8jhg76o2f4kmQ2bTxnlEi0ARD+oEip0HJZl\nrbAanAq0H2XdvFlrv27ey3xmTsMtxx2hD87HoD31oT3rz9vGPm9wkjq7KiJq\nCQ4iCLh+azWiief93zPkTiGduj3ng4l64KUK9ZTyQHPt0iHlT7KEyFj/9mbR\nwiXF\r\n=cVv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGesfN8odyxCu0jspMcRCX7oL5N7DgFvZGjKiymjCbUVAiEA72dnTCRn9GHhGQYYK4aL06Oa2X/muV9nHn0dHrImBBI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.475.14653.0_1612326120438_0.9446938492330557"},"_hasShrinkwrap":false},"2.12.1-canary.527.14661.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.527.14661.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.527.14661.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"451cb5479d4591e679626d38f32981e905005c96","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.527.14661.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Ly57kTNAeVH9Rgbeem0++/bZyCtDXqPS7gbf5sgwNWvaWBVCyrB3WfLrDbqLRklQDBoxCDqJgdxEsudi7HxYdw==","shasum":"6c948fd65957f18c2a87339a918446e5eb97cf02","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.527.14661.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGwaFCRA9TVsSAnZWagAAfOcQAJyYR25tYOaVHaPj+iYO\nmWs+UGLvi63Zquf/6Sg+j0ukew81mfRKXBofuTsrssKu+CsPjLTJnXs8DIJd\nIP16pt+ndtglj1prdT1vcT3N3HVDdF7tZ38KmtB4ef9jQ3WulL2QWreVyGMT\nNonupdIBnXNvy8ky3Vv56Zlq3zTg3qBb6XuAAD+UiSHQV6PbA+lO4lIf0L3w\ni8ZyIG+aDSd4Yd/Xz6hERF6kLN2TQJvUV1GlWcarXfPriuI7I6TnlljmTVBV\nZgyvmyUbp4Q2Sk3vubdxYSY3uqmM+77cR+piK1QZ1gJCdBF9bJ4T2MXRqA/v\ngo/OznNcuxRVfNgDKVI1nh5hYvxdKoHRlUe2sQJZRmtGIUI99FhxXx9B7iYL\nK80mfmfrKhm/F69xK3SxNpHOGPWk8rvTC2tmzSU6hpzz5I1sln5qnEOtNHpH\nHz0l6Pjcgwz+z1q+gMj+rBec3fAmSUVcd4ARzn6adYjBa0NfiGMTQIf9xTmR\npr0lp21K39TN5yBit0zwu3FjdHIRwE6ic+8TeyFlCwkUQM+GiOKw7zHQvQCr\n9UODEsLZOtYt7kBGJEUPhVQA2kfae43aPmx1LwYe+szSGDmz69nsIh3FiTmi\n0Kdbn6/7xv6VJjM7eaTT46sO/OFD9SUq55+kf9YgU+SbdX4zZfTWxlXpZjf6\nygVp\r\n=WNta\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExqihfXvRjaZezK/FnEFqXZP7soTR3Hqk5vZmweAFpBAiEArw7g7M4V+eNFidwjF5c9BVyPIAXS1LZLfrOs8HJA21c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.527.14661.0_1612383877489_0.8114303722918594"},"_hasShrinkwrap":false},"2.12.1-canary.474.14672.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.474.14672.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.474.14672.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6c8266b37ae4854bef3c0ebc33652e29d8e87781","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.474.14672.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-jjs4ofovEZjwu6lAfu1qTl0C/ZHQj0HVmfSBpT/FKbLE16oo6s2o5XoS4Fpwy5TB3IMCgXWF2bGDwtIGrmS3hg==","shasum":"da24eedecfc4e5ecfab86227ef109d4a99d38f4c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.474.14672.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGzACCRA9TVsSAnZWagAA29sP/Ajft2329uKwyUGaoOEr\ntEp/RuwI83yO4WHVDZB7bxuZuEbxGbeZPJlLJjTYXHGwNTKC+QFwT5ggBD4/\nvcLXzfc1paPNdDbW+ijR2K5zHq4/rLespbPA3t1Mg49RlSvHOckqWt3mZ8T1\nzgOLj9LNOcL4bJQz6HyuiChiAYPPLPHxdFF0auNqcJu5VT9KOvRuCOYtlmLX\nXiiFjJPMxcCjKkD5ZIDoqZda+TvO7wMNqzL+DGmIsLHwQc4I1YnH6lhXSzaH\nu+Zk0OZIXr3brRpbNme5Q3l+xLm3MZ44rljWVIk2oKudm4PinBAAqJm0ooG2\nuO1K8hW6mmY9t2/zu84BSHEL8vhELbKmfYZA4jzz+Msjk7Dd/y7NJ4CHaN6l\nVW/Lr5ZUdpqdVR2ILvM4yyQ1HXmrFE4oBzXMkEqTyGxCuWDpNvTmI9LixrMD\n4Z6oc+9o0EB7eGTPhMi7GlGqROdzP7DkATQ7AboOvWA4vUo5TEj1ziCawDqB\nNFlK8UPBbY+CsJH0elJXl/Ly60Tur+VMCxdSv4g5gp3vYa/R3TDaUyNNrhpk\nFR0Rjay/VzO9K6cY0aHttfn4UfCmXB769DyhsSOj+aMz774elVJoVt0kdE/I\nxIPo8K0zEzK4TmEl3JHYncUkA4ausf5w95HClZMzw6k3Gof2rrt22941iVu/\nKulU\r\n=Io80\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBG5wf0hOq9z1mdlRzR6nDxPHRX41Zg6BmIKL1r0VNEwIhAKbhb0SIrerw2wgr6C0BPOBKcm7iJjCOuBLkwr8TvCiL"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.474.14672.0_1612394498456_0.15156177543442495"},"_hasShrinkwrap":false},"2.12.1-canary.484.14673.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14673.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.14.0","@auto-it/slack":"10.14.0","@design-systems/cli":"2.12.1-canary.484.14673.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"40eb3efdd05b38b002cdb2fd53343388a2c99b50","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14673.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-DRWBqlKdgradBADBsO4aR9UpGiYLjFLm8IjITOhIrs5/mXiJIpEDOqcCR1jhaCG/PNjzuV3E1tGM+QUQey6hgw==","shasum":"7b7acd17dcb105d23bc7518fbe388ddb012f65b8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14673.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGzAnCRA9TVsSAnZWagAAjxgP/31SkCEitNmn316xW0K4\nmZY8AO/jej2bK/0/Xtpf3P9XiLwTuH1TXHdOWp4S14wPewg78RkgTUI9n7zJ\nkSLzmdB8vJvPE7TEtl5qO4RkOJ12mBmAqdzwlmJsmeOkSsOZtJYS7yZcY9cO\nAgIxFB4z0foVAPdJN+PSA4fTGfPNiLVTp3B1ZTJfxFyLHvcDNMmBiV7PaxC0\nTmll6wIEnbCXiHXvqbltTAh5YuGyAQoc/OrlIRktP2knPlrNI2MR1KHk3MGm\nCpTAYsm+sSYObpTVyPnYepcF4j2lzQwwIOon/b9BLGsLJC8f00lsSTCMHJ95\n7p4zj8tnukPAZp9JAoG+HAAbpCFl5uWIi2itGuG9QmWo73XFDe0bv6FaOVXI\nahoaSbJvrXa90wvAOKB9whoaVJfMq6hNAATVdO9onHW6Mr+S0aSqu00vzXgX\n/57xq5XVpnUKNrMRkOYnEGdc6XnQHSlOgxM5uRfI0aowzj4Vecd4lWEEd4Fy\n95h4omCWS+TxoPhqEnSqxRJJiHlWknq01mWWxNg3INNpkXe5hh5swbp13/7v\n3wviEer2Y0ySBba4qs5NHLaXyLppdAOgK7kh5eQS/emupMrcYqqyiuyceViH\nHUnS3lnpbwVGZnIiuwiC6Z6OPvTh9c2/GTWBGEbsaXMZeDHfypd5irheazz4\n/yfk\r\n=a8hJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+rmZU/YAqwwxtPNLQkZD1w1xjHnDWcVWELoiqIJnMfwIhAJRrp5fbB3qqFj21ohwBasUOwijh58QBlCnbX3JyO/6K"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14673.0_1612394535096_0.6851242394719452"},"_hasShrinkwrap":false},"2.12.1-canary.474.14679.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.474.14679.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.474.14679.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4fc8736c86f09f44a1a4bb89ff3d1a5889d904dd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.474.14679.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-dyooMTo8rNUGcqSXCkPLx800iA6C0S3Rci0JiXU8YjQRa/vIBPzxYa2JS+8PiRjg75hhvNsG5frsYaIVSdgEEg==","shasum":"39c7191c5077bb568f84e46e656d0b29819f2cd6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.474.14679.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG0ebCRA9TVsSAnZWagAA3MwP/2v6us2WR807OahnWb2Z\ni/R3jH+bclf8tznMm/mBBtB1tQvh8fPFwnIA1ZjaHw9oKfp0qTMePXsF4HX2\nET0jR5+nl6XgRj7gzZieRMDoWsRnpX1WLesLZPWjTI59bqqWO9V1jb3vkcv/\nYkXgzBUbQjt4KUPTbEePhgqU3YSDVHsPuTQDg6kdPUmbQbpurbF0FT77Gjey\nq6v8GGC5FXUk16QccRDBjtbetHsYdcL/i6a07o7lnrWPNcYOs6VqqtMWG69T\nC+XAV83ifVvg/FWIjvru+fHOdMmsqYBXho6OWNnVmGDObrrlsQM06YYjgS2c\nOq8TA9FUhaUNZYEzUBj/1MkFPsjBd7n9fyQ8vp7WpOqcFZvPQnoyhmpEH0a7\nN6oOSxu+nn1lCPx1k96yEzxMZnpxAVwFwpGx+6CwBschYyu7Mqk1pbuS6gQu\nF3jgEEOcqMvBMISjrvqcfRZLR9UHLBBqje+Tn07kieJwhSh+psh+WKr/7Jpg\n7dAmjZezP6tqPfwOFTUwzz5ZNbjt3E9dwwILADjHGuUTfuSQxnJTI0d+sFdA\nhVdg45VDLun5gVaWQaVw/M+HfiABa087fX4J0m5GQjOhorN6l2ADdWnnbVfd\nxdqxNw2m8MFpAevfFiCyMFLh2BHJxeUydUu12tHyk/usOA1xPzLFA1sqQW6F\n/s9Y\r\n=/mto\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHfs3bFAD+yRXGtWo/8mX8XA29La1WXZCmp4tSU3JrXAiEA++3zr/0gz6Ub6mhjf2o/bMZM6ug0ovwPiqXptn19yq8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.474.14679.0_1612400539102_0.6280679874014592"},"_hasShrinkwrap":false},"2.12.1-canary.484.14685.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14685.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.15.0","@auto-it/slack":"10.15.0","@design-systems/cli":"2.12.1-canary.484.14685.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e4dba830b8c04ec140d42f3329c00b8ffb855e66","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14685.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-eS9GryLIKIUQSVApbAO/eZnXrl9zo4B+5nh1TV+QBzpSkrO3jzYWxjJnfjM3eizLH+aDBVEK6jOUV47AydgsvA==","shasum":"26c047b0bf5130c34de1809d04f0212ff0adaecd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14685.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG1vjCRA9TVsSAnZWagAAve8P/iEDazit622FfDVbWbhy\niI3EL3VpbyXc5UvTViFzP9XXFgIW21jlHLi1GVirEKvjiUsCdaL/KHWp1kJw\nGun9Zk6D5s0M2DvavFQPAqWiZZtJLXvTF2cyBx600O/1VrqAdKD558L4mR8S\nU8hvjLgFLU4qTD9Bcq6to3HGZxsx3KUWZXztrjcWLaJNJb3ln9bKWql/FhMC\nPoLrP60j45yXJiMTDUpIWhkgPhjtl5yWiv5cj0PC7S1u3YWHQT0Sd+CJjdjx\nUS+F22dc84LESZcVwEfSAX5MqGJoncvjudB+r/SQfk+2laanWWhNknYqXDh8\nORL+PFX062CAvMHmOvb7WeKpncilwW0yOobG9GlA4yFdB+Y7VDSc+ifqPt6M\nB1hPREhR4W5pYloQHCLl/ht5atDwXxzABRWnN2IaFJ0InmJty/gE81Vg30BK\nkRyXDcaHn1eWFUyYaE+lvTKavXuwDfwZRyhkpmiRAxxJ/GoxgcBmT65N/meO\nAno4cKyMRnGLsUQI6QDDqPw+NvNm+lRbNJ6e75Fnh2TQ7zJNXCEXXaA9zvC7\nbSnJj/FNYmyj6AWOb5SycDNHFYes5igrzv2WYVmrHXboqWNVAZwX5bbHXEjf\nk3jPiWHZLmDpZMrH7GcTvL52KLrW/XpHbCBWwxDH+FW6MOfCl3863tSCa2jw\n3svM\r\n=cb61\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6+ZeAJ0kX4ia5sRky0+YR01HEgjqri6Zc+aFk/9rblAIhAN2FHQTh7hbNpklRL6C88q9D1yyB+8tNEMBM6ZdQzSXZ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14685.0_1612405730940_0.6415847274561399"},"_hasShrinkwrap":false},"2.12.1-canary.474.14691.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.474.14691.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.474.14691.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6bc9f76d01468b6a1d88f219e93e97d1a4257a12","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.474.14691.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-4t3ZQ80aWnP5SfF8bcp3dYe5uCOLkAIh1TMvIfJOVtASpD2BwhgLhIuP0aDDvQFZ2zJfgaEuojDgIpHDGgabOA==","shasum":"85722b2f679f39e728c09d7a95a9f9ca9dd85299","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.474.14691.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG8MeCRA9TVsSAnZWagAAlpcP/2GF4STFRdSLbbcvRz/I\nMwibbcjEnwe1RVL5CqyaRDVtYgPVS948kubyLJsoUSywBFwI2xNCPt90bGZw\np1cMJfkWNqjX2O2j5AyJgkwUtTtG9oJ7gn4C+kdXBdaYCoa/ORhKOp+Q5co5\nuQE0Y76MUPh6n+cRJULMqrslrxrCJg9/sRDziKwZKLegrSrHKE8QJgw7HPQf\n3eG0Sq2oh1+0GUN78cr+sc5ZC6xQ5XvQvuwzK/OA+1viCYB6kq+U0N1GvbCq\nlUQSaeNJZ5q1JVRhf0dyRl1uF4hU9nJLBOixie1Xgg2alJrnKC57v41YQ9Mq\nRurcXzUn8rSJN15hNAFrJa5h/VZwD5c/k85msHxAtGk3f7XYS5KHbkoVaVcl\nJVTCGenZ9f3pQ4oOKOnybeg41RFbpEg7M3syeC09grTsnJ1fdSQxZo2CtP03\nDOz0B/W+BfZXLhvu2w0vobKb521iha5KgXrYMLmUAyjlHaXA9dNXa2VesvjX\nCcUnAGci/QhFk8AOto/jmsDASSVedJtBXzp6259R2iQvyDhevQoGixJ8zVdj\nWe5isoelRkWx+gpgmDvs2gQcB73kTqykRd9bT+RCHmJujnra5sjTyG0ICtrT\ngHlJdNphqAJBN7HAVAJIEqrKKKcSHPEE88RAavElKDgYltpg6x6FC4om8lb/\nwKwi\r\n=NHQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALl67dM7rYf0F4eNArv0V+LrpCqB6oPzzSd93mTYg0zAiA+2uRVldXfjxV1vCMI/5zl9WUWUgBB7SQ/zZQYC/4a1Q=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.474.14691.0_1612432158177_0.9037547476080348"},"_hasShrinkwrap":false},"2.12.1-canary.601.14699.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.601.14699.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.601.14699.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3508b28317be23674cd8b7d0b40375530bbb090b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.601.14699.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-zJWZYCIUsWH73516M1tkG9hfG1J+4NAYE+Y9idM1b6QnrKXGr2GQzGjwdRHgklEEbNiebvpCfHZec1t9x5VFMw==","shasum":"355308cd08a5c6534286d757613f771a22cf0db7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.601.14699.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHCUwCRA9TVsSAnZWagAAPo0P/iOo1M6/ofG4t6+IxKRT\nS2jankHEATQTgPn3aDXKz+FtsjjOm7aAbyueg2c/9hl4hl67kkwR40uqOsT9\nav5E5CqDuXeadN+/+jQSoXbBFJL1tut55D01/KuJ0QEN/s0+AUM5M8JDJReN\nXprCYO4YNZgJBbDNn68+Kw2c+zkf6KzUPUUOz38UZVQyhfYCwJ8hmmp8i2NE\nnni6glguVpKz+4vmVSo8KxcUfHDWv9xIPgRggTlLQbluja7KH9r6x8XCGWnS\nWiXk0YZo6uVylCsiS8qd9Ics/HBPYYVsW85SRa1SFFdft6tF9H15u0/0Uwfm\neJl8IIV8MvvvwiEzxhIkmuKlWXsJKFyhqlGLJ5fnb3ZhZ+J42yfAIADwPbqA\nQque9Q1f/hI17zzWKoDLoPHzFS2Jnpwze4JGlvGTTZ7xFLQgs2+E9U5H8hUB\nT/csG0W0RVYd8ucJ0LMvPLVbIHZka/7qD+8zJ9neDN9pjZZ2WeNbFkdVvoFK\nhs7J2bl5TmXeTMnh0wnJAUnX16ISL3qYkayaL00rw198nfjSOs9NZSvELd4r\n1T2wowSnGRe2/BtYlYU+nmm92ZWHhhcLc3ygy69viTdYOMEak4gnWGoQsXmQ\nmv68poksO1S5IyoO87Tte3p4ue6ev7wAaUxvtMdtQeu7VJiUiWtJ1alZL9hf\nqT83\r\n=LfxE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJaUUuAlsKGkks/hvjHpruvSB+hYGm45timumLFVUQPgIgd2qjCTPFyLVdLne5BVWizaYbm1OGQ6KT6T/MDLit2Po="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.601.14699.0_1612457257516_0.7399348199336948"},"_hasShrinkwrap":false},"2.12.1-canary.508.14705.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.508.14705.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.508.14705.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c79c8c99aa155bd34ae8b4ddd5fae235a97be52c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.508.14705.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ixJjy8axpaFu/sg3jGU/SrWaLVWMaQoor6FuBa9U0TSukBzI7/9VtebGz9gN37UMoYafYRBUXqK35Gzblq9vKQ==","shasum":"8322635763f0ee1ef63dd7b9a7310f6a15e1cb20","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.508.14705.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHGxQCRA9TVsSAnZWagAAQAIP/2C0HfeeOyZBViMeuQtW\nFAR0Bo78ozXGegswxP8Ox9HY0EkI+FRr6YdACX9/r1I+hsGrJL0l3jS88gXG\npdIANyp4ky2XUZ8J81+mgBA770y5vce71PrD/7WCxSwbb/C4YvnF5dM0IV+O\nrhMvpOT6Y1bm5tynnS+b/GkKWYq7nMgqxDRAaKsf2lC+ggF/PfyYMARELOzb\nLQadSqzHuUQOlaECxCutPAPuCUaUGgJmslDWrAmUj946xC71zJrKXSIZZBal\nKwVYaqB7AMHebHMqi3R1nqk9+afgjTFS888paIJfC38wnyYg99S1PahDvgSJ\nCyfeKzixxDoGM0pfvLIXAEksNbGOMvmUBkT940/CDI36YisOaadkFOVnkKF3\nMEPksC6wMsiTY9Uqw0AhaiwJyoxIIFEAdNY3vfJa+9eh2tLNXJsLwAifV40y\nguyK00nvORvmy6xlxw2YDDA8PYohTbq+m3LEZCadrDAIWzXMkaMb+sNtsERT\nbs6iFzLcCNFe6IISqwKoCyeL8ykA7pmRordzHA7OOuOWvGQic8BpK/xp7TA2\n/PXp0SxuT/vy9t8ZW4kDEtHzvFCOHVZcI+RCHaXBuUNp7DNp4CwmfX5KIP60\noEFDuLCrVJHLsQtR4bZzvmNRk3UcpqRX9wsLIE/aAyI6f9e4jcWLoRZncLsk\nmGxr\r\n=0oO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHBpbapFvsNxUlGC49fb9Pp/NhgObwE542ESQt3Q2UWgIhAITH0ABmHgb3EN3gQlRsLaDSzvgz26aqmvy4PSrTzFD1"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.508.14705.0_1612475471732_0.39845877864804935"},"_hasShrinkwrap":false},"2.12.1-canary.484.14713.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14713.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.0","@auto-it/slack":"10.16.0","@design-systems/cli":"2.12.1-canary.484.14713.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4738837f6fcdd2c7d7a1ce85934c99e37b53e43c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14713.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Hg+NDye1xfxVMay1hbU9/eK/0JcgkXwKlbV/GFGuCSkyAyYPGZlhculFJ2SjqkqTtiYxkchPHQxwFvgHrA+/QA==","shasum":"a44e3865ca65d77a7c0fd029c6aa60273aa1eadd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14713.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHNSCRA9TVsSAnZWagAAm/QP/0jj7xodK3yJsQsMksDk\n/Zi2Xf7MhnboiOerBD3IP37I3AK5kX2xYKoh02hdB+/CRSyaiU6s3QqQ3pon\nMh84cZyeA16ZHpNSMrhPdIvzS+C9KfzivVLSQ1WMHQ7u7CnEJbI2nqvBkFPL\nX8cO7w0cS3uuLYspD1LegpWeWMCyPxXnBe5Ro7rswiqXYbXS97GmdBTiNdhT\nTqm+2URKcR5Ur2qqkRIWTezr1w29LTgCJy6vWswc9Di27oQP+aIwK8fVaAtv\nyYcFNNEiWdBcOzDKErOX0rlZ0B3Nb8X4XEmaQFeI2c1t+Os99DLYDrRkD1KM\n4YNNuuX/MTOfbdYEPruczGea3Xbwa81hTsjmnx1Pch5B6jMJ7HMJdPHQHLbV\nJTGDjXP6LljGh6lqULEB8Axs2pTWL/Xdi6UMrqzfuzmBU4rzRzLfLm01xC7J\nLddMB6sG82s97QbcQnpS0w3NW1DyrqLBLjvqYXlWJezCxdQ55Gb3hdyiaRww\nX7byuULWvBxrY84XIZDGOjcf5d7Y1ODW/eG0rqMVIeipXQ7pjnmQU1kBThuA\npQ3W4kqigHMVbLFqEsWzn8zuaBqZD1WOu3T3GrZ8NvU3XvXD+1Dlk6S7r6SR\nC+vtH3wR/ldVLmsfNS0toMlOB0Qkfv8DwXWoeF0/p/EhSmsf/Ww/eAyIHSZF\nih+/\r\n=aPKT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4+aXXIBzRoRsz4D9PSrBDb2nR/1iLWVxZ1g4FN5TLJAIgY/pL4tLPIPGSv76XiY+T+FcukYM22SfLQ4Y+9okdPxo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14713.0_1612477266444_0.5310706835940115"},"_hasShrinkwrap":false},"2.12.1-canary.484.14719.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.484.14719.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.0","@auto-it/slack":"10.16.0","@design-systems/cli":"2.12.1-canary.484.14719.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4572eb28106708e5d728fc8efeef04319c18e95a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.484.14719.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-JbKuZ1SODJgMM40YZDlWm/kVF4Ej952aEBwSxcTz38Q1muEigY1oNEYvn1+knEQwUSpXUK+YC2Wnsr+FtgxN1g==","shasum":"2b41eef87b992f0981c0835cae0b66f026f0d5a6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.484.14719.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHIrcCRA9TVsSAnZWagAAMJcP/RPkVfsfB8YONXDwKQ7j\nBFaT6NhtChxQtG7/8k6e3hxGEc7RwKhe2C33WLlX7UnBHzUhQ7jMP+w08ABY\nnXPrQ3/5VyuS/WZBNuIRU+xOmymXpbROiC4VSXA/2mQZ3SV+oXyDBsoav73m\nsivUrd+LU0smOKebZgwMukxnFUWFUs5oPQn7UGa+RVFy3UwUwO3YiHtPcSMT\njJNaXptxtyB2RoU1+lt+7nqTwBYEbuerrrKCgAenqFmuxRRMzzEvIq+r/1x3\nfOUIceZaoJBVlYALw2u8mbQjkcWMJuZEpPolWc+W7ZfOB+UX71uQ+NBElq6S\n3r65HF2aWokuoBq3vgd6iRq8rx8kXJay272ZU9DsTFVhUebuLdgaZjXZNPL2\nNFYdgWQVR8+bBhoRrVVApq0RNa8NTJhILptaY1pvoyW0Cr1kNC5me7N91tEy\nV2mOjzNvg6gDlgMJ8SBnzdPVFT04WtN5/G6v+UfKcr1z3K9+n/NR2/WGlbep\nw3loLeUNN+7V71eYz2VaXm81zLmmGEFIpMlXqgAVzbb8A/aJZDswzxDBqrq+\nFRChJnE/RkLGPOWoxDIo70MW/dAd39sxDZuHC/YsMmN4Xh9vhuuGFw5r5x37\nG+zuVoWZ+7Q/QUi8HSpG1l6iFwOFgVwMMSx8eDVpmPLecj/vqUIKl1y9oQ6q\nTjmk\r\n=oHEs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC1W5tZDCucn3bm4GXbEdgx0cy8z8ooLdnhR5b8Tm9nwIhAO3rCsjFHzZZ8sla8QanN7U1w1qD+hqRwOwB1bS7Cx8u"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.484.14719.0_1612483292145_0.4469365109853858"},"_hasShrinkwrap":false},"2.12.1-canary.575.14725.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.575.14725.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.575.14725.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"41e268716391a3ca2f5954a2f3cda12d4133b10d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.575.14725.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-wMGYZP+oXQRCO/Nzpm24S4/RcJmb8vCtBjRfp5BJza/ecz5V4FXKwAptXTy1mjf4F5khVaY89w2KfCyn4EVydA==","shasum":"3c066aba6f596c52b964fb909796ab3e78a621ec","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.575.14725.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYVyCRA9TVsSAnZWagAAaWUQAJX6A3okDhH/ECnfSvc0\n0Z6bzxjYXLLkJfXtXDePKKWZ8RT7y4u/O+vrKhxMPWLjBhW5J22Cdqk8+q/1\nATB0VEnMvsJQTYXiLkHbZGrIS+thkiU75Y134dH/Cl2+pAk64pfJJhgnQuSH\ns33DpvobHZSdyk8WEMYKTErITDmTM6mfINtDfFSijgX30O9pnOnufIFvxXkY\nFD9PkbNKgYFCBGwUwzKql5cR9+88//BTMm1DqVLYDbQVthgZkZnw8kGBbspW\nPM/5NCvzMWDgJWteBGXC4HSal5DgxIsvytBmwKAJeIeoZTYiXGh4+yBBemw7\nJjyya59iYp7cYrGafaGKpshS70gZei3f0KnTvMWcoAQN7JzypwG04cqaBG6k\nGNp/eOdnF5fr9Zlh5jOYB1jjmElgoTqodUFho6LnUxtD/T4Gv4HCP7dgsvrh\n+htZ//n9/ds2lg5jfRkH9ssl/JkEgWd68fpAqqdZKsDNT8ZBHw2D2hEJoNiJ\nOW9zF/AekquFnyUdomNv+XIl7QFqmp6YfSXFmZuyCljmaKbVb/di4pz4MhKY\nXuEIy8OCb/mQk14LZaKK8pLwAbHVpOS34dBkbFIrODRu1mxWiSwmxjKOb95/\njMssnBAmPmGarQov2dlbIlxBZPpoopblZYLWpapy/kLV8zcXAWn2E5V9LjbI\n/ESG\r\n=Nb9R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPsPQ+LeG8f7iI2c82Qka3BCFjVIwjEBsAFH7by6WkrwIgIU5s86KWxp5gCFbo2kb21A11nO6HQUbAglSgFwncrPM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.575.14725.0_1612547441832_0.49730114112416457"},"_hasShrinkwrap":false},"2.12.1-canary.617.14744.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.617.14744.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.617.14744.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e560ea154dfe45ed88a069f301ec74ec047740e1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.617.14744.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-SE0hEVNqGdrWpuAhS2lZGV8LhFUxK2TB8bb3Oqo+gX5cVoohSmWIn266nlhtY+r+qwNM2WoXKkEIxs1cysi1iw==","shasum":"0de4d687f6482be968e0659616fd279edfa5f555","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.617.14744.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIHZlCRA9TVsSAnZWagAAHc4P/j9jcTaYcd70GPp5d3is\nVxx7x8d4i4qmIMd9dDFMFCIhg72XYB8+U9vAxvYIe/WduCNg2M8xXP+xhs2R\nABudL1hiYKbYamJAhnvNVBFPl423KocX7QDmcrUu/mBJJQd8vEh+r4+ZEBmn\n3eMspTUHGHaGqoIASiBZEcm3H8dhSc9oMLYGrAqUa/V0DcaR2DQIztw+6DgG\nVEuzpzsIq2peR+qugob9vz1qNM5VPVmN6cYXGY9XwCV4eOPNb3RiVkqNOZmM\nDt7BZtFPGzeRmv2QZhZvLh76c22pWGd1ri0jA7OtUiB3xKrznbyGvDzmsG17\nUXVN+EjBQBwD2qkS33/UqXkFtNjbeeiuAcXWhBa6fZWZFnQyE3CYRTYmoV2p\n7cIa20FV9UEbEJDTDVpt9d3awiPSAsCmSqROwjO4PNpxA9twZ4LFUX6cMuIq\nHV/V/ohFUn1FBr3DrZnDuv3kc04uktT0mlVj1FD3HPBtfqQhekjdJDpM8Z2K\nv4SgY2nmQ5SKAaKq4HnM3sdm6BT9GhoogDOJrLXN91MMD8DiQ0SvJGPJuOgU\n7IkJ76L3gYk2TmLqhA//MkWfHRZs7TqPORKdDEv5VLvN4/NOyHk8W7lyNDdT\nwAgvgHGAFnK32cwTs03xHcxMPK3ok5O3+8NO1V5fyabXPksN2eCYJgDUwFdh\nm4sI\r\n=aA3o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX4fO34/Ck6F1170ONo/duhhDTZkOb/9tQq0bZqCxlzwIhAM7dXHODyAeyeJBeM0fh8ZtvcYJB5veH74lskoDCmAdx"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.617.14744.0_1612740196517_0.08844166168815004"},"_hasShrinkwrap":false},"2.12.1-canary.553.14750.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.553.14750.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.553.14750.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6eb639248b4b434235d03f479406fb769213d1b9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.553.14750.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-cuzKabbvAIineDsP00IXdWZFfHnu9Hnaxt1/gVgx9jCl7kah041Lhwu2X6eTkctsDWlAaLx7LIPROlQvD+mpDA==","shasum":"3db8ce417bcf2960c7de18d55bb3c7708620535c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.553.14750.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgITA0CRA9TVsSAnZWagAA3y4P/iyDAIywtzdhGSS8KhWr\nV1Cn6jBsmkun2YnLjhiWg1CDtyaS4Jqy+2h81nqL5/PRIblOiWXIIBjWRT6L\nqOL2nYbTop4sVa7IVKThQu287Yza/1Q2xkvBs8pp8f2t/wYFKBaUJVmZswdu\nOcYikBCUXliKMj/fU1aMeQTKyqTkYPuW89jnVeuz3CHOWtUorwjfaH/H7zMm\nujE1x0GNIPatLq69xOPxFxKn/GBICJUV28YTjsZ7N957sKowZLbIwJLYmKhr\nBWkINFnqv1G+3HG4lATJZHffEMNp8naq1rldHXy/4FNJ2Nib59RiW6rrUHK5\ne9fDU13+uaVf4TVGhpero3sV2w+WzDnaqyniPTthspwRSwKY62jGm7ncmF3c\nwgKJQ+8JaFO/orBL38QreRPW7Ic6KnjUzceympjL8aR9jFfTy2Ty1kFcOpuE\n79UGOfSojnEffTqcfEjn35+kHNU/4vuVxAlkw6AN8rxWe+YLVUxChYqNb8gU\nqPHtdMw6LAgFp88nqz48A63GvMyFtBn3J1XqIkpPC7FM3vdmxH3b9H87BKAD\ntIUvHZDdKRHy22o5bp85s9EKCWXlX4pL3H9MyS11DEYV0fJRaofcDAwNH7Bj\nDZPjOjCXDoZEsfrxAPYsgr7lsiRYpO+UHWe3QDMCNRJBeL5p35NZuWv5+fnv\niQiz\r\n=y1z3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEyU6+4fuQHbXa3QgpGHr1+Bv+NGyHeIJJkC+NBj2ONAiEAtNG46v1jKSuV6KDvZpHqVqU/jS4rwFaGoqkVMA8gBm8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.553.14750.0_1612787763913_0.7533585962973024"},"_hasShrinkwrap":false},"2.12.1-canary.508.14762.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.508.14762.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.508.14762.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d228dfad388e8f4be3b7b4a0defc8c9888fb2a60","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.508.14762.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-sgIGnLJQME4p9VxfogksH1YMujCa5zXOn9lGlmeHrmbkiDXEKdfpDwwZCr4KdeqfoM7AN6abKOmzlmlvrqfUDA==","shasum":"e12d78dab04d56312569d0ec0336cf05440fc40f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.508.14762.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIYYsCRA9TVsSAnZWagAAz38P/RsQ3IZFkttqI0NVZJsX\n1oQkgihserHzhE7WdN3r9BXiKCAhb3XtXpgqsuiWucJ3dw2T60P0t/cUDeU6\njTHjMpyf5rM3n3rnen4JMAByq8kafvGWNU1iG9J7utgPrMn4+lGqsrLLcnQo\nzWmq6B3Q+w+d9TIf7kCqeMEESbtFNEf/QuqR3obAe8hUei3+jGrtqqqmUjsL\nSOq5IpMXzkbCnFIOlfO3XxEhf/q8RSdqQj+binl4V6nf8T5+M3Zxx2pYD5eb\nO8f4RGx/10W+ntTpDeL/5ggCczpQ0tlndxIj0Q7RFQCuLP0BESYVPNAr6DL0\nMP5d4fpdEcIwdIf27b+ZwbAFqZewh9ARuusDnJr1xNs0D5LLw6Eoz2RphkEr\n0zHI9DsqLEuZ3tdKpKmjUsQouMIVQvO9q2tvMM3hNofm/o2TUU8JAbRA5G45\n4iVCK//iZFjhN2cU8xVq+YgL87QtWom73MtB/Z3PZjKFHM27fpa1z5zGWuYu\nQz1Bhl1qC4UcZrgWteX/M4zBsY+4IIiOrk4DVE/AwGZikYiVSQgSvrmQlu8e\n6j8bmApzukc+UKGsvhjS9exxIlecjxkUqxsDlEFm3cbwRwIuAuunUMN06pXh\nBgH3XzARwNyN1yzkBhZ1EuS8JkIIxXjPSznllym6fY6N4j3LJ2YEIeILAExI\nmojq\r\n=x/ci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHx+BCK7mOwhkrMNdedO/29B6gZScssDnFrhu9WZnMW/AiBSomBuNy924CBhMGwFmM/kNbewnELnCwfRo5ALSc2Q8A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.508.14762.0_1612809772369_0.9598411932181703"},"_hasShrinkwrap":false},"2.12.1-canary.618.14768.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.618.14768.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.618.14768.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"923f3b36ef0c44aba3186486c67992a65f236386","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.618.14768.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-hvdb8QBWPOQ+PZGk4Em3E+1gQ2QJAlM+9WXjP47eheGxEKTIDmPgJsdjUF1D+nCUBprnBZZfrpzl3eDFVfiIBA==","shasum":"f2d84d16cfd76fbe94b687a7f5ed13bb9ff2cc09","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.618.14768.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIajkCRA9TVsSAnZWagAAWg4QAJgEt/hKKqMn0ciXM+V4\nUftkGZiVDPq4p0a4Gdpfxg365F6ykxcTuXhboJFKYEH7H/MMszwcNOZrzu0s\nU6mswjVZkWkkl7ZhXPr2tDYKf12bGQRF4zfycwukJxxl4EdSk+vvY/I6CC0N\nBzI6fUKJVLPSpXYyVvg4Qa9LdlIbUCeVVYwF5w4vBqE5cFBHWu+bLDqoKwnQ\ncav/3MJOb4pYqXBW2QWTjPPtyQrnKDnZhhaR65pOKk5g7FAzYxwwDoVrud7F\nrtSV1hYKoBT5NLQOPVJxKI3EcykWdbsiIYABCrVlKibGIiB2ytMgzRoWsd99\nWZttX6rLBUN9wyi3DdPpW/GYFW1Oo4ACUZLGq7uBZm2VBpxLigW4pxt0HUi2\nKwf1lXK63Fa30RMQFoOxOUzp7JDxPR2wdLTZYMtcR/kHhKXBNwm2lRLTNet+\nX/SV++gX+tEHCsJDn5bTYlSiLLziGvLJxdP9EM/TIZdGrIHWPHpiOKaeJLLW\nEPd7H6F5MHf6tARteU0hlXoRYcX0N8v8aqJvpLh/OYV6z7LQJ8mwXmBbu482\nC43MTTbo+AGn6dZ3cfS7gCHO2C8CDAv/OJE+FOpp9JOR6bkI9mf2vJFTSk2D\ndDfPBOqs7ITLBaAvrZxS5jr/ulUGABqlg+J7+JACHw02izdkE0sAOwLO6Esz\nqHRy\r\n=Zwej\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8qBOk0vczALLBdoXkPxz7DXnNf3/bs9P5itIvaoXagAiEA8PfWadhBaegkUDgsc4tjnLab7kOqI+LY9G1RSAfNzBo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.618.14768.0_1612818659578_0.748778819677258"},"_hasShrinkwrap":false},"2.12.1-canary.619.14774.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.1-canary.619.14774.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.1-canary.619.14774.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8fa2636b98a9f338e50adf6b58c4bdd45d6d8f0d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1-canary.619.14774.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-oHnfOASEimfI4PYvdr20gs63IZRKLvsuKJLCFC7HXS7y9Fdk8WZf3pIkd1buIRRiSXIlxpkNIZiLzY2xuREYfg==","shasum":"e327a246a175a5aad682de5b9eae985f3e347d03","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1-canary.619.14774.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIc5wCRA9TVsSAnZWagAA5n0P/iK4IXwUfrCakRCDy1Fu\nrwehy32KmUv7g8SMJ3l488fHzeA6s2cdE/+a1eSYX68eWBNizicm2aivrbIN\nTVQ6PduNhgbV8gAvVlRMxDoL2ps0fRzl2RUKC8gH3ToWJp7yKk48ADdx/cQN\noG3B1txlWUx/b0wTCv4wCap1w1UpFYOJNT2ULy1R5UcO+7TJwpAhQemsSVDm\ndCM2F6Rapv+cdSxULzi3F3JHCfHM3kRIj5EChInaBOk0P7olPjxeBB3Pp+Rx\n302iUPYq7tv2Xy7yqo2R3rf/nVs73BAHKgEWaJrPOOLtGimFURJQcb/T1Yva\nJ8avNkrZ1RqFzGzTHBp/ENTzkzu6K1r31hDX+gFkttXyvfTn7QX2y+Ky3VjP\nx2mcXgP74KHLTuAzmD9whX0GZLXDS9oA7mor6Yee+TF5hOG8HJPugVB+Cax4\nnZbekdJ035OQzTIr7ELYHye6Zr0dAU1IbFm6sc5CsluQsGf3IvcTBq0f7qge\nQ8NUqH97nJawCHSWhyn87nxuFe3oK5CUJiCVxadQYidfYVcoDoZVCS064jIg\nn4D3Qt9fmEHKFJzWEPD2rGEka67AMHRm/noK9MBrgIbavMEPTY/TbsqkVQOK\nCaoOHPRfeTHRzFOo00g8hejGvRmUS7QHm5KKt8YSzqfi/jDxg9Sq+6DjyBW3\ni8xq\r\n=DiSp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN33xToznE7rjICkJex2Khh5LAVHGu77yqTHYtEaPz2AIhAIcHm5RQHw+HzUFfra7hgl8dzZ7KzfmSydVgr+M/tCQo"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1-canary.619.14774.0_1612828272159_0.25429471608210585"},"_hasShrinkwrap":false},"2.12.1":{"name":"@design-systems/svg-icon-builder","version":"2.12.1","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"^2.12.1","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ba1f439c276757abaceb268815655f8afa655231","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.1","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-LzujhcFK6KsaCJTDQPVbBnw/EDJSDXxCRXd2T50EqiteR6y4iUUIdjvB/q+LyKvDsfXcvm9RlPVd4mNL7MC0Tg==","shasum":"5779788238c46534e614748bda941e26352d3c62","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.1.tgz","fileCount":25,"unpackedSize":74816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuVRCRA9TVsSAnZWagAAZKIP/i1vPBXah7yUf/Zre+oK\najjVcibbPf/eGGok5bPjfjJ9l4O7w5qOHaAL24vkk8uWMCyo57DqCM9cUNLz\np9q6gU3c9wV3iAGuZRQoa6bGBEYHOqftm0wTmDquSWZo2kfrFngMC8bxSz2e\nXfCUHdEIEcKm0JFbxjUFdS2XDufNyEyhQhn9LpPKx7mjEKGvVdn82+/VihUi\nD4X+UL89Y/D27Zaq5qc1e+TFvQT9Hy5auT5wuHtx1NgzJENkMaLBP488To8e\nwVzmZtKYXkwOkmpGNbuZ7UMLmAc1jTbt+MME1zZ9H2kqNODUfmdJ/Sm5sqCE\nywHr97/EWILDe0KxSorSrG/BTtG6Lhuvd+7sLaYk053BNYE+24s4hOg8D9a9\n7gaJtl3A/Zp1I4a6flWG+Lk6lWOTYMXa1+wAnqTTRSpocGbpRQNV07AweLZh\nBrtkmEAlWezOLzLI9MX8nz5IAkjTKnjPjtwW8EmGhs7I6JNd7tbHBepp6RFK\nNyj/to/gAVBYb8Tj6BAmImosMD/ZQMTp4FoBE8ADMEZGkJdZNQBrXbAhoxn8\n+fPWDyQTRd4NBKPZPts/657Ghrhg+7IU4ofxn/30lsgeyrp7UxW+YcqEN0Do\nNglBmnK34EYudN6vHWq3BhbBRkEPcDSebjpQ1GXaq79d4zkJ8KcD8tNKcyTr\n9WZJ\r\n=apXt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVtxgzcB33ghGopuEACS+z5UwD7ZmLPWtUlRv9wejRAAIgC8pSQLgzacQQHOUoYtF7fS5zGpUQX5/a6aanGsSEJJQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.1_1612899665160_0.20683706267616575"},"_hasShrinkwrap":false},"2.12.2-canary.620.14790.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.2-canary.620.14790.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.2-canary.620.14790.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6b5b6eb9ee3ef006f22eadd3885d6e9f73479566","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.2-canary.620.14790.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ZWnIav2fYTm272v9B3ZiKuNZSg9rvdCLzj7q3aply+Pt9sf1iif2R0VaoRZcPxq5fgdnQeGP3FTMm/XeF1Dcog==","shasum":"7e2f35ad345a3b17d8ba2b13d1671011f66e8cb4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.2-canary.620.14790.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIvH4CRA9TVsSAnZWagAAcU4P/jDxA3AAzRTRY/3FV12W\ndjQTifYCg9xg1N+93BD5bzj0oQ36qyeL5WuuSqwW2hX5WdEd5yMIRWhDukVR\nwTNh8i3H4hh8XGoVQnNsI16e+cr8JlmKs8ii0Un6PHksAoR50o16rnp49OfW\n6Tx2/hzodjgNtqVVrc+ZjB7P2S31wPzEHtYnkiLTivGmkQKcH9OeQBZD4P7V\n4EYHgN22ZvUPQf3MDCgy0T9ss5qMDkgjLdgQwg4wcGFrpSAL/3X56WFk5lUo\nB/Oz/40BzkO4ZrU+ZZW/EQNleSOlIMDa6NoT9Px7GjalKjTTJxQ8Hbc6dYH0\nQaiEqnNsK1bHZJcq9Aur987+KKgYQcG7uF0MIsXxojssHhEH5kQyML752irN\nvOdyQTp4h9ioargMkQ3w4y4TWx0nKwjWt6Hh+Y/MWXJgNJlMA3lQHiGRo1N2\nbwutLxlsoSAlqfE9w9yKujF4md2T5G5992PQSon+hqR3WqZhy2hdaF+sPEc7\nzHSpdswpUjuc5OD+QXOcm/DZepYEOfbnlY4O0XdwPi7m2Dsih4u0gyVHqhzZ\nWkEb9ENG62Mnn7IldmftQVJX7/Nk23CJM3AzmtZV2RnvSxzJqTVzx8Yr97ch\nXtyKFmZbSFXM73VacvjmLc8NsljBT9NvNTvQDavfbHludZUPuuAefclMAwnB\nsdoK\r\n=Gw61\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDY6CEjIQwsEpmwg8W+ebUFYGG76MyJAYGyAWvodHODUAiAfTqevfMYj7fLgksE1KVn2ijUf9lt8iaXsPnNClx6J7A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.2-canary.620.14790.0_1612902903566_0.13211956188926255"},"_hasShrinkwrap":false},"2.12.2-canary.475.14800.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.2-canary.475.14800.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.2-canary.475.14800.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"688c2588377eb04369701e5951381986eda1baff","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.2-canary.475.14800.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-gfZhYKzWehtIZLXuC00BPddIyIEcEsVvBnh7dV5ceDlpMU/4o6KTtdq6V6DTx/okWH3rQK+3C1dh2rzOGTrJVA==","shasum":"4a1c1e5908dc126dd6ca8da3b47a0e9c370c9724","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.2-canary.475.14800.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwvQCRA9TVsSAnZWagAARe4P/1pLmdptUNcFgycT/R6h\nfIpwovrltax+gb69dOhx5eCZMrJl1WUxagD8LE6BhWPrFNoOPHR5rkP/77s/\ndnairtjwgVrKdz1ZGUbZuUdjVzuPn4htojMbFSyepLWXCzXaFloOPT1Mqc21\nvfFuSLprHNyM1ctFfKOKApG32VpX3U4sDnYt+PhcG5jw6eJY4mprOMqwQtjt\niwaOlnCvOcx6XcQ8rhBiE5SMHDieoWDI69CDoYAwbc2YGJAJS7UNcbKmD/Au\nSzlQcOlvHiN7s2p++LFwbFl6fCi2IbdjXvD+35kh8rQBgi2rM3C/LLqdDxYK\nX7WtdWbkDR9UZmJUsFUAdtHlLNBPUt4G0JN+AmCbxJe5y1oGesi8VSq4pAYM\n2QgIBwb6Zfbn5QWlEP76k1pIz0b1r5pjxHge3pRagtmF8GoCRZYeudkEnFSn\nheT6lCJh7dcqxF6IA/+Sxk2MJfotgJYre18Kej+Yeew89XsA6UeGLej7LCA4\noLKm5E/pEpWCKTKhytgXnURNF5jv0s9NJKs7aiM4MyRvPvUykQmdc+ZdAGE0\nqe6WpQY/buoS29P7UXVtIfAuHOzEOC1JAaXG9TFWmjjIV25HlPSs5r5jAC7T\nsUT02OU7DbSXdyZgaiYTXKNOuKKXwAVpECXwde1LZ247kd9lNjMrNnJJljp5\nWQ2c\r\n=H15r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClciieQpuZeAlSUL9wIIi7Q4JDZMttfaR88uLCXlDaLgIgR7XcGnrZsoRT0PB1M+GcPom2/8H6fXZs9KmRRdlHTeE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.2-canary.475.14800.0_1612909520234_0.5476866485521406"},"_hasShrinkwrap":false},"2.12.2-canary.607.14811.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.2-canary.607.14811.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.2-canary.607.14811.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4ea472fce65f0510f21f37cc54e201be055cdfa3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.2-canary.607.14811.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-iNkOHA9sSKfVjvOinFN+xygVDk5lOEJLHsa0SCH0GLhScidSoTMMGIZR1T1ZZsr51SSKqZ43H/bLxQXaPH2nlA==","shasum":"b41bfd6574114cc45eba694fb0fe3cb3d78cccc5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.2-canary.607.14811.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJB5wCRA9TVsSAnZWagAA4YAP/3Wp5LFuNFZaZG3kyfL3\n6ScFTBj7HKuv0DM9onqDGcTOT3FZaHkkDQqduYo7Cnpe/AwzSuLFJKk7I7qe\nzM9keveajJAq6IRplMw5Ernn2K+AV/0RLDCF/FUNWxPj6cylBq5Pg3odEDo5\ngYqPO9EQSznml+IIt62yjUUWsgju4HpzSZP+fMRvJmBxyntSaZBZZ03ca01Y\nCLW8gR+93KIahtASlQZZko790m/bFwATsFxPlfGfljEkbrP6SzetEW7FAeUp\n3mAz+KlTwt/kU7OepCe3cqFBvqkz6ReQYrAFUDig9zkoWtBbesZu/3/WP2mY\n3VOianIDF5m8UuGIeJyKKgHYEGbSQ/LEBCzonw9x7mjiQqs0CKmIVKroEloj\nwVLxtIVGpyGW6174FNI1Pa6gf8+54PHeIWkUQRyL8kuNmC9esJ6XqO0tY+xy\n6rTfnufve8ZFOHyb1xupqEIdYiGD3Ta6jJF/UQi/elSbpHwsxWaJKeNJ6urs\nGed0T5VHreJl8z2a2YBaxG3tvKKaNOyWo5c4pERbf7WzHUqYbIIjY1nCjwbQ\n0DtkJ3AtgyeynxD9oz5VUloarG9qJKrg8vQ6OLOw4ymJg5UxrSOgdNthCzXO\nGWVbRYMaBa4bIwAfkXrPZbwrLqkIO9KSuyjXJV0XC9VgSclNQs+TwHixH5+a\nxww6\r\n=yQni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCkOM0FVNw/AwJkYwgGDbqjW9kYShZF4EHL5HK5rUn9AiATsrXMPozDUurlGeUg2cb4gOlm60SmlvCsu6TtX9nYew=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.2-canary.607.14811.0_1612979823578_0.47653093524576207"},"_hasShrinkwrap":false},"2.12.2-canary.508.14812.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.2-canary.508.14812.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.2-canary.508.14812.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ff6f9c41d6c470c3d89265d41aa486ec12e18b39","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.2-canary.508.14812.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-AdXLnGAvG/jTEPspzwayb0ylcU+vFV1UHW504IXN3FAANa5WYszVJi9jfp1oJKJsBeJyo1J4wUSvlc6n48LpRw==","shasum":"484ae108fe4ea80d0c39519a0418c3e6083015c7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.2-canary.508.14812.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJB7cCRA9TVsSAnZWagAALdwP/AmaZjUQl8N1OxRAA+1E\nsZuctuKKsTZYbB+bhUz1s226A8v/6CxAMdYl+lCXSBxnyWWE/MlP9ocPlcn5\ne5UsFDnsALDBtTnKkzp11/qwxmMX0wuRhxwSVjMMUvcYlE8j7GPQ6tzs8e1m\nvBMOPNw68uAxkEr+z0wWBwRBvAzQJBTadftx0Ki3Vg9MfN3nIZSS9slJSKbo\niTFb7L2UM3q8VJl+N8h4pcs1Cz/0iWpuqDSsaVBSD0U8FwpQaRINA6tzo6Q2\njtEZQhw5cgUp7N2AFvz8a74uEHrpMp45A5bRenlpEVQ3kyDeHvS5us9RiQXb\nyKGYpt1vw9CrnzjBo5M+tQrM5gzVgqTXGp7Mcs6sXkNpGs14QOz/k2H01/42\nWejEQvp6/Bi4ugc8IzBoUB2zJTK6QvFVJ2UmXGxqhE+gdQPllanl5Gqt0kFD\nwVhw5KrjZKZqJDMs91roG39kOwhESJG7lwjjPtUWoDQMard9HudFjYmBprBR\n01eelRH7YjTB6J6J5Pm1D7TofkBPJj7H3jkGjkkUEO1Jvmab1iNxxxe4GbWy\niyYoS03qmEnITCYbv2nwTydyGCmz/cljZW1IhlCgDWiEHhkyJLEvNN2LcSOD\nRLl475lT0hTNTPPsyLrwZUeREDQ3bKl1yzjlsFBqKxLhwcCE+4v9c0uSHNfK\n+WV5\r\n=6Vi5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1ryNE78VgOynAUzm8sHUEMMpkke0FaBNLP/8QD62pEAIgEsMboKv8UC25NAY/EFHlowZTuiAiPKxVA8ZvhQdpX3s="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.2-canary.508.14812.0_1612979931601_0.18636465081821907"},"_hasShrinkwrap":false},"2.12.2":{"name":"@design-systems/svg-icon-builder","version":"2.12.2","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"^2.12.2","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c6a7814749ae68aa0d9309c4cab5b4b29ae3809c","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.2","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-xq5kJrnBdDcRsGjajvucUys8g+PUWKJGx+YHN+VrHdaEHBNQiEe9GUO0Pmf77Il12+ek8XeqvqatLi9/kavUuQ==","shasum":"516081593619b574637af22d70624268aff94799","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.2.tgz","fileCount":25,"unpackedSize":74816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJEeyCRA9TVsSAnZWagAAGZgQAI5Ud4BHjX67C8OULZX7\nJmXN7CFC4PdIneVxEeWExm/Vy9ZogwT3qaylPOkY0K6uSegTv1eAe3c2EmGO\n5EFT4AvdzGK/qwLDH1Xg5058qLyeDKydc7kIf8XTrW4+q74MvfyKFRGQbb0c\nrT4KaOXSUyVb8XPcwc1yhtSKiS/Dr3id3h/U0pL3PDe3tnwjmhD3DFsJSZnb\nOIm3KvtFLDyTZpkMrmN/6+9f9Ze5+GTEJSdDjWNlbYWTbSdf72CsS2DZn+gs\nb9obxWJ4p1dc2nnSe6n4DGaFwpA6fuvCOuOjis6uS5uD3s9FnMeVB8gdzaAL\nU+wvjH1+tayHxsLq6q0gMpkY0ZlP+DSHWze9MqB3kFdaA4x0/a+dNgd7C1Uh\n0p1jFa/EWRjztZZzca1CO1wvVw8UF/v4+bHey+5yxhvy5z9X4KI8atL53LxX\nzdLFpzMqwbDBI3lwRlro7UF6RFoilZiUTlDG7lmITkQE2j7fLjc7Md3svnzV\nQEPTHwJ3nscl7/ts6FUG9yUQlBsKIQ6Wh9DFe7i9MUNefjL2QaSZ5Gj+7qUX\nQWmVk6ddzlWRq1k4X7q7WsKsAy8cnj90i7g/z12pKfT6ybJVkpEzkm0MhXp/\nlSicy9RQruOD0BwBBnEYsjCmBNK3EMLEzjO03eFFnzrnZrLOmqhuQhPyXB+n\nZgQn\r\n=Jjz0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrM+/3dYkDqDiMXDqOzRsfDSSbRViBg8b5fXMy6CNDgAIgSQAkxNp/iP7dY1T+HQhcl28yLlREzhGX45BpdQEQ89c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.2_1612990385461_0.7197592776339568"},"_hasShrinkwrap":false},"2.12.3-canary.475.14828.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.14828.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.14828.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8f795ac2ded901fd440d6a5e4872f7ec2e415846","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.14828.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Dfe4bKR+6HcKXg4axw/r564ygKh9rG77ykq8dCHCdEfOB0issSUxJcZcF+1H7FwYpOpohjTC5rFu8yxX2Dn19w==","shasum":"1faae2214cc238db9d7ec7910b096b3574b5bb62","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.14828.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJHKPCRA9TVsSAnZWagAAVg4P+wbBKuLMZSyasez4WJIM\nq8EXXdtqOt9VacDScVWTmaZe9FdCxsS/MOG67Ch3oKS+dG3/ogH88XPQwdxu\ndGvN0c1qE7muxTCWS0+KH9lRW0FFkXxhK1sINMtvbKaIONU76ih5Z3BQifkx\nKgA6CNW/5rVRjdT8byEihYuVkH29+4Odbqm6g4BOTalBGCDMUtntjY38PpD8\nbh9HtRxoKYzHpZ0ptNv9UXSapZXRDpch7keDwtl1pEzZ4nC0vpIu9mJGKxHb\nZyN6SDIDvholBN1ZYKy6MUBeiQSmMWtT3UeMkp0WPruzbBoo7USDfpCWZ7uf\n0YnxfsWu/jyuyvYCVJIpWGfzbYz5pQHfi95exioZH+jnbqGT9cHezYaDnwiS\nq2oY5aDHftAW38IEMOUfiwQH/ZWz20xHphXRIkNidIiKzOdwXDSVbCvZX/Fs\niXpTmzWokPJqfWBXRJde4oDTvRlkFsBbrZR2c9faTGlb6M0vENsxmTN7kvn+\nfgKWUpJN0e83WGypHlMCLNqDXZ36Cu4n14FiDQJ8EZPjaom7EW/E7aUoltF6\nL/yWN5VcjKO33bjSE7CMYo3/41ZXIAtgW6bKBkbtoqxW/e3jWgw/luFMJd4U\nv9QR73ZJ5fVYQANBFWxjYbVN55z82Rcq83I88PR5jJpnxNxvPEBrU3SHgxI8\n0cxG\r\n=3zix\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaGl4QzGX8SIUtao3QttgwPWTFg62r7H1XWnWZSuhDogIhAMk0UdiW04gE3K2I0xFVVfyfY4tZL/wcle+MHhtOMjyJ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.14828.0_1613001358717_0.2767603398274683"},"_hasShrinkwrap":false},"2.12.3-canary.484.14849.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.14849.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.2","@auto-it/slack":"10.16.2","@design-systems/cli":"2.12.3-canary.484.14849.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b80bdccca2b642db404f52015fbddf3d846510e7","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.14849.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-i3/crRBHcKvnIVCV/iZdFLoZokkULHbOSuYGkeP1JV7e/xvvWA3eJkFuZ8GBWFQ3+NHqb1cpHKCrNxQorjHQNg==","shasum":"c9a18d07c02b7b99b79f4255fb190c466932cfdd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.14849.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZWGCRA9TVsSAnZWagAAxVgP/1u9tsv9NRWq7TSGf+Gk\nYmi0n7zvzi+UQswAPjmkfjMYrmUpirJ8FMVJgLKOn/o0kJlMlQVEah3151A+\nrQsz438JoSc7g/8gNqEJMCKSkL1eTdQ3l+LQdAfcdTegIMglTZ0/TrmDGSpk\nxzE9Le+RpXg6FnK94y+VzAVmOohDdVGtMN53Uf+mB/XgJbpZSbVkrzZx1CI9\n5+DY1egFxOZflpr0nAKf6s26Wj/gxXdxncI1pO4ZEkPCCc56FtxvDVe2LmM1\naXzEsKod9e/BErtDe8LC6jhyo7kJzHK/Nyy7OEjrOhHNEDQPAxwiWQs8ywhf\n8TCVU3h7ecDxvVWFTrcuFwLliUSumf37mbcPEkPoBvOykj3eRtfGqzVeML3z\nEP0dKBOjSAt8FuooHNn1jsSbmWkJladDTIWSpEIM/TOERyvy6sjt73fdXNWN\nkRGJSaasdAb53LumAAj6DsKdamMBPVRKnmDjHBH58Q9B9Rr3dpW1CiLe5tDW\nUv7fjAV3oqoaNiPqCgnzBCauzntZU3m9e8XYmFRGMzcrwVMEyMdK1Y/S0SKx\nC78GSTeAaDryaXhUyX6PmpzblTCShxMe0MbSETIZWiFcGL2mFFNhPaRGXwJJ\nXzf62/qMUtrMEk57HdW5kExk3Ck1PLzg2xYnoqXDAOVIiGD+pOcQn8Olq7J3\nqugm\r\n=OQlx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAzdihmTDj0Y7NRlWrh6Qu/ZsHFOShn6b1+wzoLOEYiuAiEAnCTcX+CnHu/ffGbRUb5gs1CGqM4aTHF58/SmMds0ung="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.14849.0_1613075845714_0.6698115963617304"},"_hasShrinkwrap":false},"2.12.3-canary.474.14855.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.474.14855.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.474.14855.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"df5a9c7e9e165c9709c87cc11efee30ba36c15d7","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.474.14855.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-y7utUvSXhfvhRI64029RdzjJi3YH5S69T+TxHT52S0VmVpiGPL4pMYE9f5pRLR9XVOOPDU1FYMTWbgiJU/asoA==","shasum":"3dcf2f9fd5898497dacd09fbb74ceaab5e644937","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.474.14855.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJaOHCRA9TVsSAnZWagAAktEP/jc+PvT62l5Qqs9ycwud\n9G62d1LeEkFqboPkjDbc0cd6it2dn5xLp7SsVE4jfUocVgCuqmnZkOVfDIpq\nf4/RlTQ9RIAEicdupJ/i36lJwMarm4t1kuWOQRhc6jVlEc1g1v0Ffdut0f1U\nsEtB6r1CGN6/TOSaVHZGee7+/ipyyh5Mhc9pK5kxbmdHDpiE2Wiwo5auKS4W\nJU7uV3jfnYBV85fU3pKHvYayqZwQ361xJF9IU+HpXB1kmZ4fqaH/+h1fiDpY\ndlrkK1OHMXLd1sWH5Yu48N06T147Bniz5r1IhCoNX3TlBh7rO7ezw55/nbGW\nvAia9R9okSE7cXtGCwRDS5mT7+UiECSnhq7hfaG5Y6VfBeRilgbWW34g89FB\nGAzVCwL4koD2CT3h33amVtIaqGq8iystJTtb0U83IeBosFSCgBuGvKbRh9Xz\nwvsbURoP5fH0CeawhaoYpY8aBY43RtIJ7uat7QGsw0++BsN6ZzvtN6B8GBOw\nOecbINyMKAHUBkzxXHXiPMBB6WcdqPOeP29qEQu/+HKfLI4+IbXEQ4dGevtY\nLxQerrn+R1oGuAWgG8vKFxV3enFPVr99P8oMNrgkLf8arpPlekDWU1Z+5Jq7\n5Isc8TT87Zcn40x57g0oNWZygoRq1+3z5KYAYkrbTpvE0bZV6sOcA2zDU+gJ\nKiZ7\r\n=0lx4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6SgGHT/g2GNUyhlaIuhEqWiS9Mn/rxlvB7/DKK2tTRAiEAvkJgbooQLKGweZeY8BW502M9WMCYsVCcan26EDi5xjg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.474.14855.0_1613079431094_0.996997946440896"},"_hasShrinkwrap":false},"2.12.3-canary.484.14868.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.14868.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.3","@auto-it/slack":"10.16.3","@design-systems/cli":"2.12.3-canary.484.14868.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"20a5f3f75e72c13ab5d71a75b0ff18ff8c41eb65","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.14868.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-h/PA00LSuNJ5ZVHRdhCND28pcCq4AmLaQIsJal+jWafEfSBYEh98zDj5RVaS0pYG/wb9IFrjx53jL7ZtAJ4J/g==","shasum":"523e37a4cb7a7576c92807b511c1e04b5d4db317","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.14868.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcJuCRA9TVsSAnZWagAADdsP/1QmptlMY4rx//kbHtkD\nlREXN6dguAoEWQHe3+0ZPEdi+774OeGdkY6WwPmTKqNBk3GNKBeaD900MW3g\nEHC3xaKFJoK8TeE7djd51/9XtK73Bu6MLqqTDQuIFUrLHqcsJDMAVPunoqk0\npW6aMO7TVDCS1FhUMBekLN/6wv9rAnEIcVZMIeug9c+0xPq/lkV70yiGh8v1\nKTHrszFtsuRoiy1wsE3zsnf8VTm+9BrcHak8Cx8be1A27Wmj3hMrdgG0MIXO\noNxO6PT11RP5fEtrWD8bTRDMCb2mnpG+2wBc/wHZifeVlWwnLuRg1T6ND7LQ\nioQEbFA83qVAjBaye9IW0KNaY3C0ganRBz5yIKSSSVhliNMWcx4Cu2Nzclwo\n6emq9aP3UFAAo9c+75oI4M1Xc3UtaO3RW8lnTCjw0zwzEupxjFb1DjHCnmVr\nRd+ZkpYlgdpNanm16tLLWmQszghTBjDZVxdKouA89QpbYKQsyrgOFggBqZRD\n21AcfaBXIwApD502JCOdzURB8pui5lN9Cot08ti6MZYICpDbEZ9/9UU3DuhF\nMKqVqjs49xMIhKQ+NX5tlr7kRQdzRzZVtndKHCSY5edxQNKgWFuoXbqyHGWb\nyN0ZXKgfpvUdk/+a2N8EB6txokUoAFp/kwA3VSyDFPZSj6rZG7c+zL5YXvpa\npVZf\r\n=OgUb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlk0r3oO/ZqiaNAVyuoA8s6qvg8P2j799g2dVY6KRu/AiEAkrkIou7Z2ooBXY7D1bpcimohYQgTLBPTL4qDRenL+5w="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.14868.0_1613087342310_0.7041035255980956"},"_hasShrinkwrap":false},"2.12.3-canary.484.14874.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.14874.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.4","@auto-it/slack":"10.16.4","@design-systems/cli":"2.12.3-canary.484.14874.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"492463c30a3f1fd3fa07aa68eeb4c740262fa32c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.14874.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-w9cGR24DGLl9mxqKxGuKtxMlZmxXeXQZ3etH4xb+MLwyMrhblDq3Pix1/J0zYM13DTpoqbkl//R4Qyn+brlEJw==","shasum":"7b93ecbdc2a415700b152dee6699b9270aefc689","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.14874.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJffzCRA9TVsSAnZWagAAXiwP/1x+sGifMC5NaUPDncg2\nj8GJJbutBlQ3K1+L3Y3i3U760esdAUNNgyZJQBbwapznPSgtzaO6XPMexAkW\nbPcmHNvCYyTqRkJBTQxzwiQn+VecIGrIeJD7ka+UMPUXwJD1SryZTYhWNkxF\nkl1FrH4vlYCWyRwWwTcdg7VeNVeDctNCTx/PSPpLo4Ge9R4G9mW4ZpuI+DXO\nUnCU6I3hpoVkGwsFdM2tUNGkyNFQAd/IEBIbDcxtnVdXHcrELxSU02krjxqQ\nea4q9TriNOO+K9i9h+aR+UCuZ7j+NKAMl/lASwZJm7ANkZwKUleatVhHKcQa\nL4oBjwSFZO1jZQ5YYVj+ViDqxkH6d6GZUEEg/92ejYuVlOEmZVQQ+xqcpDW3\nHt5jOBxuxXjcgqMAA381iygvd1lctytYdHWxSicxV6LDNh1XS6fl+UbtdRbK\n57XJeoPQAJx/39ly8ESJXr+HV0ZFRrAxSAFYJ/yn1fPhGXUzmKG5kGgxXJB8\n8cN1WbN0gAQThV4OelS80OZkGnbvt/7QxVQYOa47oOmVU30OaYQnIJBzBFwz\n3WQEZotFe4zqOnxYB8Uw4quhjJ4bJLvEXFHp+eTW6QjTE9YqGoyKl04fDBo3\nvQkuE+DMHir6rts/Naa+2ia/7S0/1NmlCqNgyO5BTgfrnRU5wcK2JQc3uZ8K\n2I/v\r\n=uD9/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEn5PtunjJWlrJDxQtC3rABx8iE2rmkxUu4T4oztXZMgIgaLhlcsFQTKpIkCFJmwb7AGcGH9uzQZNdGefhuP468OY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.14874.0_1613101043430_0.1289762107911221"},"_hasShrinkwrap":false},"2.12.3-canary.474.14885.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.474.14885.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.474.14885.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"239d78c7fd2a19ecb5040d63571a9f44f3d11ba3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.474.14885.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-lszCKbREuU9N7U0bTOrljlb2N0kT/UcLMrSDWmH/NkdxRBWi3gkdg7HUjiukvwpEwNxi5o2p/IaO5esiGi0hqA==","shasum":"295ed8fb5263bb5fde794e527709e37d5835ca28","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.474.14885.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJlx2CRA9TVsSAnZWagAAY9gP+wQmCw1Ntb6wsAQ7Yt5t\nBulYGeLcg1uifY7e+Kt6zLqL9GdGS2tzj6GducajbeQYy+0/+Mw3mIPjn8wg\nMpQi5oU54ihbVz07a2kUb1sqrXdc81RCWkmZQjvuR/BzhuEz3TkineyQZsdk\nQRmxo5uMsL609lRjbJIMCvQ0or9OvPUTQbZSpxki/vaWv8/yK1vy7nkwQR0l\nLOIuHNhna1D3QDhxL1n69GBNFTE4JR+bvWiK+SgwjFDZFW3OV8lNnxoWGo2R\nZy8qpjYM2SM82sJmi+1rJ+PosuL+/v8CP/wnWaMR87rMRSlKZflvsdrAHdMp\nwO724QiP+xLYP6XXiUHWbe1d1YNZfI6w7wp0cXVgOEeKD+CYKBvLw9pwmoQd\nJCgVERTRBlkGrMTCTnuokQwoyo/iH2zOpaYhSJ0tQVZGntM4I+FriQqJXb6x\ne+tLGQ+f7Zx3zPWEbF3C2Q/1d9MbhS2j7ZfuZulPSz6ppjZiSZasDabmNmbW\n7vL/ZbOP7STi1PLTYYrtNE543qiEf2V4e3KWvL71SBUxqGw9IZSdKy3K8M9g\n03ZemFIZAHBm/1QYglSZdkTDYMqapYRxeWL7x6ui92MJgz874z8Rm9Acu/RK\ntldJK6jp7+0SEvuvsvaEHvic8XxGWhvw+vSrNJWFuF7H4xhKC1U6l7IBLFlV\n3Iuw\r\n=KJEw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGcFQa3Gr/9irOsJ0SVDsnlUBxPH/nY6zJP5ZcehtSqAiAF7X7mQc2EetNBYRjmrvdt0Czh8zVlP5WamQNdRWIGYQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.474.14885.0_1613126773809_0.24974472523970648"},"_hasShrinkwrap":false},"2.12.3-canary.529.14891.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.529.14891.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.529.14891.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6dc6b1c34317abc1c7faeaed32a9a37e0d8de41c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.529.14891.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-boEaFQK4NDpvKPUFzlWoUoyC/cZgoOGrOk6BnrCQmSdQomLf/CJs+pwsd+gwSMgSl8Ze8Kw9xVOorqSUdJml1g==","shasum":"6fed983cd19862ee4d2971f1849e8c66de97aac7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.529.14891.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJsRzCRA9TVsSAnZWagAAr28P/jl6kGxj+4laMheNC4I9\nJBDNXlB44WJyDo4xbVpD1QCYywZdbZNpz5e8mvrcHvQ/3/hiyhm6HRQDlgyt\nSaJy2Tv3SFcjv09+5EtfqdkURdwljNBANL96/3IepFcdJMW+Unkfap0PLBH4\n62QvKntjuA8xh4D6CIagBQJLeiab9lfx6tyNQ6Q7e8BSHa6xHnih8BMh/505\nKhWCv/S+OPwS3XQwC8QIlYwwo6DBFha1hz3JRWOam5/U5j3mT+lwDbupFTUv\nB/RW2hZk8RYPVuif6TfKfFRKyXajJX0WLnWr3aiLSPrt4S/xMWrQgU/WyUkX\nPKSlnWI6H5yS8MI+LFSZ5aSVgrEaRWz33QEkqDwQoxC+OIvh+MO7jdtFg9qN\nJPATvXCG7DsNG3HrjpSypTQN8VgJkU61ngRi2Hv/zJZrQ91+0w2TSdandcKk\nygkKtQ3orXVgmTYcZfbtmEPEhiTR49llXqYTbZO9Fw0tnfvWhraVTxZoMP5l\nrnWza28MLkVfhjfFdnFXsVhjYhfKBdNkR9+1loYYkUTDQ0ryVIrV5LMJdKpm\nEWusjK2zLzCuf4uW2h5dy0kfb20EGGfU2wJB7pNf9dO2qngi27CeJAn/V/TB\nyy8KG95ZcgWqzvZKvP0vGFAfN7fYsZ8jxo6vWDLMuxLN6CXMEFd1Iqbs9/o+\nDh8p\r\n=6B+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEckzEOEjZMRWdyQdnJPqsWUIRyoJjRZF4pMePHr1YmxAiBxZg1xZSGVNUf/zUfu1saMDoLM76EfW0dRHgTo6FmRKw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.529.14891.0_1613153394910_0.10368645486149575"},"_hasShrinkwrap":false},"2.12.3-canary.596.14897.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.596.14897.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.596.14897.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1dd4292d4b65b3c313307aea5459de67475be59c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.596.14897.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-WAZqI40ASvO1KrVQBaUHZazYuw10hXn6lfWRdmRKiM9vp1RnYEwznYJgRvtQx5ObVki6QEHO1IwX9Ho0dn89bw==","shasum":"c9dd90779967789514dd6570530101b042b36e55","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.596.14897.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJtlsCRA9TVsSAnZWagAAEdsQAIbhJIDIkZNSo2miKEIW\n94GYz9DQxioPSvseNm/QXL0ZT1btYK5BLK2iwy0Z1xx2rf35Wn1JCYEkaHO4\nm/MMSFoDyogDRw9fz21hzi8PYvlarM3bJG4MRxQUVTWYOaBmXaE78/1e1DC6\nNWKz9JjMOQVtoSUvAW6SQHdY463+jvpwmwCZ4uwz8xGOKh9GMOWB6xH75om0\npLEfnL2GHi9aFd0+IAQ8uNem2oqavX0HDSnHhLCh7dubnUsJsL1Ztds3jqc7\nzll3/5gqbq50q7YSxnvYqZEtAJVCbkZ06mvBvZpC+w42H1C3PIyHJTzWimFv\nc6A/AFcALfKy4eOUA7vQcGO5D9yArfed+fEK7A+aBA8iJoRl54HiKdf16BMB\nM9x7Cg1Ou2fNUk//el9RoqD/HanLsLpLyO5dNGtaoi9Uwt4JBnCWV0M9Ma2N\ntDvQUNCG4YTIDWghxDNduZb5qGxFr+eZXPUTAzzvpfrvct0z8SF+S3FgYx5w\ntE9ve8CPbmDpqlBTNF6f6nnvfU1LvwWxv5KQ12JpDXdgqaRNJhgohkceH3s5\nCOpEhAJnr2occr1BoCM1zhLs2mOOJLCmziX6SZZ+QpQKTrB+GtxP6x0LHIAU\nqZ1euufGSNx8+a9CXsT+D9gyRExY/d6+WozgQ/UZZNW+MbVW3VwY9AXig8Is\n8a5g\r\n=lYeV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/0q4UFNfGJ3+EYTy+qBsy7Q9rd6VvLVw47dGYmGN3+AiASTbM7bm4/+3lBMaLciCEy6ZFqusNDVbI2+1mVnnnkdA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.596.14897.0_1613158763766_0.6182171878069262"},"_hasShrinkwrap":false},"2.12.3-canary.475.14908.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.14908.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.14908.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3c187b4addd08687e06b52ec268fa08218fd8df4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.14908.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-s57nuCvSiz/Dw8g+eB/Rqdx6QFYM5ryWJUhIzCitg7/Ptv9cTM23W6crlsmLlp8ADaWhfQE3S1gKFEyvCBOM9Q==","shasum":"7d42208d8567af859e37bf1824e51d97ad8f7ae3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.14908.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJ4JrCRA9TVsSAnZWagAA5PsQAJZAYAuTZLSXo7E/WTQV\nHmWIvBltrstZNvuYWGzB56loktUrzoW4dExAj48I6URLRfobJHNd7YYkdLGG\nPurlIY8m7sSoyMdJpBdEOfhBm2tm8u97QK0PNhbxJigQwtGzDe3XOvUIEN0d\nrY1Kc1JUqwVZ694ohdbb7cWypvuKX1y1bByAZ/RwLMO/lDD2xeTrG32oAKNF\nVuUaoNp1ZiooYKTGNRmtd9Ow7ihFVk1MyI3wOLWdlEraecY1uiRadnGjGP6x\nK3sp1m2rjd7ytHDGfY5eizsnsdCjbwTH/3k3lrtUvoE2As0fyaFX/0bxMKxC\n8lpVMdKAn5Wb5aSlEab3PHXtv/TeVMFO8g0s54k68Q908sbGepi5JuEXyJJM\n3Bq4rf3OecTiEnY288whBUVIWUto08tWHDmn6j9f8nFewNMEDdV3mfSHKKyt\n3W2nQTuGkE3Lqld9DOYA/vln8mQtl6aFxfF033G5aBdZid1k99YYlGDT++2o\nLHoOdw+60Vg6omo35iCkE/330Ystp4FgC90U+SihWZdJo1D0Ao2dm8bJE5nX\njFUuAiYuglliaa3oRuzkMY9qA8advmHV/V4zdW9baWlbVor72pkRCNQvVDDW\nTEyzFKZ4ROytFX870o8ajyLV4GaVLRHL4M93CgS8nQR6kc2zvX6rsUsnIB7T\n9ynE\r\n=uO9M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPm0e4XQ0EpWIKJnjoodXikJ3tAu9Vt4rGx+xaURlfZAiEA9daE5XV0Iz+ZVN4tVwKGHP7iZ7hNibi5qinxL7I4TCQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.14908.0_1613202027117_0.00660460821180453"},"_hasShrinkwrap":false},"2.12.3-canary.601.14914.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.601.14914.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.601.14914.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"eb7e794ae42bfad65755dc3e48ecf66fb27eece1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.601.14914.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-1hruVhJGn58hDSks7P6Zzkz2WL6yNxFeYknGzOkYRV4Z1MJ+M5mydBLltjHR4V1faYP6E8wACJL1qNg2OlikOw==","shasum":"1f927eb7a004ae86e5cfb862417aec31efadf134","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.601.14914.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKW9nCRA9TVsSAnZWagAAbaQP/1bF2Xk2Owz6flVPlNh+\nnvDYCi0FUebHjM+eRtn+Ie3pt/H8t3U0XcA1hniSMvVeAZJda3oZkuXueSWH\nVmxChmGFPxaTiinb3+DvsW+PXBCnZJOAeeFs6paDFX3a/GZDS/6yyjgb9+y0\nQexpUBx7X2xVOVe5GxFkYKZQffHVD3oSPNcODfnOJLwDdxYQKApfauU7c3tY\nsdTiFbY1XEsSzV8cjTqn1s8GJjhUMRJnN5hc8APy2Ytm9M34c4F5+hGuF+wK\n8kovOdmd7eZG9tMTn4Prfg4h40isryz42+vF+Ls0GdRwB28EEXKTYDiroWYB\n3thjEQMSwRk4jxFVTjjg6VAlG0jKgehjOWtRAXyGjtoKcGVkQ5oOIIEYiHkH\nwGAAmUKlzh7yLAGObkNsHlvVvKjuL1rjweIayYHGg7pYD2DLamnILMg3hcjc\nUP5c30JCmOHhmzU1vTfKb2cSWv92s161D2YXBrffctTbJ73fD1d6b7DK+B8D\nv25h7pvD2H7/Xbj/Zlu0dVrrL9+gz5B6x/Nr2oHknvOsPMzMmFr8GUn6B5RR\nhf9+kyByDNDuT8CHTwAtQRTlPg2zTSmxFsgq2JyTGgREsRP/kRLQ+R/nFTUE\nsS7vWr/Lwu9MYvm6zG+uX6uH8+YrnSwHZv0YTujz6/v8iJOdLCjOepULhvzq\n+5Yq\r\n=5pR6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIuK6KzxwYcuiBAP5FHlp/EQSuemCNBeNize9j8wCMNAIgIyxpg+6aa7uM1FqovyWzh6/vD/jX4PxvGrNM2LQeArc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.601.14914.0_1613328230863_0.521490220432113"},"_hasShrinkwrap":false},"2.12.3-canary.474.14920.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.474.14920.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.474.14920.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"352e9265a4fbb2c2e9eab28803d3024da16f9060","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.474.14920.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-uIiPfR2GENdhrM3i4QglSGxp4nAXZTZPmgPTRmdUiz6beot7XxFF969AZOjWo6/OElfAvIVB0ZDG8f2Wp3MR9w==","shasum":"09e88e6a62af1d23a93bd2b7d807388d1a05970e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.474.14920.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKYaqCRA9TVsSAnZWagAAvtIP/1hjfS1Xspy+XtdmY067\nDpcGkicpg9JpdRd2uO+87K8q3sWrbayC01pkAIf88zD3WmFaoiyfGBvGLSfG\nZD8GOKOR5/JYNXr87nihvRb200yleAE7bto9HCynNX4nu0ZN2DLbHn9wT/3N\nG9UTw0wvwJytdaZ0CfZLRrcWzQt8x+fiMUQI+rapKXPYr1d7hAKHJd3c4EcY\nOYO9YaWqo1UJP+8WXrBCLJ5YRKb6JKqwwKJUmN9Oxx7WpBuGp93T6S8HhhHk\nOTVFWF4xWghAsCDn1hCjgenNaW6g2TwN/DKpR7t9MH/uightYv2hWiIaPWhw\nwdoN8NoHEaeLHomjTKwk4y5wqaML9u5pfBzckPIptwUQcbFX3Haqi9HQ2m5I\nbnJi7K1ObTCgRy5Hghlak2FdaJ03unYB1PO5paY61dWZmV6bXINiEdTmRGUv\nk+eKbVdLsyixrAzg+Zhwr2ifqaKdiY4GBs/Dw2ztErYFOg5UtIGoL/u4ESlm\n72qfIiXvSw+6y98qiVJ8eyJZmLZed9ReDjR5Kf++/HmUQMUTyMMc5+ZJcT20\nF2YV2PJpeKvE8t/1g2vZShGBnhdChskPAdN0TEM5V+HLBIZoieaZev/RFXI6\nC+Wd5/IvRAmJrO/NOBkLtUdafuUAXHVrR17b4qloeLLl2k8+XXc3JsjlJi/4\nH+YX\r\n=7h+r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTXRtgy2r0vq3e4EYUg26ULlhyrfE26LBOYEIOAvGjWAiEAxnO3XDfUpDd8QnXk8Yi8I/VhutZkE7IJMFjigrfsQ3I="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.474.14920.0_1613334185648_0.7500816412509221"},"_hasShrinkwrap":false},"2.12.3-canary.475.14926.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.14926.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.14926.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9505d983e6c7a33ea6fa5035cf91ab24c2725296","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.14926.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-IcY9O410r+Q6MNcoIv4P0lyKYiNYxhHN+OecuJYdVaNYz4D7ofxhaKjOqGvrCkAdludLd4oACDUlj593oqVVDw==","shasum":"3071e627dec11978c4554186ca101e9f4d7cd912","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.14926.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKawbCRA9TVsSAnZWagAA1o8P/iJxWBRwNIAPQUJs+Tvg\nFPkx4sf+JblKNHAGPG9Ch/fHwa7wHnHcnK+nFvneC/TB4zZUZveSfO+FhfXt\n0A0xRN21wkhOO2+ZUUpSNQmHJF+YCOrLeW27mK/pllfsJwW/fFwPOno542aU\nYpuLTeTHniwCkENmXrtnazPiRluuk8GnBd9PJ+4QvuuVzhOm9u2Hpe25c6u0\ndJHWEDQloP7QcRjvCFqc9xoFTRGH/LrpJXdPGLinpG8Wx2+WteA/MlAjkWW+\nvv92tZuQ5nszYc+f1Si8UDB+1SayqOYmiNyQMpTltdwMmi3Xp7eWLXuTU6jn\nq3CTJlfU3vlT/6wHB1fiexInOQDP/xGOhJITlfJIl3FAx1pGh6is1pSr4hAE\nsnmzRfmtz6+vd+4U+p4I5FcP2s5UOR87drtAXzUbjYBGHgoCsmIgiW7MTQUe\nyb2yWZ3gdpja7C+hwsBuSMNcjcDxomCWxS4oIPUY8SDw4n23hN77tItoukcY\ngdNYC3KuZQJz1WZyqzuN09e9BW/o2bVtQkI4/fM0+5Df8ONiGJm1sMVWOHw9\nfIoV8+9w4sVFMLf/ZfMwXVWHtDP+JWa9Et8IaEFqEya2CnyIU7I2S5LQ+Zhu\n/es3nMAxNkeb+SOllRZMpDaPxL9T9AVzTNb2vBcKmWbNvWf1fOxIYmT8lNIU\n/vq2\r\n=nocu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6AeO+1dEce3R9TEx7oOaGTijmN4RplfV7Y31rrShYWgIhAM5ZjzVwCGbWWv/RJWp9fPY3+qHTmBbIQldP2sCMHHKH"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.14926.0_1613343770732_0.6108976708595277"},"_hasShrinkwrap":false},"2.12.3-canary.553.14944.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.553.14944.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.553.14944.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b28a688c40d22f4a246c123570e43425d084141c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.553.14944.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-WoRZi+OepxnuvHXAXJTNebhIuDfMzMwpRY34nTlwbTqQbmxLqWSNc0QY/BgCuNVzP1EjA2WzLYDY+SzmVOaviw==","shasum":"1812794f2cd017230169bd7cd9c372961f8df3b8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.553.14944.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKpo1CRA9TVsSAnZWagAALtQP/iL/uQHjM5VhnaF20r/l\nVuHF+cqY50gYxTub8ovDgsgZvsgagK/onN6qHTsUDRRFA7CkZnhipMg2K7Rd\ndXe0HYLYlu7aiOugRmJC3CP/x7T6tMths9tnQ5DzSGcozgV69xkGFvch7I47\nfObPTZgwXHXoubWTxQ3BMHzHLyJkaMaDhr7KriHEap3B9If6WoMy3EtWTPyR\nBk8AE+e3f6ThXImq7rgGmAPg4LF6qSz6iCVFBIvJNXcmDYsvuUgknp4XugIc\nL9JG+pKygU+HXD7d+6pyl4gC1T73HCotiZY15KIi05tucycpafnPW/CRbAc/\nBDxv2PAgLyAoz2+mymktm1oPJGKnQmjImRMPQrwF+A0qK60yGK6Vl/XTSppk\n3Y8Es7eQ/LJhRFVz8z5f/x6Ha8BEntqZaP0s50J1v99osfHPzQMVGcrBxPRN\nC2ZrIsBkXBq19hkupOXV9/fnqEpUk/BYfWFA+jzBy+g8wioJ6wPQ+NqSifGj\nJ9d7CUPJainqX4dRsK5slWJPbFjF0vxjS+dQTXi49L5swotPSQkRu6Dg5LzV\nEULkf/8ssERaYh94CBC8CPl3hag86rAegi/x5LPz0tDuJQnOMTA96ShQWrsa\nVShSa8dCaCn/w0SfZUB5uTZhACf8E0+DHwqM81e66BpCpMOpuPGfOq5yNHgH\n+C+U\r\n=8otG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHD4TAmls/pe5yhgWQeTnLLsApR5aKU1FYEfkdhYVGOwIhAIosxdqqsU2+KoYVT5UwWOHdvsCpNqYnrDorVppd6KFY"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.553.14944.0_1613404725405_0.31277282273515516"},"_hasShrinkwrap":false},"2.12.3-canary.529.14945.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.529.14945.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.529.14945.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"421e0e51fc9c1cb84fa66aa9f79ee75aab20614f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.529.14945.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-/BfHaPZvh7kDftqLxBKOpISQBektdUcgOYXfA2kgG+J4DoP04VFZVTvrYllgCDGEfUaPI6tj5Q2u9iaOafRLGA==","shasum":"c0576e51c47eb7c8b0804e662142c3d695930c4d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.529.14945.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKpsXCRA9TVsSAnZWagAAUkcQAJhZQ0t9o6Yz/W9ORlfe\n5NshOjuJqplkba9lssuJKyBo6Eyvyoav0Lo9eXa/DtizP4bKAESAtGmLvvc0\nHYUGIDGMDI/3CagkJub585SpIfdm/HLVX8hjsw0pJG6+R0NrvAdtuY3rdzyF\nWNzz0pY7+YgXe0bkv5FRz0Zxw2Gzywo+Dc4r88wSXQqMKt36Kuq4flxQu7uf\n+bh7zLo96CVRMyGFJHESIknywAtl9zoeK3ChFL7GHYtF4/wV1YkqCtt+Gx4g\nRw9v/zbjFhpVO2I959EJsOnsB40aUe+f3+kx0obdbfAUkXG9gEZMsQ4arpxG\n2b09jp7GqoKrClY0TS6J7TX0FLToWeV7hjeFfI7nlfT7JMMubZVRVbDOCc7h\nHbWMBR3OjJP4hQ21B53izzkCqDM6I9LDocfpl+sHQlmu1nQvqT5tAuVoHYBX\nT3pE7BweaAkt4KSX/+EiFSXGBcXmHCNiH2Fhe1cA85s2MwsRisb81vN0BjSU\nWxsq5R/PyK8PnWReibBrM1sbE+D71qZwQLkuo+IjQQ1mssf6p1SrCtUWfYEE\nKfZAYSuqgnbKv6Fk1Rh3r9+56UZ7KsKV0ObnTYMlW+jh9nMi3EKhfiNHi7aO\nC8sGVBTJPYJD5tQSezgCtl1mG4/QenJmnD13RUEQB3S1XVNmhyMV29TL9TSM\njtLt\r\n=Gpkx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpSOLD5SF1FzVrCRyA7pVuvwkftsn86f9xsExHKLsZ8AiEA1rwYt/TIAR0nmjqB4gkoEHww29s0b75/TM0EgIaY6cc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.529.14945.0_1613404950871_0.4521755702407091"},"_hasShrinkwrap":false},"2.12.3-canary.621.14971.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.621.14971.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"2.0.0"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.621.14971.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8985d069ff9798b61c1d5b81a214df552eea89a4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.621.14971.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-tu6q0Pvlh452IBs/vAN08mIrP+tuLWEsNWl3Bg6nEDaqk4GfL/kVcrLATe/A5tNTIjqNtjJGfh0eSmdLq9yjIw==","shasum":"6ab6b08916a2ab51354cfd1291bfdd04fdcf5069","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.621.14971.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLVRnCRA9TVsSAnZWagAAaiUP/AqCvTHiDf+8nfRnnQ1l\nSxCXdgcjt2UpaByLmuB1gltOZV5+WAO8VxPbFMWgt3O0kjcIwAkCrL+BapwJ\nlzQLo1yfbOD04pECF0eE2k+q+Ei056aZT94QqcUocx6OX/ba7ev4wjRBkMOL\nD52A/ZybQNN0nHhr0UhlcLW6iCNnu/ic9zw0UyebXo2qdJV+jyf57jHCC2E1\nSTpUZwgZ6dlPuYnQlAEiTVK6CZrp7OX4jl/yRLLiwgEeCdXwfR5RtoNBgmGY\nU8qgnelySEk1TtESiBzlwg6buXJYgJNyHztTpOYGQjV7ebTvpCKhz8v3iNqR\nShFXQggh/1bwNovUub6GVlOtSvetTB6L0Vx5IkhavG5ElxUmjP8A9airNfLH\nuPaAZ83QuesQ23savDH9EsGv1fScELeQDW6JH7DhazPUOKrooXhLnbUS7diB\nPbtIPeYeIZ+euRHgDIwWo3hDQljmKpvJ6LXGvcUZ5S1KaCpNssTt5Ai7yGYa\na3J6naVhc9fjJVChZV6WWd5MPFzuu6pLJV7iRJEpy9CuzcghKNVzAfpCV2lI\nQXK28OkQ0puf70hsETRCaSrzrJvAc3IQLVzTtY0qrA9xdV2k7tT8/OXEmWe9\nyA1xRfsiVdUkLbeiHl9hSoxgW/zhEMHJJmjPvuaYCgq4R6JUl7NuOCchJEuf\nMc/t\r\n=T58G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAHr+87/nAdGqzqXlV/e80A5QR+/4ZSmArse1oAbKHvUAiAJ2JWb8/zZUYc8KGt3+j9q4OCp3Dp0payMtyOA74wAmQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.621.14971.0_1613583462481_0.2543610362224342"},"_hasShrinkwrap":false},"2.12.3-canary.622.14977.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.622.14977.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.622.14977.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.4"},"gitHead":"73bb8da3f5fc325178a37a7dd76bb59d412c9b83","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.622.14977.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-pJAiuAy2Cdn9lYl1osstoagnDdCovbEFIRPysZIJNwUweQaNkOzt4JKp11G+hK4j9UQGlpS5BXnz/EK91L3WYg==","shasum":"5b21b12cccec8b7c7f1b18cf09bab0c720c458f1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.622.14977.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXSICRA9TVsSAnZWagAA5bcP/R/05hIpdP/se6MHlape\nu7rjdO8X1PqrxrT5XgNpWHSY79N4R/nM/ZibwQV5IzIO/5Wl7E8akvhMEi8R\nfK85Fyg66p3GDVdo3aYQBomzwIhc9nIe/rsWi60K20eYSBINi/Hb4bi3s6RG\nXN6KMQyZwLFV+TERf0wjcUiG43XYZyqGdDrgKy4YojIn8CXlIaBROqwjuh87\nw9J25NQWzqUhuO7AViFr5UeeV0HcG3tsbEGIkrpyognj6Obuk17CqUxN4XnE\nNEdE+S1Qehwqb70kGVv1R3wGkdFJBW9PGHEHOLrO2HcymV0C+ksIiKYXT14d\nIx/WolmobWaG7a2dfZXJscn3qSOkPLx8Keka2fS1fTiVAXvCUyXjC4o5CNCE\ndq1MurRBshYUIT+NeopI5Zv8n+UbEsdsfkwPCjJNKIe+9xcWAbmyT67uoyKd\nD+u+4IIgVHPC2IGMu2f4H8iFS5bqj/higmRizvznI1h7dNly6xFxOHNcbDOH\nP4ESL+0AXk7X1TFnK4/daFauyxLdsBhPt0xq6Q+OZ9Oy/l3peCriSPv8Wzwz\nN0AdAWGmtonGXsTN/hE0U2HL62F0cXlHZR3zTa+h5hp1WzTO45ALLWsA6R3Q\nOCpokQzd5gbC/H936CYayrQ8wpyJaVToa93+cuuw9tMWcNwOdb5LYvw88HJb\nLXZ+\r\n=HXiT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAT+32jRerk8DCywaYfQzm/5joNxQOMc50aU3xWF+GtDAiABe8PhLcXdyb6jtYTLxmiQq28GVc9hZ9kyMzus0seW4A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.622.14977.0_1613591688066_0.47656051828816937"},"_hasShrinkwrap":false},"2.12.3-canary.621.14995.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.621.14995.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"2.0.1"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.621.14995.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"18d8f0ba1eda9a4643c7dc8efae7396c463cd86c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.621.14995.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-gFawFxE2QH3s+tqSs6YrAMcG+BJrlyhASAMouEWJqQNG7R3A5be2jLPZs7NKGODUL5vk/nyPri8dA3GRSfoTyA==","shasum":"909d66447572b62ce0609f39409a1f5b6e5f13eb","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.621.14995.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLoo4CRA9TVsSAnZWagAAEa4QAJtmzgUykGtKwe7xOZOl\n6i8NfpY5TSW7UBxilQHXwRvqpa6ppgPMmsAwt0/1TREsiCfqIX8ehjWXk/Qa\n7pWDzafxTPlGogrsajb951wm8npYxRvSY8S5ya89HAJgxb+zAGCNloKPVumJ\nzNdwLkKew9v5ZP4PjjuBGUZzKRfQUN53Vb1T6DkCP1AanEwXU52ux2DPj+nU\nqnzaivo6maSzZWGmjK/kv+GdRgfslQroTyGy7m2zS71DZpbn+nEfCgK98NsA\nJUw+H5m3ttK0xI0meU5mN0das9faneFMq0KSs5LSho/Hc1oYWME9g9mkZvf0\nwVhOfnptB1g9tDkhWxk8EGhEwW6jEiQQuwfp9Uhc21kY8KmAVdxz8blhdX2U\nj7jlxhBTRKO/V6UvoCyYYswiOw1idOVN1xSWVGlHiXhjaUYK8VOov4Rc7JHw\nBToSs1lHZytv3io6G5ayjrYaJhyEhSlqu8wcIuMtw0tMKB7BO2p7hNYXGYpF\ngC7CUILWHJR+XwNc4oeysQm9nysZ5QU0NDtZv27nLb5VxbMa923q7Tq+Xksl\nymaiFbqKvvp3hfinWjVqqqOHCUDOg7YbHcy+MK+YDXoEWUeUBKCb0jllZRiH\nt67lLDN+aVsl8Hmr+tvYxfvn0lZ4iTRP3u9ULw8Df2VSONm4XEei9wfAe66Y\naUz6\r\n=Ksol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBC3v/2b3JXhTEyAYR6CT3e4Sql8YZfFVkaDXGf3csXYAiEA8jN/fJXjqmFyP7CS7W2LE0r4Ohy4mKnWtvXjWDMmyRI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.621.14995.0_1613662775611_0.2955315532817775"},"_hasShrinkwrap":false},"2.12.3-canary.553.14996.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.553.14996.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.553.14996.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"732596b79040a404d313e0f4f8b5b97cc2769b52","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.553.14996.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-YyPeIvckQHq+uCkfblJVOPN/jUWWUfCVNligBZrjpFw3TfrB7QCG2TKFMgyMotcFBwW78xCGN+nhl4kXwNP6AA==","shasum":"0e529c8160ec772c21e5661d4af94a6624aebf3e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.553.14996.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLopDCRA9TVsSAnZWagAAwfAP/2a3Pd0Mw0i6VBS2WnpU\nitsbiwTI0y/uL7PcvjxffRKQe2p5gMiaYHYk9ECaPyFf9Ne/jTJIo64VsXK8\nEyWsusmHY3EwBcBC40vyKsfcB7uIe43raJen+CbamsYnCpchPGE7h+PirLPe\nndw7yMadh0ohEVun++xyx0Ol31Yr3cGUOddqvIgQCkM/2NFDmzW+6HJdvVqp\nnpIHoa/AMxlfBJFgQy039OOsZl7YnmRcQ+lok67mjK69xz/9RFjoTVB1Bu+F\n5o2u8DSxg8qkRcKHfowTH+Y9QQUpOHygi4bL+IOkfIDNgB88OBqGoR8TStWU\n02lPSmi+nCnTunodtNTJyz4zwlZUhnvxSntgYvcMdQTlQKewH2Hnb44blTip\niVhtimSUSvV4r8ACBy+aj8785BSHs4PAXNtok3LpJPge68vOsMDZ9iqM4M/G\n58m7NlXZ9+f2AwORTNtpQfNCWEtJZaW5xkJm16fUp03XL4+RXQl42bo6Iza0\nmskFb3TCVjQwqMCUJ6dYfuUIRfoavFPBaq0jhX3/cc1FgvWOpYMBPEGIOki1\nxgR675H6qbyD5KkxPmKfHrKOBKZrZc5u8gEy1nJzFI9b2BHB1YEy94xTRM6M\nfO3oL5jjVRyjewD0U8kqRbHXPY6n7Mfy1PCJVhPxw3D9mgWN9dUwevptoEUD\nDfvB\r\n=VsVI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY1JY7SKUNtJG/WI3YTlM9n28a7LIgFDWGNe0K2CoPuQIgR5AhK0ZaOgsccVrx+LLkNoJtuKb1NnIpvM2BOXSj7fQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.553.14996.0_1613662786504_0.2192150038479963"},"_hasShrinkwrap":false},"2.12.3-canary.616.14997.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.616.14997.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.616.14997.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c3182b20d56a6b72a75a1e78f04406f68dda26d5","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.616.14997.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-HGTk23P8lRu0V6nX6NNILP3JwzqD2LGttusNYH7e5/tvij8yMjGyRfazVKPZGI0TbMOeRfOqDxmbghGMTo52nA==","shasum":"a13383baf994a9b8e844fd1bb34cf28dd57fc09a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.616.14997.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLoqtCRA9TVsSAnZWagAAlmgP+wRCDDaP1EYuCb+MEC+V\nel5A6zY/eVb/0Likc5gqpZetbZxJM9pDmJOXT/aZgbGRma3QRxb7JrPOPOuM\nCHw8ixZJ+JOOAy4v1VtC6YjmW/C18etIih0ySnfeFAX2J/Lmi/4ztCyyiHX/\nS5me+rfz10t2QP/cXti7EJNjEe+Mmw9OqFL0OIRWDwfyq2bNUYdBo4YKQOTl\nkEGSg8to1JKj6QT8fzGOw4GsQFRcCb4eBz4QSvD60jPsbxS7qOhA1baEuGgT\nEADN7HeX4SsQeF53lvx2Xl9hmzRsAL+IHxYoWJmCvkqY2wWu1W0ZJiw4MwqP\nUzcg+f7SDfbZn7B14zs6/2dD59QF4abF/Qvtnik20HaL5JbJZaJjwEMOrLoy\n08HVLVFjbGRo88f7BQ7uy5ignC8zE8uFJjlk0p6cIyKtz2KhdyogD3USEK5L\nS9VYRD5Viz3mHOM5o+ueztGML/APY0HRmiNXs2IOnnsyntuMTDvmZqTi19ap\nIrvQtr5NNxrnZoSkCg878tcVtSp4AcGFtY3VGErZhfpuAKGYvqHhbwBRyDUv\na86NvcX5m/8NShl98TPYel8zQg+T4obWsyDCLQs6q2JwdAfBDha2nqn5LTlp\nSbEZ5ZTDBrzlczcEDoVVaE9KBkeN8ysOx6yLxC84ygprZzL4d/eyubgc1S7H\nLxW6\r\n=cxqM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJaLiJ7ovu661rfWYZsxK8/KWMfvnHCIRW4r8jytWO7gIhAIVMnDFqRj1Ll7qEbR9tH+QvZoZ7cIjSqOv11EKa41WH"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.616.14997.0_1613662893452_0.35874585321827657"},"_hasShrinkwrap":false},"2.12.3-canary.587.15017.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.587.15017.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.587.15017.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1f35d50420bdc4cbd30aea87887998dcc03662e2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.587.15017.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-GSUvS/KG5mykVJp4DCe/2e+VRMXmPm2atZdemcC2WniIzhSBhtkG2YOtQx8y5Tpw9Z9N0Ix6qZBXoaEkYHRPrw==","shasum":"0a834621f004984083392833f2674fc58edf3980","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.587.15017.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsNdCRA9TVsSAnZWagAAvLUP/iNlU+F/boqbGANZk306\n96jdEiGzzUmR4OxkrztYbtfqeQScVqamB/uUbtJfaOgjQPvIbciSdrAcjdw0\n8lNWURiRzEizgxb3W+qKwPJGi0/n1/BgoSeVLlB/WP0GZEwa0Ke08GugUJV1\nkVj8SU4E4aKV8rp7RBDCjeU6u3bHVaGNK7Mq9A1Gm5000PnLsY79XwxvBtfD\n/7NBTfv1KzmVJzVimnLDSe3g6HZYUueuUiP10wa+hFXIKU4hYDVqkFMVxQiS\nD1biQ5+wbYT1FplTnPcR2JKuSOEtAyclSKd441YS0TEpDTEZQLMNkWIUD3ev\nPXUsm8gFKXo97Nak8Ic5aYpyu2wDrBW+w89ugmrqBdguXFb5VNmhyEyQXvvD\nwNTPLumvvJGyjEIMjuGID5/J94M0KPRDWsMUpdhISuKM4Utra/bcrSYLJ+Wx\nOJSVkKeX+Lle1+0SOho2+x/dHUStcAyrzToA1dqZfhdZCcc2kwwtccoaA5Gp\nEwCD/6rpNYYFekFmWq51Z5JU3xcROnzhca0fqcJUhX40lT6svHZ4aVlX+Kud\nuYewlrDfUJpSd+ps7cEEyB4ArfOCylmapkpDukFHIx7oC/kqfToGwT+o4hjH\nDiV0a0Nb0tpnrcnYfDYlMKK5SThIGvX0fhiZlZ3uLZjLbWzHKpYaD3jRZiLr\n+cLX\r\n=ZW/F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1FmS4RlPTqogwelkCZmDOhj5Ao7qbak2J8pM3shigCAIgBgNZ6dsKGI12rLofA3Ul8yMqNsm5/qR543/Kjgppp6U="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.587.15017.0_1613677403786_0.17801250464395535"},"_hasShrinkwrap":false},"2.12.3-canary.578.15018.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.578.15018.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.578.15018.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ae026dd9285b6dc1cc430accc38c59605cf61aa1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.578.15018.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-K5x/Rgq9cCBTR2/hMGXWfr9JWgWmG17R92K/9DzG21FMOGzROyp1OaeAhVYHUHEl+gTvVr0FIkO3KKsyBKbljA==","shasum":"bfd39663dc33546b7931bb3f0cd1ccd3ee2726e9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.578.15018.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsNsCRA9TVsSAnZWagAAWx4QAJsyEsOKerA6yj1zlAWk\nFKA2UeC5X2yL3glWG4rWR6IupjhPMYE1STwmWBBnMgF24O4HWoK1kyIXgfXj\noHl+grVhY8w9UQyanQE5prsFhtJXwu9gTLZHSkgBrIa5TeseTEW7vYw+ib9D\nEcqTse5GED9NWXp9We0//Z7FN0qPl+B5expPeBvD0Y3Qe5XXjfDmGIyL+hlF\n5qMEXYUugvHdX7DxN6M3hj1J6o+S4OeL0Tn+0XBHY9lLupkyyHj52fuxkYOo\nOvpa16Qr2ZklNMDdZ5QfjQEu/h4ig269DKcCoYPzCrN/D46v9upxzWHwy07b\np9w4a2UrIH8Dh7A+LCnuw0XmqmBrLsrVpikCxfV3NCRrwW8wCjudjrQUlfjL\nuKl+C0ljWJhjUzkrD0+Iwb216+BiiYPwaIDEj9YO+vd1LbBwPhoadrRl6h/0\nBNR/w7OKJCE/SN4q2zRPzJtJFu1t7lw6Tiej51GmFKzUVXSYfMUVdRDd5j+i\n26xjLSbnTJi0scntNPO1V4qkdReypIWGY2aXQcDgI8ksJjPwtSoU0/AHKurn\n2D+IhIJhILfl1thDOwdM/wykAewF02lE3yHxo4KF3Nm6B0bzLD4d9fAPleob\np17czdOAmbj/CnDdz7S76/pn/1QLA4BkZbQCTb1WXWiapFAVyF/xa9rgh6n7\n/cg0\r\n=nJnL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHq2vW1P1zVWtIBYw5pQY6pzV+m5iDdfsSTY3xPlxzLRAiEA+ehiG6aCWL6DikTYXbk/dUChe/j74nhoE0+gyY3KN40="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.578.15018.0_1613677412633_0.12019640648517615"},"_hasShrinkwrap":false},"2.12.3-canary.484.15019.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15019.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.6","@auto-it/slack":"10.16.6","@design-systems/cli":"2.12.3-canary.484.15019.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3c172f7fa62d1ba06bab151fac640a7562c4c422","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15019.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-P2jsIwaH4i+2RBHjXaR/ClcK/+uSfDTFkd2Tv7GidHHoDofBCtq87/r2PzchyPSGfNwZnkuuw5dfxKxBB5HPpA==","shasum":"200d81129cd5f038918bd59ebcbaec7cf305d90d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15019.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsOMCRA9TVsSAnZWagAA9ccQAIdZvvtwH7PLPF4EIII1\nFwYVWNvidfLtZT9yQjzdxEB2xvfXzxjBV9fsKaRwFp/MT9CUKctSPdY9plQT\nBSA2ivYwRdUr6dsZyBHcWY6uLa7ACb2NmvgCLOTe03SQ30MzUyxFMGOXAKAo\nNd+uO9i3P2tJGW9Pv2KDcpRJs1WqQWGmnNT4+7d5u1RlPB1Lo4MQZwooQwkj\nixiVWwEJRd4yKkVVUscqNNEhzU+eN5yJOo36LZ24EeAhPMa32r0jrTmcNkJ2\nahJ9iQpwE5ryoWmgyLNexasC2bVAtgFdIVWshvgAePV+u3ZepHjjTS0SsKsQ\nAqb6cKLCdXDMQ7QrE38CF57XqhLb5o1GvlRg/k4MhfHN4q+7DSGIAWwt8Dws\n1vks2XZoDBaaqiNm0KEZrgmHbCPJk3tyAYJMdQ/AW8+FiBRFg3LNZAHyRQOs\nusQtaPxSJn+q0r9MFzzw5tNap6S4of9A4WyaYJ7apqw7l4SAyHI46yXKn53g\ndqbVXr11aEdq5F8eolL6wFJn+vFCLIYaX/MuAB5tDay8Yvg1R/LRt27Bt3l1\nim5Y0MLrYQHw4aXe7JJS2zWJ2pFjS/3kselNMi4akuNQS7Z/veevN4Q1gRle\n3hJ5Y/QO5trOt8AaTHL3QSxcf0xIWdyn++aJIGji8x5jtYYsL2AB/8Gvu1Ni\nx5NU\r\n=IyQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClp0jGTy5yQFfr7z68URls/Fehr1iHMHKsT+MC963iJQIgL0h9XBrGeoJjDlK1JzPuZm3e38zmT+Vyv3isI6GYdGg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15019.0_1613677452075_0.19618456470051737"},"_hasShrinkwrap":false},"2.12.3-canary.474.15025.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.474.15025.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.474.15025.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4a2871f0f5ec527f63e48b26a1475f2931c144af","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.474.15025.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-R+qJFSAB7vTsMOPmseZ4gY+iIzAmbUvFUIrv1y2D/DisVJnUPDq8o0Q+PbVxrs+u121+OgWUHWwjqsSB71YLMQ==","shasum":"7b1cd2b1b743563c74f8811635cc6aab11622c0b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.474.15025.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvX/CRA9TVsSAnZWagAAHQkP/2N8o+jx61995EaqBGUQ\nTQXWyLBEbP1BXjBFXwQ5/rPvqpTxuGHs83mhhtoohuZ0IXcuwO/AkXLAbAYA\nJDEAFddxjd6tCTrcQdTC37OjJBQpnnOeKWwX1kPjQmettYbpFWy92LTeeUyi\n+jCcq3CpaRBRKbXhNgYsSulgLilTafuMN0ow7L6mhnE24QI/DSN4ujKsVL9p\nF4LLfZxPMjk4A3vSnBbRtlrtREKURn+U+YeWGU796UFTybUFQrNmu1xxRiOh\nj0LwRlPdTrd0a0/GZHWatxu0y/clPGaTj9RhWQFOXg5JF0vvmrtbZmxCtV6a\n+uzlkSftk13MuVmQgFEoGN/dPU9qUZeEjgt6y0k7vMGmPA1opVKQkgmTzFCD\nSEumGB7G/ZnkK+ZkqVUOpjd5+3eKOl3p8izPtk+TST6HPyptbzjNs8KpzWOu\nb/dnfPfBxrB4Kae1L6qOeapCBuIQPX3BezlHCAxSUfc3FGSoMRoVz9LFuwUg\nQm0wyaa8IqWPMXF+ykNYs4h4eHlndjWMApj8Qno5aRhOlHOEtXzRmDSR19ng\nQ+p2cnJJC4vsySwrel5qJA4FlkspYIpW7+ykkDB/xBqFnMdoUQTzSOHFqKk1\nKa8LByZxhMAO3L8wwJEDHeM55I1v6Qa3MqNqDF9DL9oG+hIOuWbzfJDZ5Xn8\nn695\r\n=yS1e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6ozQKORRGIrxsAwS8oq0XpjwaLOEDM3hI2FSckLOd9AiA7U3ffmQsMrdYbkgXTRWZFoJLrY7E+Mn4vO491m5U4bA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.474.15025.0_1613690366716_0.03892498688413393"},"_hasShrinkwrap":false},"2.12.3-canary.474.15036.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.474.15036.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.474.15036.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cd0e45d7dc750859dda42e49f2fd02c1771196ab","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.474.15036.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-2NokKfGiStAFlS9FEC2kx+i9xCW740COM1uCgJTpJo7QmLY6tP8MaVdQ9tBWYRxDZyHRSv7kdQ2/mjYXwhAw9g==","shasum":"235e05701e5ec4d6672375fbe00b8e9790eff2f6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.474.15036.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL0DWCRA9TVsSAnZWagAAz6sQAJR7E5eMHwFcKSZK5z5E\nCk1AbpUrYOrXRYGrWLBaSVRUpDvB4EJF/OW/1/k2+EaToqMCS8rXeVehrLJV\n7CT5WYQe/EjOZ4ss0i5q4mmHMim5tHj4UQH1WmzlCPP+uvsJKzrq/CAiBcLN\nqLllV0udl3KAAMBSwqZzlYfOPDZgnMwtZ/Rh9thiBifFDuzQvfuadFXOz8Kw\nh5g9BcgPfD5jMr4e82ftZZLUOevJoGUSuise/8P9MsyQfPh1Pmo7wG/rET8o\nxyEJ6QtRqs6ECJa5TDwo/FAeZIgdHlEzJPpCMEBehltXRszU2wNYhw0MLpVu\nlk1XT08Jw/tjbuRFYCJbPnilrg+zJkHc7Xj/CSWUgExtyQGgACbbnRNlbIF4\nVuuymNmBFpCaXvpNABaXOA2zFqcLivD+NBcLuA1zpvUm3AHRfVrLrgPrEDts\nHUcgLHV++m26MAuGImwNj1lstNLNELP3n1FKStXK4baLuefyP+fn3/Q/eSKk\nwjOBUSLxZtm/ky6Dox89+OQjgbJaoJhJCX1QLI/t43lHxdNn01hnD/5LyuC3\nSD7NRwdXhQOA8hBYMZBOdQ4rTDJBILYhLNzuMwEdbS8atYbNjS6vqwDOTlvX\nn0zLrsX5MKjb8MLdHnl/a+X4JRz0GOxA0X/Nvwa4koSpmLV/nI6XYsEuUuxP\nqqlb\r\n=pmk+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2gIrPwoqgl7UsHCedkdW5FYDY+49NMACsTJvC1BmSHAiEA1kTNqJd4sJXDXBiqljJAu9wTUF04WWiF8Oa7yYdKiWg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.474.15036.0_1613709525823_0.1305159324764389"},"_hasShrinkwrap":false},"2.12.3-canary.475.15037.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15037.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15037.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b46aed52a4f547f04a21c53653ae4035ca39f3e8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15037.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-pcM45e4lW3r9+B4z7Bq4kxH+GUjwYjGTlyAlvNT5m+TpjrcUgEXsOVna+yq+D7jMPXAyI34psLOO7XQB9UrdzA==","shasum":"1286252a9f39aaac4b6733422c44284ab8650809","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15037.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL0FrCRA9TVsSAnZWagAAVHcP/0Cfb/wOQFpzcOXpeJ49\nAi8LE2pfmWzcpnGDzvCZ+3mf36NkkKCEitlwaFjLjMXLi/IGorRVKlybO+Pw\n5jbsbw8TON9B40EqthHCYXpmrpwd/Fbt7coEZZ2h+X+mP9O4lfDaIWzp06KV\nVd2rysWUwdOftQTe5kWy43kQzBGeFx8ByJsLdfo91InX8ViEqRMy1KXOKQcB\nE7LxVlPA4C1V4Nws63VSV76HlCm4ZCDzWSRMsXTMNWlkgkTI9fk0TpZbAoHa\nabfSJDbLXe4/zIs0NsaSKdzHKglMb65eg+ryq4JYc5zOGD9LziCCuho8yhtl\n7AdIgjvQwnOXqsCPQ9JJxtIeJJk2DAzhJSgUxXFwMqJtJZbHdGqs17os9F19\nT5wcQErBl/EvzjERjDscMZYnJ56hpkvTrgniE24/EATHjHVVnXnMZ6E0mvEq\nfYcDneJo+PxZmu+k3dWSsFXW8Htsw/MDdpJqQ/+e46W7UfeoXUzuMJD/xCEd\noCnFAWw4LKFeOXD5nUsk/mi/JWbhNJ2+nTPbCPtQtdVPpByKIAy5qhTAQlVd\n4IYGJV72yjBLtd9fvk6fxB74nHS0j+UfdDPoSygx3aJdziKcrGOuKBNnhgtd\nRkqQOlNh4NEu5hp3dDMjLttp5HM3HU1PboqVjFId1J756cbSu10kNm3Ws/pr\nUd0E\r\n=mDeQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3/alT2aPOIauI7pVy+wr1ZA7umIsBbjhIaUVcrAAneAiEAwqZG0/d0gpT+cWWx3C0/NwZ2gnK1VgbczWeb1iIYB+A="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15037.0_1613709675099_0.02125794318363572"},"_hasShrinkwrap":false},"2.12.3-canary.621.15048.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.621.15048.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"2.0.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.621.15048.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3ec44063625e038c486f84c529ad9d9bcd07b149","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.621.15048.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zOZ4hWOPYnttcJsSk000oXIwWayyBOmlfpoIMF7069S9psZGCWCYNUceExrJmmOLIiJqqprO+Lbx9k5vJxyilA==","shasum":"42ac1e53a6d47484f2343efa584daf72c9e43e22","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.621.15048.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL5cxCRA9TVsSAnZWagAAf2sQAJdStMfSK8qgte9tJ8HQ\n6rMRKHoluzqXPiJvuuXPbjs+KqTmG03/nMubLwPxaA5ONe8eDrLt20erC7vg\nnsQrAA6m8CJ7kvhuOtBfCJZFm1CnD+/vjzOsr46rO60JY3Uo39GJ6m4IpYA9\nCKwxWYnnhBz0xcBg++j6BmT9IQ5YlFpqQBe5M8BKLk/U2ieDiD2Qj/FM+5mP\nGWSfdF4N90SLfpQQHzlcYhyy3l4NSSC3l9Kd0gdMCPe3FeFvKXIhFmJBNffn\n1P/RF+Xsw6C0hfC/IAcYr2vZILlHbwPNwqQmorlhlvbqoA35U0zksjpDg0Xx\nPg32cRgbjrMhtURp9bRoPT93kC9O4Xr/XEAMSlRbXi2i4/R/n8/DfqTtKtYO\nfqIbUM6u9POQyUinERKhP5pOfszXr0RzDTZf+K1S2EH+y+P0gTokgT9G9XiW\nxcxMYlxJbQ2/EiCYUzJKxDDjNvSqOXYlDMnSbOoyyYJmnesx5GarhoPaM3ul\nzWMSP4JFySkD4ukPtpmhPbVrmd7MwN93acJaoSgK7Frsg/YO7bdsMfkVQq4x\nAG8tebrSPqw3pP3KwuxAZfoPRyQ3DWOQwDAPvX4duuq4PTu1MRol8dFdM34I\nJWgqhQKTHy3gHRW3U2U7XtV3xJZdxb0eqUQIdBW8QxZXKKwN6CWFM09btZNB\npdYV\r\n=mZv0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZSSvl8/FbDM8xxLEQNbJLAEtE8tNQ7OhYomCRhxp7TAiEAzVKZacbAgORtt9CcdU3Qr0UL0YNMbrEd1+xUip33NZ0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.621.15048.0_1613731632959_0.22274520341451742"},"_hasShrinkwrap":false},"2.12.3-canary.475.15059.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15059.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15059.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"58ca90375403587871f389fee371c3302b599586","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15059.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-V5EAmW5J97Qy5+gOvcJI05k/MXCF2hguVo7eQvHUALpNpAAvqjaoXBkeoRoFI7FoCA3WEFPxih0ND8AZWzZPAg==","shasum":"732fbff50752e1d109e0fafb230ac6a916c0016c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15059.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMCZ2CRA9TVsSAnZWagAAl9wQAKE1bVGlU/mFIpiLQ/6A\nbH0Af0h2HENyliiHN9tP5q4Y55+uwkwJLS7AW2TnFIeTY6r0FjOnD3YPB+FS\nq8x9nf8A2MfGwE/V1nYgCkPjKbHmdX0vgz5QVRFt8+nFQe9UjxtB7UQU/fDB\nbvLUUWow8/oOYqPnI6tYL2kB3I8xu2ioImGE7u9Sd4JCtQarlvYXyAhg/Gq/\nDu9LkJ/p2MDylpJMbBKXWMvdTkWqZt78gKznCIMt90aUpCj13i31FEqXVIsT\nG0eTcjr8gdGTIf94dglcUR+6yFpPXWWnbXujlZHkJvpk87MFAJ4Jy9sUuwrn\n9hmzKWm13oAJvKzEaGA8TYLn63OttoSqk/UZ2L2lh5H9HIVHhhkphJontf8A\n4qjsmW15mR4obnVvFJPlXwKC1ENqFC3WC9CqscKQdo3zlaLP3l/I/zWVBkyI\n9C4Qq3j4Q24Dw+a7GbPtQWHnFRiunZPSnMogQtw92OmFdlL17zXeLAQ0FhMY\ny29lZKr1NZ5ykODEDZtd9uWirYGdnUG1o8aNxbUV9XOUavzT3ukjnF/4qSTB\n+Lvkdwh9Eo01A2gQB/iWfUFLfHT6QlCTasQ/1v1fqoCzozghbvtk3J7W33E6\nGOkxgU02vmHgKKQ91pH1AycZBcqPzERLRcXqIItY86BL7HurVcqMOyerOlEr\nhxo4\r\n=KijF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCptEsMo89eDKhYHTi6A8Ug2YZye/MjyUNH+oczv0fYxgIgV6yD86hzoRpp5SGe22O+AZ9PfwlIepmDVg0kBprLfWY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15059.0_1613768309738_0.602523463100765"},"_hasShrinkwrap":false},"2.12.3-canary.488.15070.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.488.15070.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.488.15070.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a100e71dcd3e7ce2faf32b853a9f6617ce66db44","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.488.15070.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-fV840HPrrNy2C4kbUKz8OiOz1/OuUYcVcvjPK6k1Ere3QQObbJrBN2McZzsxbTBB+GSwyPnR/H5kHQpzydQs6A==","shasum":"c897e68c77e0d8442ff46d41c27be3730eac2f23","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.488.15070.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMPd6CRA9TVsSAnZWagAACDwP/3P7ijq9V04f3kO3n0rg\nUmId5Oknfk6C9KrhVgJWXFGNME3MowrJOIVs08c+oMg6RjekwKkDt+aBUtqw\nDzppFFk6oKBmNrI0DT6u/H2fDCAPnmwzQgOUEmXbaXPMhX2Rd1MiWynC1c+B\nWsSgumULythxKDPv/MDunnm9bhQWc3quChzGT9WXbSLT2Js+nosSOXMow3ON\nWFU5HjUxA37jHnUJBf69ei4tPgay8wf9UEkdTA4/70wHwU9uC8xc2OfDJkA4\nKCArRiJNiQ2y/U+AFSxrbhWWJ8BQCtNkjTNjDDs3TLLcShOMW6iWn+iYlVoE\n37g6t1JkWwyuQ6Y5uLw8LLXiifDqsGmqDABYITCg8M2sruZ63J0Bx67+p8a4\npgcbK2eCd1vIg1FwuVSgZIbZ6mPM7q0H2/nrrbj6RLRZVihJfnvgBEsbza3I\nUn0KcfgG2RWpGOYOARix3um4vDbKZiVULZhBzzy1hruU4Ts4BFjuiPzd29U7\njjZPtTo+ojYadoF9NzI0vostOxuJsUOUfcILrdnZdJubFaKGT22uf1OvVczN\nKpcyUwBFG9kJ2z7WaWfEHkjcZuHnIeR8LQKZBo91MC4v9l4L/7so9lXw/6Ro\nUG426If6l8o5PajEdy5sVR7nJoJSBGreLLzZn3WcHNI4QTzkW/Qo2xHM1+PC\nqrHT\r\n=I/EL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFT3A9chd0d+j5UcBaPqBfKbm3EHtqgKpztoB7Nf6zEvAiAELVid1ZgXjcM+Rcjn7Jln+wjE6xU3jl8clY+8VPCBDA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.488.15070.0_1613821818260_0.4201024344443627"},"_hasShrinkwrap":false},"2.12.3-canary.621.15081.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.621.15081.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"2.0.3"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.621.15081.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3c62d65a7ceb455649f7dba242c31053da8d916a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.621.15081.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zWDXCo30dfwy/N6pJlB2Zrlt3DZLIDBU7oXQqCPREK3tjgVY/H6y67CCgLzxutzAahgTxs4jQy/ui17HI4/hEQ==","shasum":"63128a1df52920cb75058b45ef5df00ed26f85fa","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.621.15081.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMT19CRA9TVsSAnZWagAA2hoP/2dgHObTqZraivFcjQQz\nZHTk237kq/UzynG14wD1EMSoawItCj+JK1ZzPj+qpwQgkXeY7yMLR2xrIJ+y\nDTTpNeB9enEJmWpfhBo8pgkTZEH/gr2JJ8EnkA7uTZu+e+9GwPeVJgdk9BmZ\nCdmfaLsAmVWcRm7pA6lmBYZNOf+c+iXzA75UnRpDTOSX6260SdWE5VLl7rZc\nNBw5dRow9m6MSHi0U1F0Dr6lHLsN4crGhPLhDou6YmBxb/1a8Or9CYnzWJj8\nH3n9EGXn1xzv/Q/s7u8wQDkiOkBTBJmT4ZF8yLD1LGWl33fNnOdCS4Z0ts51\n00QgZjqZr//Zm+EEhmPL5+t6W1zFC9imFVqvsb8XZ7PHX8aZyuDgxaRtgSp9\ngJNsK8xE1pjqO1mb6NG+TWv3kcy2v51qRe0yHzSDoKbo6fsVXkFaBhtdCJw6\nJve08ukIvDxaRbD8aSANLoGqWb9hXHJzz52flkQRmik1zcNdT8cJo02E39c1\nYCmS9PEhdLKYI5zlbPj8fZjM7i7rFUtrzuhyzzZVNTHAtFR/bDRKBjpHauco\nASMysZUbbPo7P46i2fRo2bLimjyXTKlEF6zg4z7b4XUl2k2zK6A76RCsn1c2\n+VDKEQKJxcP37qljCq0DgkRkkeQRDJsYThP7CJ0WQfHwBI7x4quS3CkLH3vp\nsMg1\r\n=Tw3X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIabFk38MCnIWEGriEXbOF9QAW/jv7s6x9zjzMgENvIAiBf2Om2GlD4c9gFBb0hkGJXRRu4Hur/cooJNZGT4Hmjmw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.621.15081.0_1613839740551_0.08098276049075492"},"_hasShrinkwrap":false},"2.12.3-canary.484.15092.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15092.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.7","@auto-it/slack":"10.16.7","@design-systems/cli":"2.12.3-canary.484.15092.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0c9910eb6a93d74a803d283d5d18b8f1934c5340","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15092.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-f4cwZGCCls20h1edu1gWuy/BWGHIWAANCU8bL+SmUNmOQjhRSRzWzrJ4BagJWx0EMKmjZ9Ogx8Nx7ddQPQ79Uw==","shasum":"7c2dfce984489032becf7439f808f93cb1c2df4a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15092.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMdzPCRA9TVsSAnZWagAAXqEP/1KGLKl/mQFxFizGYgGc\nbpj4XYmT3OWZNXuw+D11/tFgUpGoLSt6z+wE6OzBFNhP28+qW5SS4GdaPoNW\nhdAWruHr7lK9iMGMP1yiAGRrCT8kHO610Q1nLaTAchMKxMFWoZY1VPfJnp8M\n+YsPBF1lgm2EgPXy0+4BhHmGcXht8OmBYI4iyPirP3Oyq3E9XrAu4wg1M7nK\nHZxwhpm1NFRWn63xFmxMUZYZoj9Fo3a5lNrwEUFCFIrUntO9q2JkEhiFeDnQ\nl6LWZ6zo2kfzl7zEMI5d6gbIQzNZcVscV3xhf2eUO2FTe6wD9ULld36IcMZ9\ngdUF9jAfdzsp+tylKCiHvEueCHx/70PqEqSNLVLk6VoZ6iLMcs0L1YIWnh9V\n9U7lGcl3eymuhV4giVSUHItLbn6ty39sICXQ1YVMUGOo+F2petBLkoznsxEf\nMZ/JeT2JkNdSPh4920UMTs9mO1vKfSEfr7GzOy0WtaCrvcBPdU9w2R/K1jmV\nxh+9taXrc2rg3gYEXtaYVZ4AUzIaOS5Ddlc1XMpxQhXeftLipEx7uzb9aBTv\nI0Vs7Q/tzhgP9lmNWXEsBirxMc8QGUEFM0A7XrHKkLH7lU7Bf0djX8HSuxxn\nEUJiyRyxUv8If9c1nDZyhAv1/csw3QtkvbHSMh7LyIkWdN+VPQvwRutASk29\nttx9\r\n=bTac\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnhTk8kzhJaIFoOHK3LVqOEWfUtWrw9ps4yCXEPExDiwIgXTNK226Xsm65YylTWSCY0J6U/o1gjxaX96fgwDZZd48="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15092.0_1613880527491_0.6608267700827535"},"_hasShrinkwrap":false},"2.12.3-canary.618.15108.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.618.15108.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.618.15108.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a71fadf785203fc65a46fd31e789d45fea20bccd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.618.15108.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-H/tFq2qb/Cbp2OEJYG6ng4zDoCav0nkXefccxZ/2+b8IszwT/pi6Bq1vIFIYg+jkrYmQDdguDrNbbZKpSndL1w==","shasum":"dd6ab3038519cf9095340d20bdfff2f91e0f072c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.618.15108.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMt16CRA9TVsSAnZWagAAQCgP/2FEX0vuCeearbYi+mBF\n0SrLjBusyWUAJMHmGTj/iol9QqftnwQmJ4ZQZXRRQ1kggDyopBGPj/UDLOBt\nMtX5KSgHLrhvMWNf9P86YlVZcZyk7jI/bxlomZRm3J2/rogIZYjZ6IGqTmoW\nD9YiaAYJM02o1fqnSehdn3m1tVFBdZloppWMjTRH8CpZANArbRObEexruhjX\nhPRjFnWpT+2RZGjnNKY06z+e9E1Y5W81AfSUV4PNDi7Y4JiU+W6zs1TCk+UL\n9+CbdQ9SRA3SM3S/oaYKWjyHaJZRuI4eLzKQ0SC6S/HskLIqCDBvQ3DvibS4\nRJc0SkRrvZv3593kgOjmEo3pqFb4NPmwuxgYanLT1nxFy+JYi8WD+aaWmvt+\n/phDPbX31BYiWPP+ZDFXcpBceE++vQdwWfot9AgrW41Wro+u4AkrvqrZ5ZMY\nUrbsSoX2meMQyFZBDfoSE5KoPQG3QpUN+hxC4IiJQMYSnYLpNI4mKAv3RMYQ\nxV4Ev5YCPoNJfl6ul8rVSOqGU1okpfHHp7zw3j/Tda0BGXud+Tya1GQ1NmqD\nJwD3uEckaQcOB8lzIr7nOLLKkCWe+FYyOc57NI+T9eWztwce5rfqFHUfABXb\nXKFd8mZNoUsNpG7CzXzyKxNeP3rGGtf0oMJkOpV4QvS8TDNdrX3vy/mXP/ZS\nZSCM\r\n=LCFG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmjmL+IvCA5BchGJoq0FVfUuugZSWvn536eIw+74/GMAiAUFWe1yM1UYSphv8XDOfu5h5Nt2m4xOpbiliE05rRqew=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.618.15108.0_1613946233803_0.9262901947773343"},"_hasShrinkwrap":false},"2.12.3-canary.618.15129.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.618.15129.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.618.15129.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fa5e59d7cbd3a7d43f3bcfb2b5249dcd1a988c31","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.618.15129.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-mcRxT0fwsO3GCpz+MH9kH28RNhzh4LdD2V9205CXkVH42i5uEG9aej8YsVh9TahQ7z8JKO7o82XRT1yD1YAN0A==","shasum":"18916313bdcc5d80ced1eed395133924bc7d2fd1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.618.15129.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM/oxCRA9TVsSAnZWagAAKy4P/0Loocl9REyFnQAWqw9Y\nHWcqPqni3dfh1FvMemzIG7o3JzIlVYn41QZTeieVzhZYp+TKVDRy0MEaPTeB\npowEayNZMsu8eWaoyBaORb5kTSt+wRXLXCpmD9TMoICv+NHAxYWzb+cReAsy\nyFzgTn/zJyQlEC6Yb7G4OpFumQ+PmSFHr0LpOPfW2PD4Q6Hc4oaG1iuYdSG2\nOk9IKJXhbKIwxy/4/RVJMZ+HWnv1hUqRCyjXrOlz0Cnv1rbQ8IsGC4Ll6o6n\nYMjl3wS+U27NSAsLesBbdBZWxevLXsabX2lOEwusc+gzcP3bJBCI9yY4d0+0\n0q8RlHxNTUntmB+H2Fx56TkVmtfKCjRrXo7p5Of0oHBqmglHLceC+vksmum7\nX9Aao5CUAU55QrTltt7TylUobeE8SAwK1xdxX8ENBh73A64xB4L70QbKIlxW\nHvdxO6uTnpWlsa2zpzwrxGa2shmxq5ejAxMXFsYiaX5xvlTq4WG1yqAcp49h\nE7k1n7p97t0x9KVbf1ihaTMEySZWMeQqRIC/T6xbiqAueIbdtkclCr9GoyRs\nxGKbopzdRzSAzv/tJ1aM52QbG6lYIba55oZhTJRdO36WMP/Qda1ShRrFUZmQ\n0W9+NVFx1yyGY6BKs1D5WkqAoGLBgCURByECleUwj3qgJqo2KuKdIoRD5lDd\nF/M9\r\n=NYlj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdHg9xOzxcM2xK27dVSIMOezODGunnp5nUfcCk4YaAhwIgLyG4RJqPi9YQ44fid0GmZjL5YwUK0dRQ6YSSnqS/AMM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.618.15129.0_1614019120678_0.8777252756447751"},"_hasShrinkwrap":false},"2.12.3-canary.529.15130.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.529.15130.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.529.15130.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"94c37724e81ba08397b104d3f1a5547ce5ae5540","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.529.15130.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-fK1GhANCoBMuO1kLvSQY7/A7JHXVSRsgHPhkm++i9idRQsXDINNHvcxJ5/8+2h6LLSirNmX72c6ExC6Pg0PcYA==","shasum":"7d4d590041f5c388be2245a036803875b4c1a2e5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.529.15130.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM/vWCRA9TVsSAnZWagAA9j0P/2LhnKXnnH3mJ+GGUJia\nUfsSWlqGqkpnTBcYs2gOSldV4+Ua/eOWBfT4jz3FSex6UWyDV4fGd3K692wg\nTYvsVbtDsWRSCXXaKdyUrIrQnNJiYSdVapizgWcvCMQ1ScUp9Jl2lPKAqX9O\n7ZsX/GCps4sZEhaceqNfaviR/4gU39WbbrzgKMEpIMFVKG5eofNcdKqh2x2k\nfrAmTg00Uw5GFEvL95NvoGyx7UorWfmqA9x4cdpMxvn8F/K5Zoo0GLN5FUO/\n4cb2jMQgNzmOjyTPaZY3nXYzUky80eJErRVkxZP8pGpF7R/0KqXFUSVJeYDc\n07uJCLhMg1AhMQnztdUE+mSh/rmdyeg954wZHUo17p1ihGgkO8GJvB5hlgic\n4ZZSB6bXwRmvrZYRBkuhoBMBe/UUA0KbZhNJx9ev7TGzZUNRZ1ggVWN0GznV\nRsA4C31QxSxYpc7DvigtdssueLneaxTAQtonUuNhl6oKmgBMHaH5fgIHLchr\nDE6x4Sc9MYQWy46Lizl8ZwZ1POwrb+tlOiUJ6KgMduPy1+eC2JrzkQxv2pf/\neBsMjXiGA5un6Vft/LUsgrWntOX4O6P/HK0VHuJVlXUUInm0/kykvrrg3+QI\npk/fWIaVY4XKkQNT+AijrigOVbL7PFQ/QTUASFahpRmzWdZQ1SHP5BxIKtH2\nafOj\r\n=YO0v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMuRTeUgOsbsJ8WpDORb2zj+0DjHMmvqgx8eDLXf0wvQIhANBBP6yblXNSlw3pSa8TyG8e9Dy9qGpMEw9BxZFFePmG"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.529.15130.0_1614019541461_0.6209304122899801"},"_hasShrinkwrap":false},"2.12.3-canary.623.15141.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.623.15141.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.623.15141.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4d9f08b6412b03357295a83f28fcd33d2bcd5d51","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.623.15141.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-sUBttromCn8yhuNxYlNREBX/QfYC9zGfHvl26naVxhcwfSd3bXO0lcQTSOIjIqat7vNknQFwpUy38eChg7y2lA==","shasum":"d1dd164017b98208272b6ff451b3935febccfecc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.623.15141.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNCJWCRA9TVsSAnZWagAAEjEQAKPF2V2CUYkJ8HZFqzyN\naNXDqEdpNcE6FJRVQ5M+dLRXTPqBZbvjQW5CxFs7ZMlpQ2zSOZSN5r/a716o\nv74tnnYKebZrRvgdX3KV6BMfh2UJmNDX9fX/xmQy4HJsLXUe9+A7lMDFN914\nuoJE6M1o1pyc0YUH4L4jgfje9FriMDDNQ/oLqTj/NCsPpU2KOhlidpJeATVv\njGDtaeY14zgZdE+LqkRltUds8VnGk97iIu1cz0pYZrwlMAyfz1gApi8ZQWdz\nnMxfrSSTHNeNbu8rRBVTDp3qZ5GBiOXkzJnPiNPMsSAxbgoI2pQzcuaa2srP\ngSLrY9i9EpXhqc3nTIFCoKJCLM/ensCa1TMUNeVA1aIyPsZ/d+phuTCue+gf\nscLWC42ePl3c5eax/nbVZJqgT7yCmvMm7OJIn/FoYQHW+VR7CV00Dk695tTv\nZocLf/LX7sjBQDr3ATLTpyq66SCwF7rRaHEWLk1YPEo8qv9ltkUp/VseIo7L\nGlR9hZXfQfkw5gsx5FnA2qNoS70kZStucA/B0Irz8ABEJDiy8OdGtM/sIdDz\n6dhibZOn3vO6zHikXaFYhoMPScj9NLs4MgS6hn0GHKRMlSErBMD49YbYiYQ9\ncnZfziix160XE873en6/YBpy8ljiY99FW7/h4CNH5MM7P8i1Vt2HngtOIYt3\n5Uu4\r\n=Nw8f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgL1RcgGyQSkCwjWg48nBgMJ0Gctiq8GT2caraAcWKSQIgBqd4pKOQLgWWQD7+mM/dSbn3xYe/IDvlxWx55qIWGdA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.623.15141.0_1614029397560_0.7853683272404053"},"_hasShrinkwrap":false},"2.12.3-canary.475.15151.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15151.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15151.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a9484cf9b3ea5d1388f5e0abd3bf71ba4ecb2e78","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15151.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-NaLvdGwch4f+tFxcKecphDHX34lFCG7Lb2D4nVPsu0RGUzgUF7JOgGgpHCMXCNK4ycYeDh9yIso2BBihDhAtqQ==","shasum":"b5956210932bfff2799eef6f38c9b7dae323bef3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15151.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFXSCRA9TVsSAnZWagAAmJYP/2HU+AE+wPpwId34jqrT\n2JtcgxUJ0aP3ntA2UNvkqmjGvtNviaS75/K+ke3/gMfJsSQk0MJgj9KPk4Y2\nH6WX96lTPvdVVt+CrLRldM2cHhH4I7Q4tsvdZdExKcztTC/Ya8zxuWZIArLt\niKwlYRTfAiTsEtrMgtoHrkrlwxP9R7s663Be/3TSQ8j2wZ2lLeTZwtODDSiA\nmO1Ow1FogN5Bepg5gIdMFXtKuqDxzfbap3CmWZZijK5MNEJ7MfM6CSffDq1G\nyxVkmDxvz+BQuQWXFqpk12mgOq2lwCSn2mlG9nam+L2d/kJK0SiH/958sc6u\nZT6fg7/4lm91MB6R3b9VyGiK0lJdrfvhzap0HhRgY9gvnmkTbHDPgfyx3alJ\n4xu9VyP1D+aeiTBEIGnRv0ErqSP2OBhBZDXsr6sg4GOHcmnO9dEcJ0MzRfXK\nE/9MZeG5xGc68WoCoRwxI/IUlNBjkwPnCJw/YFuN851O3ZVnTskZ/Vn+9kWk\n9xin/FYYU7DqWyJ0uW4SMUpof0VBnQgWBp7kC+jpXQH9s5/dG5kuj0GjvTQ4\n1IH8VnMncS8xnHTNa+XvwrY36LOduEOzWNW9aVETmXB73l3erSERa5itbm5b\nM+FU2MVfKJX0f4/fM49xNb6bLYzS06q6wzBWMViATeseLQtwo+heIWNgSDEd\ndGsd\r\n=dLer\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq/v/Quk26c0IHfculty+kx9sgDpxQMOnAZS33BImWVQIhAJBvlMC5ng30GscSpjDHiycLhb1gFkkbJj6e2mFFwlVJ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15151.0_1614042578043_0.9635727191845878"},"_hasShrinkwrap":false},"2.12.3-canary.601.15164.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.601.15164.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.601.15164.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d868a83da946e3ef46a3a4bdbad0eeb3c18d9dac","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.601.15164.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-g5RGPPb8fFfPVzb4vd/rgHbfgXGl4VtFnO2MvfYDJs7HD+LKlB1sRMOuTUG4IRDKvrfPyJt37tqOEmcdPcWcqQ==","shasum":"293eff82010ab3b9f1293e7a8dbaf18d2d5e6535","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.601.15164.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNHoECRA9TVsSAnZWagAAM0sP/2kLBJH6nBByhcXOtUBt\nBIeG2H7bOCGSaMbbIOgVruQ6DrwRuvs4j6BPihr5BjxZQ46g7pb4EX8WnnUV\nm97JMiMzhLSFll8ODXHqwNNQOwWknkScDmxWKeIuUOCJXJAblaXBZmpYyUNM\nhKP1i1AMrIAzxSrPdORMr5fcd/wWqbv/LUhn3nunTCMvQsqnxx3dp5wux1zM\nh1Mq2/j/l1N4JQYw+DTccvu7Y1KODH4PdLOScd9Hp5LEqG3OdAska9u7U5pr\n6N6DorCWvZ2ru6o1IVnC7lN2a2bh/yM5KiX4+K1Zwt7JoUnWvCidCocwEWPM\nUtGhBo2LCHjcU9d9d9mywPvGd7XKRaomLftZBR6qfk70wgbgxDAVElO308D0\nVApoYlOh5Y36Oc9nnXslXqwUuUgH2b1W9GWUI0Qw+Te+YNtN97nMvtTNxEdV\nMSqV2S6Nz54WYqdaQkwHIgCgL8dlPkEE2Zq4B6ZQapVjSs+vrLWZG9pEXIyt\n/wSuw7dsKU0z/XT6paLMqRmk3+1pQKnOFAMbIhPoDy8Qk6xtAoiDISpJS2E+\nDKz2AbPle1pgWN3Xtol8OaDM//aG6+fKPrAdW+s9wE1CUAMRSsxEQw2xMokT\nc3MGBbAk2wO4tS/iZiiufCnt7IaqiPcGK20/AqrndtcaV2SYFoQH57Cw/EYW\npAEU\r\n=t5rN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDOdq8hG0pKEBH9yr9aeDJ51/q3qBC73cQZdY4ubWlKQIgUtFqbNf1Qz6nAr1538vktbm5kKTTtatLwpCv82w0ngM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.601.15164.0_1614051844347_0.2584068177517289"},"_hasShrinkwrap":false},"2.12.3-canary.601.15175.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.601.15175.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.601.15175.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b30a80a6799880ae8d0173f7bba33d24dc79264f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.601.15175.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-PL+/9PCYbY2ux5yWqErBhWdNF1rE5MPDuhmjzHicTSgGcuM7pMide862TP/Atupeikfzc5edR2QG20OIpquXlQ==","shasum":"fdb0c38c2838a191e8670bbc7f5b009a085f625c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.601.15175.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNKIXCRA9TVsSAnZWagAAjz8P/3BTuf/SnDT/U+W/He3O\nWD7qNWPrkNWHFC0+m/9X9iaEvlFpgbG7N9AppWTeIi4nNk05VRwFXOeomYVx\nx3VOFkGp1gsYDqtu0Qpd58n+OOzbhspwtqdc4jChG57caOjFwJasZXipC2u9\nkQ6FR5vnEx5XOVohY0FBBDqrtf07q9pf1SsfdV9mGhqaOPz62ie21M5vvdLT\nD9QiJx1pMV49gWBym4g1laWkyUO/5jcQOYaf4cak6TbSsCLyh7c9mDyEP9TE\nbsn0LdB0r0G0wAMVeLR9oM1z7d3DickaEd2eWmhpoYE/GawB1e5HX9TiUtI5\nkPed0iGbRgHQo9S7ZQmc/xlutPyt8O16EiDWyG5LLRIYqv05qXIAEI0SXpjR\nuYyVf/6K8fujJyBKqu6N9M2giJ/9A7Aoj/F4XMBtS5yLPei/7efA7V3dMdwT\ngi7Z2AsNnOk6gixq0TK9fs1xuSrmXT6Eqm04AtSKRUNIIf0bUSNAqlyO/uP1\npF0BmCtABOu2pAzV+hDKgaxrdrlreg8WRIzBih+dRDISZOTkfZERMBlDwH6v\nslH48pBaFVibwxVRkZixmY/tIJZBaqNz0QIg4i5ZkxRzvkw+F50XyEk6uN0p\nNVhw0Hqb/ArncESQtC3zFW0lgCTIeeAB/ahlJ5o5VN8iUBBHdIbu2Y0av+vs\n5Bza\r\n=aBj7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCixv/g0H8DxH96cq7jc5guzMmZXPzEXgJPfRZIB4/b7QIgaCvTEU+i74mNvDiuBEDKGmuSk5QwXefj3wghvpZm9oU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.601.15175.0_1614062102798_0.3817898573920562"},"_hasShrinkwrap":false},"2.12.3-canary.475.15188.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15188.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15188.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"406c61a653008bea8d461dba7602ed98123b8beb","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15188.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-0y3jS6cTeP4gu/f+QI7fxBzzrZuMTVYWl7ZosCiPWM30mpzt3I4xB3odPbkhqna0JsOtBrPm/5FjdRcTKlLtrg==","shasum":"dc3ad4319a5dcc0fb368e21823d715de40bdcabf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15188.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNPiBCRA9TVsSAnZWagAAhh8P/jMpBI4apERNsEoJrvyz\n3Y49ysRncZ2C0Gojp4qPnHbeq1z5Qc3tj8qzVuH/37P+JFJg8Siw5xlXtSCN\nAeriyDokk7DJ3anJuo0DRFHyzZvg52rysjmI/q8a1ZDZ/pt37Sp+37eFAoWE\nQhMR6o0mnnm4uskScyHanxjd/M6+YsZffhVub8AgDrhITywF1iJIThu/nndk\nswpGfvG6Ci+n/o9U/P2KgMfD5AiX09n+WzHGGmh9yLHVorTpulmlVvkkl6sJ\nnRxcug8RM4h3reKG4vbV5qW/CCBOP0wVYaTQM+YZsMpgCz8CukzDD59Hi2Zt\nwY7HA/tIK91aGqyF1HjvXbSLa6ASfesyzYxPqbI3zYtxQCD/X3T8ymiZoWyJ\nZiXSR2ZFaqC3F7+rOcybbwLDvTRuQ9JPaqtAg8Yyt3GZcg0iiYQV5KD3Ruib\n6nnCxCBx8O0nBjiyQrY6mDZyDfmtWXlir/WcZO6jfWI5p+r4fKvWXUE80+dB\nqs0Qz3sM31AJbHGr3UcaxhrqMw098mfQjqd8qO+AwSB2Adfb9dFCB80tBo4k\nldCrxYpN1QgrliDXZ6/RWYFraSvSa60D434huFBpuYlJtkDSIH4vrk5EqCdz\nBj0c2+3td5F3dkhxAiv85sSVVQUyZUhGEfrfGF6z5lEJZxX3PR8VrIZXvdQw\nxfDu\r\n=aic0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCas9uCudxABlSpCD4mvk95zSysr3B8hTElij2leLybsQIgDaIcnarxfD4HllLNiyadrpWqBKRfsB9oaU7ZeIIgyWQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15188.0_1614084224629_0.5198891700036923"},"_hasShrinkwrap":false},"2.12.3-canary.475.15196.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15196.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15196.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e909b422012b48db30445a30a8604bd5d6801af6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15196.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-rhZYZeQW+fNQ/3bdGPAU1JWNwsoem3VIjt7CISWcxW8FwKkyD5sYZcAhWT0yk8PywBSL0hMu+Y0ptWqkJ7zX2A==","shasum":"1fdf13c08d24c737bbce7f1f25956681824d4119","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15196.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTDLCRA9TVsSAnZWagAAXSoP/RU7wL7b0XOATsPfoqJZ\nbZr4Cm2H39VcF47mLuDFUk9xsH1SwcJhfTtXGO0fD1tfE+A8rAAeLLXFBJo1\nsDagZPzQHPpVH2RuPmAUO83KZ1+A6y6ezNROAh2x3eBWzhrbuC4iIEjwpsdx\no3nx7vQl/gk36gvSOYvHCgiUp6r3zdLB02p0DCP2f6Rd6gNnPbBXiSka+YrQ\n/FnjWEgTatxPvZ7PaK+v/+7UhuJCgWhK+0CTxFMt3viwk694BYOPsdoSI6t9\nL+DjS3hdXzbOe22cIoipt9CwRWfvgVpb6y9Q0TSPqJhtkolXIX3ra3cbtUCK\nxCB8IgY3iFXYEo1p8wSm+JSBdIIDweiRCDEv6vPRWSuZGxsPOiHL2NqJ43dd\nE9AHMVa/0uAQXj6mj9pfMjeQ3kXMRkRDMwzmcIceYpUIbkF3wCPgJpPOSZLv\nzivuWLiNiVVnzkPHf7pjIh96MKTDV0hgWwO0zEPlc0aHBQhPTvg4hq96N9/e\ndRqntwnQKiQwNYxTLbdBHlJHDViXigkSSCBw6hbgWAW4yW6gue4d8wAdOd8w\nddvNCnImt9WxULSiRdLKbAlFdr4ssMeD/aNYfJMdsNpZFH/efqtdvRK1k+T1\nbwgNR8QP4w/kBqRz8xWJXIYl0N+g4rEInThLKYQ6rGH3mXlEr37y/ax0aAME\nGkHZ\r\n=o+AX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnPHkgg3WPzH/RHrWWomYcE0HEaCmpPgfU9/BdhXJ+UwIhAMtfHEkO6HYibTXWOc3vxi1xsfSfkEckvgff8Tkhhkve"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15196.0_1614098635210_0.2713854215730236"},"_hasShrinkwrap":false},"2.12.3-canary.475.15204.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15204.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15204.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b1a0d7949133bddd02ab51694364896d6898095d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15204.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-aIsO2fM2nx6g4pkmQ8qTc78rD80AtcaZgqVoUKAgVmcXGTMOaUKImKepD6kHVoROu5ZefFZTY9T1I5gaF6z0Kw==","shasum":"1bb83ac61a3ef59fa15670733cfca2d6292d473f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15204.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNWmDCRA9TVsSAnZWagAAymEP+QE2qFx/jIthkM0KVqgt\nerm1bfeOgsVA59KmvMDbQYcmjgSX2ziRnxj43Yb7vK1zajfuiK+G5+RYl1E9\nUu8kugpbr9ewXglVfGHcW4lCWqdJGsxGSPS3H8xLR4sKk7DpgPtnwZ1Qy0PI\nuDTufq44RiPNNaHQsxplxQB9UninNVkArXbGId5ftrgD+ElYNAlKT5fhZsuZ\neInCPkjdYLjhB6wmK+SBvP5tv20fi5WYsdhOHJUuqCWym3hFfwAs32yNrJF1\ndubAwehB/APNA+dbNNJ6/LCc1uB4/YZ8+L+tEcBjOByud0bFb+ToQ0ydgPu3\nHDNbcjJqOMNW9yFrj8qglmOmu8XQJdrGw5ERplJ2eAB4MsGlXeu4HaKj94vi\nzvPldc2rd/EgLHd3BQ7UaqYYOlrtgSIAQOMSVqFVjnoC05X/0r2a5BQpEupP\n/5uPTQwOH5GigI0ecjOvMUJJPA5+MHcZAOQE0BuEnf74DUgWQaH2+bR/OFys\nEyws202Vli3rjgqyvL+An2oQcYoIpvvQ04fSnfInP1P3fvX7ck9QOalszhE6\nq+5+L2inMq7tDYDYskJu+Anm8ZqAOYVeG/I/s0sBekw5YoTyeLXFkSk80GoA\nel9itZbOsXehGrDeLQUntWjMHpQ16eK+zeOBWGVhiZDrrq+nxzIgyvJDEB9e\nCGFu\r\n=JsHQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHYag+IzjcpkXU8xefZUpBSVge7L5ZxcyOU6G5blM/7AiBKyOH0agNqr8w2XLH5DhTUfQ2QSPvGZlbFQicPNNoV5w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15204.0_1614113155010_0.1335691313603833"},"_hasShrinkwrap":false},"2.12.3-canary.621.15219.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.621.15219.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"2.1.0"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.621.15219.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9409b49ccd45446faf09bc9dddb24bf428433468","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.621.15219.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UojKd74dtm1nNr9k7wtX43TwkbKr29lDAwicQqLS5FPo+xvBV4++UjIdEKpqkG0ouaJsNN0o2BMf8lbqb3x70A==","shasum":"7481e3bba8bb4bde161d0a359176bfdad5e78196","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.621.15219.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNaBZCRA9TVsSAnZWagAA6ygP/RO2Oq2l16R8nmGobxyS\nJsMiZR+bEo6B67tI3srUGegRbx49xJ8xdbDQ0Be09fRLI4LcmYc6ZYI0RCPK\ni1/Y2ynPubInCW5195dYnfyDhLQQfOpqQDapHrRlYGt7x3EfNkpa25H4BOy6\nOS99QF0myk8WkSZuiM7LZu2F3uDU8XiWBfWjjBPvQ/F97WwfD30xbSAmiOrF\nDZHOv53nJHw1duf99xpY/OiPuf+oR7Z0amGP4csG8/akO71ZtFIukPHlrNJH\nqrsDiOYw1xGgu1RyVpFDQxn6QGqT7DfHSYpas511IHYEP05hXNlu37F/HZRK\n9LkmOkZ3rEQp89ZUlQHz8YNEo/cyXMenBsf7PTNOaNZHaziJ2xFJ4MOYcldz\nmWG3rCYYMFAp5R/hlKsShezQqLz0sjO07APNsw7RkK64fd6JBO/Z845OEFHO\nAT6qv2yHOJlZOuF8BFO6eZRCzzKGYmpakBrVB2A6fbDw/900akMVRiL3D7xM\n5RBnOZ2h6e1mULi+D7mW+OJ1N7HEy6mWsQRZF2r5BT0ZPuvjBul91RVUJk23\n3x4zPxUtQqvG9SyrJeS1f2vTHSi5PcMTc0dbzzFBJDpDP3+Nbmn8SQer9nye\naP9558tuCoe3FOVGs1gTGQ6v0DZCVtIA+/qveR9BFTpeK94LN1KH8Ys68iNP\nKNaj\r\n=hK/H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGt8eRuGju3VFUPM/3wXSZpfSPI4BOS0jkMQXj/DjwGAiEA7ezA2pDz4yLixeEhTI/RhZLJKIkZXsWWmvmhxYTH8K4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.621.15219.0_1614127192737_0.6184354292488927"},"_hasShrinkwrap":false},"2.12.3-canary.475.15220.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15220.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15220.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"870cc048c6165923189d81ebb016b21ad20bbdbd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15220.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-R44/LTyDwynt48Ua14NANLQwCukkNuSXznuovjRh0i8OxuJ9G4MM3TCcG56UTkjE64SbY5cAmJFxyIRCNsEiVw==","shasum":"3b4c0cdc2e3c39f20051f21e1e4192d188b876f8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15220.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNaEfCRA9TVsSAnZWagAACSQP/0EsL9mAbefpi9bPBHac\nEQygGxYIGxYPhHadO7BVv9h+e1zMstkUItcF7pb+L8zooPpYbjnU/3PVMtRe\nWA4nl0VtrG1XWchQmYAiiQPITqYJS+x1fG8CVGJ4MO6Cv/irCM2okyE9+ZqT\n4B+9SxaW381FU82aob7EQDUnX+lg3k2s+QqvbG23Wb2ZzDkUt6wSQEmFV2z2\n4JVljYQKhksXTgBLdaLG6jF2gruUrZKXHUMBMAr6nndzP79/hHDn+rPlrxAp\n7QbHv6gkd6CLhlfgXCCRT2Hy2JBOyiYKivqS0pHEQ1YEYTuM7GqTrI/KFWo/\nm9aXSWXw7e97B01UtA2vuow9ukrDm+ROiClyHI+wOOfTxFRvRQ2kpJA8lDIa\nbAG8o8y3uj1ltOxub7Bpd5f1VEsbBLjqjiFMu/Kwmh8qOGF8ot5fBP1AYs1e\n8gAuIChPx52jRAbj2oUv69p94WW2DZAF1TY3XTqB9gi3B3UiWSenlX3xz2a5\nNh8sryGtZfjOrYafvCI8ISVm8RPJnjemD3lk2o60s2qVnIKotocBSHRhIxFa\n8TgocUb3ss99W+PH8oU8xyBGxdC1PIgGpfu3bucTHTAzZLbI/HsXO407ozrs\nQqr9Jt1prvc5bsyeNBjiujkhfUeiYcjebvpGacudQew5EYutQq5+gdzKOizS\nRGqP\r\n=StE8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDptTK/0M6/fdDhfGSuojxleVTQ3NeOnvAVsqHWU+aGYwIhAMn69RBzKl7B1yxml1k6JRUpXHZuXTS2Zq0e5cMs7+EF"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15220.0_1614127390789_0.7921632953585869"},"_hasShrinkwrap":false},"2.12.3-canary.475.15231.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15231.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15231.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c2bf15875d6c5288a1fdba3a89421557b268f1f6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15231.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-M3zHI1ld8qR4A7LUH+lhDbKLJLqja4Sks2l0kg167t8zZSEAZJMDkO3JEqXfRBAuyPx3lsAKJ9VduLJBgClweA==","shasum":"05b7909ef067078862e0c35058e1ffac1069e9ba","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15231.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNdaGCRA9TVsSAnZWagAAHjYP/R6W3dd29ajmWQvvd3fW\nYSH3NhHkM5K/9N/kd8Leh5cTmme7SXvMA2Tt3sJojhUob99S4oFGs/XRGPZx\nBPZS3qJmcfqqu7WEqkLJwg/G55duSZdrONBBEkQ10zbfkonUg1gac5Rx13+T\n82+t2EkAdS1F9tCj+eXK5aDtA6VkH/eLRbIoj0GXQVoJS7nFe+tuVN39Q1WS\nO65re9mD0CUU0U7L4Ss32ZW/tsvQ2G0jclQIK1vsCCR4AnVBlZlBH/vHgsie\njU3rTUqLFZUUvIgcdiwzobnfxhN2vyqpR5RwvHZKXafo2djahjqWlgOKzyC3\nmT+TQ/bHfjh2xDW1zbZcnfZj1yQwukmCUa/d7IDoIFawfxZkRZ/FE3KF3iuc\ncBRQwmUDctZ4q8lRUwUyFocHhqqoy5mrPYYupc+i8z12Nx7n7fx0qzn8YMLi\nF/JrY2f3sOHb4aVqoONX4XevSHrJ7LhtAobLxksBXBWiXQTh2hKL3kYTTc2j\nx+SDT63L4xnp1M+Mke6id5hXcwAdiL7MOLlkq51UoWVFTwVJDIGfYCoBIkGF\niVg2X7iG5skOBwFAk3ReFol1LX301qprKORtuOh4JvPhEA6pXWhf0v/7dVVP\nLa5wgeaG+dNc33zIRfvYzSVaVvLn+pGLm5yh28WusRs3CikHE5fdC2QsJEav\nzdwI\r\n=kfUU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlaK68Y+qaEEEYIsiiH9teJlTpSnDbOva6GqsranZDrAiBPIO1Pc7tFr49PPSlINnRRpKyn3q6xMsDXUuAhhKXc2A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15231.0_1614141062085_0.4732697783585256"},"_hasShrinkwrap":false},"2.12.3-canary.601.15237.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.601.15237.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.601.15237.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"22d23a226792d128a2ed37a5b4d1bceb97bb2586","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.601.15237.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4UHyzom/D+0Vg8cr6/2tYFSKEl9/FAm+qHs5kQz9GKYzYfSgzScPGAzg45IKSZma4nb6Ik6BmrVfce+QqG96Vw==","shasum":"2153b3706ddeb75c804d2f912d9433979ecd5c4a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.601.15237.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNeV9CRA9TVsSAnZWagAATPgP+wbNBP1JQSmoaPGOus7P\nCoEwcC3pL90etAvvqhu/xDrpLTWaVTTAIuJF87DrcXNEXsIDkF32C66SLP9j\nXnZmVVRZ1eGRN6Sjm4kGMiZ1TYBFIJ2xkRj6uUWaUrQ55mPQMCoixoQVw9on\nL7wlJP2PkPpQfMwlDWfYv2aFSd577C4vOq+StwzDn2jDwmswxV9zM7ED/fuN\nnr3SRXIvFGd2977gapqP3nQXSFBtwAcvxhalaCMeyIlpr07hnN1woKoG3Fbt\noCGMxsvOO/YuPdyV8oZ0m02FhEHn7A0seLbuENIJrg7VOqxG+zFodKc7EqtM\noS5hGKUgV4XE83SpTprxJ49xwQuLe872zUg57aa13KbbOwvV2zlUnRljp7+L\nJpD+3cEhQykG/SY6TXkdOqxcL1aehMsr4T734TzO/Y2XpS/0HTY0iBL6qLEj\nPAD/+ikImsYUlxR+NXwGmat+8u27anaHUIhAA4U/UHbksEtv1I9Q1iyLEnp7\nNBgV9HZ6oTYpLdjVHt97r7u/whWI2x6fxxVJaY9/LFvkGrGU6gETyM3U3pnQ\nKzGFWSTW6LL3DS85+z4RJhzWo8OmLYZpkNFZfGnJ6KLspiOmt7VZ/JVEKJKL\neSB0e2caIrqfcX12I3AZigK46rbkl+q7F0jlpf7z5kUfgH6nLhzS7w6YPoDh\nSuEi\r\n=62SY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7M4gav29QlYWFofDBnRyuboQaubuR10YpIzSM3ofy/wIhAKBr7gDqWv0NW/XIeiqssTm1BL5awjIC3ZgDlVetIkL9"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.601.15237.0_1614144892810_0.9642048425747742"},"_hasShrinkwrap":false},"2.12.3-canary.475.15252.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15252.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15252.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"dfcfe8132ae9b4e0f4f6d9202f643ba0d0a1e451","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15252.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GBn7zyKRmbXuYWsJcNrnfFunzgXxvtt1TdK9uB8MiDuRTBGDc9Wp+uI4mckWxr/25+ddXwXTZDdadBlGGy+1rg==","shasum":"26c8b333b86afde3ba6b60a429624aa63f5cc22e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15252.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNjzsCRA9TVsSAnZWagAAlWkP/2iTZMNvmSsiUod6/O3w\nNu3fHhuBJ9EUAKCX1AGVXtA6lm4+k2mHxaHK11CAFOa58Pn+lsI5ju6uwC3S\nC/kRfnAgCNvf5pHZuVqFUEFCfGISDLRY7d7AFmEY8R3UFyaRXPo+TAzvMGU2\nwzXwjCfEnH0LyudswU9VdMStstPZVAcjtBufyX8C7Mcu5yRlSY0MhT0Gbb8e\nLWJnUfEf2PNMkDkEH0e5+K1yLiRXdfAaDTrNF2+rJO1WmjwL1xOxiW0KAPVl\nEg85QxS8wjRU1ppT12ZSIDOnt/JZw6pgm/VoU4eSImOu7wRgAWXV1bJaKNrE\niQXduE1mCx5oJJpzZuDJQ3hTavX9fa2BVW7xYYCh5fu5125LromnA27X8+Vt\ng3zZCwh2FQfG8UZENq4n4p7x/a6gfAHsKskeR/vNBe6K7hdypr2GYyuPC9Mu\n8Xy70pwKkfZ4YGDQi9tS38bwLDXb/ykeamDXMN6fw6Cfg4Afpjn+DGiKv8vR\n7uQHKczMEYP8xPHFpiQz45YAQ1ah9kcDJuVMT50MHuhSMLItddZfKuXVGiVR\nOhJ5tAzXUegAaVJ3/attzwkOUNNEyTFGgeYdKJG6hDmY4FPo0YG4INKHs9f6\nUdhR9vTFZOaC4MatUhWRm1i/+JTBFIv/taTyNshb7vT+WblyaFzFO2btJmHH\nRiMh\r\n=stRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/XKEsrRAC5dnDcapwzbG/65OAQ9RRfe0Bkkftjp7M3QIhAM2+1uioQ9D8KGFGj0JOGLHedSk3cjiyL+cPt6vhvHN6"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15252.0_1614167275923_0.5126261279793112"},"_hasShrinkwrap":false},"2.12.3-canary.475.15259.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15259.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15259.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"74c1f47fcfb8b5df45545314f9deeeb50d0dac49","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15259.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bjZfnxjzPjBO3o9elHKlXdVqvcQx7P9pt6NtOqc/8AT/pXKAXXRE25rYQJcwMAymJzKaQj9a6/PBRps1Yk34yA==","shasum":"99d49464e5cbb0fd498e059a4532327556d76c17","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15259.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNmMzCRA9TVsSAnZWagAAVfEQAIc3f/U4lsX9y4dEe+OM\nI88xJKYm00XD1YOK+evxYE0lHhOP/I9Pw+V7pRNT/6BsMimkIYLv0pvUbSGB\n+Z/aNBSXT5Tlm4VUXuPpQ+F6lVWN8zzx/ttaBjBVT7s/0Gv8jyI++VsDH+ah\n7C7dPfnwtYWfaITKwYEK5k+t7Ql7Lkin6N6x+gerGi+rHPpo5NkjJfJHCt7n\nW+a2cMFkVOLn3MTcos5gL33AkMB+B12ZR7xI719Tm3Y/C4VRpqCcSFW81/rO\n2/WaXapbJcxyVaOoENEj6aZoA1MPK1gZ/spKIX4MPAo/3M1MW4tTGukbuySl\n4gm/7OJ12uCk9OhX0+srda+pVpjb5Jw3AZJZV82ojZQ084zf4QrZ46Jhicp5\nTh+vfaKZe8L9u4Le3I9b2Oeu4UG8KIdyJIhEuNEWgV9AceYsPjyjzOaQWpCK\nyXmKgoMjRy1UVL/G/WjhGGFdoWpVFaFTSpM3aO/5NgSawyK9GquSMAabQEEj\nWWO6YpXQaJMleVuI7ATgfaEEuNGo9OVD6Agm5vBH/Y8YHajP9vmu8TYxwsrM\n54doT2KupANV7S/LTiSGJ6C2UiqssU538V556E/eSvBB8jg+u9ukNiSJ3jrK\nYQok3+B6BvEYmK9JLuNBFLUmWzSLe5P7EIKVr1LQnH1CfMrEZDqofVcodsuz\nH8u7\r\n=7kok\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKh3f4Fg+pfBShU1dQbbp411yB7U7kwN50AGtH608GgAiA7KDfa4ta3Qfmape9w+AnDILGuGakF2J9hEJxW3mXZOQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15259.0_1614177075186_0.12178653911449588"},"_hasShrinkwrap":false},"2.12.3-canary.475.15281.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15281.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15281.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d4eea08bd84a69e5f7db038cedfb370050d3c35f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15281.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1oSi092665UeEiXa6B+JyxpeoQJ9oHlZP1u+gFHoOWcjxOGEt+fhc+ksqhmF9Y9dyGDqEFJ+2seyjNUpW2hjXQ==","shasum":"fb27c9c081cc63ffb058d5e1ad81e427778d9abd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15281.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNqHOCRA9TVsSAnZWagAADqEP/jVRu+dNhVSJvgnKIh40\nVmAHwZ0v+nobCvFJb8jxQ81D0EjjyzQr4IWuZ2zwMlK9Rqi2TxJQ5wakA8kb\nxXdSiciHWnKhi1vnVM3Tv2J5PYN+qDhGmj+n5CzKvhl67LmJRKT62yLeE22e\nD7c1/UotUr0agnG3ALF3rsUq25Vl6ouoxOIg0urnkxDciiaahyp4z+38/Uzm\ndfVcJEmnDgfIcUmHitkrPYqzoZqf/X1kpMotlMCFrIkZCQOCJmfs6J2VWv/l\nIJYoz/U3QURaBwzpGZc+Vhba8pUx/brTEccBG3QEK3MpODJe+CfUIfc+8NBu\nWvED43LuNvC8yrcU9N6uOJYlggbWpmQYRYQdUtotA0poY0MIUl/XF0XWej+h\nlwYiqd6Y/xPjYdPFSus7ahRisnqLkbJgetfQhsEX5uKP/KlHUswNuoqpC2hD\n8iXNiw7Fq+mJ8YIEqY2s9mWAjU4fizsMEHHIap/baVdkBnbO7DW4msCWjqrG\n78qNXVxvCDEUv32GSMfAxjg6ahD/4Vh/WHpf/dPPoTmCn5odSxg8+RgtedVL\nqw3MimMy6G4kElfLCCQsNQiGLeGZBQdgkl91RWE6TTTDzM0R8TKE3rKf+tnf\n1PXmD1PUXmRZ7FPtv4tJb+2rIDFsAv+ANeyw5IRj1zYyPKXVqFkV0Ej/ruDZ\nkoad\r\n=4F5m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBxqJgPE8uoL7vT/OR1IcjhOXRmR++IwRZQV0MVVm2CLAiEAvDoEZ2SS38SJPPS9Ee7clbeEfYyC00SSth/sYnnnag0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15281.0_1614193102232_0.2079548601486627"},"_hasShrinkwrap":false},"2.12.3-canary.625.15282.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.625.15282.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.625.15282.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"52bef61305bbeaba7963f501242f0be1167f73b1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.625.15282.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Dw6uhItF/nm1RCPW0DFcuq95PYjZ7W0eUovO7YSl5bDJf/y+oysazmVgFukNZy9SgamEOwHA16wSaKV68GV6LA==","shasum":"7a8b86da24ea95f10809497593d437ab53c02564","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.625.15282.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNqHiCRA9TVsSAnZWagAAOCcQAJJiqZQyJKwcwYCmskWq\nZ0bBR+DgZsGsiLjNwdwu+drKagEZVMp85G5nPKXVib7yECsynGVKJK7dIhnk\nWPB34t+dVGfQcWj7cw7t0tYxWPKs/EMQ6J9vziUSQovqvnVjjQn+sV0pq2ci\n7QeOUMiYfLojwxw10PQBZaN3429+E9Tb39GP9XTmeIO9O/9ThtohkfgDmzMU\nwfhXNV10Jb/lss/of1W2ACnTt4J6rfaSyKLsecLu91vIsuG+R05WBStG52L3\ndMdgrm0NxzA7/4SgmerZoBu9oqo1DetfJBopbE3Sxb3tjbjPBvvCHvqpJRSL\nVsMGSSqLzGJ9BJDLNGHkrbkhOyhV/jI2QX6+OStZ72vF9jgwQMP7DaRnPBrx\n4rK5bRPcygJHm23nAGa+8GpTTXokfB5WT/Ctko0xXDlf8UYU1jqbZNnOLV+t\nnWydUUjcE9HPIQ+IJj6dZ0azmlRTc0GvmCMCcL+WO3l4m78fq25N79Ytcyvh\neTJcIrupYGZCrVsSiL/QwIn7FKoi5aDlo6PFkLeTW6wbtmLFbuy7/0eYgf+d\nwMTaDtwb8sGqh0r/z8Y5kmHOzt7BFQkkIYom5He/4zRZ4lF4ycOJ5Uji6AjQ\nHq61wD8sCu3kjvBhL52byQTRtdjaouWW+DRATfV6vxab/mRTzSwF4/UmJ00O\nw0qk\r\n=Ne9t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1lg8c3XFNv1dWKGYWIpcxksCk0dyPVvN2BXeE6ux+yAiAM7u3MGIOjAdRZsw6sk1vYyteJAjxRMsXKxkPXp2ROPA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.625.15282.0_1614193121941_0.9255532073438781"},"_hasShrinkwrap":false},"2.12.3-canary.484.15285.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15285.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.16.8","@auto-it/slack":"10.16.8","@design-systems/cli":"2.12.3-canary.484.15285.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a4d2e00cc81d7b1603e4a3a1b459691d4292d88c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15285.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-aZS7a+TozArLQk7RN8OI2X/hHNavc12tSjXvCW3fLt83burexUFijjnopyGVWmOU+uxRTuViB4FlDsu7OPXXtQ==","shasum":"0af1d3c0abb1a23ee2954e34ec75c6138a32ea4b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15285.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNqNDCRA9TVsSAnZWagAAlc0P/iSLmpVs9AmoHubMi8Pg\nmGaaKA0+oomjfutjr82Hnuek0rFkT9Q1KR3AhroLAb57+ugOPSHyw628OKSt\nSUc36+8o/OoSqH73jUtIEdP89UK4lVm+YnnAIYpwpmWVTsWGCG8KVALjveov\nR3BF7OX8jussVNbq8ALB/0rWZinvz9HFrB3nx1K9tQGV4HBEx4OVVvoTeB5E\nqj9jBd+Ob6pe0d6XrnDT1tNTfYSmu9xa3gwMKRnJ1sttXXROBQFoONvywdlD\n3J3qvSKyeZphWVR9ODwOpLGNmLuXjoQsZnmZjNzrOe862mnm1GyMoAqmldjy\nCJhFPY1MH0Ij4MfVYYM7AzMBe5H2jYRGL8nAaj9jbP7EbZAn7rWaKWAjHmT5\ndiR/kTG33JyzPDeiIMK41q3C600Gnu0fQwhAij8u7Y5IE5UueRgzpMFupESv\nMCkV6vEMblOtaCimIVbWdi0vJYaSDwOmcqyTlQwhAVaNLBkDz/QcQUmRZHfq\nqrpkNnCV4hR7+CVn7jkUdedZ5/hkYXZ0yLFxLgfYs4T4ZuGdjf5p8zky1EXS\nfDfYQ1foNwFMUXBfDEPgVcoYHKgzWxBxoBcivsgIRwIdpvNOh8dHoT/laAaI\nkjiY1xgG0yn0OOY4WhPmFTxpC9MMTQ/j5GwIzhxjSx5xgEdIBFHJhkwh/vOn\n1BBM\r\n=SlUX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmLiM4DJE3CaHao9b1/QYtMWIVlRnl7e0/OzLkUNv+LAiEAl7GtiW5Q1OBQi7CVt1hAqJQjBTbB4kKyTJqdm2UNzEU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15285.0_1614193475227_0.42496730936900406"},"_hasShrinkwrap":false},"2.12.3-canary.626.15292.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.626.15292.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.626.15292.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1c46b73f08a789c78e4600f8d4ea19b792be1b6e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.626.15292.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bDJnk1UuJhbf26AqqIqPhQidwO2FunqWJvAXRtoQES8YFpeqIYlXI539iAgftwWciufOyE8Z0V8FNlUpmJ78Gg==","shasum":"ce94f38932278cfbc769adad561ccbb575532c30","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.626.15292.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNq6kCRA9TVsSAnZWagAAeeIP/36VMr11TE1gKBfyP7/q\nTT+Sb5ZXekz3LqVVe+RibVaW4skV4hXc5/KkwlbvA8VTS+h3EKcD4LsyEib/\nnf0dDY8BINdf55tWWUEXlLqcprDqgxZOU9kRyrSbCBBjnjA6lK50BvokFaCY\nwhEwhHPAB+ZhVMr7zpPJeyvSPM9I6i/MQCtOPkr6QqelNdZvLQwzBJfh1FYP\n2hRskYR0U3J/QcE75pMNTZN+mGFwKgL3f9YIxrV74yK05ThOL7uITOT+U60t\nyldWubbEnG8HsLZ4FgKEbxygf/7875VHQEUohX+T4QHJfMH8Y6GZequT0VGg\nrp3RYJPF6Cf2s4mk+STfYuFnjsnV2Ye2J4dQ75Y5FXtRVix1HA7Ykj5TVg/Z\nIjz0WKgzJRNoAm4NQHV0NBFgrvykEPKcq6wBjYiK2SW0o5Vphd/kcRoZXrE9\nb1hhowHP3NrcGtcdCmdGiRrBcMQ+4JK805lF/u4TonT9D4kldYl3pRcyzXpW\nWxtAnSZ/qJtLOho0f00gOrRYWWWdMCF2d/0q2hnKczkKPBD5kY1k4jyUUD2Q\nkhTYZYflslyzCuV7GJ6XXJO8vEYJtrNhkoBH73REvR7MC9DoPQK8tKjykLBV\nbHLpOP5d7QwowVPxnNzpybz5ZlXPfIbhtocGkLaDMciii1nuwNXXCE3ZIv1R\ni/2d\r\n=0Sev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFexewwj+KLVA/QKhCTRetflkyceQDDjV8NWGqqGplwAiEAnjy/n3YuMKmi2wMhSHMkI9H+k3lS7F3KLzCfc75obVI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.626.15292.0_1614196388205_0.9426509285519356"},"_hasShrinkwrap":false},"2.12.3-canary.475.15303.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15303.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15303.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"28702c4259b74b54d4864fa903b65c47375e47db","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15303.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZqZmwin2cT40LptkKUjdbXwxa5mlx+WYDu+9elkPdUAdvkpGRvQXXbKGETBH1UmQxCnUkkC9w0JxKrj6cahO8w==","shasum":"304e32fd0c9c984aa62dfa99b357c9cf5012e981","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15303.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNrqqCRA9TVsSAnZWagAAqjIP/j9Rg7U9Zq9R3k2c9gGA\nsRobKohrjoMHxpiA0goENF96ESkMbFu1a65+iGLtQkYtTl0V2oiIIX5+pwU0\n+D74qZV88AeOvbme0Wpo/dJIsBMOWfv+paJROpbXo6NwLDC3Q8ze6qKssOsu\nmIsltT959nbvUK9lszvG+QfnnDQu1I6J2ZAhNQcptjpCfNaC0BgV/S7nxx0/\nOFf5riNgeIjWJuqJAtoQf8J+qQSM9ulrcVfN5G/mAKUHQ9qX2uwhAJJgJGok\nlWq828psn8+z+s+WZr2G+MMy2CWwwqOB6wdL+gh8anP6VC6iA7VIEOUCf7yS\nfciKhH/+E+/QV757HP/sMR/MeyGod9xVSmoIgWD6JjijR2nCWMAQWugDHiM/\nzNkNNCi1+9I/qUj/VuCpMX+xunegrtJEF6dQZRGrEE6/q6lTY6OkHn9CtQuh\nQr7KcHfMNXUVFr36Ilpr88QIHEAZh0ZuOm/A+0ZrynXVVeuaD7xGV3I42POA\nHOV19WudR7/U7PxO0H6L0FLLVRLYP1NKdf98C3rl6aURrZBJrKiMw/fIE2el\n6RjWcLQtUu6MBO5dMUfHuGRMpvNluO8z54/gbF3m2KvV1S1jDICZh0f5Mmj1\nrSDktWo9O5WiNBQ3PNkgrUuG8SQ1GNngCq4c4qpeeP7vylKGAG/z6FcNETIg\nxFH3\r\n=HFGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClLUQCrpsHocPB9RE9oWvof8K18pzCPEWw/qrd1ejzTAiAaYbAXwnRC8fM6ygvIpU5fJoKaNDWQOv8JXjfdaYt3eg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15303.0_1614199466383_0.9270800922565563"},"_hasShrinkwrap":false},"2.12.3-canary.625.15314.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.625.15314.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.625.15314.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c97b735ffc2be138d789f0ad9f7f296400153a3b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.625.15314.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xJkZ2IDhstSY31Vv6sPwjoB9fFtMjFXqZ++Elpc2KTZwJWPZs4pd3MJHdpfhwsZY6UE+D30cR/FrqjUU/KeoAw==","shasum":"732e9b5c408bd57e9892ae8a0bfd1df1ff3f5743","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.625.15314.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNsjCCRA9TVsSAnZWagAAQ5QP/31fPjuoganzSvoM69us\natNT+ZQDAoyjEOsVvvZXpoctd8aFvpAVxshc0iTJ4J+9yZ3gICk0n/CSr4Ho\n7s/0sjY/FDvUgQ8ESJ9ydALoYk+VxRG0nOqDZ5xZnfddYHsFb7r+rSFX2S06\nKda861qGUDcUM7eA2EkSlpA3R3mowpt6VCWc184Z0QwJaLGc7IsAzu3TRxd7\nMz0hTaBWR4wGMiHnI2PLMMUt3j7aNXh6At0woxlDVd4eVcGFjSxFtiGhzzsm\nHf3VMh9BsiOanM5VU2pLa38z5eujI0r9J6XHERBdqmy3837YVZ7wadKFxh5d\nyINlr3xzI10buhZy/wShBopx4Oar2H3cKKIngs6Aw6qChZ654Sb9ESb/yKGO\nhzBPhWYGqMZR5pRbW5fXB/l7oDr9CAHxJNPBZmQ/dwuB1cdxtG1T8ZevaRNj\nmHXwbbc17L4BvgMDK1D4ca9vHTDsczBWaD6QuKfe+Xb7ZeV8VkXkthddnHDR\nXxLzeCNM0ltLrQn9GIPyMzvfevBBnvS2M6TMbd0FzQGPZ6n9oEegu2MmsCjN\nwnOuuV3MdQ7l+Eh5Sgjm5PUgE9W9OX5UB84OSll7QGP4BuZRNJionkw7TgMA\n1XiGqlGsREWTMX1EXP1zPTsiDw9rzc2yTcwKSP5ERgvRjM4ycD5R0yHW8fvZ\njr0J\r\n=lZAR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJb85OU/dFP5wO7p5BQOKeoekP2OVagTOaESTZf6pEXQIhAPpoZ0W5fClz1PzOdXADifCIgJckQwHfiAu1Upd4IHVA"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.625.15314.0_1614203072496_0.41551011101772284"},"_hasShrinkwrap":false},"2.12.3-canary.610.15326.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.610.15326.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.610.15326.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e50dfadc0b605b1135790e64008998a177aa7b07","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.610.15326.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4e8bDE6WdtUeDFAvGNMXN8oEwPTyZ9zgcY5OGH7nh1QGOpLOPHI6Kr4D+JuH88yBziKP+bZv9h1L7QFVYTmGAw==","shasum":"e88247a0db94c136a26d4715e9c46c8325fb7e79","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.610.15326.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNs72CRA9TVsSAnZWagAA6ysP/3waK/wywqXgyJLLVdRV\nYC2oNv3U0QKTfYVsizlpCnk3/tohYcQ5A2d/qIQ+KhHAbD6vALbL9vVs3Us0\nPESOckQSTp8esEL14QMdu0bqLV7b7XZdKX8ganG8zp5B2YbwUy9U4QSqtOGw\nn+d9ccKJZKTcXZb5diFKdiTf6VVm/gT7m2WxKYf1nttje6X0mBoAusPhCS/T\nbEKbAe8KVv/+ZpEC5m0VaW7rfICb8MNJ0tyxA/ANP/O43hR5VXaAtO/4+2V7\na8snf4VnFzVtmTGKqePpr3/PiKoyt3omgztLo0i0UhT3Ivtql9u53ylvEQAu\nfu5aSlbQOdVI27M/vaBUJwGzrcJKT9FOUWEkK3WkwgNRn8Iw1g895XBNgRU0\n4019cXAy16j3z7vr9h5ujkNVsZ3Ifq0x47KVu65+c03LMPQmjoFNSUGke4ph\nnJvh+TEIb0osQe7kUZq2z69QHm4EWVoN5qElmTA1JhbktU2f5AjbyXmRFWK7\n4T6daLCatqhf0S+T3uLNHHg/QEX1WRlZgtr8U6Y7KaMxYPrhBkOAKyxH9ryX\nl37+9V65fTeBT/m4lNKOM5jirgTH/b7ZCO0xacX3aPxOKCEKG+VJDjIMsRQE\n1phBTBTYA6ra2XzoB+LnwcDW1/GJ6b5RbN4UB11NMdQxqXw4bJJxbda4oVri\nfash\r\n=W7sO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUXZmksQmd7PHg3R2N18MZVecR7Myk80gdEtr9wXrCmAiA6KiVVDrjFcIz9MS+ZShIROCAlcbRXZZbU72ZjBuakEw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.610.15326.0_1614204661299_0.33155466846566295"},"_hasShrinkwrap":false},"2.12.3-canary.627.15330.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.627.15330.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.627.15330.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bd49e8c9e9033c97efa9c01a8cca7d303a603a96","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.627.15330.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-C861z8Veh0bGDoBV0V5myVGAkOELiRJUSGl+sR04Mstj3htMv68UOJCoT2ZtLhuRInN7qiAR661BvgMhX3okQQ==","shasum":"5c4990d4390fb22f5c39cc6c4f1ab2f9bff26cbc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.627.15330.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNtCtCRA9TVsSAnZWagAAtGoP/038vdxQrxtnsyCG0knN\nC4OliM9JgGrsdPrrFjEXB3kX5kBAFMdxh0+quR/aGETbPI3R8jLMZfHzswIM\nm9MRFfGzPIGYUVQMtrhNKs6tg1VlRI/ADMMkqkZxDOKhwOpNaSa6NfbhZFX0\nNfVxoRh6ZB7bB2GoNpGrnCnlqHHOMvacFy3yQFvOzVflJ8mtMGEQqYloonc6\nM3QTzN0cI3jOjW+iZJHHTWNefy6mOf2PIlmbpTZRdBGTBK7behqhDdWPLJHU\ntLhfZM9Qq6Zf9eVqQ5Nh7YqM3tZvZQtGqAjzrSR+nCJLdw7Ad3ZA1+YqlB5u\n+eW9vjpg1Rv88qPj460UcK9SM0kpEAtLr+1T60iaUAmS4VzqWd9LQUFP+e5Y\nPzigUF0O64DT7yEnhqVGNLO87H2qaPTCjhjxfqlVm1WMhqVvfEwWxvyKnA5f\niu8XhA4D7b52ZW6GmeGWQD2oSvaF7RVmxwiaX71cxzCYhD3QtiqXrXS/m8tn\nKv1UfoQzgxAvyWQ6nWpg+CwFXLvOr/FZGpH47k/7GKCdUN9o9J5wNgFj4qCJ\n5NLDpc8WeHBE4QgaD08qj4ruh7KtPD2BAsg9rdhLW8hcs1m47QCz7LAVj+kw\n5b2EOktWvNGPv5ugKC8NcjfrvH/Nimht22fc2bz+d5vIoZQpXojmkTj/cDD6\nLGHX\r\n=kMj/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjZbhZ87Gddzt9vICbMGZqJdj81up2ww9LIDTFe9LPgAIhAK6SlvRl83iS6mUv8iMHkzQYJ3EV7ekOmH1MQxNoyzKV"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.627.15330.0_1614205100548_0.3467940576292079"},"_hasShrinkwrap":false},"2.12.3-canary.475.15345.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15345.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15345.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a4075c6936894227fd2b0d9100e9195bb90921dd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15345.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KVt3er9LA5vesKP4KgRowa69AoUnQ59ML8y2UG74nI5Tsa0S7YA6rARnkeim3yfRP/7VJ4HygiLzCceh/fr/mg==","shasum":"70948a4fef099af05240ccbb0386431ffb0c6f82","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15345.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNu7GCRA9TVsSAnZWagAAiQQP/3Yzx4DY9BdIO3zruN80\nnrPt7oZNmwXsi+l/imyWOXmVBE7vUaFhUbMHrSWE02de8+8A8YLC1wUNcgiO\nnqjOw0BRujPTRO4assqI4ctI91p2jXMLmmpSu/ZPDc01UzEj3zkxPNcvigDr\nlRzVU0KFyzT9FQcMKKaGe09yLjIeMQWT76CfYA2JRbJkfV8fjUStsKryvWxP\ni/L9FYKK/nixtlhHQy6Wb1ZWDywlhRlfMSLdjCNaF4cBtOwLn0YtmgZRL3eF\n6E61iP+aZ9zIw1QAmfjWLrZrE8WzSK7FilmepurLJac2ciQszSGCDxHsAwXt\n4y8bRH3RlfEZ2nEv/UHCA6VrN6ymoAH7sk/HTEytT7NuKnlf9HUgJdhQWJpa\nT55fnsFGi0hPvBXT8XhJwOh/mFYMz22NHPbKWXKzOl15PQ/Uk/ygQZgJrt+C\n/80ib0aNmC2IhGDJs3LfFsiKfss/whwJkxruOF2vq3KsG35dKH5YLbNo9Gmq\n7PL5x73cY1gDxM66qVQleOm4NKaLTMu89UJYX5x4NtuQKT4EU2YiZd/RpP5f\nYZTC/3L2BhwHUgsdQ1H8vkFO3MokL/CFCEXFdYQy76uPmd8FqTgFOv/YHC/G\ny2KaU30QdzwK60w9Qb39Py/JFsYYNMtS0Dp5lRa/IDQPA3DuO0eb+gf1rzyO\nRA3x\r\n=LlfX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoHwwzrbg4Y6DiO2dNLL46/cAAD3okKDJUDVcGJQnWFAiEA5DzMiQSFBAdZnlMPpQVgHKBQOU0rvmwbCwOk1QwriEg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15345.0_1614212805518_0.4513423787893709"},"_hasShrinkwrap":false},"2.12.3-canary.475.15351.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15351.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15351.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"51b56505613a1fcc212063e96313886cdb5ac403","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15351.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wbLVMpKiSsz5EVdpyCEV6AuKyK4oH2FDsbKpYyV+jyFU4S0bDKvihHW+LUeCLXOqUL17sq6GzEaY9VfAZr197g==","shasum":"d49d52382e9f14dfeb5658f28a7c429e741b593d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15351.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNwuhCRA9TVsSAnZWagAAWjUP/3L7hXZ/7JnTbd9/Mybq\nWjdMzcxqP2DIh2l/HdFAZTPjVzl/aIrAuPLQACXuC8x3Igaq+6mk92ud8g5D\njo395iXrhzaAleZtEvGzHBGHSs6n+tQ/Be99qfknnbSOFxb14uzyRS4wHgIo\nTPab3C38ZHA5/Etrjyy1Yx0tNL8oB968xikB3fZ/e6xm9OuPzaSPCnQ+m98h\nAU9Q/MYQ/wdryIvMvo9lREgCaSxFFUlzk6beFkL01DK9KQZjmyGTSfo2K0XT\nuy5qWzZkocY/L5cT55NJZOYoNH5gZFwH5fO+lVjYlxHgB7bPxz8X0fA3XDL4\nvtAajohMxkBVRJuIKhJ58+VKBZMVL24tm/rMuZWlDBPEJbj1B40x6Pv9y23e\nK4WVS0X6UUuVMBXIQIW63Hehxy9ttl3NnDk2zW9sEWU9UIlDGUDWTsL2OtCZ\naF7tZ26q8GNhKwOgTG+Y8Rxh/bJYkMueo5RtZkL1b+CzCJI26D/omWtxo3yV\nVor91jaaUMmxtQM3XbisTEOOgjLomLsOdL2NxdSZ8wh353cq30dA/qmDlg5w\nmR4aJw254w9CWUlqPg8lw3CYerbL5FcyesmxlVKtMEZ6HAebjfmk+jWmoQPg\ns8VTFNvl/k2S5BW9oyIhu7F6eE4WHhunGfx2uSiD1WjWO5ZPHrNKjHJBz0fm\n5x13\r\n=sgwO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmRXTBAbkd5Lfh62fHEiaOPRSvs6FMQ30RSQlJxFKOVAiAH1JlCfdcqWqaaQSMuh7piz1Cb4aomfbqO0BMnGLTOHg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15351.0_1614220193097_0.8526477753389823"},"_hasShrinkwrap":false},"2.12.3-canary.628.15362.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.628.15362.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.628.15362.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f86b67b8ff84ae2b8656b09f3b406b96a083de4c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.628.15362.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5dNBN2pLAg9feLfH+bHRwCfF0ZeIcWeZ76Ti48tctDju0WT+sujR6mhUdcrHrkWRTnJvsu3zsJDE8IgRRasjhQ==","shasum":"520157343c98d8fcb0e86399908f3e4f75717f44","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.628.15362.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNzZ+CRA9TVsSAnZWagAA57kP/jADmal2UEEzhhxCOs2M\nHNEPC32PBoxFHN5Ukf1ORFZVb+T9SN4Br0QAwxdCzkr0xDNYPI3jg6huLEDq\nj89YziywRcUXWKifgrEarbO30VT4W9NPR7qHpR4ddk2vfydt1rhyzGoU2z6D\nt5c50ccP7JbTs7HN/D/wyN9jYUw8ZQbmC7h1+LUWt9pShRWUTxD3mOitYE1/\nhxx82rWrHCinH2sQI12uNxPXig1DhrhqAcwor1JywglvY1zO9tbY6R9ChxKo\nv7HSwgJVC/SNTUJq1RwM6TSluWjMp8hnbQ2QDd52SuDO9+CfE5F7jpkuTeFe\npsF9qJn9JZPWpkescEjJUfBRuYM9GwbDBPN1vWa/VF4hts9PT5tWe0STu6ya\nUukDQNz3hoiBBIKPKXfpx3UL4ZESbDRvfQO+N7FADjWlB6r1DvcRykzgekO0\n98mf8gx+HKN2XDwJRDI3DL3dB/v+mk7xg0JIeL5F6fCgj1U7enihcIjpiZZy\np8RPyHFllFooclNE7e+vzCq/NiuFlbxSAUyFMb6AnqUY1IIK6uHYhfhXirlU\nMIDTg2VNsWR60bxRnCpHDKCC08jqrE0Rh858jW7F6SWug3/CO8S3AVQjLaT0\n98FaAtZ+dDOtBaeEnfYoFsA/0/iQmuNLbsm9OV1H4yd/wftTpx3Dxb2W+uVG\nsVcn\r\n=AMjB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAT18J+d/RUXFqqD4nZQC61yb4hhxbnb/ZzRU7Wio158AiEAjc8gQqpSbnNyWTyqjNQ+Gy12xvqzIXBV/Maj+hEDyA4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.628.15362.0_1614231166257_0.8388950342765227"},"_hasShrinkwrap":false},"2.12.3-canary.475.15369.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15369.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15369.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"39da8a9ef3dbc60317ca6948099ecc1f2c8a572e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15369.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5hZejH71tqePS2/TZORNehQI+eyUNdTxXrkTmvRHueFUvJDTo9sW/q+2GT7kCfnfzxdJOwhk3FhGTHCPOUZ7cw==","shasum":"7ec5e8e31266e85772ff46fcc54aad24c32ef164","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15369.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNzoxCRA9TVsSAnZWagAACoUP/REkFZiir1fAU8L5cJou\nSmmqj5qO4hq9lhhvzM5f5jEwmTfuqs1O4vhMWsP+WooFMKBK1ybNrosrqxQ8\nbcDuzy5ZW/XmjPUEF0FL8vtnII/1Hz1kP3wM3XDLp4DJqVXeWAAtfVTwyjRh\nLGTFiF/AnYp0nQ1CudsxR4hZduPX6l/wLbf8suwY9DEqZiFOVa6t2ZHsqON9\n1K2JyJ2cYuZd3t8ROONM8VlajjHOZ0fSlXMDWt1VZOLUq4Znkp9lSB2KRujl\n8BXTpFKhYptfKXQuLUe5SHN/fHWbRZgEXLxslr/A1tPj9bSYfUMQpFnoG+g6\n4VaSxYsPbq2PIdP3ywuBPhcd+a7xJi7PAv6JuhPFo9hL71/ChdpFbqs0s+AL\nbJLuU7VIqKsozBDrZIlqtV4CqvEhTav76wmkzthaeo/9rKCAAFQ/xjy8mnJr\n6U2cpVGtmHd7txoWucjDbJ43bij7HyWH8kbOjn6FJ1g29YaHMIkfNyose0mL\nI7d0LFv3RLfom/nC/hfv18CZV6cC4WUiX0U5CYxdaRSa9ju6RKZrsry1fvqt\n6yCLwJXDQEz3tGGQ3Ws1Ime1B1UtlJFqQLG6KVXV70aXIcCewEveL7tM1aA+\nQOQyQtnU7GmFUbyY09FblMhuiHYr+N+ciA0qyVval/oGnRoEL3e4U6WXOxMu\nSUjp\r\n=NWqw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO72AkH0OhPOPjv5xGSBhpHlMqAy0VBuTHNWNZlVPuyQIgRvzqbWoIqKvP+HdP/2uV5RYHSlKbVlE4slyN6E2CZRA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15369.0_1614232113302_0.6836503160140026"},"_hasShrinkwrap":false},"2.12.3-canary.628.15374.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.628.15374.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.628.15374.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5dfc1c30db247cf9c4ad8009836241e8326e4d06","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.628.15374.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CKQAm3UFGisoLQr1tVXMk9Kf8IO4i2nsQvxVxRODsrKH60NepupZH+BqLECorw0Izvyc5v4OSxXwhV4Eh/ibug==","shasum":"c7cd9d8cfb371e9fa3b574035ba650b60e66216a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.628.15374.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNz3DCRA9TVsSAnZWagAAR5YP+we3R384EXGRTx0hwYKM\nrW0J9Yuj1FEjBwBWWdsqanzYUSWeueGZjvUrPT4rTZ19F1JEZgDilj5QCyzT\nPFMenUj2saksB9v+9CUhrYlHQfINH5v7lf5JXJD9NhMsiwd/dlAMpM3T/Td1\nwNwH3Hf+Y/34WTi4GJ54Ur1qlmK40wNXMCWk+sC2kMHvlknAmK7PfaaN4Tss\n+JA2JDDQ/ZrrkkPQ251XkOPt8C6A3FoEDC6wlxxK8N0YHcQKwSYJ3kWv1jRD\nSVvrsTVsMQhAz/6OLwY5+WNOoUAbjjW/z7TBDYgrdBysEnT4EVdZTC5mzuRR\nMEINaFdxYClPZRBHmIE9X1aXu41sfEMuc77gWWdgxT6FzA44JFzVoTO5l49V\n9hmBLkBmtmeZIqXObVutbFDuMtIJU9rFgZLVV7EnbVB2qbxXI0u2O2DSJ7ul\nf7uhMZuFayA7Q0nH+Ra/2qMNb8Qtb+34bf2nN9MBWuPqSK1bxuOBueYcdowM\nUmzdm7ihe1SMW/n6K4kuN5AWt7wCbLe0Ga1h9UiKKGA5n924CSG0WZDxa3qY\nQa6OGVhQwSw4c1ySBCFkHCWyqKX9BqSUtTDr6lYRGazQW9d9vZ7Gi2LbMr4N\nfwNszmeCRVRC3m9tYzl2Swlloqh0XIVAs8HzBh4WrjIaG/XJ88zUnLU974fT\nDShN\r\n=Fusj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrHWbT4PXEVvGMLUyz4pt//XE6HWkQ/DaLS4J+KCiA6AIhAOC8SGgujT63JA+F6h9BTE2Y1xkH7hmZ0zJTwEWR8H5O"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.628.15374.0_1614233027020_0.6253267055942073"},"_hasShrinkwrap":false},"2.12.3-canary.475.15381.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15381.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15381.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c385bcf2dd2e3fdfe18df5cda94566c6d6870ea9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15381.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+tLMhyfLMWiVoCc/LptD+arygEUXXl/h5IQrm0eKKs+kxQ2HApvBQ10CXZFkzjZ3jCp/Fv70rmCJUgCdwaON8w==","shasum":"db1004889b3993b14cec55aa6e1862ede2727d20","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15381.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN4ElCRA9TVsSAnZWagAA1G8P/2xvq6SCsv3jB8kSauHi\n9G49s1Q8b8z51GEVsgPIcbDJAdqm9Pk4id2pm0ajXMrRqGQDOV5gM1H9eOFb\nL1PVKHQ+A2Mk8FzLt5SlnchrNEaSV35L5bNSHFWWRj0ZTSnVN6Wt3Vppbidy\nnGnfXLGmeyxUAS2EDe/kciJXF0TgK+MSRQ1dua4BRKVXIIm7ddBUH0Kgs0jC\nrQZ5dfSEBKgRlR2J4PRc5DWldM/JfRgOdJQBq01mkk4BdhyE23w1gFu9J3AX\nrGAl9LKROkfSOle2FCzlNDHBQhe/a53qEEqvM0+GkezrKJsBLKQ0Q+52Axx1\nBSaV8KECYekmAvfH/PaZkQOfKQTF4GZQmJjTofGDK0wly/7Y4FT+H+8L2D6e\niQaO4t+OoCy2c6WCNxxXj+DMSVkRK2ltfZHQKU1AXB/b8qbOHGRAB75YV0kA\nqM8DAZLU09z1a5yaCSpuVysnoCtl82Q4uzTolWquHJGgINv2lAvdmVeXER61\nIollTLw2WqLsTKs4ziYkmO/5P0bQymXfuA4tvWfomrbsDUC8LX4v6WohA7Oq\n0JHWUHS0QLVaJOGdclLvNSVPAN2cKl6z4bOF0VrCSNlkLczgKUDrA+2VxfWz\n7GGerBNMDW1fkgBpiz0KbZ6fwt+b5DH1iDdiwcoXIuYcK/pCy4YO5WTpn7Lf\nyKDk\r\n=AR1O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxeayQEIeAm4KuTlF2taGMH7h7Brg8o1cAZnnqeOsZ3AIhALzVuig7SemmahB5XAnjw7PGFb6IUZwuHFdWg1diNZ5N"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15381.0_1614250277299_0.778651456942439"},"_hasShrinkwrap":false},"2.12.3-canary.629.15392.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.629.15392.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.629.15392.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f6ab99a789003dc521a30d3f6766779d820404b3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.629.15392.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-aZS+GgslzqRIcy6MY1wuzfT2GO3QhRmaAQUYMpFxZhgyRqZ6hFExIveDEz/qG5yc3k9/RjUeO5XRQ3DmNh36Qw==","shasum":"4230e59a271e8f70274ca3bcf27f8760843c7788","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.629.15392.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN7myCRA9TVsSAnZWagAAVSgP/03bxXsX98r/BplOHkxq\ntzrfSLEN+8YiP7tmEuAj0zwmZpCpC/jmTHHRPdXZq8QSQ+FnNtEV4RM4+eFx\nOvt4r7buYwdgTPxVMOhXoD/pcCpYb0iE79nxM+3jUucfgqDsPdnRrwdYRx1u\nF0Ss27acpqnbxsckXch2bT4KLwMnhboFSoK3bhvRy6WaLVb1knXul7ov5jYV\nL2eC0Hy0MPMcRJOV1GsIcMQQk+5/qugTvTzHCTf7rpZi7q5yVc4JPC18+ByJ\naihfzeDqQgGGPeZGJJFn8fhcebnW05aw4ScZp05Qm9dzaPrrb6ykXtIbEZKy\nGa6FlsdzWmKrQp0fGjkNsuBgkAeC97UY/WYYAPkqXYjAjabPMiy9bv2Azn5h\n10djMIYAiyIvzV8BNsSK9ArhaVZhPMrWzLJ/SOKzf3FR9421OyQ2xqWCeio0\ntuf0DeU95Hf9s6sIWj6ZIAglLCH7nUmyfJ56dWdhxA74dPgkEo6K+dcZLZ3p\nMrJXSaj9lcnJMmALMe+mRpmpTvgV1s+CJ/MlLcxR8oHwExRcdpWHN8RX6C6b\n2Q9QISBX9Xe173Gtk4GSwmFhPwb55GXxPXhRt/LMN/ic1KD3vMt4w9efqSVB\nbtc85jugx4Fm7CJfxs6LdUCFFyYAkfO7pRRbybHpFiWoKg+kr1EH1Hrf6ZSO\nRDV7\r\n=Whe4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBN8p02j5v1TFI9yTZvTNGhY32/yBPizzP4NRtF+U+xMAiAWn5sc3CmMRB+gfrDEhZg0Ip/sA91VdJZLkx1ngAxCKw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.629.15392.0_1614264754211_0.4857612416189725"},"_hasShrinkwrap":false},"2.12.3-canary.628.15398.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.628.15398.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.628.15398.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7bb9fc8138c2af7d8718e00828a4c0a5ba2ab179","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.628.15398.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-hAsnEcHSArvA9hq16XU+WVK4elRAcI7MEkipOZPAx2HWQKqHu/hCmA36lHY165Su/my24EaX4KJ7We2B5LyvSg==","shasum":"4587723d423f92f3af9e6b7615f37583eb4a4142","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.628.15398.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN8rHCRA9TVsSAnZWagAAPqsP/R15thlxTx8AajiYsLvJ\nUC0JrHNZm5Xl8+zQoaA0wMD9Db24ds1e+6LWrCR2GrmSCnR9pU3pptXRnttV\nFWhTpHjRV7NDTGCX+1rsYq/VsviYjMr4Ad2CCdstctMxkzGSIAywsWJHeiBg\nEpb26qJkbmS7RQow9r+VJGTAc5j1rXQ6jh553NmSXYxGha0X3eMAd0r0ijPi\njnRrI5Bvyfk0ggI5aGK/f8VqahyUTmezlQc0OcR356Itq1N+oevCFbeKsaTg\nMCP8b8KN439lI/qBn6mLoV7dk08j5d/5tMG0Agf//geBjarPqenTpg0ZAArV\noPxk1Ayh2S8lTGDVHCQHfdJvCps47/qIUUY7S/0dGDpl684bXyR1dPeNnV3L\nZ6em3Os3BTA/wZR3aoeSm20aL2pN5a36892GnEm56J4QNebx8tYIhMRLch+4\nzygzEGLKhOuf9NMk5faDBApAE+xr3GokmLvam0b/wVYZuh3Al4wncxDCTS4Q\nIjpaOSvVY+gZlxD7rSUapto6UyTd5e9QR+9+4fwxil1DxApTGqhJzOJqdjYL\nLf+oicZzSUqPMWedA3YOxoDbMslkx9nrXUOTwgmBf5LD7M9hdXZ/yxURJGQW\n0I+EZiOUK7pvinvxWM3Px809g2z2eRdmRN7FRKENnb5S+fP6KIc4wSvayTUN\numlb\r\n=M1xq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8M2LmWeaUFHNO3aOcWUdKSs/mUhN3CxXEzZQOn/JrYAiB2POo8BePHnN94cJxwAUcUSae0itdrDDNA/f4xYpx6Og=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.628.15398.0_1614269126637_0.8258961194576915"},"_hasShrinkwrap":false},"2.12.3-canary.628.15407.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.628.15407.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.628.15407.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bc5d5d050ddbc23c6b1b50206ee66fe25c803f85","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.628.15407.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Qici5R/TRGeOsn6GShSEl6ineuiKi+YWCnyEnNZpLX+DevbH+rR0Z+rCYWXRAUvjxyuFilSvwnmX66mXWr8k8w==","shasum":"0ccc256e1a192122d52fef167c1938cd43c62c44","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.628.15407.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN9N/CRA9TVsSAnZWagAAjcEP/3LVDdpQxr8I3NGIHbys\n0VyMfRHXQcnib1wpLapdZNXBzXGRfjR2VAqpGCWZ1rs8inLYNn1fJCi4+k3f\ndbqRLRhaU7wmiVbSCGjqpIw6PGsQLpI5iiO6UTmSD6TQ44AYyg413Fw8S3ue\n5WHxulWg3gzRPi5wGMuYnin4tOK+kjou3LzITLQ5IIJr505AgN0yN2usQ9pn\nnd/AtzFCVQA5sZ1UlkkvnrIBCGv00KERAsfEM0rsVXpgpusFsir0tjid96Hw\nj7Gl51l1PEB4Hzzu96TB16iqfoRuabGDCqVOEZotaldkaUtnbsSxWeX/ymHm\nkcaL2VdVU4ls4044wANac65icnQC3NR68z1wBLpHMxcyAv0n1ixjZ9leoe4x\nK2EMJ3vd0pfzV99UlBJUA0oJadevUOlOqbVdvX8Km+cwcAUxbAx0HbWBXiy0\nYblxpOTr/hlEFFNoI8G0X+MtQ2lVstKvuBcuh0jmhcPaQsg/O37EuDgjkb0v\naL5HoEl9zgf/wGKjAYXADP0xo5ejidRu5cDTU5cRxxWd81XHRPREvjBHdX6F\n4ptlPQsLEc75PEkBRExesUiPC6rNwKQU5RZzn2VBSTRa1bNLdSpuWwRWYbUQ\nQrzIHau5qKmJL2hGgluNDLM6Qnl+0l971rrx/V4SmF+3AGtC3BeHpIpHWpfX\nX+wJ\r\n=4jYz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqTWhTkgoPylRjnPNcgRGiP8YfDwttY1KQYH9VZl6mQAiEA/eN3xlz/bqjhRt3b9u3RgGHFAeDIrrdeFeO8dM+DuOk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.628.15407.0_1614271358699_0.39013820655802345"},"_hasShrinkwrap":false},"2.12.3-canary.566.15413.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.566.15413.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.566.15413.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c54f3b8464f2e14e7be01373dafe8d7ebb0b5877","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.566.15413.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-x+IJo/u+1+/HrbqyOB2fN8SxL1eKWfQHKCMrBpgQ1yDeCxgcKw+LZvJ9cwWhGBhMlx6s4JVW7HT/GO1XhBIV0g==","shasum":"f6eb63f6c401101411c394ed17f23abdcbe9a7e6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.566.15413.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN9UOCRA9TVsSAnZWagAAU/gP/1tYRBGXIuqD4kHZ6o+9\nuXAatpgqMnLtOd35hKlG20mfAP7uoWCfUNFUHyhzyOT+45cW4DO26X7AYdmf\ndECy3z/PTwqkebqgc+Vc/3dLGRPR5+5z6pM/4nUrHM7Yl/IgQY2hWLiu6Mfu\nG3UY0roi2FSXm2ATzVzjZHnnJYKSSwPZYwLIdXlOKWHY0z13K3BJEeZBPcsk\n/29bt6FWJbR0E/xrF83oSFBpw4xA+4dTVLu6FQJAcBvV07n1CBPKZi4hgqda\n9qf5MCqnbXH84eGjkjk7YrkQzOhlFSIH2rdEGbmI1bW+XlPQ6fBC1Po5EwZ7\n4QV/T6on39rvj3RRZNqVhhh7pqeTyCkmecfUJ9eXMbDKXkqq6MzkiIiz908Y\n1nOytiTezL2T6Xz7Ad9cNbcfOil9QhhW6uDG/daHiJZb5NmX5VoD19HmzoFB\nDYTHi7FLF5l/nJukHU/6ZgfTcZ3AOZnlX3eDUXlTVRf+3HxEK+oHdyNDKZDR\nL8aSPZ5ygib40/27E071jYsfOTRNLLIH6dUJyuTUgQkIo02RXJxWsx/L+iyk\npPpb07BOtQPyyiIEpeTKXF+a+eY0MqQ2ou/g3e3XVK+SwBJe74M90oeCtNgi\nF9bb4/hZ69S+WPGBbzbIbvtlnfOpDGarKK0C8iNzUawJeCKdrzjDMEUjR2M0\n/xLY\r\n=Rg10\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwecerJ59dRa6Wc1Dxiu6N0k68UawTDKvPmCjzT5tvjgIgSMNV2nDsSNRZ/SZs8V2Ozv7iowyBYsvzeZOb5pHWHGs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.566.15413.0_1614271758186_0.8484645024896451"},"_hasShrinkwrap":false},"2.12.3-canary.628.15418.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.628.15418.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.628.15418.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fc122e8b4dfe1981e068e09f6edfb53deee54773","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.628.15418.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-mt2CZNDVI0vk16aAUczbWnCHOz4mMjyuZcJ9aTYXR8HkjkSqe25gnAWpfTln+rOpJU8cdcCT4eCtFvGRH9ON7g==","shasum":"50bf0279f873d2328cd3ac39ef9e216b1c9109e5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.628.15418.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN9icCRA9TVsSAnZWagAAlz8QAIFLlozeUmvrRs0IQGKj\n9+pTZyHR6mGuDRANoVP3FDE+TICjiwDVO8bmUBdTehNQANgf4MhdbwRLtfpX\nHnWjXGuS6uW3t7342LDabRExz/qdreBaxAnzJQ4cB8+8N1mviVF5U6ry4+0G\nmqRMpPbWPKJbFCmJDe/bKgNLNCW3fcgfBaJygljEqS/y718y3W2kxEMFlcdh\n0Ua1GitlmoVUj8/VdwGIsjUH8COXnFDbGQEqS8q5b9encEFYjFhTbfNj8yNw\nIjYmrzCyhoVtxWZJj2nIFUGEF8PnQDKN9VMMQ/Cv8DqNum80+HQ24fFi0U3N\nJCgLaPeoJxBOXxHvj9tdQ2gqh0FyrR3p/HuRYrhTANdY18ZRKN8j1XEMijcr\n9DYxjTht7AURRCYudwq/zqzdvTqsZSeJLLG7NaQckmwYX+VQXEJ4vQt7Ft1K\nKWhPM0QFeUOMGUbmxkc2+SQByl2wCUy/dSwarkT+PTU0oDQUz1SCUV7tz3xd\nVgR5R5JR+z4GO3McprsRqNNAzTXOio3FZMJCAnG+9zBZ5uhltAh2qAwN6jvj\nihKeguyfSyZe/6cXZkOc3Isg4Ol+prLzW2NdM1ARoJFeRry58sQSaz6FZqGN\nJQ0YjsHtgGeXY3/ljS33E0iJzMRNsSkcPz/vUqaLtUs+EQkBTAtGIY2SdPda\nwzVr\r\n=lnQi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChlCuQUak+xBU2tR6VIFE8866jnu906LwvNtOAfaBmEAiBjkCaww9XG/3mx15VYg3MXJ0bO/ri2nU+1vmuxL9Sl9g=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.628.15418.0_1614272667527_0.7026627643792958"},"_hasShrinkwrap":false},"2.12.3-canary.628.15425.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.628.15425.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.628.15425.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d6b06bd3886fbbe75edeb190f380ce0f8fd0a389","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.628.15425.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-1HQEiwLn32W1bPowUfvmhLLcDjIfl3POJK1px4BBPDyEOq/x0HYZo8hPSVPjdKGUtiI33B8/+z2VmeJVniIjZg==","shasum":"d20273f4dd11a742d918b66e81c7fb30190e591e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.628.15425.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN9/jCRA9TVsSAnZWagAAK1QP/1VSIi9MhglWssLq1Wlf\nRamLhro7M9L8NRYw3jIE+eY1Fkie0YAXCE7zVuTfhdbjm9opycF7FWvAaPR5\n7YDpou4nlXCDQCOzViDqbmYh3CrwghPagCB3HnmWqHkCNmJVmyW3HJk7l+BW\nzRatzsPdwRz24dPIdohf5cSXVJc2ln0JeztEsacgr/DQ00TnQEXg/DElJJda\nqixNoqus6Kco7vDgTQnY1aaUQ0jOG4a1NnMIYZUq66FSsWI73uhRFoJerKzC\nxRAb+gQdLRZwPV1lLzvUpyZoS/2TipYAjTkcHMNB0jwItNyFO50jShhrknxU\nHytU/EWox5Hd/rpQ1FfEaDEE01SFV0TITuAWKwqvVQ8Nq+ulqJ8SSjzRZb3F\niGFkcpH6QyhAriMXBQyJb1RxmXokmNKTpQeQWVKulxZcC8bRlN579Q7lUgS/\nn9IrM0ij6Ac2WMHLrmkn3YOsb8A1jFVdJEAzJc73GvZ9FXccir6iJuiaTInm\nk53X/JjeLpgUBtjYkcSQDBoLWKZBP8fEcJ1dGtfh7Z7225doJSRfCXxQyC1M\nqDgDw3wJknkKtS557n2n2rLAZYMYDXGoi5zT0Z+TkhWZu7zxA1ceruuEEZP6\n0Zj0p1LMDlD6rLQDgnRyxE6lxBNie4aP2TokUGH7++hQWyWaBoNZouiHe7H3\nVDuz\r\n=ln9F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIP1tofv3MAsgUaHx36ibTIkF+yWQlcYCLwORxmXseagIhAPxSppjxWgoPK7abYG6EIDFjHhqC5w6KtniSh2N3Uu17"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.628.15425.0_1614274530966_0.4399107371990121"},"_hasShrinkwrap":false},"2.12.3-canary.475.15443.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15443.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15443.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e9367832287b3df75fc49cfbeb5765f44e7636c9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15443.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yVQt1eUvQgIJaB6VmRSJeBFmS9PBXs5tUHoXeTPjjl20i24aLYrj9e1vpVvjIaSaFVBHbjINx8DV6JNWRSCX6w==","shasum":"fc1f7ba09f44496c995cdbd2e5071bf5b997a38b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15443.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/GXCRA9TVsSAnZWagAAPA0P/i5rPrpTul/AWhG+2PTG\np6o1iaHoVT8+HA3J8wX8EHxzWVDco8W4QtN6Law3/zH24hL5mHFp039jU/rc\niJWKWLZkGSAFroQnruy+IQUsxe7N5JEERsX1m9XBlRr5NH2I/prjNdlVrtZ0\n1/ycxNKGpsllzT+702yZU0CgUWfeGGvLkGNECw6UDvYnO9UqgepRfuD6EV9g\n9SpQwq2n1oVUVHiVq2yjwzdKsS5PNN/xDJlUlI436S3fnhuj2M4fr7wG4rqh\nNxhnQ4f4q0MBe2V7cOg2gnn6mGiGz9pApoVuDN7PMhQQFm1DCwE0Xw1mLnhe\n/4OsPqx73Al62eOytTAyjVnzpyTQs5xDQIhafxcc5DuLnv4yhPFjgoS/9ikO\nE2ClCRlxJmduXq/PILbmX2olcLxdjwvc9g9bD5X28xIMEHMcRHCzD82eDt6M\nlumvip7xO+ooIhgt0m4JdsSreUwK7WtywLCiNhEapsg7R0HwP4zrCTGf59FD\nEBUx7OBn58AnznH+OX10zacRZe59rGn497AZekoJAjkjn+eL6M+o/pEcDbqB\n5c6XWIG+YkM5TXNt960kuRiB4Oi0MhXM9jsj0vdC16B8dHzwjOvZBIhIO6Ae\npKxgqzr5kX92R93GWQ0ZtmphYjkyEih2IXG+iEdqsKoB3NxWexJydbY3+r3Q\nHqpd\r\n=uE76\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECQnrjYBLC2YWL4IcHsrBJ6Enw/jLEPvAUNaYmxxUx4AiEApotergnrwd1024ZnaPzN7q2K0quq+VND5h6zg4xGJ4c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15443.0_1614279063328_0.6459018662539018"},"_hasShrinkwrap":false},"2.12.3-canary.553.15448.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.553.15448.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.553.15448.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"74e2fdf3973300f2c247dbe6a1e162fc81c9d453","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.553.15448.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BeXuFPaGGy+vLqGSwhrd5gRSdF7wuapq+5VeyhouPI/VOMXB9dtOdzlQiT7ZH7wHq9fQLodGqzarn8yjIePRxA==","shasum":"256eade2b998e80c8b8f2d0e872393d0c757a22f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.553.15448.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/MfCRA9TVsSAnZWagAAAf8P/2oJiU/LY5U7/5rvbEnF\n9pJOK2DTeSGYK2/mp2b4ht1zRpQ3HA+qgFbCY3VewbrlwTWAPCHHRBKwnUBI\nqiIm79I59HpPHIgp6fkv89SrCviwLO7bLp41pEwShIkCHuitWQ3gxNhUkl8/\nPdD/Cuer61ay/1HkMxqOTelUIchGbFDXn3d+c1O2rCi50ijLP3fgpW2tH3M4\nkcGa13568u3mx3WFuapjI7nPommOnraIHs6lHvub4IuzJgMgePblj0qhzWX8\nhsrScAKLUjDMI8/zD/+TsYs8pnKuX5AJR8QBvBzcaAKPBW0TMEsPuTPtv4fm\nlIimcFpvjOGJ3pCYDJyHmCxxDeHKW0IuRd0/E+1vC4vPAESMijpEnS4G1nt8\nBQGCdGPX8f5pT/0imEFgQx8Gbwj/K9muM4Q2DC6MNw54hlQL1w2TajtGKsdc\nxaX8qf66+ei4ORxzI+vJ71IeR5O3UOTDAP7KsTYk5PZOBwsZWfdncQOMytjD\nBsOB7SLh3CbYtb1m1qTGIZJ6rmirrl1mzPD6CL7Ostnejcu3DO1Zb0NFzN+w\nPHMoM/plpsQfYcvXZfO+2RuBZntFSJ5xT4F/Raasnf+UQRwujjz9mDirAu7z\n/e8yyerhIuUuF5nu456jz2twJxiTM17900JguvSUlnpUa1TNSlyGrEqNuACO\ndoZG\r\n=7stU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHYDNYUBrH9pO9f3Af72jfNbunVtmeqpfH1fU2MWu+DoAiEAgjFhz1pVdKCLq6ZT8kMiV+JYE040/Ts5CSjuwAN0l/M="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.553.15448.0_1614279455135_0.8326457344504135"},"_hasShrinkwrap":false},"2.12.3-canary.628.15452.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.628.15452.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.628.15452.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5f38e2734dd38ddbb4144fa06651c7582bd93042","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.628.15452.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-jPdXRVTFKx9ReKIZXLHVZTyTje62w3gsedaRlxXDu42fqVLFjkAnpa0J0hkRMbTdlCAZCD5AvC/5C03+7xjmZg==","shasum":"26a6c5e574f737776b5cf4fdf47347269d01fdd7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.628.15452.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/RfCRA9TVsSAnZWagAAaZUQAJaYLE+wmZlPqNp5dkpR\nd6G+Zaw8Hc8Uz5h87VvULHp4gMJgPYDb3h9SuYvvfUEmlLCx5ZTlIMCZta7/\nEkS+05qrEcVEiVMPpcB5C+a++FaYIY0j2U8k4nIPDUG+1qin6d32zTJgNjHS\na5ahgZnnHdN9FBNbpXc/ZIo+xTaXtqzvF3g8dC4dKJv4NnPjLq5as7xjBuu0\nRh4BD5jIwsY3+6o/c3eMxjQodA044sJak7BNuDiNhtaFSl8Tak5WdLAbZaHE\nE3rbFhvWumMn2QmZBPU4oTVM1m7OIgAIXWF4VTceXpWQ8ORsPp0zaQxVf72H\nqTzIzN665jDotgJvx0vmhSX25R+09Dvhy8PSKFImUPbSm2MEogQ/CgxHZVDt\nX9AxRyFzdRulAtYIWQmSUz7NPDgpOrfXCjdHBNVglZM3RlCT0K3JSm8p/jFB\nvvIhjzForylicXajwKC8CtaSqFMqe59f+LFWq+31Vbs8NYonJHflhnvw8lv1\nWh+x6YFJpmtyg4vDcsdM7JIHnI6tsLiPKOam9X3+7CMEE1M7O4ibM+8b2kux\nO+QrgJEkYJT0uGyFACwnuuGcFxltWmzZeZ6ktrhUbiVsJLBIeilcv0Oeb+/d\nRxc/br4/lWfEfTzGRN1MryLc9wb23l09ObiishCNKySglfZpy1jEyknJEDWC\nPONZ\r\n=siY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5P07dz9YzZ6tSAiTVQHgX3vgHbeQoCaK1XNYQQmlI4AiA3p8doLlHcsRa9/24nK3ECUjLUYrAlWN7fv0SZMcXCjA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.628.15452.0_1614279774555_0.3178791162005761"},"_hasShrinkwrap":false},"2.12.3-canary.475.15459.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15459.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15459.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"34389f3e78670b99f86c3c754d8023d6d87eeda1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15459.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Rp4OCDa2ygYzVCiOTAOQEcO0pzCFxzQqA90DSKlaR8T6Nfj5/WBnN7cF1T0GFMgYmt/eRP3ZLd0QMHkXbP2fyQ==","shasum":"7530f0730627efe26839bbf347dd393e2eea0bca","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15459.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOA+5CRA9TVsSAnZWagAA8KgP/Axw9ThZknrzhuUMpp/v\n0E6HzgU01h/6wAoI/VHugiWQfbTttAYYewWSNHq4UpSwjPTk3RxZ3zwOW93K\nSo40/379zucuHJaVBEBM3fPs5gz+mhVAa7Wh/bEeeHta63bE3YoD1Y7Uj/kE\nPB7LRVcKw8jrkBdky756D38I3RJlJ9brNRhqVdFdcHnathHoz+HRB3Ix1CgU\nbBQNiZsUtimCfrYbQ0KUHO19RH9tKYaZdxOVoOypAcOOxFDdXwITEDGZ9yas\nwzRE2HEpHnLxCW7u63ua5HlBVZ7zcIR+BctiLJG8eMfISbsY8RvCxtGNBXuJ\nuSgR2c3lI6ZVwuhm+Hk7omHOkGSqMiJZR6DQKPCQe/uT4yNlTIxqOs/rH/VR\n0viMRQzjHjtJA7NecI2TC+1ZwjXVpFNhCNR+Nzs8SBdNlhaAWzx4WXaZrePe\n0Ocn91yT3v+XoturHxtTqeawDkNDQQvZouaSRl1z9BifJ4BUmuVl4rq7fCjv\nNztTgnSdiIvxGYRjp4US+8WRotExyCUqag8f7wBAHc01qsXiXA4YslhRPSbV\nrjN7iHCYq3KZiDoMJr1dwETEIw6DjCjs51wc/ERMpz30xLBrCP2edBT7S8yJ\nHkay/3rPDnJINc6ZmlEJrsdxqVK6oTq2Kdy2RmqCjOqf2AE8yn8Ixsx1BvWg\nGe7v\r\n=862R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCDyp6PXOd1VAut0/muffWOMQVpnsAt6fJihTco7CrnQIgcqH2/UiGkKHyADENuGsT3mUMWDo5SHFMen5qNu0Ofw0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15459.0_1614286776952_0.47828182860260027"},"_hasShrinkwrap":false},"2.12.3-canary.630.15470.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.630.15470.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.630.15470.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"21aa792873e09c207f34481fead6985760450c91","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.630.15470.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-D0VLPOWkQ1TY8Cj9jffFP22oaReAFCkrmdTvFj+NUjYFNxlA3Hilg40AZX6gQGLNFrnUiUlyaDf5SYUtZyqS8A==","shasum":"955d06790169e0844d35ec5b16f8c4e24cc3231b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.630.15470.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOEGMCRA9TVsSAnZWagAA9VkP/0O5fdPBLr9QpE1YjJLs\nWO57RpteIW8aXcDN+B7iGOdNaqgOOhOTWPirLL5HC4JZb4RrjirXaGNisdXy\naXYEB/3v1tLXYGL4LMdhtcHFEXyQVbWLm6XSIhNEO1s1Wn446Um8q90x29jW\nOq+JWOuxHW9sCVEhnGXjmAsqwERoeM/80nh9nmtJ2nOjijRcwiYCQfmTwsHt\nRUMHXj8Zt/OQvKgchCnPAoBc54AnF302Mol0VYy9ytT7PYTUC8+xtCjVsEc2\nr5I+0BAZEDQqt1llXPjvqLV5IeDMK/rAkmdmK3cP+9tuhoA70ChYKqZ/aCfS\n9I9A5FCY2EXKGBbQdlCo6tpDtzqnCcK9R/jziKtES9NSi+pfvtkXJoJPUE3l\n+cryvxOlfOQ/BZ2LFPtO1pOs3wNTr+FSnlWreKmfHGcn0Idz5/gyfjGY9fpN\nKc5AlgyeGPxYDGeY/UI5WPraAtfQ5L9QC13s7YyzgSJf+rlqHMyXucBL/SCs\n1+82G8nDp0/ewEFPKDBnDGidnovh6L8rHqj3FxPMEgpH20X06xOs1Kyss+xl\nKUBWZtUb1L36LKciCcA78So1E3P0e50MISO/COYgiKc9k4DuW01O4OrbE/hA\n3ExzVJXGR66PHCxSVrwK17A39PBZqj/XHFjtroPNJlDyyaMSbIpjZ7GKGgIS\n3Pa6\r\n=1xit\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHx/v+Y1DNjGfWoTmCd6xa1cWjdoij9PmrnreWnaf7yAIgZXgTnCwppwrJINjdDI/IwDtnbv/wkMAoeVHPrPUZeuw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.630.15470.0_1614299531620_0.8466581377680407"},"_hasShrinkwrap":false},"2.12.3-canary.475.15471.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15471.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15471.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ebd9b28fd8324fb7dbb89866011c963901a2cc6a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15471.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-R6qTyRZ/BEUluG5r6bC4K79VzhN/xWRlVHjJn/6js8UEwz3iMv1uuGiffngd0KgUYYvJddOW1xGHla8MN50FBg==","shasum":"40906b73de93d51683d7c8a7cf1305768cb38a34","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15471.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOEIKCRA9TVsSAnZWagAAgZ0P/0Tt9OAPivQcJHC9dHpS\nqGNIrelmZSF2zaL5CDUWjZ0HbF/fzQT80OigyVof52YNCp/TFSyQdJxZ9EW+\nnNCXsPHGNgrPvCGadMn8iHYkuRBkjgSCt6DIY30KSUWzIOM2iLoAz/nojLAp\nXz0YLvjyssT8oQBjVQYDJTqqsZ+yEY3udb3WNuv5/B3Akr+Rl9DF7QH635NY\nkFnYVKmwitkrFoteCV8aUgbN4KUwiGtSHKB6wxvR9dMubuYIyrjeRth1VC0b\neiaJVEfhTgtnzGVjdoNcu+fi4Mp8EGz/EB5CHNqySYf7anx7eRC611o1kvGB\nf7Pp5/6RZpwR+NdxZfpIyMaE1YlVjJTGuu4l1cjpb4FplLVxE6RtQCL6jLmE\ngJEm33FKyhhq3ThcUcRIxhEH7A7xS34CzeZSQFQl+ZdzvAliTtPwKk3WUKQW\nwLqCre+1ROD6v5NrD3Bd3/DeJU8YsAM/FJroWcOVVy01r18M12zjW0qVNc+s\n7jZPNTbSSN4P2y5se3FlF5VLbCUWB9i4TGphi5V2LucqxFkShIYaR94NerDe\nDYg8EntXAYthN3bgD01VZ4G2TKXFLvza/5n7LdzSvosBTqRvmIZl1qYUBvh+\nu9SwFP2iiUVSuPoVLTQETRGdN+f42bjCEfA7GGDxXJIoHxWJ2lRYCX9pwa+C\nESg+\r\n=Uv0a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEea6vXvP0lO1zXRK1Ah20o9nDhst/ibnp2t1qJqMwOgAiAYOnByJZ77wobcHsP5i/MFPU05LmPHqWwBH4ORDZ/dBw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15471.0_1614299658240_0.9552074093413723"},"_hasShrinkwrap":false},"2.12.3-canary.475.15477.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15477.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15477.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4d348761a1ff055326954b9d317cc020b8c5adf5","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15477.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-icBKIqIG6nGtx/pRED9sa+dCNpukCMRxW8XX72Jf0W6C5L444nLTSGe1Yp0VC/p89uJLXXXVRVDXnk8pEwvT8w==","shasum":"b1ae275f37f8a01b7891ae988c978c95b79c0730","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15477.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOHmkCRA9TVsSAnZWagAA36oP/Rx4LZ+yXfa+rovrQum3\nKaElo8ReFXxJxivhuUKm1/36TDielSGApB8OcU7Mv7Uqu75wroE0mP1L2mpe\nl1Pn+4Gv+cB9W65gduOtOnuj7xeShQFgmZMB6BN8vZAeVnkjRPR6j9v4oagQ\nwm0nOdmAKtLgl7KjhGymewXKOdSh0clQbj2nWJlfamdIruxBb2fDj+SkO+LM\njnzIQ9ceNdZ4HbuHWhyO+v8763SFvy0NGKA1vxRBRo+rEdYpHBmfvjQ7n1QE\nrGczvtoDy9Vj7jFLwohx/Ga1eF2z/4CmPdgmN1YdyMG7qb0hake9B6Kfzmbm\nbO+nnu/nU+1WFZuPMixEjqr0GVstokvcB4svE9RlgXvN3EO0b4tmBR86aTDQ\naeldguXpmTo1b8hgJE0TBbuQJrwakSNZZSIWEquzZTIS1kkAUQDVmpiB1WkS\nud1QC03pW/aN5IBQpLTQZWsB1aZ7+5vYcoXXKVPfbQjsE0/3tpcRXSf43v1S\nvcKa/DAPkD6ic0HJhTaxa3vcxmrHAoHTzm0HIWOZyH263ltCE8S9NaYqYbrh\nL1O5FKeNm0NV0nl+/PqROo94hNuiUIIQ0a9hLnMe4HhhV9iL9OZDyd3mz/m+\nZvIAfY7x3j8kToqx8R4cvzWjhyC2/E1Jph+WXHlGY9UX2Qa6pIfTI7O+w8Us\nsWzZ\r\n=WPVt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/7zfvSHobFOBXlInDAzh2h8BFFLVx94Z0Sk1GjKeJ7AIgIqNbBMBbg9VLkFRb3srj31MQwUVKns2NXGqC5YGtYxY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15477.0_1614313891567_0.1655765018374662"},"_hasShrinkwrap":false},"2.12.3-canary.475.15490.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15490.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15490.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"37dc21b60416079e7943411b0de6d4cf8c7c8325","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15490.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Kd/12V5gUfN/fVIxzbBoVP9KUvYBTBJVNBeF4ujUSN/oS/msmpoVp+ie96juhGIwwFC/aUHEI/hPNYBLUE/CWQ==","shasum":"36472cf14a0984fc45230f18896d64a4ea752723","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15490.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgObh2CRA9TVsSAnZWagAAv7cP/2KTlL8fWZc5RZgsPSMz\ntRhu/dR9SkpiVo0qA6w5SxS2NaclT79RGeN0Bi/ZmETDMC3w29HdjYtB5JLQ\n2wlp+wo+JkzpmroGyBGqw1TtpNUBRc1c6gSEZx0MKgPrtiEV4MZ0Ve/cm+Rc\ne4TiXau/owfwpHzCBxyo0cji7cVDQ+9v6oJMTuhzZGw3nLDTnznAnbjhVqU0\nssdDNlvk03c6UWQ26sxmRAWseJ32DZuzD557xywJyoI4mKzv4zBNWXJzr6m7\n8lUyjb65NpDmqIA4t+hDVmIpO6OoXqv1D1aFINUM5HvM1Z9XGlO0GS4uLnve\nWaYyHK7S9ZCMJtF04tKYGQwbZXfJem5JEcDGzSmGSGVWfr9Ewk8AKAXLeA/L\noDwQ5Qgbl3/1Uul2d0HBAHiyTET3dqOq177hTEsI/FSkKI0nY/hYIQufTnd/\nDu4n8rotoQh3xQffpbscVudGZrZW7bttBTSOzOwfa0vIwlquxZFEuk+vD81k\nEyb/Sjx8MOiTeTuG2BYynsriwZIkNHfnvt4YvqVqh9PdnolW/Tf8h6c0WeT9\npb/Ni0jTLIUWx3KstlQMSYORDIWDHuP9fjfK1c2cDiZo4N321ZTODrvB9fxA\nlXBQjgAHCFi5kBfF9LyRgZDuWq8WjFj+MXvxCPJEnTxiIPN2vzPRWDFmrHnQ\nbOpn\r\n=vn81\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlOQj+1j+TfML1lCUJHp9H6J0HLHgm/oc1pDazUXq8zgIgXXxY0tpMnPaad48X7maLy7XUzGpLiu6CM036kCQ/S0E="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15490.0_1614395509777_0.15114138713172265"},"_hasShrinkwrap":false},"2.12.3-canary.617.15496.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.617.15496.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.617.15496.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"87981c4d10c3bedb0ce32dc21cfd7684bfaf0a34","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.617.15496.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WNwXZAXvLN2tMR7KtoDUbqMkbmwhHaqbE4R8i6PnkdRYJyOT5WUpXugehSaaiLQDXaZXAg1JIRqvrXPBa78I0w==","shasum":"e3282e06a66cab5055c6792ec962b8997e917a55","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.617.15496.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOgzICRA9TVsSAnZWagAA/zUP/jRbArvAiF/jkMfHU8Ic\nqMIr+++e17XKUp4Fnqgr6qDpNy9VBcw3tNAQLR9xJGW4mEm/EW/2v47wDznO\nqZCUYk+eGSmQKvUTpU0XgThDxuPb7euZwKMI6qMmJZm3uCUV/PK4LwLoU/Gx\neGd4WJxsioyBZZaW1S/ppzQgJCtpksBtoF0SCryiTlvlH63M4/1XV27muI8r\nGFvf+h/hgArON5LDhcxHSH5B/dV7zr/xxg9dRkUsOJVLG2Hc5kwx+vAqK4y1\nJA2yKfaEZVFBkeizh/Bov8v39T2uGXbp37Z8YQTowADrcANyF9H77tWgE3DC\nL8Zmmd7teBzDz9a1iHjRnbNIbBfaHtudkkDd0Kez06m78/C0wEskw6bFtZrC\nJB2Oa/JCiSpEWJXsyEQ4ITqh2fz5AxDinr+bngEXaAVeX5lgKAQ9BnBthuxb\nAj0FJiZTBz6tJes7aJSpkL4BPG0IMibDSHHX3Geq+jlittr07cqZ/ZOUm42l\nsJMH2vcQwNd21fto0EyEYXmLKOrpccydK4siXUXmjZtuRS+WtV80Yi0cWV9E\n1Wct1JDXl1WdT4voZBA+0QmN/6clf1W2O4DBOLjGGvA4NXIv2cM8uL8Dp3xQ\nEz4g9doZkd0MJ5DpPghRGHFFoX0Crn9kjNMW25saP+KlSQBzr3pd/NKQZSGe\nq4Jj\r\n=GT82\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPTKf/956zC41izsNFm4OGYBqUwCRW+p8yrI1YzgJoIAIhAJM+BtuZkEDjUaln5mf9WS4eJCyBLDvE8fUr2Pgtjeso"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.617.15496.0_1614417096111_0.7738190115016697"},"_hasShrinkwrap":false},"2.12.3-canary.587.15507.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.587.15507.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.587.15507.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b0231dcbf5e8e8c5c44c2530fd15674bc4babb3c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.587.15507.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gbkLSVE+0sr5JkyCK5+I2UhbzckTyWw74oeBf8FAwzsIZ862qVJ/hFDUlsTzKnR8KDbtajY6ikiFJIyTjUpqWA==","shasum":"f6c14197e18862f60641086b9aa61badae21730c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.587.15507.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgO+dbCRA9TVsSAnZWagAAM0oQAJ+1PJHy7zpXYHhy9Wg5\nOGDOtUugaJGPsp/Kzhxibu+DxjYF5gtpljv5C0H2ohfIepb4yGPD79XVOEGX\nXRQqgQ1ntIgw1sE63XPX7oYrFzCQfYNTvIwnbcB7GS+LdUFBewlwYYRBzb/J\nFxQb045MvoLEWLqeC1vGQ++0ZJMpyPqZMoSH1v8a0tqgvB/+g47Q71iW0W8l\nt2pnHDph4HyR6I4MSyQzCBuPLJB9PpQ2Rygtz+lCEnugQKKsfz0hmGxPRlre\nmjCkMiz1mfGj4cfMAfaoOhBHJNf9IVtvf67WgP2Tggl9ebDbeTq506u85hQ1\n+1p6jNV5fOldnWY5hCyFVy5o6XxREeb2KSpHfUyZkJisAQU22KRK2BkdQNiF\n1IGiUWZ4NRP7iDu3m1WrY27jhlsqRQgYjyTT27rfIyNVgLXSdiYSrpJvi8F4\nMC6IZSCf5OWZ3IL5H3SqAmA3AW9IPmRxCitBq4IyE7cSttkFFV5q62hVZss0\nCd+xI/ZEXi+pP03MFvlfF5j5Fb1BJMuPY/Q4HsEhumdaK/umZH4oUYoysWp7\n7lenWlRu0XSgEwwtpGVBzTC8qdfezZwO9yVp/mKea6PQ8R/CBnDMji1ZYAmL\nmsQDW5KQSCQufIbsOalTif7rU3EzyRhC7VGFIckjOCXu95WGrIJQ2/Ylllxj\npOxk\r\n=pUJ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb6RFvXvNJEABlzBNb7ytA4rFp32Sf9vMWtORR3ATXigIhAO/B1lRIUs9fbWmOrSHEAVcmNhv9kvuIL2F0HZHdtMBc"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.587.15507.0_1614538586918_0.5955713872929467"},"_hasShrinkwrap":false},"2.12.3-canary.618.15513.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.618.15513.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.618.15513.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d400f39bc799ebbf2d04f8b40ea87ddd19dc0bc8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.618.15513.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pp57P4LX+wc/yD9TQwgg7jLX4d6JQk1dZIkmYAqdOnlr5rbY8UM4tmQfNZF6NqeLR6wVt347uvUns4LPJxha4A==","shasum":"f51f5cc010fdad22a673b4f3adc1954da68a5af8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.618.15513.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPF1mCRA9TVsSAnZWagAAgf8P/R0NJjTJjtn2KF/hgGYU\nZbEyZCqORGq72zKdXjBcVZP3fF6JfhqTKfwpeKz7dvwmmqaAr3oCFenTxTKh\nPbkIpjtgxQ8phgbNA2yRSUyMrSUl/ayxlqPFJFkBc698dXKBhwkth8wJjIN5\nEGFJigvd2fh2DUBoPdkLB6BozPHI9uU1jAMaLdKcIbbDZy2yvERVTRzfbeyt\nPJP3AcYckZwd+pP+nKQOpMMGjrhXqZFEgVUilVcGtIIbI30HJzULJg/7H3kZ\n8KXxxONQh9HPOs/miAM0YeePK2RWFqVAIuftZcjPpa647mQfec+Si7o1a8zd\neLOPtl8XkmAB8CF+N6g1ItrPlxA8jcd2mhc0wgcf9959o7nosNeugwlT9CnL\ngqooTAGoTWxWO+VHhVkdwZBDOvfTZssBbsHfN1x15vAlFQnpQcX6xTBW9mMn\n5dhg+cio6P2sqAwbnSOhGTMi0Nk47yTyZnnCZYi98XNaCT1nSoiTyjv8+drE\n4tvTVgnnEkF1+eQhsUqEY3VWg9uYvh2MLCvPHVXSUpN6AMIFi4GmoySewF9M\n9UI4FiTryqMhdjIHxm+G8LFBZI39LBEnBkSRtk2Ku/y1SXG9GeRWTKmgTV+j\nHoI4j9XsuU4x8MqJLGuRp6RMOvrOXGyYO8i0dBtqosoDh5ptUgfpjx8oqj81\nFcpN\r\n=MZ2U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAW+qLSt4YR/nLXzchUYr09Nz9ACgP/h4sDLd2+pG+/KAiA3sOhHLDvb9RUcltHVsNOnsRLiN3AHDdxCGK+Gndvb5g=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.618.15513.0_1614568806027_0.0426689676180283"},"_hasShrinkwrap":false},"2.12.3-canary.566.15521.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.566.15521.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.566.15521.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ecdfa29700ae860767421900526b830a955a5603","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.566.15521.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MDzFWAweF839nZbe8NC3xYF5fqgN0MCL5DYDvcaWQdLzEByeHKTTpgvwC0RbCNJtukQi7SgVlli5PVf0IrN1EQ==","shasum":"3bd219df4695676638ef4f58fcb28992b56d2ddf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.566.15521.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPP0iCRA9TVsSAnZWagAA8hUP/3IYiJw7OA5DZsWOY0h2\nQ7MqKllaZHNdz/G4GpLTQ4RzTr0wsPTHtJYvRvTSA5Ow2juBfLbrNIAartlr\n2LjNDJW3iyY2bLXQAw6lQ0+nJvKwPkimaSCEYcGzXtqR74IL7Nyza4AYlDX9\nuPLj5C87puyGWYssPVmfL9KhQftOiFL0NtBuZ75uj8MQnHUOJQ9zpCPNlEAG\n24mg1LaSBivdJrgRQUn8A9Wq4XbU0YF4/37+PF1lX8/WUtoh0SBVYs8qYu0V\nbiUlN0/4peST15ZqpKBSoOS6kTSFzslUA8PFdUJxachLjt0TvaXqVkU9SUyN\n8jJXG1a521479n1JcKW1ZJweeJ3wOWSeNd/y3WXgldrEMwuU8r926fU/uC3i\niExeUJ9Ax3DWO+Ui8QvQKJPv6RV6xFPWRSczSdXZegNIga5RlfDyjxo00tsp\nGUbHJ9drWFlXAJyss+GskcdXlGCtmFaBx9R0HoBVSverq+jJndLR8eFRnx9a\n0Q2gJUVhBT/rNtoL7J/ALUPYwzAPAS9lW2OQheRsrHuODisc8pr4fmUeRp1c\ndwsmPggjS+v+yHT3TKZ2/2IC4nCo43qNvu2zY/baSgaU5x8pe8DzsBTQZJDY\nbWLx6msJWTGSowFdvp3BTkVFaGmqu4kHFlVIpiS/o2kuwlOrxwh52e/lBqQY\nEso9\r\n=FXqu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWvu5dXtDO5ycgf12k6o5q8fwAYn3rUdWTYwNrDafrfgIgQhAwEt5DdNO1YNRWogjdlwZpdDTYj1hRF9dRXHQ2Bjc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.566.15521.0_1614609697866_0.627226425117229"},"_hasShrinkwrap":false},"2.12.3-canary.475.15534.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15534.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15534.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3a4f3161f282a11ab151c9c669a1c03d9f062a3b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15534.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-r75T3r2OGJf/pdO6Bfi2tiLTlVfrwEk9EzcX/V+bTvi8Esaoo/IxMr8jPBteAVSVhLaCBPpvbSvaQc0sXT5p5Q==","shasum":"6e3059458a69930fe5e5878e6264b0b213100ac5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15534.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPUxfCRA9TVsSAnZWagAAC9IP+gK0CMcBubmmGwMI2Sj8\ndHxvzOApvbQcdoPxoMqTGAh58PlY8MQCKIS2xEx2Lfa9xLXtWCjkun+1ga7t\nbL9PhSUyv4bThkrQtid0U9DmFnXZZm9YCFUb5R6RQx/843P36dRYat9Nvb/4\nPIsxkPZ+l7IXsW7DtKWZRpIok1e5n98YgR8MGB/RBZrrbt3VqTBYcoxbC51e\n+VhNXcKUxej31GHz3ZAFM1E+z/zK+4Q5L0DDXEFLSxWrK6gMptfgEVexwoQP\nsnABcdr45JSmntA3nAgjEoOIBw/snX7GEXEDOGjKIGD+pZ204+1sJx65wkPk\nGYUrWI8fS0W47LTR33PC9Pd6mq/XD7sNSDxCSqPGRfz0pY+k6Xkkvy/kikn0\nGTpcQBRSZqtM9Ul2JPgwAEd5ael+ymMIJuQ9pELQEJJH7a8yUZu+Ji8hckuF\n8C1UcJI1OUHqYCeySDBHavWyt9L0Af7ELCLYWrP1zaAHr3gLGrjxJ4lj2zZC\nulwDGNks34l8brSRpm+eYnXKaeUfssTSaLTLDg2MDaeGRfKA0BAkqUkRjwsJ\nDv++ODX1xsI0ZkgmRY6U4uzR3EJYB8+NqANv2oAJRey4jPqvriDFLsduWCKX\nFkmMrY7f5fZt6BfLE5g4eYfd98swwNcmum7UNRiORkMsRduQ1S9MZBA5zmlb\ngKCm\r\n=6C4Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+pbifqPfpri2S0HRTaDXlxitsps6Ei3xxkZ48Tke9RAiAgpJHi8xtuxV0gETq8sY9ctHZQEApA9gEi0IJdyZNGtQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15534.0_1614629982616_0.358351820458805"},"_hasShrinkwrap":false},"2.12.3-canary.621.15547.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.621.15547.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"2.2.0"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.621.15547.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"be94c5f12c38a72542c579c2308cf9e77390b546","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.621.15547.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-89+FzbBe4viS4yHl79mpcSOikWnRQMrm2T4EBJiIGlmuvEv+NbOMKGBs4yMJVmUUb3v7Pl86f9XMqtvtmlfZ3w==","shasum":"d005bc4d61fe7cc226fd6733397c95d6654dbe04","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.621.15547.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPXJ3CRA9TVsSAnZWagAAD+4P/iJgyHpfXR88zh3dkBB7\niEJnSRmHobQrpWlph/DDrDgShUGODdu2MB5AJt0rOY2SLzNRJ863bEeye8fH\nHfgSvDV+8gbVRhOXYF8+Osbnwn5fK4aKJ5OpvQC9cFwbn+K85pfFr8fKS6rS\nWII29rc5BdIiJM6SJKs6BW4QQfPQBaIu4xcfUSqJkf/9kfVyP1/w3gtCD/FU\nLZAgCu5um0JA352+5oqJwHqC3fOSRqRP7ZGNIXXbXu/ljM2PoEhHBZ8UVdun\nOFuCZMUQReLz3G7xrICiPDUYRHvlplWX77jNfLomxedwnbx49RB/F1JI6lwg\n0aI9G4PD8es4ZPtcOFHa3rdafYI7TgTslxmCcgyNVTzxwapawldwIHxg5tiB\nG+FLqlImzi6Cwj1wgNOmkqQnKzj2dJA64zUDrO8O3HhdqMbZoU3nuxL+GTlR\nReo+35Hqjkp3Pk8tC6fEjGlgR726if/pRyP2y205MKBddt4ohzkh6taaF5ed\nDN8Ttb9CWz91LxnUe3KHkyugN5clDqbFPLkhfSH8XIPhsnU1Nm/qUcZbComp\nQax/1stfza5mrVjfrmnPM9goJtXuF/lSu37DDhG6PPoLNl09O/nl9uHHHmLu\n0DK6zHVxo8TnWjCO4ugHteRS4FFnza9WImY79CbDAEgq2o3NjMLcvuoLnNZJ\nadPB\r\n=1912\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhBJeo0Hl+QaquZBnkzstST6kZX9Jlau9oeBStJBhSbQIgJ+tFsTy4/ziIkFn+ELZ9Ra3X7i1gDykKOpkYbpmn7nE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.621.15547.0_1614639735390_0.2331453399067691"},"_hasShrinkwrap":false},"2.12.3-canary.618.15553.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.618.15553.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.618.15553.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1d7d182bce81657d5910fddf192e676e581c38a8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.618.15553.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cwA/uPKlPNZ79kuiRwBKLTf1fFmHBcacN+Uk/psE8HuLa+3kXSCJftK2skour1Ms0Hp94XXE3j90anD/cfC6Ug==","shasum":"1ec493fa7b32e9191c517be9ab1a7243f012cd98","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.618.15553.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPbz0CRA9TVsSAnZWagAAoPMQAJbELoKShZEZODESHIVY\nbPm1u3bBJixv3BDMAbM69UzwAuFT/jXjV81Liuq5O9D7Kfi+hYb6sx23PvSP\nIHpbQ3zJzYFfEQeI+snZzxirKLAQvTAijdHRiRrcPOeqZeAJhBplphQwTDMs\nfca3BaBjSALFffn2juXcZCqUvytCKUCs9fWJfijzJnQd7Qj1TY0QjbaHgceQ\n0mxTxIduxGgr+GAesd/7G2EXNm5sr1o4IzKvni2GybhhBKj8Z5wgmotXbhpe\nUj1DiNmr1bPzlBUOvxRCOWHIVWDQbp65kxxv0/+BvN6jGitpYKk631Th0pI6\nRCINf8fE9HF74Hjs5wsBzhV+mWGuJw7+R7wp7XbFAIfQ3z7v16pqOYFJWUY3\nS/kNFgixL402zybHmON+6KFPB4TZ72+lqTeRgROiAcBdl49uB0ffKi8r9jyE\n/wXwVXDFn2wXVmcRJaNOyCvAsVgaq3Nc0q86k1ItfiLCLFLGSyRUxsJg8RIt\na10stMdXyGUwzcskeClYO9gtr2JriwyEJk0yH9Hx5HysRNCX2gRIwoDiPVR0\nBHS7n4BFc55jxv360awJviYrEqd8+zYfshjqksnj1jTOuWIPh2uX2CkL3Rri\nF2Hu3IDYBWyhzZgTwtwV2YNEv1qf5E/nqmegIVHOK6Wa4ANC9qF8GrHmc2kz\nu/30\r\n=qvZb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLFAOsM0nfKbGTE/3zdhxdr0mMCybkz7cRzed2PnkrOQIhAP45vtENkHGJ8dcKniyqHdGWw13DtxfOMPYaF1CIp6un"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.618.15553.0_1614658803561_0.9710513117646897"},"_hasShrinkwrap":false},"2.12.3-canary.484.15564.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15564.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.17.0","@auto-it/slack":"10.17.0","@design-systems/cli":"2.12.3-canary.484.15564.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"43fc1e06d41bfc30f06b647dd33e4cd0547128d8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15564.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ck5A6LjRe47dO49xEnxeHjNgjsaSDsd7g7Zu+GXo6FQoB4Wwh/Xmv04PqfExzQ5nt1rr+s71wKfqRnD3YaMh5w==","shasum":"7ca92fd10c5317b124eb6ee7e4649796d1d9c200","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15564.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPp0zCRA9TVsSAnZWagAAPlgQAJ9lgm/1bVRky8fg9kCL\n4bD1aQZ3SNbuKcd4sqMpmqoQy+eN2wU+ftvzpCzrjhjfM38gnBZHcbuF526P\n3ztAe+xMJABadjo5j9+yGf0mHkB+RggSRtBaMxyOOZ9yN+71zLZV+fK/Cl9w\n4A340olw2ZWrU6UBelUjgZqIGB3zNKd2Cv/tHcM9jdu91dR2oZHm0Ii/ZExA\nifNi8TweUuHgVZX2HOkASiyQcKPN+sUouWxedg7yoaARWgk9al9Au+DC3jcX\nMDQFymsOAai2eDInuQ+UiusF+stUiqpXvcMXOgENHEw3RSjdgf28M2hB6UrE\n9whBH9W7GLTcfn5bWZUV6JmVBrhst+BK6pfBI0acGyVLvesGSZLamV6U9fXI\nZKnsVz3c7E0dYAShk0dMgc+n2nmgykJgFZRgBRtFrzf6sTRR0Kvy0CInGGUG\nusqd+39wIgVibTr+bNcEuiL32pQPT8KEKjHp5pOq+53RpyhTW85dTDz7N8uJ\nKmg3gLX9Z15mGM70E1qNHeyZq3hEp+Xo6qDEnJjNiQkQbevygOwZr/b3LvHW\nBcqFaXQqFmUsjmvsvt5/RrEzGmv+IkbKuuSehY50Nh00Owu3KYAUfWmRqBbQ\ndxM2603s4PxHsAGcuD3bVZkSh2eNOqN9C3gcLIryi9lx6U1KzoABZHwC6gSr\n+aHv\r\n=ysNc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxQQ4+MZktrShQqV4Cl61ZXnx5+iHaOA7XIdjxxN+FgQIgOsvo6dW5Q90yNTrRpnrCNw643WTSEWPPhmW9PHXE5sM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15564.0_1614716211078_0.6395498197323477"},"_hasShrinkwrap":false},"2.12.3-canary.631.15565.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.631.15565.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.631.15565.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"66b3cf5c87c958f079a2aee68d953936ac2a11f2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.631.15565.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3yz0X3Wm8sMvEL7wL6MepeIazPPspCIOEbSzpwsHfo98LTWVEup0jbQie7ksbGYn86Vx/V1LZLo/htrad1neaQ==","shasum":"71b3e66c0e488c8a3bfb942b05961625f24c4b56","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.631.15565.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPp7yCRA9TVsSAnZWagAAZ4YP+QG5QaDMqhzIJ4+ptNIE\naqFr4VaAEpn6Ex/5OCv61LrNvy76fUzDEz+wOkLo/bZZU3q2LGEGgOg4f9EM\nfXvenj1yQDum6cVRO5U5hO2BSA3juyTF5Ggm1Gb8fPnAYBU5VX9jRHWAH4H1\nlpRFvQEk4E4/zMwfniYPLXG8bRnqtcGeTUdCa3ikXdyL0humg5moBLZhfCKl\n7Ro9tczXe1IkcAU4Y6pbd7luuNuabvMppTsEQZGkY7vlCBuXeOxBFSiMA3dt\nYau6Y0pHFbHxUOO8PNKvA7YkhdgsjzNH0RuqTQ+UH6sI0ET7mFIJfsRtMZm+\n4+W5C8UH/4Ca4b92aSh+yU70BjJiONqfhdiTwDxfnKtsM1PPfbSJ7+wUu2ae\nCQWAFydnXO03tt2pTv4jWFSljTtD+6tYCE7jSK4LsAg98FkaSduuIgfGNY/2\nFmPVZIpY+HI4QZ8ayEa3v+5t7NIUYRCI4iHtGJ60Ro0ySWIi9Z4miKY5fHlZ\nryl0XgWPGAEOLiqj7OJT9IdcMGsoFAEFSyUPP0vxcdpXic5929/JbFSu8wje\nqCc/X1LQvB6L5TWWq/sEbEflzkEAnrN29STviiQzvn7G1ezGm0td8scAr9On\nPAhUrzVQcXc8yEAmUw4rKrtST2MtvPgdaXRlRfphJk6E/XiYr+JSJJuxrBmr\nh+GA\r\n=pYr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG41DCZQpemqkOqxpkzDMkVKlfQBTbOCyY6fpByAH2N5AiBxu9D1duHn3bYBbeu+ktFZEgBSihIQTkp/TOsIe71YXA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.631.15565.0_1614716657806_0.16713567475744928"},"_hasShrinkwrap":false},"2.12.3-canary.484.15571.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15571.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.17.1","@auto-it/slack":"10.17.1","@design-systems/cli":"2.12.3-canary.484.15571.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"24cb80cc93110054b6b1a8e26211cdc79a805096","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15571.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3XZ6faJpOKHSnUvBqwL4iTuswDpwokURTswDIEPxlpn+AWaiA+z42AGIIMl5Pqb26cm7gNQHJII1byLgAoGwpA==","shasum":"02ad9309d8053ad0583cd93438ad5c91e342f1ab","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15571.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPrYyCRA9TVsSAnZWagAA8rkQAKDxp0qoFMaKYzMqXblP\nYOnv40wxpWwN3EF0CTWkegurIBB10P9VXh95WsB5NmiaTj+vKOZN3EVrGN/y\n+Zx59JtEF543qlUjtmfeMI4u4ZYvB6kzYs+bO486LDHdeVUea/MJWvw02UnC\nVoRtuya4FtLrAEnG5HqT7SAuCnwOAiiEvHMdUNMDXNd+71tYK4f6pFAWl0rY\nqvyxiGgaat5ezhjEJGnYfp7YE5qSmk5hDazvGgUQVd0oD9GaBLt5LeHtiFRB\n58uXKL6BeVMqUYkmuObdVSVw0DU6+QA5/PTV6sSOiICoPVVMeEvgqGfR2RTH\nIHqSEd7nm76KpY1ACh9o7d5lfD63XuNdD0pFwJPFqzwU/XMhSYW86ZpY7gQ/\nPsrPKnmrAZUAgoIKxpdeJUGvGVSqcHMJrzto/z0dIzVriVdN8a8L8S4h184J\nkPoV/oDtXqFOg24YqbS+Ma8mDFGwFhyGVkV/4KmpSKVmZ8s2ltGSAffOza8f\nRWVektUzAkRJC4UTTQQhXDESKeYRkHIKt+38eBtnw7a75Yt3ZVsnrhk5DFoD\nJOLfR6Eyh+/Y+rtb68XNakERkIlqEg3nqzCtFYG5cL7qjxzzZEjO0J26+1IT\nsqMC2+BrxnGR6jgQcDnZBxsCT98FAbQVkCu7dx+NqoYsQVFoybXh1fVo86Hb\nINDt\r\n=ev4G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQwtwTeDQrPq/HST2sE5Os+WwCF0neMJNqG7XpvC+1rwIhAN2g/uzyoJZrL1YJOjbxCwPln48DOGF3TWsKoOEjRNu3"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15571.0_1614722609716_0.9255414549002865"},"_hasShrinkwrap":false},"2.12.3-canary.484.15577.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15577.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.0","@auto-it/slack":"10.18.0","@design-systems/cli":"2.12.3-canary.484.15577.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"688cf42ebfc844bfd926f09b7ee7957f60084999","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15577.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MZQX7VdBwcPLIoZeh2CsoIK2MfmFBGbBL1w3CtE4uLQWuwTJU6OsiRHOQ/VtnBAh0tzIpyL51EU+2ioV+qi2Dw==","shasum":"f747e7576c6ddbc73b4994882035887003c3fc80","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15577.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPsdRCRA9TVsSAnZWagAA+AIP/Asc+7yefy3P/Maz8NVM\ngBwztdHYbDG9wag6QBK0gJk7cwoKBSl4oHl9PEGdytnOlSNCMXk3Gk88oOPC\n+K2qC0dn61HwJnWmrjztCZfUWYxKp6tec77DpzCWzomm8mAKyEMFP6YSob+b\nxvBF5hoGtYKRWTmiDimVyJPWtPJ/E+ESoeWxZ5CIPy+J6OWkMbpdWYRwKq8O\nFh96f/Ak55BQPQVUOG02Due1br3pl9yT/Oa3TelRutkWRRuxRnERxfLSpkMc\nIcIwr2ldrGST35IuWevXHfW6NepJquGZJYD+11Ye8qelEq4nrvUWlREouj50\nPRXhrwlzRoixAmsDCHBLJXlpBoyw71wXXXPdfmpSzSL4wF4cBhTk/6HvCjUq\nxBVuj/vztnIWtwrQbM+UCtzlcmga0bmn2Cw4pV/6blP0vepMzwjzN7BuGtqA\nUUbZPiADAFmyzIKe5jGoD0ASwuYz0Q4QJtAeBeNFje8ql233Um6sOcsH+DQJ\n4CL060Gv5VJqrN++Q0nl2VywoQttLOC+oTEzdvEBnlqi/G3g/JRpHc6i2ikO\njt8sVA3WvNmJwFLlQsuNKNhw0fj3EgDZlXbCaUE2UOIcFxbtLMTuj+YbQKTB\n6+mWmzWBH1t8pKBiQ2Ovv+HNT2aj2ryU+NkRF9vUIGhYsxA4WYdzYzNa7SVW\n8l7H\r\n=ULNK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvDOedS6QUZzz2iE08Yf4rt26yOQv4qEcRkP6cLKtiGAiEAwIUfIcVTshFnJ2zt7KaqxuO4CafGU20LrLEcKayEQfM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15577.0_1614726993319_0.48619747404698144"},"_hasShrinkwrap":false},"2.12.3-canary.484.15583.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15583.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.1","@auto-it/slack":"10.18.1","@design-systems/cli":"2.12.3-canary.484.15583.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a7b3d9320dd8ce8f3d2d293cae0b5a02c434f1f8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15583.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-h7ix5fx4i5FFnUZeGb/TZnCnKRPfKq7T3td6GEjvHrzG/27Hz0sWJ0B9UaR2391hWzco++XEn7Ec51lZQEPoeA==","shasum":"841bb43efae0a48278dc1a9fc6920ca816cecf4d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15583.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPvnWCRA9TVsSAnZWagAAlpEP/0hmE9HLE79GKnwm49GC\n1iTb+RDJHvSRsDyBz6gmyX6GhAIgRQ7N6deIf18ffG4S7LhXiFu9hBcVUXHO\nUK00UxjH7Zqe+5akDmxx7q8uJFfwfg1jlOz8/8gZstfRu18hJDX6W/P0zglu\n0eSwu5gv/EvkRVzcwYr2dVdWJ5QHGEZ8p5Kqeo45olUBtMyLGYIATKPvTQUU\nJE+tsj14UL2T9BxjnLNHfeygVtxMhguFm/Vlz3/65z6wXf0jJduX13J9Y+uW\n430sAkW5hlA8uXAFo+MvJeVFvOqvoU0+sSNvnLBO6auO9rhiNWZmlD+7ATT7\nHicKjM9qqmMrqkj3L4zYBiq+x9jmraZfxgOosxfKqBq/RA90YmQbheFgvm4W\ndKgz8jWDSZAmNS5c+b5aTilCbrGk46rEJ383q82cPzVAzdF00gBafHyHIdpF\nQ4SNkXSOcgXTAwRBDE/Ziy29sv0TU4f5gz8ndmkPS4RpEDtuGkQnwC66dmMb\ntWF3PtQUj0r7TLkY6zFWo8i9nn0+KLLDqqZy3phFr+0EbKvZWwQnA32Oxk/Z\nc+FVNkDTqJ2SPOLpf4zM4BcnPoyUf1yF0dMXGdWKB7P6dDvt713KmMA+cw1L\nSSr+7sAJO+JNCuBpwXwa/4twqw6mKdO5rlevIH+f+8bYiUSVfUN5IfdF2r02\nkMzs\r\n=fCwQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5h1hZeVZriUyOAtPHzsV6awpTh0NhrPF8so1d4XYC5AiBfkVZuhF/Atj/3M3Qlejz16I4Q8T7XpJNPqU5O4diDPg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15583.0_1614739926344_0.08281345191406886"},"_hasShrinkwrap":false},"2.12.3-canary.632.15589.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.632.15589.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.632.15589.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2b0c789c1a0d374228b736d3adfa0327b93d4267","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.632.15589.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/1pvg0CMyomph1mA0q0YobQRiW8c0JWdOS7pcRvJ7dsEMC5lmqcEBhUzlpdha/PwbY98cTDI5cH/OGyIvquxFA==","shasum":"22e5bfa142def09b07198d63d9bdf038abd4e45f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.632.15589.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP0rzCRA9TVsSAnZWagAA5rQP/2KlzeydlHt182vAnuVM\namjpAHW23fJGIYjww5m8B5opiLgSqmIHd9TKbI5d74sVn4ICNohBPcgm7cfK\nTZdZM7YJJ6KfMx9nWmqr9BlfnqnFY45XDw1/xhzecdgwXbDzRJUE3qiU0XqS\nm3czspVgsyZnGiI6K9I5boR1yyfrL/VWf1/F6uTDuqgJ8lRXYddv0I3+U9Nl\nP6i7fcxrrnTqt4RDy0q9EpcjAcxXZFLk7W2GfWJCWYeb5gShJTrrUPXnFzoL\nZBodsoHcGduO1lKfRvPrsoU/5hxQQafbi38MStcZDfzcEHip15NNjusOjNFk\nQMdbMV0mnRavs1W8f383pVocCrzMg3D19kwnpaOulklq1AW3V7pU+MM5zIPY\nZa2f9pq75lPTc2hmRYHGs65LrgeYGJ+5PwECl2Kyjr4M3j6k9pVcL4B6OLhO\n7v1THf9YwoLj7gtUxBmQVkCJLAA1+pCSGXXCEBi17k9zuq5s23YRabApE281\nChQMRvYiM5krY7xFvn335LiaMVAXfl6CjO6ODlzIQLWjsCI2uuEPrqoMGDtv\nbgj5nvfPkY1SEBFPNKzPl0nXLTFBUtRRO1slkMYgymAtQlu506HzwSLDhDGv\nPcDycWloE4HDcIUnsElElZsiN56BTtqO+y7vNyvFESPalIjxuglwz4XiKoW4\nZmI0\r\n=6ohg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1T4DME3CHdu03L7r4qkvqr80CxSAvKVymgAD1F0+LWAiAld80ZP8KY3EgjhLj4suQ7Iqq4FmTXDLN+iohnNiFArg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.632.15589.0_1614760690869_0.5420488042794431"},"_hasShrinkwrap":false},"2.12.3-canary.475.15595.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.475.15595.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.475.15595.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ee9dfa6ab3da0c3d3e5ac22d452f052071e29af7","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.475.15595.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GDG+64BJqulV57DIGMhDhfccqH3d4KYsVhKfTxmBKhisq5LgW9yJC5mN59xqGKOWhBSKNl/52LMOuD5GVfjBrg==","shasum":"ff0c133b3a2c7741a33e229d6f96f54d333a44fe","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.475.15595.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP267CRA9TVsSAnZWagAAqAMQAKHoQgwU0XvkxcNT7Hh/\nLEbd+pkgU9wS8Z9+u9DXOo8paNV9CSSRi5jnuR717wR2vh7sGjU92hNryuci\nNF/n5Wt/AhhDhRyNyhBlfuCLSlYsARYI8AvjDk2qck0aQWcu1mRlcLvwJbvG\nhhS8Ri9dHvoomEfLcp+m9QXwoXrC9MIe95ZnaIPnvFQwoepnbVX27HDOQcxD\nuX2lJIFyZE79cb8L/vyEkmfpmFURSjPMm/6G+fqVwlItpWxNR7Hfb7iwqFKq\nXmm+s3gMCmT3Ye1TwQOMg9zFm9tFVmkF4YKjZqOQSicDVeZhx2XK1EQ2ULR/\nuANBLbFMHVJ9fiMu4PQy9jjYpgNHRmmNCAlBV4LUui3TQIpdLwp66HjqSReQ\nMmH++8uVTKUY5+G5ky3q53uw5s53MLJDrLCkxeJD2cfUGtOqhFeUVk0afUo0\nUhnZjma/u5as3wfLHotheks9s6zhnxr68LkC9Sz1zp1AeldFieRF6yMJqasr\nZI3m5vCppttj56A9YpLimwwQjQg+RJAQ5oVOOEEsfcvEeuAGdkBvqoHUaRYC\nIDwTDOuDAX2bG2U/OLTJ7cIs2+K8SQ943UYQqkNfhPdvRQr0wCSUYOUBbDMR\nuhii+fKT7The6pEBn8S/BCIlF+S9jGg6Dsz3hTT726CpgY/l7O77I+LELBQE\nDXu7\r\n=q2eD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMXbnij94eQEziXIJCI1uqcFbYHetM4RplKeZEl49rBAiBteggSxVs6yDFYaWHWvfflSEbciwJGab8UvFQu64g0nQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.475.15595.0_1614769850875_0.7175005485670862"},"_hasShrinkwrap":false},"2.12.3-canary.601.15601.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.601.15601.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.601.15601.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6bb82e02ff2db5d1ef2174eafe2c82f4af33fb3f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.601.15601.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pabI8YDFAtPOW2A5Fe9ShH7i9fu58wwUJw4m/80YXCdVVcJr75RbtMP/FpMIZHEHPe+xb/3VvuCgMQO0JSGVEQ==","shasum":"ca114ac99fac57c8afc9ebc2c5af9ff558dcd765","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.601.15601.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP3uTCRA9TVsSAnZWagAAu+UP/jtidI1Jde/rjL+5V4kX\nI3QgTu9Y83GFShY9mmzcRjDAR8MszlbKJkoYUGwgm2TH+oV1Q/D4khFoxQwV\nH9Lap/eXxpkjPU/BO6hY+lc42ghmodfPT3uWAwVF6PtThJGGmShjefbPP729\ninh05U+2Z0S9qD7XLfviIsxPixZwhUhyZ7jKfQy54ut0Zs0R5qeGAyFcRC/+\nbmjU3Knhqo8engRV9mrX+Iy64bgb9pSfvuQoYOODHGxEGgqvmIf5RWo82oBz\n6ByHiyhJH2vJbRmskK4U3/YFgyKA7V8wJnJTRDYzK7quDgO1uXcLTQVFvBo8\n5uR45oIBQaPxNFj6u9fI5GGpiq7CG6qzFY5yT35+4RoMocTB8CotutNaurzH\n3Ec3rSdwhrrB5QCAJZots1ikkem/QGDrc1nVTEYVhMD8WwUHSHwiuJLXR8r4\ndgtXTs+dWPQHGnCi9W37ttW4SjbemAJkGOQ/Xzy2PQTCzwjvJZ6D76u4srtg\nXF02YxY8EPNKdHqS1v1nBDhBESOVp7iChasfZJ3WPrGQbIFWjUW67zxOrAwq\nPDps7XGRzBTqjbxTbiXlZc7g7BF6Gq333N46fe8ejfqVJSBScxsLm+rYRzH3\nzDIRPw7jdKbJeZ0tjemJMV/0V0UmwZ15Kn+omaY3b1UsMsjwHRWjr9Aun4KB\nEBOe\r\n=/8Hu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1hjAtyrJvJthJ0STebMAc5/pUSYBvkMgP4yBgjRIdagIgDI1HZYCg5m9WRNP90CmC9lyVgG3jXYnCLPSKKNo0FP8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.601.15601.0_1614773138929_0.06600498258240206"},"_hasShrinkwrap":false},"2.12.3-canary.616.15607.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.616.15607.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.616.15607.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8a34017533beff041793ab5cf2dcedb28adc41d3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.616.15607.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2MP7yBERVMvxE3OexXBfguJes2mbII3+ms5k75piAGWF8fVf8lkZtwZgY5rpeIC5Pf2reWtDVVBouwqjthj6Tw==","shasum":"538ebb33cfe325ae21d90695bae0759fe43f377b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.616.15607.0.tgz","fileCount":25,"unpackedSize":74853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP93tCRA9TVsSAnZWagAAG9EQAJxaXAu6QhfPSOPHChJg\n0Wxha5n2f90aFCatF0lnzRXJ3fgq9y9mn0O28hjW0UzS2YPR9xJr6nRk7oUW\n4Lf0lrWrW+7XKxp/+wYfwrWtw1DEBlE+yTG9VeCXBI2y2YQ09IGe6PI/Q+S2\nSGPEJf4QANyC3DI1OEfKwlSFqc2dsjBnlzIVPEdbGoQvitdyIx+ax5CeevbI\nLESLBsIXvfW2bGs0mwFbVH2MpGjCXPB6sORGw+Cy8vXzpmGQE/YcgAL1Ixj5\nfhS+EUTzAxw/dk0nsLikph+Ri5gYS54NGHnQ5r3BKHUKeg+GArXGiOQb/q/L\nqzvdcmaWYKVO9YGkwugNgI31lby4QXK9KlKRk6hy5uiynMQR8z6/uu1vTBV6\nPhBcrMGcbexxd48djVXu7GB0XSx2Cw/HVB5hrLfXeU5cz6/fBzmSy3qRevxW\nB1CW8eFa/84NckwJeQGMaKTqV1QWsQNN5ZjOwu1uxdDH+B8wDDLciW1FJ3zZ\n9Y7i20XGfc0S3LNeLzgbbHA34h8/IksFEGuFTACdGSnsR8IacvbXKPZl1aZ+\nFpsyb/PQf1TauvhdfokZ0CGpmBd04QohJzyeD1A1nOuo8NDHY81oAkHEPZiP\nl1hIr8KYoNHHmzdLHkvM6+H4y3FxEm+cBG6K+sUeBCd+EUUOh3ED2/rTvQ3x\nUyyE\r\n=4pOB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKE7b9WP9Kmvl1CkDsvW6cbrWSjvX7Dyab4y7prlBowAIgSogJrAS7VGTReI2Jj5xOx2wKAFyxYyTpCMae9+C10+s="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.616.15607.0_1614798316702_0.2010912851768416"},"_hasShrinkwrap":false},"2.12.3-canary.484.15615.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.484.15615.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.2","@auto-it/slack":"10.18.2","@design-systems/cli":"2.12.3-canary.484.15615.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ff00a7fad7906a72238963ddb52e9998d57b5f34","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.484.15615.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-P80Mm+2CTX1q42fCnoIhelF/PFiQADucbNSFQKElE+gMSf7ThdWgd0zvX8YIHX0M7bWnm21PpCISF+GeAyYvbg==","shasum":"d182310587e1735cccebce0aecdb2bc92894a13d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.484.15615.0.tgz","fileCount":25,"unpackedSize":74855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBM8CRA9TVsSAnZWagAAJM0QAIAnnZq6aBtblur2Na3y\nBTRCyakexPPy+lQ3BM5ENH2aBuOiioN9hXsxGfj7yMbZlokK43QYNcKn/keU\nycgqugtbt5s19TyIy/0RFZBPJ4T3YYcC/h9XRTk4t/rD5BSZOB5b4Kaa2fa4\npCaX9nYe3H9UBp/y5gfxYOmiUD+sBqIVLNbRFAtm9HzCpmY33Tlg0r9kIs78\n0x1imUL8ENGIH9cnZiD8PbDBSM9pGONZ606P26YPEq9g+wEqPDfq2+6qW2Hv\n1UKrEOwbY0cANNGs5E8GLxHzmY2hvu0M304BqZH8kkXtYMdpX9MQBe0JXbBh\n1j47EkgrIlUBlMMGGVeHMZPkvjiLHfdSr/dpRtpJ4omer8o2uAEY9vZraN02\n1x4Tz50aGHFIHg+lRBOse8yQmRVyNfAg/P29Io52l+8PSLpB7vJ+VycHVE4f\ntVANSn675TFypWmD+5cj0UaMUIuOO+g3Us+V5tacWCK51ZzLIM6lWdGFCS4q\nnTNL7JfAdy98UWVkmtQx82a1vvnATxNCReEFo1oj6NSon9y5j5gcSm3BQo25\nkjfe82ulA1aKP1PvqdARWVBa123rneqo1lVq4OGWaibasfHOa7xIVg4kGijh\npdo7UyF2g4WmaorQJ4vHVro8l5r/Z4ETW1aVYluGCykzkJDc+eqpGoTYxog4\nniZo\r\n=shQr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWSmmaFMnn+W+M2ooXsvfVvxy9oprlrAmFQof7R8NPYgIhANJZEYdUMOvpayL7eO620jDCSuOsvDLh4I3V9Cljq4zm"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.484.15615.0_1614811964355_0.379020963061768"},"_hasShrinkwrap":false},"2.12.3--canary.484.15621.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3--canary.484.15621.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.12.3--canary.484.15621.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"636770789c871bbec7f27a85c8a2b7859b77705c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3--canary.484.15621.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pJK6jqfu9uVY2adevdi8K5mXcFkkvLkzDDD3EcyjTHPpDbeykuxS9jI75jPe431BDmk2rlbQGtKfy/ZttTtYmQ==","shasum":"522745f8449f73dc15539fc430c1595caa2ab663","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3--canary.484.15621.0.tgz","fileCount":25,"unpackedSize":74857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCwuCRA9TVsSAnZWagAANn8P/2Ny/0HOnWvGkdH3O5iM\nAHvSod3liK+ngBj5aVbQHpiMIXm5jMa6L20d0735rDybCa/9eh5yZS+m5Jr4\nNuT82ycO59Cf1Hn+a/g+6l6Sb/MtbIabM+4J413J+VCu2RqaUNKbwabsNgF5\nNxqbWeNcdtVmVHe1pVgajMr4bsi7EUtjvfqdHosBOoCgYjdYTKpDbrL7yAWO\n8q86Vm7QFD/w3TbJX/4MwcTBFI2lWhUPQKE4setlJIychW7UAj9S393h08Pd\n1ULRRVcIM09Bw8XwEiEC79iZTnOL8A3niIhRmq6JnGKWRCi1XqiRhEb7elyu\nn7UJN65XTQu9aZwg4AKAkKhj8TgBAcgmODsrIf4/8uJtk/j+Qouz4+7ya2Tm\nQfJIqDTqxFjonHUAUIgDzZLu0e8V8V6ydZD4bBkOwZ4+9BIYnl4cvnT0GrpW\nCyC9nwWOczIq3U8U01RMDmwLhEJZJ1i3XUJWaS7bCLX0Q4BlV6P/2KAzxbDS\nZrY9Q0tdA3gFvbQFbMix6B7Qo+LQ0vop+qic4v03TEGEWIANEcQH2cFqK5QW\n8NPeSEedUHXidK7FnoN+nYn8vHxJvjlLR8zo04HQUxFVwJTKopGSiwZsQwk9\nXCj8r1uWmeU6QnKJ8d/v43Ozi7X21+8HjgiR/HXqjOzB7yJq78kOfKq93rzs\nMfSF\r\n=0YTC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKg+q5EYk4hJiYHPZi42HQLFdVvv7ADWVv5ZSREeHwMgIhAK4hrU+p34QMbUotRv60h6BrziN+/Jn95maEK/ha0fEH"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3--canary.484.15621.0_1614818349404_0.41109216105642976"},"_hasShrinkwrap":false},"2.12.3-canary.633.15627.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.633.15627.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.633.15627.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"03b0efba878c977518a845abe2ccdaca7aa0714c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.633.15627.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7Y83Vm5T0oLlQg5y+tH00upEimP2JAYy9gbeS5NSviu/PDi5FKxs66kObcV7nIJJq1w2zIWlpGlkVY4RpHHlHg==","shasum":"b050477ce4503fa3b953b0b61e6343e51f0c852b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.633.15627.0.tgz","fileCount":25,"unpackedSize":72352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQI+qCRA9TVsSAnZWagAABIYP/3io/ras0eqz18GUsfzu\nQWLdOlL03vNf9Fw7dM/E4LC3BLm0kfuD7nr5ltoNOujxkbL8QeFf4doYlQUe\nxYZYUcXG1oQNl/ESAYZ4Tf5lSwbYNagWuxydmbi6eQ6sJY/wgKUpjHIvlaN7\nCegMeJHXsT6woO8riM4fZZku8LnM9mmMWbY2sE6Npjf8q7IrdXIkBkwA6s3s\noASpuna4IgvEb9c+rZRpbXFYsiKJf1MULxrFjaVZJkLNLd0FcnpY5jbjirE0\nfabDaLnOF1c1Jc+m2pk2jtSljKOJgw99pevGGwVAdzU8Y1cKtI71s3vDpx7v\ntxaUDaIwqjHR1EUMeLv24zWYXsxv7MR34AVd96D0nNqyjBJnkSeewY9k2/+1\nQPKP/Jrn4nhf5YbhkJZyqA9enGxO5ZQP5wP4+X4+L20JSFDHr9IKIP4ACp7+\nKpet3e4ucgAVHDpivyWKoNm8vTNvtCQ8v5F3UdWrSlniwTPQiT4HDGJPNHji\nXDrG5tO5xG+ehDR15V+9awZomP9rnnciyX63YJziKsmmD0LOCgACUkA5lx/8\nNK0eKny0jdshgob7QatVkyIHj7NDF6WuHbnvlkjMovqbC9pyYJq9ipclVl18\nQjfwMtvUFN0vfhK4ie4k6Eov6Pb3k7Q7IFL/s82+Hk7h0mZevg9JaV+ZiN0T\nV8si\r\n=+Mi+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdzOE8d5rBcUGu1VnPe5jiqRocfCM9TI188jQgYzBRPAiBPB+7AG3sGTwHqHSCusNqLcS37kPn8QLP0fmbc9vsbpg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.633.15627.0_1614843818425_0.9851653691128268"},"_hasShrinkwrap":false},"2.12.3-canary.635.15650.0":{"name":"@design-systems/svg-icon-builder","version":"2.12.3-canary.635.15650.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.12.3-canary.635.15650.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ae22828bec039c5b43a913e6476439f2ca7c48fa","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3-canary.635.15650.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-g4TR9KYXkKB0voouJxB6RZ9/sY4t2utly1pkCovG4E7VKRWL3UGUMn9SSBWkq4vhfq0xVC5DYiCwMC5z+tYIYA==","shasum":"79e4079056a11abc8535bf53b60774947d5db1ff","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3-canary.635.15650.0.tgz","fileCount":25,"unpackedSize":72352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQKe9CRA9TVsSAnZWagAAjdAP/jaYBffObUUaOWguQfIt\nWEWE/hJsxnHXjS9A2CNgaS84ipkDHtR+H+4bNyTqPk30bBWX9hLcZwu/zDtq\nFuH5DuW1sT7ARpK1jNKaWvK38Ots9RjpbMAdDxUdFHD0F/7/sskfUGvI61hW\nAIjF6DUb4PZ/O2yqyJZFumS0T9fLXVKOXoX7Xm7txdSFM/NXnjKU1QzeEGJo\niOjAfvtbpnWlDhyIOzb891+Wp3FaP/ct+9Cr0LDbCGkxFEPVMr6IkdQPR/kQ\nwc35aW8JsCZzSiNp3/NcXXZTFMgDIc1RKkzopmSXB3VKfiTLDcxOUSorAWva\ntk5meP7ddknDod5lINlDjKTulQSQQf7O5jLOg+CV462Y1Y2Ftz7Ea9/tAJBb\nV7f8WrHdmh2aVWIc+GWCaLDT5VA8LcMFH9xNJh3IVLDuyoLVjbNQb83MxFaG\naKLwICGb2sYBizNh1n+xih+/ZcMMPOWtE+0frRrhpUqti76Wlv89xqEGl5Nj\nPqlBw6g3qIjnVyLR226crxVIZRNPvgcucsO2034aFA9VnEkIm47fUTL6PA+a\n0eS4CxWJjc9xHryXHCEI+FJvtg8lXYKF1aOU/VKJjuWXZ8zfRCi0wXelnbSF\nL/NAvtVRuoGNUrgpQeAudawfDaY/FNRSLTu8/OPuFoA6saKBYXRz3WSrp/v2\nWkFE\r\n=X23H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCylxEufswi/aZV8+iO26E93XEBlr6UISXiNZ1sVeaCDgIhAMN+5kYNzpTIt1Apvw0CLx1kbCNfjWj4sTYunVUqhqbg"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3-canary.635.15650.0_1614849980718_0.345133846807014"},"_hasShrinkwrap":false},"2.12.3":{"name":"@design-systems/svg-icon-builder","version":"2.12.3","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"^2.12.3","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e87a31a406630e0a839923a273308a06c793a847","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.12.3","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EQsbp0B4mC273QFPVUyiNwqB27hFdtJMYy8cXom8Nc0td6qTjH0jE37FLEzDNBk0QuVj7dCQsc0pL5KrIIGIVw==","shasum":"b18fa5253bbe2a888c669ad4e55298e43043f0cd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.12.3.tgz","fileCount":25,"unpackedSize":72566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQKhMCRA9TVsSAnZWagAAbMUP/jaMc4427Kl6b4BdNRuc\nw8gX/t6eTOEFiNhBxD41CV0Yt3BBgztBIROJrwzteeZaN3mQwHwQjN0rO30Z\nKRVMBvTih40bYk8AoBqZaCxMkS1d6yFPqlhjoXUEPZZtc3+CS0tYuESC9ymU\nxgDBHXPACO1bcI1ipRJy+bajygkHaFUHK0iia455r85MANYVKxn8S3bb+wWC\n73UsOC+N670ZynGq8rGh1fxjWSVneEmkgJhHI5Piz0otIt3zvmi9CbGsEcKI\nbs37w7YHZzzPLzyDtKM6HvxmHf1Qr4YvmZMxSa2SYD5FgsD1gl2n1cRscage\nOvu1fLXVM6Y4VfQZbOyVBL/2uYJhRQgaSwn+7YhvHEvmnQ/7UTyzBui1UDbl\nKgxGizoXKJ1lBQsMGfCbfTtuMWZY4/fFjllA8A6iDad+Bw9lU9LUDbDDCaKV\nxHXa/gebJpvACLICtgPiG/3w38tYzk5aqwuJYG1TC/Mvv5Pr0h9A6iCphVZL\n7zGJPAX8zPe55+mdVu9OCDpJY6XProPzDPDwaV2PPF2D8JVQ3qPtj9tRk7gI\nVt+ZlfyLv8tNe1nlTAi7iaBCeWmSdopjVYCwpkTK0OGndGDrYj/DwTKaF33/\nl/sXTE1LJP3lIhjk1gWQ5/FNElojM09QZ6eGN/PEguzGOeyrg43SORRVq76h\nCuZJ\r\n=97cY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQy1+hLnB0gQ5B3SqO8vukP786ob7rxO3k+73uKvAHfAIhAL4n+9OprwOmOqxXqbx+OKzAWsFjlRpfDt3r1kK7+W5c"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.12.3_1614850123581_0.1081938723814706"},"_hasShrinkwrap":false},"2.13.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"^2.13.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"92007f44a10c4c68d495550f42ba1a354d39121a","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uAQlY7T5B6n/vOTEqxT/5oKw7C2CXlVkgb0tatjgXrm51GmdSiQauZeE9eV4+kb4EtfH7HRko0qRoBFGSByy6w==","shasum":"066c92d5fa579c4e7369872a148505f3d465a428","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.0.tgz","fileCount":25,"unpackedSize":72566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSwKCRA9TVsSAnZWagAAXMUP/3y2w5YeYaCLKltrABNQ\nXeh9xo1dYbG4wGTKqgnhcThE4VHTQuR23Wl7SGv1dKdVKjzam5dMekrE/Fnt\nIJwHWlA9MiGmnwR97EY7q1Z3A0oLdl4Ewm25OkEx2MVC6PR/QyfbQXoqx0u1\n0RTjWx7jUvirLREZ20Bbyj5rk3X/Vzg8BKOBizI5OdSwDfc1y/LaFv1BySQw\nqSUKUuREr3Zv0k5fAibpgtn7nMbJvSrYqMIWJynzkb5VTXDD6wmr3GSton0D\n6uGH4oZ8VUBXIzQOMe4jY/4KL+H2E//C7D9gzoOzz7bjf/66ncfqn8wXKoMD\nS24IDDvhkmFFdP9aZOH9VaFdjMPc1vpJBf1SvU/PcnWGXEk3MQIwQY3IyYXS\ntXisbAPXEjFEQPLwJEyqSCD2ytgBThHGvxJlYJTsNNhLNF6LjaSeALMB1agr\nRryX48wt/SKd6BDGmdYMsRVh/HinFujHyOcaa67rZFDI20B4B08/N9aru73u\n1Up5TX4VEo6UbCDexJT0pVKHN7Fq5gOCcdw9f/qWOfSyw3V8bnqV4N8SlxA5\nUHpfkxhfiXQ2Tn2Xa+eH5RxBD3Qziq8FFb8fSrc4U1PCf8+9FkXgbiO6r4y9\n756c/yY9mHH+i7bXSenWUfiNs7x+CAYVY+uIfJ9zaIxqe7NXvLdGeOmG9Vel\nXGH3\r\n=bTRJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNk/tjfgJPJS9J9uTbl067MYvOSXgTwYlaIW4YU81gWAiEAt2Aw9SY67sIldl/PTQHREUVCKxh/ddGdlrmZ+uRleTk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.0_1614883849488_0.13844135404246027"},"_hasShrinkwrap":false},"2.13.0-canary.636.15665.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.0-canary.636.15665.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.0-canary.636.15665.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2d43618b09e604126feff3fbd19c1f0d24c01df8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.0-canary.636.15665.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7uCR1m1ozs5jVa/tBjg2JGLixLoC6ZEXhs2M6W9MRH7LuKBPm+Ckz+TMXNnffnq9eEGZBZ1P0CumEh48SsVX8Q==","shasum":"3aec7ca0a72d470f4814e77397399fbd6219506c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.0-canary.636.15665.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSxECRA9TVsSAnZWagAAO1YP/iNrQNsjqNe2DDfgcAEW\nbjRz4MA9lRM37YXJ75MHRvZ4IOLs2p6iJWYB8yTBxPOEPXuAZ58FHnlosBlP\n//Bj+20HBTYeiu/sCOAQy7viXOK69fFxdGFuHn+Hqwrif/xiSbxiYe3Yn6pt\nb+tI5kiCMwZIP9uTAFjgFogJ1Wjx4oLFvP2HuP5j8Zxv9DdblUBpi5n4SbRC\nlf4DiGXjcvCsV3YaN7E5T5mOQQoRVultYuT0z+p1DQxXXheqYHNp0yx16cEL\nRTJQlBsp2RnU6cKkQYPm2R3hl1YEJhhkJQgKCfKFsyuDxPkDnOc2Qfi1/uQm\nvjZUmNeeIA19SFKpfg52McQLZyuiM3cccwo+iKg6eSElrlsiJKHkgUbGAQKL\nCmmgVkkA3aW9b+jgUfizgadLpy21qqnBbH1ftCBx/YUHo0z7+k45sNeLFfa9\nDsza4uhnMz170J5fh21E7cNc2p49GoRk4T+b9sPm49x8o+Y3YWHg69DGbdjB\nCK6YVKk98q8jviYbA7PnqaixyBSnfKi71G8bC9S5rJZkKF3qF4u1QUkauaFs\nSZEXnT73+yZ3PtB6jsSfUfzr2RwA7+dmOONpcj7lHQRPYDvv1X9XapGN2OwD\nUbiY022qZSFgJCZ0Q/OVkkz93GnlyrncA78nu8at+TQTU03B/b1J4IOvTwYR\nDnjU\r\n=85+H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHclIcVGv3K9Td6XluxCJh9nXt56/q0hBpG+W2Y4UwQaAiEAtCVPJNFoCtTpLfRsXxLIIRKxd3eWT8XYvuCOels45l8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.0-canary.636.15665.0_1614883907571_0.1449555123837074"},"_hasShrinkwrap":false},"2.13.1-canary.568.15863.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.568.15863.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.568.15863.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ab9b6d798594e8c6a84df8290b55b2e9ce86e1b6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.568.15863.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DNZgDmyAuFZFZN0XY1CIYEFLT9rWd4E0gfe9EmQTsQMw4klmC7fn44dZrjO4nTsj4/39oCNEaSR3/n+eJNpKcA==","shasum":"de6e440d13a3e5b5470b2ca0fc3261ccaf7a3293","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.568.15863.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXp4CRA9TVsSAnZWagAA/S4QAJm/J9CuZeHJrQNI2ZU7\npJZRkNwOX3cU0MGufFw0AfAHRQW50GRsRVt8chbVmQrxSJ4VEFFkdWKEUF02\n115hv1OkR2L4GupThbWULvQR3n8BfnRVujppRVJFdlp04WssAY5mFcCarb3V\nYtIFwdyuswnL/OmrDufvc5aMEVtalrJ4Mc1k6vS9FTNwP917InvOIs6McY24\nHx15r3YZOlQZwQENZdIWSNgSQRJESEWjLjah3UHXTmznmq+QBHE1qbUwJiaF\n+gqiv3kHeVUk9l3zSBiHXnoBbiMcrRxCb2oHCJ3w1zNnGyhwNgMV9CNWUk83\nAmxhhfu03AsuoSZm/lYnTNZIqVlLHtSJs0vSvsZjhTyoM4kuNJQmRoKyGjFC\nbXne2xiO4HhdBHp5c5JDpsKJXOLFoR7iVYVzSG8JbHXAOLAuHYPUbNi69JBy\nuiGG4Am8gDXiSdyP8PMSopeYGNQo/YTHz9r0fXRPPF2rnULBS1orbJqbQR/z\ngtX1a9Ig8ikRTf+HQEmqDb9tu0wk5OD4osWn91Z07DN/Wcq25L3dSv+/MkN5\nkamCxTBIl4c6fxf+HzqdDSzQARu+TIqBowiJ0DSerP7dRtI3EtprB8Gm0A7X\nQMx+mk33WEkFOTtAq/F8rvzEw2UFZ6Vz3lFP3g2BsdWRYo7MWD/HkuMD7H5h\nuE5r\r\n=j2ey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDprRtR6h1La/+nc58KBsV1zwXVqqlSuiSTi3Z0kEpQ+wIhAPhQI2F8USLQ2xWp7GAAJ5igLEhw1qyZR7vbweMlkADb"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.568.15863.0_1614903928119_0.7714986207791532"},"_hasShrinkwrap":false},"2.13.1-canary.604.15864.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.604.15864.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.604.15864.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3fc1de046fca759db320bf4d39f5a9985f970b32","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.604.15864.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CI0Pnd+lBbZJ3JsIWphaESHroyamTo17aYupommP+sdQPfufVsO9bhfVJn6/QS/9PRXG0fMOJECoPJWw9/KTEw==","shasum":"fcea1888833e267a6b3d4d28aad3d81b71595713","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.604.15864.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXqeCRA9TVsSAnZWagAAb4kQAKR3K/g3+iB4KMKB3jEe\nb37soj6nexwk/2YleC2/ZEPFSMWMh1ItskfPX7SvCQJeK+X6IxUu7DNCmK05\nP/fFsC8PfKf48U0sF6pstYORlAyCV5Dberhz95KXp82VutBAc3aKTGzetKeF\n3TaSlX3FBQoHv5kqQ1hCbJHiWbvzGcCdE+h1yasWYMkWemFmQkkxxrUKML3q\npzM6vokpGWJPobtl41EXBdUnqWPqf8UXW3Lj1I3ryJxynBx8zPnkZNfQsGev\nixJe++bDutdj1iEUR6aHIyQZAAM4Ta5yCPqCO7tXRvOXjZjVT+XtrCcfdWoN\n6WtMfY/AL3TXxMRlexHFos2EjZJOssXpWng68K2pl4tu9oY4UEWVXcGfhLeU\nrFXQQT7LgZdudHAM089IwBPVWZ12Yypb76o1CEEazI2l2bmIAE3patPoVAUP\nOWMeFOrLIPWxBGl2mzZ20Oa0lvK8VDxHFx4F9wesCBzo0TQ+Q0YhPaDvdXlz\n2em8oG/l5wuHf8zCpSz9ymZz8AvK3/8ggj4JTk1V1oh2lxL60OxjrBFJb+3+\n07lsh8aUizq06NQLXyBdjq0+mzAXfc8ivJXkwhZAZNGi0TpxN+gqsQAOU8RB\nWiZrvSuqhuwdq/Vi4lygYlQsxroHIJO6xlwL6u7/0OpFC8PczTxAv3NL1OCS\nCF0L\r\n=hwHE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3a2u7rhZgmJooKjQWxO2TzniSAJkU8Br5JzEYV1X/SAiBA72feUmtX8qmCblNaorbgm/8eG504KaUSYEiboytAQw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.604.15864.0_1614903965522_0.723609875379067"},"_hasShrinkwrap":false},"2.13.1-canary.473.15940.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.473.15940.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.473.15940.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e584ec9807a80f7255009e4e349b059ba0ef45b9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.473.15940.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Z4+Xy0F53dhfOgLSjH2T08Hj9bnszNkqxvvuMIL/QGyyOVnMYqvP3Ub/D6UnX9gslyUvG/5oTsRoxjYTr8MTWw==","shasum":"ed51535ec9a80991e45994b8a7ce365c6299038a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.473.15940.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYPoCRA9TVsSAnZWagAANjEP/R2CjuX32gNDpTFiafzq\n1WO2tbzi0NPKj9VoqW9b0zhPrQ5KxFIzModo5CDFjwFXJWgF/aA6eYP3g/Na\n1nB8kVr1aAOxTPgvYAj6opv9iAu/85RXG7JyqtNlhHfgkse7cvK4pLJOtAcM\n84JBukzVflUCv0gtPs7BBLRDCwBrgG8c/KSpdvomm5fJCInavuSmzJ5pci97\nF8JCUc7gai42V5OaC27SllLfSdoG+9mLq7hbo+Bb1yB6/OBnwc9gbaWy7aUR\nJxmatfz/adC7Wu67OdOms/5C80Kwe8DXw9K+2umDBGJV/8g9TzqXUftmju+k\nJmlp2oTFrvWrstvlv2fHlu+vVty1XGGwjXP6sbBdUz2HwXLtQRCIU4DVot9A\nPp69NoN2AT3HntRS5mq/8UyHQ7Za4brIrSoDCgqErEDosITdktygvp3ovNU2\nqhbLqAOZvpBPqpNwcgFMqmD1SIBJMPJQ51y58hWbs0VZhSxPLV3ww0zkaadh\nVC5ZSFE+DrSdw92+rg4E2q7sgNB4Ge09+mxyN+8BmfW9Bh2WtylRVM0uTrtz\nRaZ/tLJk5cEgV+QhR2FUBaTQPkk4jeM80NNGXRdJzMsfbf9xqnk4nkgQYlsz\ngCMcvCJxsKrFe8SAyS41cd8AVw8YkyrLEPefaZc8eDp0Pzu95NuofjD+TEgm\n1cmt\r\n=Zg+9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKsj+MQXuweOLYy7WwEApTigJIosmPpgGVF4zWnvaSkAiAcRKDcbbvIEFcocck6cUpKkehoYF9dPY35cJA3sSPnPQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.473.15940.0_1614906344406_0.8385893794734429"},"_hasShrinkwrap":false},"2.13.1-canary.622.15945.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.622.15945.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.622.15945.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.4"},"gitHead":"015c478ab7e2b7bf836afa28fc32b6be905b3602","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.622.15945.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-iLrMRgAB9356zOpwSBEvfmVHwA05Milw2WEkftK2aFTA8GP7VoBuDz8P1z9c6Q4cKvknlq+emqSmiFz5jLidew==","shasum":"271b1354da857c36db6aefb946c1681ea53e5ec3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.622.15945.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYR/CRA9TVsSAnZWagAAa9sQAIWP4lBhGuWfz6mpG6yN\nzR2bXnkaNtrxPlHGmtrcDE5niWzaHj5UGGBIk7HMcqsDB/98lCXlzHKqfbYc\nlbOxLlULN2VEDZiJzlroNrNS+GY0/VLPdz/K0H9SRsv1YjxRM49NPiDqEOrn\n2Wdum2r/08i0gfE2gyy9GrgG9KIuk/XvA9eB7ECaXBrXD/XEL+Ni7elU5gd1\ni8SNTLELIyBFJGJrSwPb0ueDNSaETziCcv1XyEJ96GXZ0SMsKKZ+OdsH1pR8\noe8V1vlUyJj56lH5vBu2GfsTo1/TEFWAGQ/p30wgJpKKYIJZJMHXE1i/InE4\nDI9/xslvF2UfJPaB9o2g6axTM4p01B7bxbZQmCPaIVNbVKFa4E2hP+6eXk7R\n/ZCS/zczzYkQ3ayGoMuphnlbr916dV1sZPwieDDaIQofMoliQC24iZ9ctpSD\n5qErHSeeMw+BpDhHyqH5pC9u0mXOnnvAgZ/KlehhaLEkuYbq2NCzu5FzN2fe\nExLGMamhY7PL4EnX3fRYPwzHsRJdW+5sl/sm3P40Z7xaRHd2Ib95owYADzGx\nkj3C9zRhBoN1xtjll02Bgyw6YyWhbLADMchSOu8Km5fIRdhl0WDrmdDSCNuk\n64/G6jS9c2rLwnUBYvuHjQm9ocWsAjqtR1qYjjNfwqLo8Y8l2n5ceuj9Kasl\nNRdQ\r\n=NQR8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLxXISxKx1GjGZoEaO8XMMJvnNHTa0JXfVKtdHglgSgQIhAN7H2rn/YT3b0MV0osNiIOzrk3gZm9bHK+uC3zY/+szF"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.622.15945.0_1614906494741_0.606130583749416"},"_hasShrinkwrap":false},"2.13.1-canary.474.15962.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.474.15962.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.474.15962.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"db049e866fe9bfe1dca14796f5d18e4508778906","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.474.15962.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YeHcwHBnkYWOIyLELw1cfFd1X72ISDPDiyFwsmJxK+nVR9AEEu+7kw/fvhzLm+6zI6y1eAINSow55+Y2uDSLKA==","shasum":"11eab8527008cae5e3db36f4b1ee8f15aa174555","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.474.15962.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYcmCRA9TVsSAnZWagAAbN0P/1ouoFIAKS5mQ7lwIdeH\n9lBHtSILIE6newgAXUYhU+kBhW9O7En9DRfpsLncw3JmKpZFHGhPXHDFcCWa\ncd3NkzYypQ+dVSjuFp15YGGnb/YFgSJJxo73+ccBWX3fPGqtZg1TbwZWyTX0\nWOc/tD8rMoHqEhUTjXWmU2ZVm4AKYX1nEsQuFiVvw/VzWGgdD8HmauVWjsRC\nC6yKh6ciitE60rI7JF90f+UhuTb5mvNqpeOPap5+BaVDyHbDd6gXW0VKfhqp\nHZNn4LZnyBLZ4JMNd4oEPAwgvN5lx7niIXszZYd/DGL19HeuCB6LPYKJXBrv\nlAW1LR3uqkTCqUKgw4hReu09us0r/0sUDbULFT3+Weo94xEcOjdx9tVALZnH\nDceTzge9TLKm/opgy2qDEd35+sWFyKUQrvuQlTJ85DwPnO4wqRjqajmUxr/3\ndzqF9mxpki+3r1tyxTc6cplCo+KP9cu5Jsrecmh6vqDuxACujdkiLz6NXA4u\neqh3SRLxmwVN9F06bYsdFiCm/08pFoNuTFLzXhT1ZLiz2ryZGWemw8cA+5pE\nr07a9+Xo9BP5nNjcNZROBOJjJoN0bZ9Kn8rq3wShmB3XELEXcbrFSKDdiPy7\nSH+NLcUq7wBSNcOcrQvJKHrJBhW6r7dNDe00ryUH77Wb4wTJkTG/4jWtL3K7\nX2+5\r\n=BLsb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFC7CRX6MJdM7qviI7HjEu2KsTItQp6Rueb7t0yGqPMGAiEA/SmvlEJ616v4YPU75xENhyJcFfAf1qEewOuHgWydwmM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.474.15962.0_1614907174164_0.5861675462796645"},"_hasShrinkwrap":false},"2.13.1-canary.589.15963.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.589.15963.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.589.15963.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a9d7a1ed7642121153bbc3849081050fec2a9a6c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.589.15963.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Zbv1bHCFHNBOS5asCEpClXugah0rrPvPsBP1m9OOjsKIuPKMnc1Wg/3KNPJHeetFYjb6s73cKqq+ShPJuv4MBw==","shasum":"66082cb1f2c4d58b8f4f772dbd76c1803d35bcf7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.589.15963.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYc/CRA9TVsSAnZWagAA6EwQAIRyFlh3ko2rQi1TycNV\nOSRPUdmw91m8AymL8BnHZGYFIWFz4yrm+Fpmv8RJAOdU/6IpA+94Rnz3nH5B\nU5jugNX1BfkdpsTjVXRayvg9PlXmZLruvKUwff0pWtY6vSiNEVTmVoCsXVei\ni8G82YwT6f85KVA1B90ibKXH+vcaB3IdYrR1ogDRT12nkUWrQJ/ihn/XOD7S\nLu7uXIh0zC9oxdvmjFvZ4obhxYKc8+t5Coe665/6e9YSrFFNT0cQ7YNMhNiu\n680a7Q7BaSSXSeCrSX1iMGGm9qfkI6S/hFmlwRs6i3qlO0hzP5ntD8Ws7OXL\nE+wLSi47MdhkGt5NwC+dNS+1xLJ/hhPWnrwLwtayPeTTvdn1HrAzNFfiRQ4f\nmkn9EdRkVbY2wtsvgiRz/gwVNgtPKvjSL20Y6tTL1PM8ouMzJ4HFZMlWoAQs\nnA5GIznQ/h2favY39aHnn6BUbJr9TbSCXQ6F9csEySfN5HreWIjxzeQZK1lc\nH7rTC3kFVifGjo+kLecYpl7zTuhmXkghSRyX/G13OgOt+KSHFUoE5mDKvA10\nui8+0ZpxPYvgKs2aCQtCIq83B6JAcUzWubLQOu7rHf5wY1B7sy8JxCeHJZLr\nBtpAZjCHvhxnSDvleFxOa5ZlehFGIGHA+tbZraz7CfdxFRWOXOiwV6hZ7oRv\ngCF/\r\n=erwv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCMbp8/+tqSkCr4q6Fjuzn/HC/E7REXCFA1ecQiiMJxAiAIWuTMDcIbJkU2y8vuvxwHzdMRnOQ9q2ylT9j2kH9UwQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.589.15963.0_1614907199142_0.9094099819191397"},"_hasShrinkwrap":false},"2.13.1-canary.623.15967.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.623.15967.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.623.15967.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"31341b18aa098d1dea2791ea8b32e21e3bf8e3d0","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.623.15967.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ApQbFPkN2tjAYEg0vp4zzSCI+Fhmp/N1Sslx7NDV8eMIqO0r64mW4zMFjJBQsbIIJFoZEWlWfvTyoLyk0koQbA==","shasum":"75a00e511c3ca2b6876112a064db66a1f194540a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.623.15967.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYfPCRA9TVsSAnZWagAAnvUP/iu4D3HqQD0rK9DuxMNT\nBRli24ezOCWyAEJJD02+tHRJmxJYwcI097D1QgQD+s1PdqWtlZA7N1gayYSY\ndCgy6h2O/Sl3mmpOKO9T9/AJyRcE8ilmBhLwpbPH+VcSwU7Nrmx3/nPitoHJ\nVfx6VhhpBcLytY3hnV7cZs9+58RCMOWVhuyZxqg+XDhx1ReYg8Fhw0Khiu8q\nJ9YJlcW1K9/ex4ORydpOoednpIqu9CsENjh4L6NP7U2f/tIVtC6lYh5DRSyi\nqkd+zwDDuVJFPtZ+Ay076kDhTKF1FTcvIK77GHSrvZvVQTMLQ1kBAQSyOYzM\nLLVXKmkJepFsWMN1bMttzpeXdgI3VK7pguoFqA/rDkthEMdwn8RRZcrrQgMA\n7KujxZMUr5qGAFunLQ+B11VvhLodwFhH65FDG0+wYQzUae6WSEVTGgN1hlab\ne5FHCbLTMA0UZocSRChQYaUHv4oNbN4dq3wGCiDf73gNADnrY5VAeRUh0+1H\nyb0KTiIsqdklnpY0x6sLVkt9FST8EONUcjpHDvP9+jOC4OMOKihkqTHg/2vo\nfRVXYc5D254FX9e6jrWsux8JTptJ9RwfjNJob/9qYA4Uac8HjMkQnmg0UC59\n7S28nZ82sSicQ+LT7PhEcl/WAN0m9GJTMS2EDNgrkGGQkC1RBbSfPquDvfy1\ny8rz\r\n=15ko\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLKW7wbG5ExRr0BLM53PDiqoY2DAGAfPF9ABym2gUdGAiAI00QQXla2vpnJY8/kKzwgJ21nIBMFi3HQ9wsXZt3v4A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.623.15967.0_1614907342971_0.38132582771386203"},"_hasShrinkwrap":false},"2.13.1-canary.565.15969.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.565.15969.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.565.15969.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"63fd0e97cb26647788887f262613b669a971007f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.565.15969.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0a4tUl09IL4Zp2s7gpNBmqaBGzbtQIQRL0Y3anWT40ldxVuYQ15L7EbTrYgDuNQNhD1/BIipcY9eLl1JGiJemw==","shasum":"de782b0d4d72701145d65e599d48e2ae9ad813c7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.565.15969.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYfaCRA9TVsSAnZWagAAVS0QAJpycQKpCzodazpcohNB\n/WBSJz8wcnsfh3qpCRNB7B0mzG+uVIO4dU7GezPXIcamIfdkbc87NeFEunA4\nwYUWoQAEnOXo3Hn+TCt56KVyGanT9eSqWCCFBckrOAB4m0XtEHXKBS0fKiW6\nh76oaouRvxhdj652g825Ue8+7Fw7XqsIfF/fYOxLKfwxPzy1GpeiFxViIjUb\nWCZ/6wvkfN16Z3bHIC7hfwoLEEOQ4qs7IcfDdMmbO6FrsmrZhByuquu5jaOE\nBp4IJAH24RWTDc1pj0M9YUTcOn7BCKBjL1e9SWjmqhBtKSmoZA8CrhQ0CX4j\nNJ3SZJi/1YWs0Gr0PMTnyUJLZ2wkdgOlflch7omf/QPPrQOchqqdbqBdpoiQ\nTn9l7qoDdG0ygbAwdl2AWyFo0tOf+DM/wJZVD/nRtvPBjysjk8xqDhHUlugP\nl2iOHYA+UImeMvpOME4H16bNotytSOP/N4APqiVbOMl5sthBX6LNsrfiYU67\n0AGcbN7238LNgJ0MEdfHGYG0E8b60Ds052wUwBqsUGrwgyZWVNFRlJmO15yv\nzbe04TWRepPcHUP2SzC5bTD/ppT0strVgZP3R2w1mXai+SzHbLJuMVe69K24\nlJdV59Jf48cx9VCdhKDgmfDNdicwO74RFZxcZs1wkrYMApMxstluFC0iGoYT\nVJK/\r\n=AKyh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwFB6hAjgj3McmdES9upX7ocp4sDe78S/mxLMdk7F/NgIhAJ5aCqkAx2xUnctrIEdHvc0NwQLgDCAAnGbqDgPp16J5"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.565.15969.0_1614907354193_0.3483668873283583"},"_hasShrinkwrap":false},"2.13.1-canary.595.15968.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.595.15968.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.595.15968.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"42e88c375eaae5c63be3fdb26726239773e15fb0","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.595.15968.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RHHOzevFJsEDTEtAQO2SgsoTImJKLh4RuJuy3sqvUaAkctsL+KB4tj8k3GoP8vDyvHjBTNHXmOJyzODldDUPAA==","shasum":"66ea25944063298fc7d5d53ad998b99f91fc2c4a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.595.15968.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYflCRA9TVsSAnZWagAAHpMP/2ULZP0H7PQuWBjFLaTs\n3f/tBQW7wgmhRK63DONCo40lUV6DoJJHJynWYXtS8Dr9UY8w+MKCPRGebqMN\ntuWKjkAXHXPBpTBcdvawqJOcJUYD6ewk2Mn9KqLY0GLafXgE+wksJZw5wd4P\nZMEHzNRm5Aclr8qSoMuiM8IOGagZJwWHp/ZaIe27jz+LWmyEtu2+cSchx/ta\nd3c4rk9VdO/UjQOoJ+rJ/eBkXpX7+L4NKWEI7K4n3kk08OX55TuTGOkJJjtG\nAK2yob7p9CZ3+iwEdrccFRzwQca1XzhHzfZcMCGZf2DQLfWViuunobyySH/0\nck5i9HFbarC5chElSer9y/6nn7bebl+gj4GQr4bejw02CFDTsHpN7RlSCX0q\n6W9DduU3br5boI5TmMQTOQdYrpgHahsdUlvdczKuVPvp0qBX7cXnyTwXXCJ5\nbc+Kr1FRZSSrVU2mRX09AGHnQ79Kpz+z2dJacYl0mVHwvAJh5qlf6RTUIeIs\nKzm+AXgfHeVDkvRulB070M/Ac7S8tr/A4jFzJ85KXhzN8KjbuzwiFnFlrBZI\nsxedEYEBMuG4BXTeTSvJaUuyOZVXskm5UmfK3sk1G8eKPeU7R+HHoHCWCZpE\nWYp/qeRQqEik+vUufBh+zKnOr+ZBF3n6XiK7VZI6XMvVgR8xdWkY4PJTejuM\nag/R\r\n=+GAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEazw2HOiPkfDCst94bwl+T4kXPtj3Qx0dkGqC4uokFnAiB3WGmio3/mrin8zd9v2ZpHxoDXSq6DN+qjj5uWcZBwYw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.595.15968.0_1614907364762_0.26912079552981294"},"_hasShrinkwrap":false},"2.13.1-canary.475.15971.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.475.15971.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.475.15971.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e42eba496f67c1ee4f0c549aec18de0373439588","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.475.15971.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-v5Smif0minMCo4KDXlYWiL0nIsbVl7W/VeUYS40O7eTffW2DuotTstESM4mMFfoYLC66icqyxocbCfHWa0QusQ==","shasum":"492e527e91a6de378569072f3ed801ca9de3abee","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.475.15971.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYghCRA9TVsSAnZWagAAWaoQAInw+YVF3PUfCMZX/OaW\nnxfyUWpiTrLe9To0Bvkd2jRPpE1TqO29biLQge87yHwtQBFiC8l7ayBsI6CF\ncWTRPUe7BQRzHOjO774PfNUmzfA9no17QHZBaSoTpFRKCdjZI6Tc3K48HuBS\nEBEdmR55OO/NXH4BN5dlcHqqjyQlGyhBR3STBSp3JnB2iE8Slz/KhhXnMfZL\nsVJBi5RSyrqhF2mn2mCNUQzC4qWo3uD2KRFW2YJ+TyyEuWerjHs9OO9w+r36\nBnHWANlf3b5xqZUgQGAmafeyxeIf5+53X0Wf/5L1g9CZKXUGprzOOeG8Rjp/\nB1bvWqVuxugsYLsAXojYxLJp12L8SwtUZkhH20fJR598jB5qiBKeE527d5pD\nRIrsS9Y93lZ82AHtNaq/mRHQv31nsb+nMx47vPYHuRLDTL+f1G+hNdZhqLtf\nnRJ3et/R1qnnzf5aDnyZz4awRMa7ZDRZHROnfN8+Px8Yx/BvFMFgPKady+rg\nTtDKceiEnrmL6WJCZKbof+xeaEHIakmpEDDorV3F8VpnWyRHyV70dzbFX+HG\nXZIcF3WwGCIaevwCpQzcP4/tnzcoKtLgfcQrbbSFjJpHDaYZa6g6CvdvkmCh\nIaeDFIOF8qxMj1X5cRIHylNHdp1FHAGEUAItBBmxXsVJyZQ5TEuK2gjSozKn\nr65G\r\n=8HA4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj+Jh8ilYZOZ/bNa9nnKXNPq2d8gnyAZzOwBMvlUWSdQIgU8JUvtb8Hvbo89RRp9L95FQxDYBPwwcIf/tPm0x60+Q="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.475.15971.0_1614907424819_0.467896866513555"},"_hasShrinkwrap":false},"2.13.1-canary.629.15970.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.629.15970.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.629.15970.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"46896e12be2b7d0b1df1627adadc81b304ba5788","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.629.15970.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LIoesODCLKBRXvxc87btx/HXZMEvlVoThtvHCx1zieWX3GbjE5iU029D05BuuvYs+vGVfiByJfT8sjn9Cw2Uhw==","shasum":"10f8b17af66c29037f4a436cfc7ffbcd039f3ff3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.629.15970.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYgpCRA9TVsSAnZWagAA7dcP/itkFv85EbwOFPKwiQpu\nvp0sEZYfmDfJvX1/WIM1ZMORu55iVsfhPxICpvWqpTyNFgDN4DN2zdoh8BJv\nIqfaRXfE1+dAX6KpLlzkF5tF6iMAxSg0C8IOpp5LwedqoGnvVohqyg2cBs+v\nmJdVbuIH4qIS9L+uindJlqox1TU5EH1q/ED8uvS/R3iv8vbhUXtgCxvhy7VC\nF2i1KCGtaNUh1S7rsBWtgrhlkDhBHWoA7lI1TpqtoIwOEeMgXdKgjPu7k1Ge\nUgSUFzetJaqBS6kM+Wy55IjGYt62J0+h8F0qQaxfmkJpmIloImyXnRG4cX3a\nf5DWOIs8AEKuaHNmsnc0KSEot4TTnsfkj1yXOh5u9vPJRGP0kk51eVOI/Vb5\nFeqcCUigMOpmsEE/Gf/cALmLxIGdVnWiBoS7Zw4Xu7AqMeVi06SQq/tzXwcP\n3ebfGui2Aehvw20RHQCJQqnrn3p8hJZOAkmWWMCGlbxMK29s3SENyha4muG6\nDH+MDrP53P6l5JZQx1cukhTQZ+CtCwOKsPo/wMQm49eBWSZcCBJxPGoo0lYN\nm0Axienby7+mxR2doTcwuxutxvf3MicZVGLZxiDNuprImeEf4wGOvq8AVeya\naj6cfbs2BVMn3XRMPn7eefJEE0OiJKsEXFDfBUFaYp437++uLnyJNP93kkyL\neZFS\r\n=YSQ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCez7bA6EiuDCmk6Y/yKWekDTt3mdZEGB6N61SmDb2UFAIhAMdlFjI6hhaRQMC0Lywpo2guK1A4hJCse9AU+tk/SrCL"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.629.15970.0_1614907432673_0.6815929408034631"},"_hasShrinkwrap":false},"2.13.1-canary.543.15972.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.543.15972.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.543.15972.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c4cdcc7dfd1caadf4242dbf6723bd7dce1c17a92","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.543.15972.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Wy8+61tPs2lthWO6A6SPbyq7ynrWAk50PBT+mKnGG6QnSkMiiPVo1lu0vhz5S1Y3gMBWszvSkT2lY1JNkmIxvQ==","shasum":"e2ffd480ca4532950ff9febb1e4e3c8e2c4d710d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.543.15972.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYhZCRA9TVsSAnZWagAA7m0QAIF/3kDpYzzoEYHCJ1HG\neGl/MCsTDNzhe10qGBPZ/dQgcpKtfFfRTwnWKx+B+qNKom19k59o1cjobAI/\n81n48pAQKzt4+wqYMiH5KrxRUGU6DoncO7UjdhTgdCyuhW2t4nGRXL3Io11O\njtjhPwek+HceP9PwsiUK4mR4YBteOnSYK3e8Rs/h/CInmDrImQQzHjsEG7ad\nP3uxYvm3qal74lbaS3oG+vSk3ZhCYNLd33RXInwzE4plhoCNxpGrqazWg82L\njxxBleJKgZU3FQiLzs6dxNQ5+XsJFzSabiVzePhhCDiWqA6ffaFTUfCYYGHn\n0YaHep+j2MOVfJO2ScNdV8Yfo3LXN72LCwPK2jLWoUX3smZ2sJl7hIVlmHTy\nbkpwAUQpQ8VjAZ/qMGTxvYmdmIzwiiSQLlIiE0Rb05ntvv96X1hB1Cl2ITh5\npErfJwDNWC+7SXj8oiVubw4R9Ja83lcbPev1GSnPeOZbMoB2sZcd1UBTE0sH\n0Yl71N1I3qufbDDkHCPIy5ycD59fOFrERQMAqakd/n/WsZ481b430lRdRibw\nIWceUK/+lu/q21gszBQEuHiFvU9+mcIZNNNs1E0+wMRBdpdrP1xBvqX0m7f2\n4Hh7S4WGYPvTlu2BhALBOmfxpcpa+g0RYk1ijoDO1bDkdlFIZ4h0Lnj1IRXD\n9wHq\r\n=SIEy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt5Ka6i+EnNiqLlc/N+jNXKTgeCe/GxLd6hkRIcmleLQIgKZEfr1lngfVJgvNKZFvnE73RQU9aWvNZSMnbgfkbSYo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.543.15972.0_1614907480710_0.13761696848183758"},"_hasShrinkwrap":false},"2.13.1-canary.587.15973.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.587.15973.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.587.15973.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f758ddbc47a0215e61747c953c42515851c8580e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.587.15973.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MbiRdfYEF98Wm4pO9iYycDuxBZcYAocIX1fpLZ8x9U2RvAv1+mhwsYAC5uKJ4WpBTlVDtdB/fZdr5mh90rdquw==","shasum":"2c9fdb1f266b4a6e172bc24150caf6bd7034aa6f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.587.15973.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYhsCRA9TVsSAnZWagAA7GsQAJP+n9IwpIUWDNqlLqrS\nC+2X//Cd3wUxWMRTq9FJ+bj4TJMZ/r8bmxOhQ297ImUsgcOud7DoD4kY9Kr4\njpbw3PbSpBA6O9VcYNuyXu8no0Fw3UOGD0WD06LIHG74/5PBsmiOXilStZKs\n9n3RKk7RJswuBudP1+KA8uERi5DaD/2rcs+AvZw9PsACj+ROL3gD14UKZjMy\nAs7RPj7yBAAXAGaH/v302Jy0oIIRkdjkGgY4R8AHEQGg6Tx/ur7sxtgQMPxn\nX1yRCJDAzv8qh6eW3/NYlRqhAHrDql7mUYRndiYbcBsyjILckVjzDFpZ/y3v\nXDwDRLsEnVBV7qUb0uj/SQnqQvNusk13MHG9DANbZj5CnA9aC3q2+j2t3osL\nq3GGRgCz0CF/xhgzk1S2KKHqrkdg1YW2laipDSmSa8lC4axK13VstzEUmjId\np8jdDuWqigpGN5M6VhVh0nNxopdjAqyF1C+46Pv/tV0DetaRyaDjEZReuCYB\n1aqDmYP3hNUUDqaJtXKG1oFkVFCrcB0mqq59XUPpulIlYicWxZ1I+KaWvlqE\nzapGMOjBjKKqpblOQ/qGGlJ1F/Hg4KEkcQ1brIjKNWYNcFN79XvygNzcjneE\nylAnhA2wlQOQ/Ii5lCvfL6sWrM7lBbcoEJcaejR/t/QdJGzcsaJIOOp3/BLA\n7xg6\r\n=AivL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRR8jVs65skugWybviUfYsfxFh5c28NCUjS9nyvmufpwIhAKA4DtzTDDUneic6d8X9F836P/4Db8hUCxaDfEmLCQrw"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.587.15973.0_1614907500395_0.2327669866342259"},"_hasShrinkwrap":false},"2.13.1-canary.615.15974.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.615.15974.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.615.15974.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1676d2834e140de89c8d1ca5139c57e0e2cbe7d0","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.615.15974.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FQxEq8cg/RJ8IZgVDCmnc6IiW+NNIbWRsSQAEjbCdxqUbNJ1nKWhzef1j75E1V4dW80Xd+/NHaOrlL+kRQQIsQ==","shasum":"356447e4dbeb3a1500d4e8cf98c60c9720786540","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.615.15974.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYiKCRA9TVsSAnZWagAANaEP/jVFe7LlwwIhUPlZHCmz\nNQfmivqjf1aXrx5U92WelI4TuiSP0MWGbccY1XjKRea8x0q9VDPLpVtqCHaT\naKK/niAFne6VrCppdLQLWIAK/Kdm6MT4m1SHF++LOMUOKvwFWrHkZ2IBnUjf\n0tv13t9hGDnFNgm3aa67eB66L6q1FxC/kyfVCIqq4tGl9NbmgBrwpDfIcoJe\nK1hjIj++E/5PIYng8dcO00FPVEv7OmIk/J8D6uz8k7nv+s1wo4TJxHthpfdT\nfNnwzm3YWY9EoFyz6Ecxj7tnMsdX02l9BzkBFvS0OKmIFOZQu079Goq3Fx+f\nE0fOXBiGsXQKVTZcWTteH0tD5oGp//Yrx39o1PEXDGMqFtz9fzSPeSxLwbRg\nWKqwFex8F+bJ9Y3R/Ga8yzVDb4rilDG/DffrdR3fCOKaJkTIOEZgoBsPAdl9\nx4fqMJL4Fj6/dIjLVaT2upSl/8vaDtcnZYm7p9j03WtOordRHd8B1zxOhfTT\nlKaoy0hqBMpUQCofxDkXOGLVc7qDsn4San6bJOrEocSqdSpYMvaF0vPC3DlH\nveQ9oyemEktNvsp27/kHiQskRvPLhfBHq4fYcRAPRpzS53ABfEZsw5MUpC5U\nKPHPML13x5Y9N8ibJqL4t6snGFfbgFwolvPNqHsBHMHOXm8K/fVXEdLuTHcq\nmgln\r\n=OZ6P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrb3UjXPZPnCHgOWlHXonzH7Dx9Tv3+pIJxobao82SqQIgUOoHuvQj/h9wPAswRYIDaHCPz37xWVqk9Wrf0nHRbzU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.615.15974.0_1614907529723_0.26952179674236443"},"_hasShrinkwrap":false},"2.13.1-canary.632.15975.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.632.15975.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.632.15975.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"13728e3091b371400f2d027047d435aca148395e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.632.15975.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WntGrSAKXCL1yOu9LHTZDINXCfLMwiNYAhLNznpytAdchsVIHFazZaQsiIDYCxy31Qfyui3i5YMnpkDmUGUBUQ==","shasum":"7e14df92577160ef1c6a2510e95cce60afd9e5ac","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.632.15975.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYipCRA9TVsSAnZWagAAIKkQAIgGTFNjV9zGC2xRjAIc\najufYnsH79ZT1FtHQ8jquP066VRkUiJd+76q+9arQZ8TfOjLgi+hrkUBXbDw\nN6HPCib42xr+g55BPb4wHaXdNJssvNPFJbmGZrlfUVqRZXKRMVSPqDTFabdd\nTPMNhSoDo8cCpGfKEbM7uFBjD3tIkdvzdavi8RnkfSVQnYgdW6EU2IuPTO4H\nj92LKshe4OkyJ0Cu4sbQlHbHTlbB5WiwBD+DkS0/SlwAf38Jx4UpAZgAd+eL\n4Z6JjVAeOLZOmK2BkZHJM93raSoxe5l0XawNsKJOifSjpvqMoKEtAklxZdcx\n2xSdk6PjGwSI9GDrgC+VtASo5KaHpcuhgjUNiYM3Act8vpCdBI5bwXqH5QrY\nWvZbjPnKqm77kasyLnzpxxJxhimXjhLXbEdeHDx/tdBqSlfQaZoq069wTYbF\nG87YhtTRcs5E/H+cd5P8gxoKqHuVqSLxkPlx/yy8sGHx72wC0n7VXEyd8rXz\nQ0FiEHu6+vcdcBB3RIVPEDEhhCtfaf03iiNaQbv9r3Kht2S+bU+FZDYmqN+A\nFAoeeQtH4AHTK0/RXHPk4CHTp4/2G4g51U1MyfqRBMcX7s+KIq4MngNm/7LI\n8xmoraQnWbv3EYi1BehE9M2zptMC/hA+Sj3AFeL/Dkp5/9qw3qdEVzWinZwP\nIDRg\r\n=4vQW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzvFquvLLGUOldigY6bbsxFejlylGjv2CdqbVwGBqOIAiAqHbLA/30IN7HwUzHRKzeG5IaPhwWZE1BK6+KdMs6e2g=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.632.15975.0_1614907561265_0.1542115608366501"},"_hasShrinkwrap":false},"2.13.1-canary.480.15976.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.480.15976.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.480.15976.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8f52fa4d44b52b2bdefe401717638d297a9580d1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.480.15976.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oeanuQ9KNjRSXTGNDj4omXzPXlpguXNWJejqLIHw5Olv14SQcnGEqMZo2uXywGMud1GmLb4kk9CWMZhRM3qG/A==","shasum":"bfdf938fb623a218442a51cd29380a63ef9ef265","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.480.15976.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYjqCRA9TVsSAnZWagAAkzAP/AqlkQ7Gd57vGlh4AACy\nDoNhr8N9D0tfLLdSxomeh16Ar2PBiFLuThr5BSeO/cGqm3irV79cskE+KghW\nwSlY4NQabpXntnBZt/1MC1PSoKDqZqUz1YDchQdYxJfBRj0HC3yIuATnI3Oy\n8h6XvXlCGXOxWYahF3s0qgQ0pTkVlwek8YoWmtDODm69rawZoqBwmyGoBK5m\nIdaJnbCxn2B9I7p6bRg+8RHy/tIR2f0lt6oXr0K5ehqOM19dVrLCa3GRbasS\n5KUwxWivsIR5TguWq7YGqjwdiaZYs3qvFGjwVQSaz5hXn/Y3ECnYjYoextFv\nQECbCtO8RLgwYk6YTud01lcfpVpYIn++7UHKPHUBFVLEvBUjli25rxh5V3NR\nNU4HjnXfhtUAXDOT9XyFUTCiQiW6NnQVKhGQM3Jam9XqPjcY4cI1lrFisK6I\nfBBpDb6wlOFiGONdKjP/yKhYu73QOBcIoPcPG9/YqpvQpqHcLKVJbCtV2so2\nPcNzOrwvCQFodZJwFvQN6LZu4n+RNXpdgqgDdTVs1wjnaMWGlYlBJun6apsN\nf6XvOUi6TmiLwxN2wcCKgVxNB/1T1OZ3TY4M80zlbZ9EZUSxbas58S7w59G8\nh+u4nHU2NfM1JuimuIn43ZHAHljQk1x3nl7iGrsqSNPBBguJFZo/krQgwNUu\nsN1q\r\n=mN43\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICE/E6jjqEzOmZH//Vkk0xOS95ifuS5RPvPr6SBxKtS5AiARO+L1vYRlLSmDElMGUyeTE8a8OnkBdYNz64tdrYKfBg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.480.15976.0_1614907626128_0.8339861356503122"},"_hasShrinkwrap":false},"2.13.1-canary.542.15978.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.542.15978.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.542.15978.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f6eb859c6bf476286939078efb64104c0048409b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.542.15978.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-iaksSP0PwsNWFQE1uMgtVFkQ6+f69CqEfMI9bX8auvjMC3wmgcIWbU2piq7/LiCps9st4/wox5b8jC4vdgFK+g==","shasum":"7d1cee29403b9f7fec65ea20340b05f3e975fb55","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.542.15978.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYkbCRA9TVsSAnZWagAAnsYP/iX7K+UXo0UWOqcXxQHB\ni2ieB7lH90IfyTh6JnkIRXqyyVuJuucBH8dMp3Ok6o6SkYpudAC8vI916Dp6\nLQT6cgsIQT3k76UYFH7/Ykz+mzApws4AxjuBlahmIJ5MyPKQK+ls18nKCnXZ\n8GLFXR8TM7Cak+TLzlbqnfQjQl1C3UMucCVAZE5mIS+KIA9h6Mms2UN4LPHD\nubmkRIsAoEZK32DlOR/q5oVo09FDNgkcmEv2cbLVBYatBo2tcxkEZVhSepSs\n8qWRThaWNKof23HMCOBpPpwlf+v8mvBsmDw5SxpsSfb9tlllRMgVdQWqZHYY\nTIg4nM9LN5qVXUw49cjLA3jmrZq8C/7gX4vItJI3Y8qAEUY0i0rfFCezlzc6\ns1JGZnRKTGyxu2egsOcZgLkFfXEObXMfbpsGSCN78+zE3Kx/C8LksIVxd8+a\nBcyAk3KoyM7n71ZSEP624CV5P1FHGF0Dk/wPVOixG3PJINsnwv+I105HMypF\no3xbo+zYlG9t77asA3HuADUY4odCjSisC3APQSeht8JRiZUuF1KJSUCK5CuK\n71RVyIupIm2Rr8OpC09sC60jrBaBSsCx1wXSMhoje6bXhNQwG1SWLlKOMzUe\n8AVUX+2dCOhdbARis3bDPX+k2h+5CCfxtwWmuiNEDFxBc76RYG+R4sD0nPwP\nvMd/\r\n=7MHJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCySakNugVkcQu+/nLUnmiOT4FVKjdxfrWqEBNxO6PSggIgHfZANtovurEFxnS6XzS+PljKcGeeoiTQzFCRoClaxpE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.542.15978.0_1614907674862_0.26248157669089545"},"_hasShrinkwrap":false},"2.13.1-canary.578.15979.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.578.15979.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.578.15979.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f87e42b2c273a6097190c42308766d07c167e9e1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.578.15979.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Hev+olYRCii9/nnjozZUMR45tUFomhStSiS/nNVbGXFTld2PhjFAeXlksV84dbXwHBObefeOf+STyVGox5vwpg==","shasum":"4a1b76192d7ee1caf056cae55d4488a98c340270","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.578.15979.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYkwCRA9TVsSAnZWagAA3ZsP/jx6KYL7RYUKl+cOKpWH\nUVcNeK66L/eRB/adipZt5PPrNwouQrkJm21RS1b2BWPFNCrQFE0mO+Ow9FOC\n6IJ6gNf0D0u+L6fdm+plrEkp82BKdyN8g7dKigBd50rz44r8ZwdAQ00UOD+v\nBxcbyb08MLpI0y/wTOhCEGW3mXZXQFa+yftTkXGzHZ+nFGXuvceZWjVdMEpa\nXXvjT3Sbsm737VC3MkOO/lLk67okaG6ITgYdp0noow4QS9DryWr4wED/8Nmx\ntOkyKLUfe1Jz1SfsrhM21GL4RPswCmG+5jQV/rfCO1Qf8/nMopmIB0KkFh+K\n/zHncIKP/euoHSS1MCKCFu9KIa9oXbPlBIGS4jjxcH1ifC9oAe2GkPJUi6Cm\npB5KAMd0N4z77Sr8OT11wvdEyO7/Mm9Br0N9MeMBrRdy6CUN64e8QhxpjMpg\nNRgjs2x0Ful10Gsd3LoDklE5lT0XpoMRm2u9cNMDZd0wutxfM7BiL3MMexyB\npzZE7/CHN7z3NF33b5GSwUHDE/VMmvfGDV7onqVBpa4JueqZ5CTFaldAhJl+\ntME1zNLjdjUdeiHw0ovj/WO/eRdTWYXZWT5aHVvqIQ/DwQw9ZXSQX9doXzIE\nst5xLvPE2Jwzz4cS8EKwRihYjoDuXsqhRZXmWU1Mh6xbFn3lgWwtBNybCidm\nR7i/\r\n=Pybv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCThuQFRPkMLmDq2cwne+b0bXF/1U71n3vE4wH0ytXFKQIgfuhMUNOoEsIpK96dfOyIFdt8CcjlwC+gsoXRceA96Nw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.578.15979.0_1614907695569_0.48015440741763493"},"_hasShrinkwrap":false},"2.13.1-canary.606.15980.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.606.15980.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.606.15980.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"604a3b7b8a1bf60ee2dead143b863559eb7baf22","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.606.15980.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8NY0HOlMd03QsyWkMlJ4c5SNibsyWrGJHr+3P2iy5f+q3ZPXijxnqgSy7lY7hELmzr912ixPI76p+2AfpDx68w==","shasum":"88d49e6517424f2e32a14968432c2a6adcf67451","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.606.15980.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYk9CRA9TVsSAnZWagAAMLIQAKPmZ/u4j3qO1w3nVA1u\npDTE9zv18jCJtIWl0XWMYqpqHkB2d1q3Z4hr3qIH9i939iy/F/wkRjV5Ft2N\nETZ0tsH3cnd33hCEfesiV5bgN49+uhrBu0xvQK96yfSyNYaPb/8F1IOpItsp\nhGCrSkZuaNF7/mVWQJ7/RD4nLL23vrXyydt8eq9n3uzBtBYnAl8pJatuGy0n\nj08RBdLSDSndJjVqpc4TAON/1e7H6NdYjQ7opVARkELApqDlMuO1GwDQCfWM\n/8WR3XYJ4QIZuY3dUOFHqszG3SNz36CUgUepvZZmb516+rP/mPEDQxO/S9eR\nIW25q3LFA0I+NYPhX+x939IGZhKqcr9ScY3w9bOIUpNj76/mBMfzAk+w3d3s\ndprBwO71N3/Xxc30cl8qahEUfNtZxd0dZ1V7UDVjqBISEAj9/ccp/aiUJZUK\nccn6YbXkxgrJ7KJ/4o5hKinubGDxP252sdKF5SVHxUOKidlTD7kJCK/T9M/2\n+3IK0RSJiqd+K4d+1Sivb4x4MMAmvgmSVD2Szq6dGX7tcn5Lc70vi5Ls3Gnm\nyb0GW8gAls7csGqwJ1QolE2Bl47ZLKxTYBgbqve++WB2ck4RNgDNtSYMnFrV\nSW76pYaq870Krn70RGSuuwD1RUDkrThjTwUvn7bIBk83aQlXn2IobKqsjui5\nmUAh\r\n=G0ga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsHVY4PkGZVWGH0LVlF12TsaSeU0UEVCRrj3taVkmXVAiEApNDXunOEAvQaxWrAMXz8W1sEDd1zHmwQi2n17HFEVb8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.606.15980.0_1614907705373_0.2909678769592636"},"_hasShrinkwrap":false},"2.13.1-canary.493.15981.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.493.15981.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.493.15981.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2d3a762b599a228b9974a06d49cb0e7ecf9df164","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.493.15981.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-M2+cy5QoQ7ztxMUDssPloYf65clg3RAIOnI89nzkTkJKILewdnHSdd8uusFZTOVU3Edt/h7BEdVK1yLgKiWmjQ==","shasum":"c1133f550a44179eae3f9b6f70150eb5bc454140","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.493.15981.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYl7CRA9TVsSAnZWagAAHucP/jzGlPmQb7KT74cs59Ij\nrA861ycBXS1TStOQnutogKDtTTMH4+GQ9d0mX3ROj8i1Uq9xLx5VLPzZwxAr\nTV8/z60G50EnoguhrnRp/P3q6WbKfmKU9wyJWNOh7r6fAf2s3kraC4KyuPqB\no98WZyIE9ObRfiKCgMIbuhhRVe01bYnXnbZ9x0c9KQeRDyIGqOkQcraZn/oT\nW6NPMYVyUE2ikymCVst1zu07//I/UsM5hxpQm5vUrkHfpNhXhvv5b3xDV8ni\niJlpaGT6fUIWkj/kG9iYKoxnSaQSIyE2wrt5z5+rAWJeo12y10528QQEYOK2\ndLXlP8+pBrIEFBIQZcbaIPmA+uUfE0LPZCBBppfY4/BjfV2ph4pALPr6WtuO\nC9yQrDlVegXNiDLHi4bGUeHLyOeziHxQ+PGl3bVSG1Zq3hWU25hLzneVQh/X\nfvnRpfenLSs5l3N+L3HXjWI0RpYPG09DP2izaiWsL6qcsWhIDaWJGU1fYlj1\nGyirGLKJzp7kQwRxZWXJr+Sh3RwqR4fiEWQ9F4tKczOiiJFJl9NPCJW6LX6g\nUt3c9eLmd21x9H/H4mQkt6ln0ln5f5/TGgF+RPYhX5T1FB9OXkTcXQqiUA9j\nHVnFSPR5s/u+b0PzdM3jj7eD6IoltGM+aC1hiDbkvpvJ3op2z21FQLtqSFmf\nF/8T\r\n=efVF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1IBkGuU00d50P+r3dET0Ad9j93kmMy2/97zEMDc0MkQIhALpor8QRBmL32nQc9fjMEAT6huacIlCPLdX1TBzOo42B"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.493.15981.0_1614907770637_0.537401495267495"},"_hasShrinkwrap":false},"2.13.1-canary.508.15983.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.508.15983.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.508.15983.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4ad781ba0f0299446958ba78bebe45c93b90c619","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.508.15983.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XkcKVZbT2B871LuZx6ZNcKYVYaaUhxWDjnJ636UkR/YOR1GFNl3z7umCknJiTKtPubhvOnZHsbRbYdXSWX8V4Q==","shasum":"54eafe0d18d1fb5dada83d208e3990ce8a843b97","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.508.15983.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYmoCRA9TVsSAnZWagAA5ooP/jGVPzEJbu46YOSsYWXo\nA9WWJMqVhzitePkbhoZiIBDWO4kKRmCibrlILYk6OtbdUmhFQucRtnDEC9LF\nFiMT0GICzRnCN6CVohpS730JW4ggExfJt6GRqhN9u7hE+HfH3L/IscCIudak\nZk/wiQA028jyE0cOgMA5TjJx0N8VTzIf1W/ZNN+/haqZNXKeaa2q9SRqjAQS\nqRCARc2OPprwU+5FsBNLaep8d/PAMWEGY/AIaPfjlOLrbguLnauLytr2XXXY\nXMCBM1uABU1iJdpvzvT7NdiambHgC9eyczUV5bEj58r89FgYZCpMyQA82wuK\nyAbApPQ/P1cCkgg7XKOFHr1tBmW9nN5Vld0KnHFFSOZcBrORZoAKdXsHpq1k\nPn3bNruTReRemfFgDV1OTPGF2YWurOAJ1V7YXd/DAHi2FrRE7PmVF3+/iYOW\ntIsKr7Nti3wey9VJN13mYlmq4A1jvqI4Qlo+D1xBvLonsBlEnaQc8JpnnU6/\n8rlcojemHxd2NilLLbkjZnzVXuFr5PyNLht7V0sEv36DwQfpE6LxwCwoSs5n\nLi7Kia5XLSo/QPUgF7FMSHM4v2wOa63rRDbztn9OUN382BFFY1qPvxItwVAA\n0+tZDfLNvj8yZFka9DX51ufSEBKGZQKtJwMJgrETbFIdNseSa0fRyCWeXxOY\nNIKg\r\n=kldg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0rjEUIiG4zJosA4Tet+EL5GioHoYvRp6czM9Aeev3GQIhAK9n8Z9F8/H+tLpkJhQfBSPrRbS5gXamJM45opB7JgFQ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.508.15983.0_1614907816246_0.2833026344220708"},"_hasShrinkwrap":false},"2.13.1-canary.599.15984.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.599.15984.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.599.15984.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ff5dd6735eaaa2b2d8cec97560e633c8ade2517d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.599.15984.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vF9V+4JbIS80CJRFQJVWvM0YrMzU2prXKL4AGEoUm7AnMXKJlhLnxohKp8jx5h8jxAV3iEtSIK/b6mUrJnFFZA==","shasum":"6061bb5a7339555dd3d06e1ab819c7e2b8f6c3b2","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.599.15984.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYnFCRA9TVsSAnZWagAAToMP/0Kp+uvBb+0lbvp7RVpC\n3wncr8e+KqWMCXBsQBOYWBV2+lYLMRr3COGg2wfA8lvMhqXp87+OlSix3kAZ\nLYRSqiN/8XeYfYApssZ0AXtKkt72hhP3BGoBhBkXH4EsFmQqC/WIaCHp+j6P\nQwb+uAWXPOR/e8GSvkYxwyOOVDTysCK9ZhQXrvY2+lW740+majV/pVM7u9YN\n3zPcTMzKQJpEzCNo8vszHMNhbjoo+rAuBhVTzDX4Otp9kFycebqL1OayQNLn\n8KRiYODW4znj/rNlEJjHKlJ5vf1Ad9uotTfqN/YrKKlUlwT++6OztsROgd92\noterW/vwhkbGBwiFEqkBxpUv3TlgYXcm4isITLlGVRUJmShaNrFGvL3wwhEh\nbhJPF0tPhcu+BsohbIkjYdXOWwfrU3AtjPasDgsWwZeliv4tGdkJyWlHXz0n\nLK+KuxRic1boyR30ucceCI/+eFsPS5p2xbLIRl0vZOKZTRDm1Mj++gKbqpc1\nVcLZbeZ5Ix1qbSJ0VrT6cnHUxgxOACjCb/jyU6swTyS/0dviNlNoFUKMku9u\na+6dkjwFlwt6pp48HxqWRWXuIsnzVCMDcgrmmA3hZJcxwJAYh/jldVT5bHvk\nvBjIPQ83U+kVCn9IXFhcITrm5tNgCUkHy22LH9HTeUECMiopSk05rhcF5CrJ\niT0C\r\n=wM/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErXmGUTNNJkeFshsv2KcdK2tUo3cfgrbl1lVWW9beSqAiAVv6ANN2cM89yxba0mFZr6q89mY/otsWZmnNAF0ARDig=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.599.15984.0_1614907844734_0.5102731959174183"},"_hasShrinkwrap":false},"2.13.1-canary.529.15986.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.529.15986.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.529.15986.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"85256b02fd7d4a12598cf163362c1295b52c54c2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.529.15986.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pHE+wmZ//Zge0qKuZ0Ki+OFmJl6EhVJ6B5J2mAovqFhoJ9Tc/9bwVzq+FNwN2ZC7vVBdqGB0j8S8D1xcTl1O0g==","shasum":"4064d08b6c8ca14ff83d07c1e1aa3f5961c77e59","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.529.15986.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYncCRA9TVsSAnZWagAAfScP/A9PUl4NTZLh9WE7Cz09\nE0mLlolqwruTueK04uwaD3YIjDIVf+zpS8iQas3Fa33pxWDmJ0tSNXawoMCt\nHOwe6q3Ut98Bucy+j2ZZJgZ3O2IbJy7+cLl57wtYTEbJQUu23zRzFV31xVRe\nBU4h8qw+lHRBP4b9twnWly1ISqSf7WskFwTyfAdpadf4Q5PJIaZ8XBD9xggn\nWj8oK862YWxHfOVKPpp58crHGntvT8PjRc53jcKXJ2QepNcx34nqVPOgpOY3\n2E+AY1D4u/Y5eUAgeaxkdqfg+c/0/CTQr0Uy0RYf6NHACtfrZ9LjmVf4ELo1\nHED3rkllRRRhzHqdqsC6cMixn0sTYq0K1d+cmaU1479WyRmpwfnqEQF3pxAd\n78yWwjtF9WeMFtxWnvWdtSiQ9jfFoVbjcIfJWeG8N2+9J2mNCFleyNI2AhIv\nA/riYFAFDtVF1Y7eTa31tR3nHeHXR58CrXVwNA3uG4tlM7ZHrfwhkNQOTZ/R\nzgQxmtz7vpx4AwSVOUXEsOVO6J0umatZyjdfrcqr7l+xpdTMGFP+tXq0HW2x\nBdRTH2NylaOe/fKthAMhVss5MSb9WjUqBU+GeBuB8+gdNvXnw5wykXhth96B\nQvsyz0uvXpk9beIQJkIcEFxlfyVdAS7rMpREKAQ0OHI8aZ8A0PWOcCbOFodg\n3H2p\r\n=kdUB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICD0cV0aEsBIzf03wxjlvA+mgDzTjsz6nbmJtr+3pNNcAiEApRFf79vYaT78Ktf77EFDg5hjVKnvWhWRbXoTP7TSrRU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.529.15986.0_1614907867555_0.5124370279354535"},"_hasShrinkwrap":false},"2.13.1-canary.550.15988.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.550.15988.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.550.15988.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"19ec6fb782e7c4a4a883438c1933044d4573d977","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.550.15988.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SMj3wXvVZPq9ZIdIdN3D/ILV0iOJ4sHqWcPULVG2IqyVjUNpMGO1WXxv87FsFf92sHdcCa54YzpEfUk5I3udbA==","shasum":"0eb32cb2eb59a74e74ac397faf161c0cb3164cbc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.550.15988.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYopCRA9TVsSAnZWagAAP9oP/1T2luOErV+XRTeFHUO7\nDldzP7X1bhg4YmmgJO7s+6ZTH1l4q+zfN/9sASg8XYKEk+xIyACZTAbKqKoT\ngEqb/7A8MhxUcURM4oqJPs5lCuw8CnzbjW2CdWnc+3GZobH4oQuygj0Vz3n3\ndo5TjlH/WlXM3XcI91FE0smawFs1BbDxr6lB97lmehNqGWGAzncKDHtgcob+\nmzOX/kLeeLTaOuSYEqBQMsiziaQmQsKTLPyg5OUs6NSx5oqlF0TQyrerC9uX\ndDByp4xXCj8+TI+/xMqKUuwE56r2JOJYwtbnMwtDXlIMol6Jw4GXQsASdg1C\n4M2vTkrmOf9yhvOw2wl6+5X+ubyBIkoi95We4638DmzpW32Gmp8VZDpTfTw8\nQRbW7qUElTcOkA+6x/hwFVBRYz7I3qNPv9lJ7mBbtJHJ8lDGhy9HpyjO+Fgh\nNIDXcao6EzfNMyDYqbJ7eC7CTbfOiNMFGYP2fK6NXbOas6UzjPfRrmUDT/wM\nug2+/nnUO37Ij95gSdf8ln8MEiqmEFp8BZEBQemr74PkJsMXy58+4SLKT3AA\nwS9hL0ytjOnlMDjE7FhnhSNS/Ib8AItYAuMmNZYZwLpx3M+9vxV0gK7pUBqa\nZVYO4rvIQ6zRIyKAhUvzTZS6eD+m2wEJ9ukxSJr/xH1XCTNEOhS7Jq2SumO9\nDiln\r\n=2LPH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKkFj54xo6piL3AIN4gYq7hTEI+QsowBfM7VjrtZdPGAiEAz3Hmz+zio5jlmRm9KyAs79fthPauyfrrFYmMSmjKkdM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.550.15988.0_1614907945331_0.7690716956250707"},"_hasShrinkwrap":false},"2.13.1-canary.605.15987.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.605.15987.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.605.15987.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9f4f34712e8d0f83664bea7b4fe33d1d6efbe7bd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.605.15987.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JgT4DmC7nxMRXP0ysITsyWFoh6T/wzEolQYeHWq25YLG/YgaLbWZNBq0NyxoGHptT8Oca4y4xHHX0DcYHLgw0g==","shasum":"8b2468f1e48305621e980c8b1a19ff374e93403e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.605.15987.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYo0CRA9TVsSAnZWagAAz9sP/3MiOBe8QdEVZi+LD4RF\nkWBB+wZBxVtNplx0XwanTF/V6hSTEOYZ7/k3lYDAqSJEJtPKJNyV+uzVZqG1\n/qOxrcSLJlpk5Le+3/gHn5MKugF0bxBfHC7mATv3o00I9uWOB7gGyNyvms+1\ndFhxei+PomzwuQMxHE2nsTnaoPqmRj7C+xP/W+90PpbMxaZ4rkTUjZr6MedK\ng14BltqICKM+wKEgayOZPKD9vcx+qDhs5QqOQb61UZGVGoG1jacYQRHOEWmi\nXCo6azqhat4xKsDy6rgNuBpR0wwfA2b00e1rG3IWaO96+f2RY2xhfz3Zpf+y\nZlsGXoNKCa9j0OfVFC3HNiUopSAeURxslofmxURmt7ghKw1DFMBvFBb9frXY\ngcx/8Z2Xcp7BpP4XQfROa9aTsrZSd+Xr/g06B7tFZ8RMwHfwGGTjcpBYtiJm\nIBsslo94w4RMTAZ3Z6eFCBbHpGBKnZOao8TJVv7MwJwGN9FuINgqrtU4AbF0\ncnoNZL6zpgslpOsaiAUjaRPf/K/SFbb6GlyS9b9jhNCUtU6dHEzN8JLMwDd0\nD2jSEr6953YgFYOHu/WS38P7XrFzgxhRZ3LkB3bYVhloHX5J5zRhWTYwK6zS\ngVyxTTCvULsGu4HAQiqhcPRgmk/BIziDhV8peFl4bZooK5kneNJjIWNnlJZ5\nqDXM\r\n=jqbq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmxgpndwXAnB8SDI+Pb9lVBg10fP4Y54AhTbfoPw1YJAiAcw3X+atRQiZs9sCHPl90mHjtyJcT3P7pSa9yEoPcMKg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.605.15987.0_1614907955821_0.3626139692575332"},"_hasShrinkwrap":false},"2.13.1-canary.601.15989.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.601.15989.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.601.15989.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a52693603b97c7debbef064cbe9df281abfb2da0","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.601.15989.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LGfQ288Q33FD2S19UvB686EF7nezS9MVVlPFvFBY3y4s1w32h8ga3z0zs4dcdiAdGhO9CiwT5/rY2RqEbP35xQ==","shasum":"353dbaec6a9d2b451e6a8317e052d6efc0a0b964","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.601.15989.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYpNCRA9TVsSAnZWagAAw60P/2YKN+cdZwG8QKBOJOHJ\nJZOTGEr9VxAV7SJKnLBYTixMy9CHtPxlxfEGt318ugnFLSQHC4oChSBnndA+\nn0qbYIiCxwNAFcGnP/3K1L1Dwg3q8YXgzb6+Skl04T9v8anOaxttxIedtnaF\nkVIxoewtQgBUNuULOYkuVRiMWxug3zsrRnAIi/XrzZbo5s9NbLwnWBYJJJef\nGq7bWTgxqEIBeTWZAV02rqGVOnjayUGxinrskrpE0lu6WS/2FjGqXUDlVqS/\nJANGqDMzeJF0Eqv8vcCCm3rwp93iehK7cQX0CaFFgYifd/2Db3FpX12GYqJq\nHOUCXrYGuZvh8qsHGwLGYZw5kvbFcAJ+wT/OIooGu+5aEGIsDDCOrk14arX+\nvMKVE0zc8eRx2KJ2+dOLG9r8rzvY9k3n+9Zmm2rMQFljSgzub6C53PS75AJk\nQ/AUHHBPptBnx4l9Kb+VsbgHIbUsH/XH0Woo9gBKIb/5pxLX1U+8KW9DI0d3\nAJNSbiEWPHC6UdeM0QnDrJHgRjx8Eq7ECQZ0f4I/UWGBmsIeZ/knBLzakL7m\n9azjwxT++J69pW5DSPiizA4nHjFW61LqvWDgCDfvKmivJ+uuVZVzvYUQ1Kup\nxW4bi1u3kXbwZJfeUXoGhlO61hXLqehW+CZh/2u5+G/ThZpZn4Uj7XqC9RWW\n6yOx\r\n=LW2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfsmWGn7W/YpkkmzFGAgvJbur7NPh0bRBfNsOLeY5/JgIhAI3Cn/hs9imzAiZW1GCPwl1TaguVYox0npmVj6syE0HS"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.601.15989.0_1614907981307_0.5554132717423788"},"_hasShrinkwrap":false},"2.13.1-canary.488.15990.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.488.15990.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.488.15990.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ce27a62b18deb533daa329f4efa0fd85164d1c35","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.488.15990.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UjKGb8vdp4qpX9Uo75KzRX/8NgaqbyXoXI9LsAtgL8WAka92NJN0wkUGjCyiP77fVwvbsH+ZVXY1VEItWla51w==","shasum":"e776f80aa362dfbf06704af7d91371e84cead063","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.488.15990.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYpgCRA9TVsSAnZWagAAynoP/jYlYosr9712Me0MjGqq\nxta/BRRMWvcu6DFPXbMqC8FAFWeaBsBpmo/xmQos23hPG/13TrpG6lbcOQD9\nV/1H3O82D7PtJGRj3dFaBzVBrK8BCKNwRcQOdkW0gCGc63vEplWzIweaPS6h\nJGL6q2jNO7+jamkrfFV3YYPrWhdNc3U+netAfOI2BMVP5HtZoER+LrA1uB/c\nA4pSWVaAiE/VnZjYrR7vC5xoZNKz+F+Atm0zTwgGAAYadbzK/6QselL2z3hM\n2pHUb1qp2d9wNh6iuL15KaHXBJby2UgcCTffggykibeM+zUBPMoqbZd3/I5G\nhHvh+HN3z0CKpPULQwZgYrtKtLwoa1Lz3bHkMGf/Bd/pw5dmfkQnrcflXbDA\nY3TMIFnAfCzCeda7xUJAaXdxtoFPqVOCbVM5AirhAVFoI6jpMWyV0GVZ3ZqD\nIbjSy7Qmh3TX/lzLgFO5bvvR7+9k6B6Q7ot4wYR6k21lsdPbboMnpsOg4Tgx\na1Pwlyr9Hl5qb5GTxtYXBn4DHVQEW2fatfQLmJo1b9f3W5amg0RhT2Kdmn5t\n3bftJuyfYfxG1h8Fk1r2QJmn2CVzRJVaM7ZxHEVKQXuhfKvfuPUR4OR7LeaJ\nzktzr+PqbceK+KEZGvGfgJdtDz1L9Blh4bzQziOqcHuTBgpeyyhW0Jei13ls\ngrQE\r\n=8Dff\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiWS7NmWaH6Ob7QPIhczDALShjx99TeDJaBtOBZBTW7QIgN+2Q17lybS/dqfZT2DY5/GrSIG8+BecpSreZYrLLQ7s="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.488.15990.0_1614908000296_0.25645158319633987"},"_hasShrinkwrap":false},"2.13.1--canary.484.15991.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1--canary.484.15991.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.13.1--canary.484.15991.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f2e290284bcddae88fc92e9c1df8ac04bf3e23ad","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1--canary.484.15991.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-X2dPUiiS+DLt0NgDxImTwt5tJPygwybir+uLnxMJa+YACyctMk5cbr4pbVWcKSvdS+UiBSWkO1xmn6cpAD1mrg==","shasum":"abe52b2ed8a340d93fd84ce35b84856d6aa69a13","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1--canary.484.15991.0.tgz","fileCount":25,"unpackedSize":72607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYqACRA9TVsSAnZWagAAajYP/2EahlRuM5W/Tx432t9a\nYwxF1xwc5Ch/AmNKaCiyC/x1N++C7AuJyMoJrCRoXigpgOE0JdhB71Cufuha\n1cgunZbs1atRc869SzRIDfAK0uSo9nL6b95upy2GhXtYMciiDCItnaZS5QJQ\nEph7UseBak0L4ld0CdcSwuT6k3lXpmZ1B++yeA6dV/scTs/PP2ijaIiMBGGk\nla2SnjfofXkltCikbCd0pOj3cRf0kR9ONNtMDMn63wuuJ15BN8KWH8TN0qqa\n0JVIbWn7JJL1ZfQ487cHLPDi8wF+hmmcTHOVIEnhnFQ2uxjVgGKAMz+jkA6l\nPBdlzjiVt4VydqviGIcjYGbnXdxw8arv9m4URXqRmL5++8nzOGIjgtnyR+kW\nuPpsDI1jbN2nniiIkL7T+HH0gz+Zf5V4bvwry7MEhkagzB130oEbU950lZCb\ndNNpJuuZNGdsg0pylj5Ap5ZM/Fn9yxWBHur/V5zQufYCsY04mybqXDrA2FjN\nvGwuuZYh4kUxhX5UfxgnDCHIq8prQkT4abRgTEBNMrUcIcWf35AwQG+WQkQk\nniJ5UOaNkKd5dF89y2CCh8A1urb2IphyEwFYRrbV7W5H0Q98JDKcbOJzc5Hp\nkaMPADAXTQ5B687PPaqWtEur6rt3YCWwcNr5BWRdR4eRVjkh5gDxvwKY4dyI\nQuWh\r\n=Wb3C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH3FIuibN6Jttaw2auaVtA4ZZCPpRWaUPIpZ3oMYHv/kCIQChf85w8V8cpzpUYaJZC1ns395NsEezNGp2y58dggoZ2g=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1--canary.484.15991.0_1614908032118_0.3130869593636778"},"_hasShrinkwrap":false},"2.13.1-canary.571.15992.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.571.15992.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.571.15992.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"61e61c2b045b5f72c616307dc0d50e661a4b830f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.571.15992.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ufO4JLYId+943fHlOZ/hhy+deCuiX2qM+PG9Df5p0hoINX3D5Z8tpzQte5ZWzD6EjAwegPs6dwIpcJHQAjDzXA==","shasum":"f79da5587d4d7037a3ed02c4eae5ea8a07cbb653","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.571.15992.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYq1CRA9TVsSAnZWagAAs0QP/2sH12ohNHXzoRtqo2sl\nVTESxbV5wTE1SKYVmA29orjvJ1E1O7MSJIe2Z2Vo4RuceG12hCvW3o48zJqR\nrrdbpDwn7C4DvNj3Ll6jhWttwDbF9B/Z/0Pao7LuTuoZmW0M4Uid/tc9uuZy\nSDL+4+J0BtoWlmYgj2Xv2ocHNPN/7AmGWK6h135fWaOnhidwsQp+A8Ce5YbX\na/qHv7HPZDxfJ6zDSPKX3jrbq/uazRxIPM/0Q/QGbXQlnyDeAQRE8BLGC6fX\na6zZl9zWdiEp6sJ/nNYaSnfbSXIe9pcXYnaTQr+fOvx+hJI56J6haA2DRkbL\nonTt/1nIKCI1czwFwLyMxkoQwhnzxRTbQAZEEuRKZ0AG8G7Rc61Gak1yZnkL\nUDFnHU7bJX5SqfmeMWqIE9D8ujaAfkKVVQV10lbbLYMtSbt29KA22710fUbQ\nqKFA7JkiSllfqjeun6zkiuq/fLz46itE/EJpZCaNVdYB60rzesu9/KSVyXFK\nLlqOI65KvKQ72N/ztCDfgC5LmNG1lvq83ZU5Gn8M1/6YK7AY/At0LL/MsNGi\n7bvNiLb5mQ/oDZqQlIf0MVIwLiZRyKLb5TPY7oK8O/6FS0AxYnqnTTSOfz8v\nGsfBP4g5woXe2VKLOmYMwlTedQeqhg+0qK/qxngS4bp8HnNg2VRsYhEwO+qp\nj+NR\r\n=1RbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI8lDHT2UeL4OpJ51h0C6stySbXjuTXNfq7HZCsiXALwIhAPkBJ567xYWsDBbQoD72/Zz5LYMMuQ884Y66M2E7z3p4"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.571.15992.0_1614908085041_0.03344704197554571"},"_hasShrinkwrap":false},"2.13.1-canary.572.15993.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.572.15993.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.572.15993.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"048f695f165b181c62dc44e5a1c7d0ab076eb0f1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.572.15993.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-r61rNAqKR4OL7StfOmb8SFzKj3U7EkwajnM9VHjj7JVkBFJWnFF7O4THXGq4fRtn6S+Ps37dLhmF9H9NZ1IUyw==","shasum":"d806e498b36f224f21f0ec8ac3ca7dabc326d703","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.572.15993.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYrgCRA9TVsSAnZWagAAu6cP/1+I4xZ5CLSk7o3yc9qB\nt/k8kwOhCzGHFfguBsEhwUjh60NK/R1nyn6cBmblwFvWREgvvYkOtHMz1y4S\n/PiNtCHe/ePJF1zflhEA7NaKCnZNo6KUHsode1N1kWce90gcKyyG6sVgpr9Y\nVfhXFAAoahot8DU9nc27V+7COAZMkUuMZ5iURC4Gu7aTOsyLlYQEF0U1B1FP\nEhnsl9s3NpQUWsvu1b0ZTRlz7sNiMMVRDYTRnyUl3Ug8mdsMkUY0QBpse9e2\n1HGqMEGTO47vbOkM31nav254UZxr2jn2b32PjNnyHnY405gCPJ7vddv09zt4\nusviYahDNXOkxhbHem4yo61cf/ddzOedVcefoBDnuitJNdNzCduMkesyfhr8\nGjb0/PiEKhDqBqRzU079QCgcZwDtOoyYcIX9ZI95ld3SJEUaQ6ZZDxAXWbXE\nWS/klR/JUwN4yhP3K5pCbeFeM+o+s8C9ofk7RxQP1CpCe3jHVdeMjLcLWFhR\n7VkFV0NQU9f34qwlXrQJoY+g7nqaX4kUOxNn88O4il5g2zH8YdA7sfOIeLV1\n3Ft8x8qSy6UwyIJWuKRvff292pzOnK043u75jlSfIsfdDT3Wpg/zaQTYSGqG\n+QVYFxAzhLuN38LyFqBB2pYngWdj0t4LxJLyIqIg9ggDdR4QSf/QrWZT+ULo\nn8aA\r\n=/AI9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKc4f8wU8IJFyJz51b4G+QOQN2cL3T0x/PlGhEhsvSjAIgOxdNm7P/acIUkd1YDGQzOhRnTMMcjzGUTjsfir8LSqA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.572.15993.0_1614908128319_0.9823260541932353"},"_hasShrinkwrap":false},"2.13.1-canary.596.15994.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.596.15994.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.596.15994.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8c0b8fcb3e57b829441b88a2bd786d5660b866ba","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.596.15994.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Twzz8Vm0GWvkN8+ZOFM6Mc4z28HONcOiZwlgHB97uujlu87e4yjbiBZ6ceQFyRnSCTpLKfEHxbgH7iri8VOj8w==","shasum":"66d54f6b793ddc2caf6f45b864693d33b5aba8d4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.596.15994.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYr7CRA9TVsSAnZWagAAvYMP/1Kt4cSaxbugWzTAXGOh\nSlNY89GgOl5iqFDYSsPItFST8GiXxiqvYj41pO94JcQHjfjWoenBQSeGwieT\nr7w8gDdyEgABSuJFT6aCsrrDSIRMIGScpodXgJM/QOEBtwJO0EAI5t/GxYn1\n1zijSpmLm2/U6B0BbWoHJpCZvmkONpiZWVJiZs9VXxi9+bSHD34inpuvMw4j\nFuHbn2ehjiIxRQvUT2i+sgV/mwFkwgXR5sXXkyXkkE7W7f2HtZywvmr9EaiC\nLmFNe13Bt9INR9sIVm+6BVI1TFYupJg4K6ehjHWiUbd+CSUe0/ahiTF+XXBr\nalcgsfGEaILP0/hCniwXDLNSwMWEEXE/MNIJ0HJ6nZMVP4HzHLALiWDmuVFX\n6NMAqItQ2v33pny1PFDLeeqRsipcFUBCydFGwGqo1AiPnk6ZfiquFI9c04W7\nj/Ym+ZZkMYTtSlTdb8eEH8iBgaOH8AelIz8OTv5XffXALJKioIAx7459U3BA\nbe0dd0we3r6HBTf4W5ofyiMU/1H+GgLDG0+0xLl4TeVM7/x+izpgAtH95hvA\n+g40P/AFZ3VOds0xfokBR8kMfow6/vQT8E7IgGYbt4N2WUOhRUbnBcWCDrvt\nOs8dwDHg7rScX93JaxERF8M2dJuMTmeCUNLjtSxHvIKmvA4M85CVmF+cytP5\n9C/w\r\n=6dKb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ8G4ROJObbZWyDmpwDwbVlo6Vpn8fDSBoRZvkJuJyDAIgCkZWEyDtlDEyvgZVSlqNiPfwKTKsNaDybckFrO/6XZE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.596.15994.0_1614908155493_0.6888376223090302"},"_hasShrinkwrap":false},"2.13.1-canary.564.15996.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.564.15996.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.564.15996.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fb2c86382dd3998f95412fd27a75bc4a9350cf5c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.564.15996.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Rqb0GW2efKWT9ec60pzSh+7b9IGEJDChm+rRYpSSpx5TuXbWXnsDFmxQO+kLg+8U9QVT+s8MuNIE61xfA6Uw5A==","shasum":"8a41ea46d4ff70aa92cad3e45a653ccf68303c77","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.564.15996.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYs6CRA9TVsSAnZWagAAWBsP/1Qhqvvg/v1LPM/ft642\nzrmSmyq/VCyFaR2m5R5vaPto+6qCNz2lLUb0EhiqZwdD6tETqHMzcd1HC31c\nKZ0B9iQEMD+VhXlmeGFySDHjkqpUrMz8l8jLUVipSXNovD45SD4V6uO7sX6V\nLqNM1OTWtwDWMCAU2uiG35R8nks8Wz9wL4eaCRo+M4qsnEGaC0ZDOmf9b0z1\nYs2pf/a5AsWbMTir+oQZ+PUe3nBECJoM8WhLiphnu6VbxN6uoa13OkzhdSsM\n+8VkHRcnz6Q74P3tmEBwFG7Jfzikm9UPLY4VJx9rJXScV6NgGhv3by3ktJca\nX/OgWwz44y2F70yeep69NLH6SzXcaV0u0AZ2mmUr8g07H/G3rLlJdqCkp0ZS\nH6y4f2Flm3ycMoO3yK+hT/PT1ZKpom8gt9sQ20/87KRPOiaBHT6dhA8ttZml\njWPPp4KpM6ZOixjnxOheLoeSNHp4ph7GwrW9AK88YT3TEkg7aUK+Kj0tLbRj\nt+SnCkRrnzcmip//3TrytHN38jcPBVPkaW1irlmAEg0xwBEElEDl7xsg1Opc\nSttqsdPETRv6QVStbMsl71Qu/L/wc/pII/QpqfiYoA6ZXPh8y0XfL9tXgHRo\nLDESlGZjbdMK9leGUCBwS+sY+sO/MScJD/646am4zjjeBlFjTUuEa31A17TP\niE4/\r\n=x0HM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzhzlYNSJFumjKu9hPb5Xwx5kejm77GJuU4pgp/yyNzAIhAL/eoDVg459v1U1J9/PkeB7MxxpWm8KiOPYtgdf0QSSV"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.564.15996.0_1614908218337_0.3238876214694546"},"_hasShrinkwrap":false},"2.13.1-canary.566.15997.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.566.15997.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.566.15997.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1f8584e128e4bf841fafef9cee8f26515f9000fa","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.566.15997.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UBkXR9uoScEVhCqOojmqg1gNQYywG9lyfmi4U2JR4ViK6mjcN4nr6VC2TzUf2OXpFl/Lp9pP7T924d6w6vq8fw==","shasum":"1d810207b69dbfd629f9031e8daba1a527bd0ede","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.566.15997.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYtGCRA9TVsSAnZWagAAFmwP/2agqZCngvZwnKEekGiY\nlERJAoQK8BJoX26v7CaYav7RiDxdmm9mAX9htXQxxADUzcs3/62i/npnG5NT\nXjX6zKIvhO2HffYIuE6xCr34VzoBQ4azTOcyFLix4qGUx4MM1mNssEiflzs4\nBVJj5h1CtpSC7arzHgn9Je5F8V3nFIM+j+696kZHymShg2DvPwDTcBxb9LRq\nLptLExYBSc1cYZkiu1UQfkMYWgMOdk6MXtbuUJLq8za/YU6kPnuFAIs9AXXk\nml5qvEQFfnhV/5ua25Fh34JeHqSUMwccRakYq0mB2ikMk5iPUDlPAazH8iSG\nJEKns4Antl/7d4PIbeW6SthWZ8LEYFLEWGyKL/f9p/Y56f6MNzZRaMhnTvTZ\nQGe/pnL0bXgt5Kt6xQT0so+Do5Ia/B+CIF73uPPUy3dwyGq0+eF/vNnK4JKW\nqR7nCi6mryJaaXCsOK1UYiLW2gv1+iV5uYyYSNw8IKZDd9kgNbBGmU9WVYZQ\n7VtIX0ZG5WoyGR3X5JqAWILJQB15zrsBADlJzP2lk8wLAshhRfVbtcw+SE7U\nndPiE5MMyy9UIsLaT3axWM64PDujIkVsDqL8dVvoWvcCPgC6sQct01LZlMoW\nYGXswtFfLiz/Y6ipvB3FaWBhSSV1rkmnUFo70P3l2iPJfTLy7xL42Eo5ZPo1\nq+fF\r\n=ZDEZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICd9wat8b/gntUf8vtvDY7BnCV9L69PsL7gWK/hxsT/6AiAWkb0bZkDDvnB0iWcD0dUs1XfwppqTVtuiYtw/djYCig=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.566.15997.0_1614908230104_0.8719497196365456"},"_hasShrinkwrap":false},"2.13.1-canary.575.15998.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.575.15998.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.575.15998.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e349c8e07b07c5868b3792eb0e411d76e81ac818","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.575.15998.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JP83DONSL38GHZM7J+UDBKZ9k9rUUm7Y6TeZdvm/vAJTVfT3v22S1viBG+IfxU1SrAq+HZFUpmbAwXOTcPLwyg==","shasum":"8b2d4fb6d74d77b4d34a12a20839cbb3c1a103bd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.575.15998.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYtqCRA9TVsSAnZWagAAaSoP/22yPDU2KKwVMQtYBK6l\nB9fLmor8Vux8P8W/2UTjgfgxqRcTe0NDJOWMidvG2YPsuMWihrkij+hhUkPQ\neng9AqxCOmXvG94l2tG2ZGqe3DSf6RiELKBHIABzhomWS2n7ww53V/NZbwEW\n79QnRfHK5cwBDLo2KhhO/Y7yOftGxzT09eJSaiReGE6IELCDvrWkVWJaa0rn\niCcAdfZQWWhKJOrD0IGm+xpfTlwVPosYtOLSamxHihF157nLZ6/iXBSsw6pp\ntNFWE9Kl2CCvaVgfE2EJAH3jpXTnEITdpHUJ4+e6o0vyu4cViUB8vTgj15K7\nWeeWeOc9x6mk1RKqP6QMP6Tb8i/Qw0hY2Y1KPCIqiT7LnDqM5X6mWIlRivUb\no94pZIypM6keVruZKgrII9/2VbZJJ4d59rL9rRuTD0TMq46UQfSVPAjXqwcp\n43pa5bo7ZT03iwrINDYssF7f7pfjeMYVSGZZjy9j/RJVnFxDaiK3VLPJVn7R\n2RbRDK0BDUO4iVMh1pKvTKo5sXpWybWi9U/EpaR00Egeo2r61RgZAstA5jz1\nvuHnyOf0iwJshtoEICGNkumYVE7Ri7m5wte58WifvcPQAsdvP7pCLEbbK+pv\nlVt17b6k10EH7odHivZuynR+++tGs7KM2DIH17HWGTw2fFkn5q0v4prak5QZ\ngyoL\r\n=QNNf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDP2KHLbXv1hWCU2DaT6NtWbbWgRcamDdZDnj9yQ7cSuAIgHiPWlGCP0iJPxz6eXtGzgp3Du0r9WXMhlr3yvMzPIZY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.575.15998.0_1614908266155_0.5543635982169042"},"_hasShrinkwrap":false},"2.13.1-canary.630.15999.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.630.15999.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.630.15999.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cdedd4091f6cfd90fa5700cdf284d2be24d97d53","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.630.15999.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IqFJYigLT/dfawHmbPEYERlbEOm+/689bCSn3dIKSQKHBTJiMD9WJQSS34VN1MidY8RyoH6LjQ/Bf+G/HU6ZgQ==","shasum":"d1063ee27b6b3e4e75c292bb5558962487448585","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.630.15999.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYt1CRA9TVsSAnZWagAAj9AP/RR2kGX36bpKNKlywodz\nSZOP+67ZaxiiKjyG1SWJlGB/hL+ycDD9J4cjz2J9BRa+fG5dQ7oP61hol+rc\np5QSRElxGumBfLyHBO4tESrixkp0sFAYFV3VSy/nfxxnlFrLoaMx2338XCkw\nmyubvG+dhHeCSjn5+K3cU9k0qK6TlzQq1r4qGqZ6U3rz7arKDeC/w5mSBt3D\ndsX48i19cRDCrLDAlBWJxjmJb99tuZysYqCOQOhHu/Ip+8pKtMlqzU0M1exO\nZ8FqyLbSORedX17fFyNhtaiWggoh93s8Rc98id7cRxORvL5+9NnsK2URpHDC\n5Lcx1YbBgji1iToNqJ5fZ00Yjic/UkIvlMyc2m99qqPV5yL30gzREuY3oe8Y\nVPbudxJguKZhVDM3AC+48D08kNnktmoY6iQSnc9SCmVzHADApIodABkubfYG\nAv1hjWANCjGEoVrJhS+mBvUMEWqZaGK+ky3nhNBQV46Mp3BJs3yeqUHrWd1D\nUniegU8HLPLq/j+1/4SNyMXZMZyisEi9/eikzIHDqlLHpXAoBqBV0i97dhTP\n4wYi1/LtqRFhnzQeFxoHmMpMdzpYxJpkH5FqEbqmwikwAqJa6ZbNlv+Up9zh\nRA2ubR5BLciR3hRixKSZlno1L2dboFTxJYYI/tTP7ID2sueeBdBsqSWZNKaA\n3VX4\r\n=vWbH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/pP3qg6jIdz1s6CDBQ//hfoUdYUoN4feeVTsuB6c+FQIgZ93mi4Z3LC7GpaQkEUeL1pBf6zzi7DcNZLx9Bw/mAhM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.630.15999.0_1614908276733_0.07634290028526536"},"_hasShrinkwrap":false},"2.13.1-canary.617.16000.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.617.16000.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.617.16000.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"13af4dc8335d2752248ea397b4a68d03b104c1ab","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.617.16000.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CcFySQ6UrR6VcB/sj5rpaDZzZ/ovtcIpGSbLW2vsubrQ0GM07VtHZ3ixFB9XpWFHR64cjiHW9QY2rGMJetm0Mw==","shasum":"735bf4a714fe48f25b2da2ff460d003d62f05392","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.617.16000.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYuTCRA9TVsSAnZWagAA6TUP/Rd3cR4PvWaWPM/X/L+a\nVMMt0hGU67IVWErbuMGcbsXyApNWXF+nlIdWcmWRPxH/SjEMAtsH4sjecKB0\naWFaZLlqm03ijU5WYgDnWMrXtXtROTVWQtbb2okoXfibHMXoCx2lGiwCjWPY\npwWp5mjkDWcL6E/RzxqVDvZ/+rrpAZe/7XL//r9lM3kYXDc86JoK2o0EuYkW\naXEOjSfKO+bageuuEv5j9bBPI2rZ9H1/3Br9tk9srgbW7SU3fq/R/dwhMrk3\njt6KVXmmhViSZx0g2mP3OXqoib9/1ABHIeHN7quNGu2x6vsE1o63pUMw9Zty\nQ6xF+UwT7UoW/gwu2tLrTaSUOKE0HF30r5ic+Ccyz7LvcuefdKNB9hNWrSg+\nO5omxLY1lH/zBTKtCvN3IzsNeJ5nfH5pNc3wY3MOzIcgIurP/5WAIdxojser\nOZXuumNjjijR4iB1iuP5r6oROkhQz+cF4IGB5/wId6u4mOLdsXRf2RU4/ExQ\n1CFA175aOrfxo7LU4Fk0to1odWPCcDze8b+hAIuhzpHhXQgTE6zkGm76Kd5+\nuMndeoA+V8kf1M+FjvlMKXRfmy4XqZyPzlmgfcx3FKG0SpmhcPJhOjAF005w\nk5Ec3TUOPrEzHszvhP1nIKReTiLFqm9nxl9qqKwFD5C29uFLfTgGXEFjKvtS\nKUQB\r\n=IavQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUUv9Q+coZGbqt/hefo/99zVL9KWGnfyVCdnjcQIenJQIgf81cCqOkR7ybXNWxDryvRvP5qJEYj6p7dtAEWMKkFBs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.617.16000.0_1614908307246_0.07043220576918086"},"_hasShrinkwrap":false},"2.13.1-canary.631.16001.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.631.16001.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.631.16001.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"08636413712b62a2c0d640523c336a2ba7b72991","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.631.16001.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PcA/BNe1sJ7uAEwk2eVxKOZYagPcaFojGMwgjA6iEK1GzXDsYS3SMQL3VocOW7pSIAIWVisfmhbweSlyAnJd9w==","shasum":"8f7f645ad2daf6790c458de6fd443b571b2aab00","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.631.16001.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYvOCRA9TVsSAnZWagAAEJQP/0Q7UIYwjr02hzLC8LQQ\nMNxd1/O92oVZVWpTtoKKqrRtfp6j/YMyn3nQ5fCIQALSr11bXoyHsWcC4O0J\nJhwoZo/1kOSl7BZmdZRBlBb5iU4JF2ur7DalifWKdfG0QJ20vDO4XeGCnv7+\nnkuaLZng3eCRtm5eCmGVbHMZIUDIMe3TUXPCG+CqKl+5JJqZNp5IFxtN1jsN\n7FYcvyab82tyvHjaUMvzOrh4c+xsqRkN/igVWZevt4X7SbTGl1oF2MkBNrrm\n41+LpL1TZBUA/HHVJuP2huLjcJshNEUCse99N5ZjB+QdUJy+yspLci7Z/3Q+\nGCuvl+kWNB0ZzI9UXgdF6i5R9kWgtV2IdOeR8Kfy4dNEDJqH0SzkLTJItCbd\nOVILAo+QgZnEdMYp7DfAb2TXhmGgO51yhz1dkqeLUsQ3D/7sNye9LrmdHtmX\nbaHps5NmTS95XRENJKc39uEytbvaH8i413Bv31G0usyCLYymTZdg2lpIe2IX\nz3qw2KJsZ2Y071+bLbRU+7RGSUntAPkPdH4VfrqPL9KZDQtAD68V0vyHlzLl\nGOd28Jgcc9r9ar+RTgolCsiolujJveUFmLOnuE5Irj7L5ciMPLkm5RfehYAV\nya/jBOuKeYnpYipYUhk+ctn/lZ/5CzKhTLP/kTkYobnb2bEQ+gYLF1OW1uBL\nhXsU\r\n=6o1q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJzqHok7psBCd41koRwECIUgcFIxwZTJfQKAdYSZ2vXAiAoiHpnRR3hNHmGVPoAbf3OnW7HhJO35DvP9bdNdHOdZw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.631.16001.0_1614908366444_0.06083235863435932"},"_hasShrinkwrap":false},"2.13.1-canary.553.16002.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.553.16002.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.553.16002.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ca8eb314773d495f8e5e2d3a717c40aeafc7ec75","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.553.16002.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-By4LHAPDZWvwKU1EF+2YzqbdKznrQtMuBNGYrqDO2DR00rMkNWADTa1pQw+Xy2CVZ+wSC4iTWgf6S2egE+vL1A==","shasum":"585270ebbe090e02371f4ff83ef2b34c8e6c046a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.553.16002.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYvXCRA9TVsSAnZWagAA0QQP/Rae4NccLqyrbRJ5WLQa\nih5tjGnKYD3rOEgblC05xPjVVeCbDBw5ovbux7irbQSIvF4/TXyyqH8jY7vn\nJd3OPMTMD46mw3VwVIlqsGbgjKRayiKkxtdmK1DSxqKTk+NdYWqjwKxwDunW\n4Kb22ym/BGJUgTwqqTH7syt3kiuLrQpwKRYZH/SgzFbjcvLgpM14CXm+ok4R\niEZqJXc+JmbxwpWGF9smcekoq2cOeJQ+mmw8U2ygX7RVTU3nOwjiSqQ20kf3\nF6AMFOrk3QGEaM1FFlSn4NVRyorpJ0yFRgm+JebdnkS/uteWEAUWdFTebytJ\nxO77L2H7PamigWS+SXti7Jj4kahBpxlsPNLJZwRTKYLkLvHKZoWCOYTmRlym\nFnhKleV3Je9FUaeV6G8kqROx4Y1uCeIZ1jNY/gPOiP1Wz0nN+XXfzK84OnRJ\nCklL/9M99xCMcmRFAHwxMZGVL317xBSRlBoQHj4WnBdE96CifvNIJgNX/nK7\nOiDRYAmuPdlr/I3fGoftIL8P+6VlD0FZbvelx1/X8rGKZYfgtMD4bSH6N73N\n25RPXqAotFTNrKp4LKQDqjeo/IosKx8Xd78IK1bjXevFCne1qgBL2oWznPIl\ntzWbvz5BrUOPwmiaaj3IGTQXYWYZ9mjroMqvlpLX7Xh8S+wELa5Hk7lMNFDv\nej0b\r\n=9xrc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+kRKfc2zJqxMedfGScitNmp2xaip4bcOW2KloFYuVwAiAusidVOz6Ru9AlS6FiX2CLzSGL8iF1qaj++uCWJqcOnA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.553.16002.0_1614908375194_0.26309881020517345"},"_hasShrinkwrap":false},"2.13.1-canary.576.16004.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.576.16004.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.576.16004.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"aeca62d72625faaa280848b724ab4ce7692ca4ff","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.576.16004.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8HLxqlcvn/0h1H9MmeXM9twUOGffhwsBj7h5li4fT7YvWxSH/CW3Qww8ggDfhOJmJB0hi5HTssCRRNrHvdn8zA==","shasum":"4616a34b0f7930e336e62a63a46027707c1d6338","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.576.16004.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYwPCRA9TVsSAnZWagAAHJkQAJ79QO/5CgYiXT6KJpZn\nuaxc44xahiiesibYYaSwS7h0jPn2wSmEyEf1eoFdX2wcHZpEzV2Kmad6p2mZ\nBMPGoD0ALFpLD1WH1knXat9gCIQUYbNvy1RKTk+n/eo8hRF4v1zH+VvlNQYt\neSQ4PDV1+XMbQXwMfADZBsKV5qAGSeBg3ErwKV6Jaxr2ctNuY1AFkD8kzejR\nVfTQbBLjF2bDo7ADY1DfaG6QCf77NafNKnvyHTFNuAwbsC4VBDnswM8uPr8V\nB2bkpT2AuA3VcG887TokzTyhn2Oav9hSQOjFib2NtzqErD9S58ZJXZVDsqzW\na4O+3ds/iJJR/T1V8RCuEVtVEmBoJtoLFUVxk0Eq9o/EAcg5zqgmfZu37qnm\nHxD9S3qvcbmhpY9us2DPcUptCXIpD6zOLki08/TKPZqt6SjMetcfajNGu4k8\nmiIFiokIm7WGyv79ZjO9bjXnBX19J9AwsmoeiehBhMSfld+OXZ/ixlMovON/\nTz/rcvyB1kGlw6nzTKaLmhYxMvnICk+EV8JopnFDhfY17NyUrxVx9qSPhVUX\npQ7IHfs5qP1heajhiexGzcNRe8JJbL8gWukU4WTKt023A4qjKHgy4fz0xL0O\nuxlyVB3U26tsQD+d8Dwm65PQy2Gt7ZYPXOlAU6RxM+3rfBMloM2ev3WACCi2\nmlZ5\r\n=mCX3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMLUKtjG2W1Lpk8F3u4nuALzf6RJ4Aarn73lHTElQDyAiEAuIWTtkCeUDQWl5twcNBHteQ+VC37M9bVCfAkBq9GZ58="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.576.16004.0_1614908431428_0.04843612726912827"},"_hasShrinkwrap":false},"2.13.1-canary.621.16005.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.621.16005.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"2.2.0"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.621.16005.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ef48d48bc774496a592ebe36442a1d53470105e4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.621.16005.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9oMT0/lGPY2fDZfXbb3JghVg7qb6nNxhAHiOiyvS/XZgcSu60WhIZNIORKvyi94YGwDswdMd/L6KDx+yuoOKaw==","shasum":"a7e53814c68cf28f46711ecb12ff5c7b7915ba1c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.621.16005.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYw3CRA9TVsSAnZWagAALn8P/3eOd+WcrCF3deFG7QKr\nBTYO5PQT2agvofGCMg9yGLv1p3l1PjgDyQktSMnQ1CELg3xTdoqFx8FkFs9r\nylhrmCeQaGhoI/fPuCXi5lN41T566ydDcLndRosaa3XiLRUxt7YdoNIH9lux\nsVsRs0QIOPwjdzApljF7vth/rAeQyqKqU0zDdlbSN27I9KviV5XmuIJ/Ai6T\n6BqDH6Fc5r5SClzeEPfCfGmy9AR85S399vUWFiL+nrchVr1lOokwQ/jRSaAo\nsr4u2Y7Vtk/xrKXK+TJz3OQSYKQWusyojd5DVFckQ40/hsgy9hvd/SJ/pv5e\njX+XisInUc1vhz+zcRvm9CiYJqxBPyUQfnmuHcsN7H16QOXs7AIjFg4adaFI\nSZU/AzHcrzS0F8Heh/mJyc6cddXaHWXFALHvPhHaUYVJvVDPuVd8bBD/YWIz\npXi/v6Im8ybnDEoGQlKgGOnTJwcn1f/p0dPJDCGaQnP9v3tOLw3n3DGiGKkP\n5UHMPMbAao9vqAbwVIPQZG+bHYITYKmUDTTE9y05U4JU6AUS97sCtTjp5If5\nWI/a3EEGXTVJ3BATOjwa5JJYlPt6P5p5RuE9oQY6BqEjc3dhzLC49nt5DQxe\ngjFJ1I5Esel3Nk873znhj7/Ot2Ufs6F9WKqpzRoTaTQ922bl5LT91DlMsgVJ\nITss\r\n=wAeQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICG8eX7TfVXACgYv3bAFdz8CBmFmNEEevHVFowe8+KvUAiBKUkWqk6HxCQ67c9D6CKHdIG/Tv1w7kWCnU+lYJe6oiw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.621.16005.0_1614908470663_0.7336874043200159"},"_hasShrinkwrap":false},"2.13.1-canary.477.16006.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.477.16006.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.477.16006.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5ea136584b852d7b337787e2eba064f8b75f1336","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.477.16006.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-F8d2j3DlkQW6o+6x8zk69yqUNQTF4ityrJTJ+zviUhX6lMqkoyhPyP8cFbvHtOoThZMZQNbJoRnSE6no71ye+A==","shasum":"9ef8e5bee48abc847a8799fb1b5788503ceae364","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.477.16006.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYxXCRA9TVsSAnZWagAAiNkQAKNShpoF8/PkacdylYmB\nqyuEXcuUMPJ/Q2vP4XJt6MtsEDgDPGUsBVvQWpz2IgbXPSbghYOhFgUMZCUl\nj1Knqvh9CFtbTh70i+WVMUW2plQo0oYzqQtO7vIJuRpcZxihwrR75uwXVc4O\nGqK8XpKCIIZ/ly23EAzigKfK6pZb9X400lq6HcnHfuaik1gRrAKrI2jE2qz9\nNBgqVIG96bGI4AomZOpp/f/wMimzUd7IO+8uQvEKirgt1lCNoDcltibMI7vS\nOxuxlgvWadwm49QgSac+3OO7v5RV3j2Ven/TTvjCUsZICPhpKW0Tpq+Vxwbo\n0T5l8ZF6k2yr5Kbs/U0pFfXRJOh6JujPbBBjFN9sBiiBfb4YSuO/43mrqRKo\nHwAXnwEk0FW1ZAbj+IQFas09J2PbtjKpHqGuO7+DfQUER9Y1w31v6cNM/2l0\n6LUzVwDlSEnu8nyBEM+DIdvaeoUuMJcZ2Y1rPSSS+28DhZhJXzdOEUgbRaGZ\ndDzzRDdUsAg27A/nChpV/KgFd3Lv0wYXTSFw/gN+CGqAed9Im7AWUHttd+X9\n3e0BSQiRw9SD7+uzp7VII/VZ45KsEAio2ZQI06d85V2muLomPUjzX8cFIfhU\nxmu5n6mYUPv8Np6q8VGT1L9svVU5qEz3tYdLWC8kRQ9hRrTiwE4YxaqmO2uH\nWvLq\r\n=tD7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxGD8gbGL6fnzwGJMOOyUeglqhuwP7vHjT0bAN52SyWwIhALZkwQJN3iLT7DOVaPLqqIXRlLxTOtEZnRE9ZnGv/sNs"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.477.16006.0_1614908503483_0.04999262876550081"},"_hasShrinkwrap":false},"2.13.1-canary.559.16007.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.559.16007.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.559.16007.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ccbe9996639366f1ef818f27477230065efb7138","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.559.16007.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-04mSswO1T9xJ+Gtcrdn4MqZyb26vncXmOJnX6/sYYzImljMiv8KrJHV3GnRED+GfyMAtOuQ7bcyHN6dRM0addA==","shasum":"453c1104d420a3499b1c532f60846259df42d6d5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.559.16007.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYxqCRA9TVsSAnZWagAA3UgP/1zgCxBs63LyoNn52efw\nxvexKrjidHBHXYEvu4oN8IdJ1kO7kZkljgLk6IWGRvOhRJQ7C9SLNanfnvCz\narxauhlVjvyWStZX2fwjScAQDQzXl26PGauB2WUfRAkjZM/doZ17veaK7m/5\ne1esC29fE9aoqE9INhkZ0m87A+dYA4aamNN2uE9QZjE2kivX9TVhZVYQHbF/\nuvAODwrO8+kB+eluNynIOPbj00U489Z4fndkXatsh6jVIwiDE6vkHoBqnfkc\nz8u4MX/xBT7IMSGvOjkNrc6pQPOgGgWfdZt/XodqDLBlN8WRbOS372TvoiuY\n0XaMNtf4U2IMXbKnI/wS+N++CJDOfk6bXZ+tYgwqUE7u9ASPfu3tHaOYomXI\nTG8TOlE6T2tBlQMpUNb304+M0OxRmgD4RiRo4iREbXNbBb50hw4g069dIG9h\n4fcDbHxhqfcOUNdbQ7f7aos25HCQrdVx2dxx/kdQCxOW2WHm2uAKkxNLNKC2\nhd78Sipvpih3kHEEaBsX2TaW2PSrS44h6rmJAL1uePDyskU4H9RlIJPp0/d4\n333m+TUxUsq53iJ2bR704ShuqbKC012ixoNOZzIX7StUcOj6HMhOkGIsDGky\nQXecwnZZ+1svlCVDkBxyVtcWwTapvzrwSslbB3ZuuQthUd3F70cD5Db99DbO\nfyRk\r\n=NTi6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbs9ERbq1rtmG7gCjcEcBy0jHF+5lwHraJ83LctIRx0AIhANP9RbCm/sqAFeEXnEDm4qdvtIgp42e0g4W5+rl/PCoU"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.559.16007.0_1614908521985_0.5643221793350708"},"_hasShrinkwrap":false},"2.13.1-canary.505.16010.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.505.16010.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.505.16010.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"976e462549801402fddc0f3af07684df2360ceb5","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.505.16010.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QLAF8RcSBPLzlc1fN2iFL+X8MD5yDwphNoML5CvzUkiNUidy7aiur4WN9iLCszm9mXy/B+d3KB2aqnrebXGW1Q==","shasum":"381e8713b9d17d0f7d3d2ac9d29cb625b3685864","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.505.16010.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYzTCRA9TVsSAnZWagAAgwoP/3GXxtWPq/vI7oT2JD1A\ndT/BIA2jWZHmOaCKObMObU/NtiWUx03RBUMOXFf/B+eU5wgPwjlChDHolp3A\nVI/UrFTlDPFZmETnhEjT9z035b4qvHThLD3n/nT0yEjQiKwoPvontxpRKmGU\nYdJ3lARLfDQ/oZi2ipVojGlvzKClt4TgMm5JVtZhA5gDTFJVewoKR0E9wn1y\nXawpe6nOxkqTe71nfPvlVEzcFcMENXbya1pgxNKG50waCqr/84yEK8M4G4IL\n4sYwd7zC4gwZw7coyBweadjM3pLjsq83bvW7iciSJ8K8r29UjtlO6cH2UXLx\nyeTariGHgpSs2JIFN834G3pbAbOxXkOY2TPB33/dw2oB8FEDKyhHsGCElrDx\nNgweoDWl9mJBzA0CDXpIf4GOJvGX0brcbHQNEIjxKbIekI13dBjMDkzt11CT\nP3eA1TU6/Vv0BdJgHMituv9fdDH7ZZbNWZrzPvabx2i2vLbQ6AIXEVgsx69M\n162UW8R7p/WSvBlIF0Cpop1NU2iWxpI6dcpWIih7OGdINazSX5kmEZneP8tz\n/jCKcDhGqj0QRjb1hxGekBaDDkhljhGju+rB/fki7RUuo7yJgtx7A2JncXmf\nUd7w7VeqmnlaK4Vbz2mrWNfOIzJxxC6ckMzdT6CnVq3Wmc9g1372cei5aPpd\nzSL0\r\n=jzh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWlf7ai6gIv9FQANPuSHwber83AquAkAvr7TDVqa6f2AiBoKj6jjiUXKOYSEQ+eFTPDd/GSjTh09QZTh4yp0i7XSA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.505.16010.0_1614908627057_0.055883893014540886"},"_hasShrinkwrap":false},"2.13.1-canary.586.16011.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.586.16011.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.586.16011.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b18ed809df511594bf8e7017fb5fe775b14feacb","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.586.16011.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8FxvCibui8It0X9I0/YpKeYbpfYQT3bGk3Bzvb7oDWDS3etrvFny9IG1Z/44G/tx4Bidp7cgJURBA6vdJavoAQ==","shasum":"58682b318ee0d4aaaa9c91cc8407cd24571a533a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.586.16011.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQYzuCRA9TVsSAnZWagAA864P/jM22fFWqGw5EwiTttRE\nq/AKf/HOYFe67dXlnAjbdOz3MFkEMEMDoVlD3A+jCqi1+6PcUl0d5j3ZAtzq\nwvuljA2RNvmz8Csh41/je0SDDb94Ymv0Y/3Cp70htSS6pXE39HKZWYw4zjZK\n5scn+TyIBBLDwymSa4G0pC3DxDEXcvj/RI//rRXIfuuhokXRupgEbRoW8lEe\nPvqZ+K0h+V1qboKSeGlE/gjoz6OjgHmnCa2wCnEph9UPfj4IaMCe1zZiKmUW\nT1Ly8avBVcjwHQZbKW4zDgy5LCqfgGGZpr0VF7xk1se9vIQ2SwkHEtWM8Fdk\n1Cw4fw+9yphP9p+5ENjgkowm4G80dV+Jfy2W2yVPNFXSVcSUiUPDWAmgt628\neAoAvrx/g0VaCKmvdRyudTHcPXk7NFW8p/MGmhpjMr/TgIAM3Ly01RUQPJXY\nxS4QvJFe3JgRPUJhQ+J8CY5lr3OPSkySRPmzztmbt/PVlsYO551Y070FVC0o\nOJKpuIuhkFdqDU3PXtymuTqxV32bAk08B6byBg7cYvnvw6LaSIje1mR38iIS\n6RhcNNE8gWMu2DEV+LjC6ab4rC8sO5P0nxPKtObxze2BdDBNabMhKQnOiYZs\nu4wXNf8SWYJPhLg/vBb0J0IpJatK3l4eLi6kf59fE0aFcJ2xHdsWk/PRFL6P\nr1jl\r\n=VXoC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSbWOwp/h51ZzVuzpmD30ryyQFNdeExMLBQf5xm/uZfQIgWkKfjHK80l5SwcLt+vl8gs7S436LnX+k+Lg/WsrIyDU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.586.16011.0_1614908653804_0.1313422484807072"},"_hasShrinkwrap":false},"2.13.1-canary.544.16012.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.544.16012.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.544.16012.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"83e9fc5bc5cabf66a3072e8437bccb699523bdf3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.544.16012.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-odx6Hk7RcqGTqUMy6PWmOUzLjJX6VGBfO6NK6iBmdGmwoLTRxSW60/34bq18h/alGi4AijpgxtwaPwwkKicVjQ==","shasum":"5ec7c07e4041e04d2fb92b79ea2cd615d66d6cac","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.544.16012.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQY1MCRA9TVsSAnZWagAAZZoP/0Mz3gQzcAxAbyDv/qDd\npmh+WTmSkSrh6Paxvid131xajQnFz/s/jUvtIY8E36Qc7uxEhnUX9IiX5AB4\n2c32Ueagc727DUFf5nmiCByePZdyGZkb3oXOcb//lYSUQyVnHOxOQH0DAuoo\nQWZ75+ZRXVkl1uSkUqTDYuM4mXKhX3qtefG0ZNfrCkJ0Uy44CZIyR+E0us+E\ne4lTiDpWQs0fn3ahqBRCh60pryIobyEaVHE0iCoWzwUzwSFrfbuoiUZxbCiJ\nd/Y5MhPP478YwdktwogytCkhZZKKiy8qAdWV4NSZX6UF9G07mVwKEN4GFF/n\njcopXWf7Z7/GFY8SbJ1RTCtsB36lb+3tjJfuH5HEF0Fjl9Hacheym6kY5fYA\n1VLXuuhf4auxw3Kx27kYKThc2Q63nM6EnbSjfQ28pQUpAmQJWk2RmjnlBqsk\nSVL6p3gq+wVmnXZsmZy95K6DoUzBZ95WVaAGHYQXIzXhPNsK9g+c9feEyaRF\nqyAZPyPvnO04oFlWU059YnFwt8UZMIaB4+oELXbGM6Ytk6jqK/55oTwFCvqC\noRSNKeBlYR8Dfif155HuINdSpMFVPjaye72VdgZHeo7PggOQsWbNUTw9gDSx\nDUo+mCmSGJsGAn9+CTVf0TIoK7FhJXw5Rr+o6vEdL2ZTDgj5HLBe55TQuVtP\nS7Nk\r\n=B3cb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuhjpcAUZvqDjF3A+OgFyNkuoJRlRQ5lk66IrD3LxGJwIhANImjZJXpBSh+dmQPlFp/oiNQCM3I/wjYLbZR146ZnPm"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.544.16012.0_1614908748198_0.7444560841724905"},"_hasShrinkwrap":false},"2.13.1-canary.481.16016.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.481.16016.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.481.16016.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3069dc9ff6c057f1d92c0e247ea9ebd06aaf2760","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.481.16016.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LE4pdj6DUComwW/1QoKHseRGWAQmfjYnkjsZIgH7ctc2Ph8TutCvefwcNiiYlfcAnQPX+eeu0YlM8GUcqfS67g==","shasum":"df64c84eeb53650be23f25ad35dbab84c37aa521","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.481.16016.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQY6mCRA9TVsSAnZWagAAIW0P/j2Xm0GZiragdaqm9hBx\nHSXbju6MzP43MHTfGHC1OctjlJNzEcQu/dUnt5KKQ+C3RCze7tA3t+dboJHx\nODN4qJH6qMxYyK5FSEDCNH/zAwgIYPFwJVqLa/9BqqueLuLeQTOqg8odElzf\nvvhnIDTtxDFcI65yfyN7w8Iut2JEwx9jMT2X6kli3LGHdvdm7/oChnfOlaGm\n+ooD1ClgtOsHoZc8tC40AYF36/BvwQ1SLzDvBgM9GKer/5N9BX9CSGt5qOle\n27NUkrakMv6mBF1PWxb0XFVKespB+a26wdtMju/FGuw7W4Ly8ncU9PtSLs2Z\netx69x0wQZDphEGB8RjNrG/BFQgOO7238aeiBArllzIfldd32Q+GC4vRypHA\nfi+vZSyfieKJd22teURWzPz4RTWbv8I6IIshl4Dlo55wHW6RqMMhuYhC3fBr\nSR3JupkypZYxLl+2aWj0moW5wfGI/T6R1qU3DmG94/4YUZfNk4pTMTRu8yzR\nkiFt69IpLyy0UuM6VOj5ErWTaMTRgRqLDdEndxi6S0IYlO7UKujvQWIhZZds\nT5ZoU4gKmgYztTIWSZ2E5nrMcP9VVDXU/5pwYxRTVcjNUmkWnBYdCGQT52sd\nlTuuByvLYkvn5xdYLZi/+b0qcSmxhuPLkaeD4/Gs6n+aD+V9DDDZRQCd5wd8\n1q7G\r\n=6xND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClPrMzYqGXq8SU1xVvQ6JOL6cjfNfDRjGfwAZzlZ9e9AiB5Mru4QxhJrE9VB3mvIxRB4oZ4PYbKxlXF9rNoaEXJsQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.481.16016.0_1614909094348_0.15778889580527178"},"_hasShrinkwrap":false},"2.13.1-canary.606.16125.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.606.16125.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.606.16125.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f2131ceb643aadaf75b74ab659968d176b17bb62","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.606.16125.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-c8uoyvnd1SzgdjZz6eK+d2EOnceGY2c4ZNCBk5K204uAKB7oBnSBu84uCGAjln7AXb5HMvh0g5NFmiOgQDo2KQ==","shasum":"f7374bade71f71688648838a3321d78b48bf5bb2","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.606.16125.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQog/CRA9TVsSAnZWagAAYUkQAJA3L6Bswil7XxH569BN\nH5t3ugHdeozXYtT2HmUR7XCptdEly24vcGTcNDM8dWS+RidQY3/KYT8whVHw\nKHRmU4gRQlFjYRxoVZklTklibEefUSv3UrcwL3EtWkf/fUrRTWEI4PKILL1K\nXY8CeqKHnc9a04g1UjxW2SLv7gqe2zlyn7BtZuhroM4gFxORvqXJXVJg4lxj\nofw+JpC6pDep7SJFD/4UsQfBP3ZJgOV8rV320zKbXfNJgSUF3fPibIXGN59Q\n4qjugALYT9g/zAz8rU/o5amUNyU/iLlBHRgXMM3y3XAtPTTQy3lT3uiWHXf+\nlWiQLOIFmJG1gXAswqPVs3FyHa4Eu9AtcynA6I2G/6ZZ31YttdnL7UH4Px0N\nwXqZIi8nAkCKvdfX6SZf5Z+Xyo0YzqEAgkzc6apm1RvYIQZ7MtafuJvtf7eC\nxXRLmbLoGfa2nt+Nkpqtb4tHRgKrvFDQhOZVNMc0oGKIEt2+9uX9fZJ8at01\nwnXQrzZ79B0NW5axO7jJA3pGHpMUQhIqJchSKbf9cRbwzQ1amaTHhesXwJOg\n+fiMM1NAaiNaS/SbRwwsWBiAi7J3p7G2Z746/dk3EvgVFCKeXeIFCPZnjjjd\ndWaZExRsLKB8kItC8E7wDg2YX4bviyplvzJZTp9PxfPjSJUJpcLi/ZSy3g3b\nuurj\r\n=F0VD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiN25Y9xSfu9h4nw30Gq1ae68xXoFZHNnnqGhzF3zLNAiEAm574sGvWmoS5wBcYK694bXG3N5TgSney2LotOLEjBXc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.606.16125.0_1614972990884_0.7868241446085331"},"_hasShrinkwrap":false},"2.13.1-canary.582.16147.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.582.16147.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.582.16147.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bb2655e6b6207647011a6d8a197e15d2ea839846","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.582.16147.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2X257nDwzi/e99gk7xssclBjx+c89pmhdcqU9rwZkho1+RDqHT1QT4m+cWQtsCqaG64WTy6NSUZqa8sLGMDjtw==","shasum":"c3d8b3659bfff3ed98b39223c89b5356985c6678","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.582.16147.0.tgz","fileCount":25,"unpackedSize":72179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQo3tCRA9TVsSAnZWagAA4MgP/jTpXgQRo3/AxCg1Uwb+\nS9DH+adZkG6yq0eq21ofyXwnz39PM2q4H/945hyusNgcoqta9RdG24jmiP2W\n854XqEdq9ZfxP4vxUx+MgU68wJGW2oaJyLQJl9chDjMtFQS8w6607AqL05JD\nYRYQgAAcKEK9M4F7b+nzu3oslemecXylnwWYlm8Q/CC/SRkxatpHT9wZqCdj\nXvgNuvgHopat2zJuhvAOvbOUbI8IHwDRVnmxhQk83QgaEBrJRmzunHaEensn\n6OtHsvynvJp2rbpKIMrPFXSad59hGJo1uswztbEB4TCrO3ny3Z9KKfdkS8tY\nbFkDnsAvFkptY5F1YCE2tJIC09VWIACiqRM8WA/71Q6rEUVpUJRxWeFBs33O\n846jxCYZxxJkldd/EWVwbX3R1uoOGxZcZ+tqO/sV49DbB+zzZYpVZmL7zwF5\nrGu1NR33/g6LpoolbdeJO7Niey1l1jlAiP1a9LtA3c4l9GGZ1qURzEE9FbJa\nrVKNvwKHk6dWWGDHnWp6Nsw3y9rCPvCmeV6gv9oi9nHsgXdKaWF/dtlWC7QW\nhcrK9d/IkYPPtJszGSlhU3WkSRCkiJ7XWlmeOahZgP1IgOyahPjIylzxyEkO\nwCPmwv6Q6/UPhJDf6Ah2Cb60gisGzPsMBYkIFjcc7aFkwYIilwDAR95RYltp\nb1u2\r\n=4azD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICT92TcEHyMZFZVUVls4BPvyDTQMMuzRPwof2hnaPUp6AiEAj9u3Ph+WF/hJk+Pyretp5pS4j+NJc8hi4KouzrQ4bZ4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.582.16147.0_1614974437978_0.9092739273778092"},"_hasShrinkwrap":false},"2.13.1-canary.631.16179.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.631.16179.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.631.16179.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a5d405a8c558cf492b49d1cdd92b826d8d34c131","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.631.16179.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BsipklHkOCnAIpc+tKyJRDuJEq9pf8uy+B1VCV+w9OrlASqtm+8JTYHLJnkXFr51EYdw1RxQlHQHtFf27WQpEw==","shasum":"11a1a09f8ea82a393e985c652591863edbe512e5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.631.16179.0.tgz","fileCount":25,"unpackedSize":72179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQpMcCRA9TVsSAnZWagAAHnAP/AnnDUxuzGdIPtVOM8Ur\neaa5dIeQen7Oz+y5wpBIHAcRuSPRx20FgclnGwWfIWk7rLKYW1HC3U3c89q3\nRbdHDnf18YH6bD2rNKfVuhQynv7ND7VqxNVNMI54Hdaz9kHj3iEHVN+2ERyn\nnV1KtHr5foRLVU6QeFm6e6q/4SdWR23o5zNEtd4mVShUISmCwliJ+bvTv68f\ntcvtxnDkw2/Zl+vjK6wFuAZSVwJzxvIzjbw9DRlFAojm+BH1dLIjsWa0blmY\n/UGgIbtrXsH7fmQzfP3BUBxpVedreLOJq+uYW/aepmQGCJlPk9ZVvLm6NMXX\ngTgDVFrtpsC6Ssv3GW3CAi1kQfmrbKhGXJcleg5YOsPlS+gNeYVmvsSYoUWr\nrleGYJlLRGuiBW+gGcN/5/M+PrwuLPr52cc51IBmGdU78uYjIRYckBvPhsJQ\nZv9tjwpFLaRl3FaE/ZX9+SHqNUHFcwmwBtpDb5d94FFpklyqEJAJrtpebLOB\nMpwBxESNCMsO4FPpCNCEQMcqKmvPMrZ5IhbAn6VaVR8EDAWNdlLTpeR/VKHu\nFeQeK8EXXLfJlIB5Nwq6jwFH/nlN//CdqZ9IrsH4thDj40Og97iMZr1ME0zU\nl4PAZDmma8/BFG5/BO99NYoguYAwQuivZaf6eLnRaF6SYEjpjkOvo3X/u85F\ne64a\r\n=Gd64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfWbH6plPtxTq/UVZJD6MEMDy4MBSGlo4qWt5Q3fFenAiEAi/8An/pG6mHmHU9wMZFdEE67s0M3oCR1ALYkPvQp3rY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.631.16179.0_1614975771593_0.45755960313419886"},"_hasShrinkwrap":false},"2.13.1-canary.631.16181.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.631.16181.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.631.16181.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c19de941b50750569d5e290f9dfeda41d2d489f6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.631.16181.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TLs+JjdwqY+47/SbaQfQfrAWkNOcazmtdeYn71y1WwripCP/2JOjuaTqeNpNq0dtkB7TuvbvsdWuWp0qBP1NlA==","shasum":"a29e9b7d7d62ee843547d97c6be829a37b19a0b9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.631.16181.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQpNqCRA9TVsSAnZWagAAl1MP/inQsWPoXp1h9amHT3Ph\n2l4grYLL2gB0L6aq/XK3BtxiYwi5HqPz/oIU78B198uRueUIFP/Cu772wMPO\niTlasWG+wBA1IZvHscXIC1f0RwxpU0wSvusb8DT3jxrE3JaqbQ5X8VGUfqZu\nvdw0tFd/yFWGaAO9Hy61uw0THdVPWkRl4jVXY8DEfjXhWXL7137s20L3HZpy\ngtWN83IpaPyrfF7NC1e4uFeb3gF7ceYrajybYGaMbbbeRTKQGjzXEg714b2U\nKUFVDa5xOh+Z35EgCpUilMwddxWzJQiRRU7wMZS2cLa+ycJE5J6qSnGDAnQd\nBrlGVLfB/SVoA5HPg298qWklpm/O+t1Q0Flk8FXijUSR/B7l1xZJBwfg58g6\nSqCf4nKEnPDrFzsk33hX6qXWjR5T7QBeGjV5DbROJsstaJzecep0xTp5Q80c\npooyeonm+8by7OJmZtLr8kRwTbWHMHsw3DPPSfXD3G3sVRNv6OKe6Lynqbba\njVyXmJ7c2vGpUCEKT11JbycmX2lgfeSik2xmKQLsWQrlWCPR8uENTumy7lR8\nXrfXrBdp2L84i9/5GhgZUsotDw/9xV//LpBTDW5PFtaVhngIYmP9EmfpgL1Q\nt1dOfHnrCgBUWVJE3jjUD5gZzUWZ/42YNNEGJ/8PKKhcVfq7kD5kiwClVvqh\nEvDF\r\n=mWx0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdt0dv48Ohu5bvPS5lBqYzXFdnvlEPzaWFTWSwAx0MpAiB8coqYZRssNTLzEXdgicbjkfHPW+tP4czu93qOs1ccVw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.631.16181.0_1614975849724_0.3155218042409669"},"_hasShrinkwrap":false},"2.13.1-canary.507.16213.0":{"name":"@design-systems/svg-icon-builder","version":"2.13.1-canary.507.16213.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.13.1-canary.507.16213.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1b3fd7a980da25bbb711da7191666610a6f3f171","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.13.1-canary.507.16213.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-R8z9N7REaSU67dnqILvpr5+ikTP+2h3rFbQKsSv6IPa/wJzf27LcoHi6L3nrwMLujdVXWonAbXq/Z2DPab7zjg==","shasum":"8601808b859c866e13737a63c168fa4bc55d25e4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.13.1-canary.507.16213.0.tgz","fileCount":25,"unpackedSize":72055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQpedCRA9TVsSAnZWagAA9DQP/i38eUsaEaeBP8xDrXf1\nypVYM4ZWxqvjo1kIgtFESsYtj6eWBVsvADxneC/m6p6KZfuINOHDGlXI/p6T\nvleTmmf51V3tMUEQNOokIdbcBttd5EPI2s/5+GsokhEOXBadiD5es6bFb4rx\npe8JrkEIZLXXAe6kZQX+mpd/4AivNeJMwcbeMlY9zweUb29WrJt72FIM9S8F\nuKIG6vrT3TlSqN0qsHNo5Zii5TwwmfKPlfWmhHcOgcV+wuQI6AdQNvEEqhZ6\npTOv1Uhq+3I/mvVxJ538PiDZtu8zWYZcYyr/XP8yQvbZF+St1Mz27gx8DFH9\n8bHPWosfccm7j+L7vkygIGChcZNl4OPQpsRDOVTXzofDfOu/5L0JUswy0j8R\nXCm09qziiH3n4Rj+XqYTYA/ItdCtUT2CBmtw4ShbzhdwIWAusEpe870QhtHD\nAZP4IjGgZslu48kuO2wDh0vLpymYC5mkbtuchvgs78ZG0xjfR4NIsl4UrM1F\nSkWgMi21QHmX5YEEZmWOyfLE4u/XLdzKOeuj5Ms2V/L/069nYf6oHpBW1JWa\nFDihWqrPouBPuBR61l6xZjOBNMmA2tuUltB96rmkTMIUEVwc9tygoKVUdMTv\nAPywmn/cfpmkafi5NFoFm+X9ZwjnQ2OeA+SX8b26HdteSCiomsCFOQBFlf4y\nbZ3c\r\n=Zi8W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbXlRn6k8QQh6SfNTzYKjOhRoSifkfrZ9kEkEbrbU55AiEA21AFVD5cK2TlMLKHu2ajg+rPhwQLHfKtgP8L83DOthM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.13.1-canary.507.16213.0_1614976925071_0.9096378736526947"},"_hasShrinkwrap":false},"2.14.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"^2.14.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d02dd585b50486da3f4c188eebaaaf412b07bf5b","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LQ0MwlgpoxNh96jstny/W7YjTKnsd9IQw5VAHme8YMcaK/fwrTehPTEbZxZYALDfeV9auqwtkINHgKupPxwTSA==","shasum":"138f7bf1d23ae93b2dfc891859c6bcde3725c43d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.0.tgz","fileCount":25,"unpackedSize":73731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQptbCRA9TVsSAnZWagAA7DsQAJJl+66b72uOov2z/hr6\nzIKFCXkfBJw3g8wP2GIe6apvi5Of9CGGOaWCgBi51Xyw1SSSOTP1kKeD40f9\nqBDNpr8xl+t0eHEYE+zaAtZYbip4d9WjPw2mIe/zcxSZY1deP/054hIzXtH0\nEFQlEzMlXIvzObbW46tElvSgWMZhPF2JAmeolQyTfsi5agVLKMGYIZ/zSDLc\nXdTFo2Hf5Ek3oNrwqwzWWfWUlPJUU8/RPnTPeyz8Ghe7f+IMm9jJ6FWAuwhX\nPEysLNQoYA4DXmpZQI1PW/E3ZV9TSON3si8pslc0YbCnqg22FC9Ned57Rf7A\nliJiyBQukEcHqXUA5QgO46KAElfMvlrX1IQL9BNN5Oobmot3Cb9GdwFLyw74\n/upLIIvrh4hU8fMAzmMYNQctENrImrDypxe+sqJDIW5d7w0MlgWxsdsWnueL\npkJt0LoeJYgIzMN5tRK9PL+cvjaT0gP4gUNgR7849RWBNGkgr0dwEnZcbYC1\ne/yjraFF3GVNEjDAUCpfP80IiZLr3yha8SiWBui+r+Y8RzT9nKrKZxJT23mT\n66q6FN2hm3feLWAhuvgcBV0iQiHcWclFuEU3ybOmk/+bkZnNBvLxd2KIRxO4\nHQX9+d+IfNiiioZRQOAzQnlDxxsHWEEZn7KxmmOseV9EQhNxIxRqgnGxNrw1\nkqE4\r\n=xvcQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFK7J+1eJ+tx1Z6QnTCG734Ic3m8dy/km2Rzkgunz8XiAiBj9etyy8pJUpv6g0pmVHH+Al8aeL21OnrparYi9yuXEw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.0_1614977882679_0.5211964074834774"},"_hasShrinkwrap":false},"2.14.1-canary.615.16243.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.615.16243.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.615.16243.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"48025c625a28be06738431a414f8ae2c19bcea02","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.615.16243.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-M7usfluQd4zV9d6dxDjj9DtvoV3evbMVDGTHh9ciIA48Mx2uwMpq9sh3EJDR8+US+6zrooVSovx4G9D6kO4N+A==","shasum":"482ea14bb67ff6c99c9691316fcd8e8652b38a13","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.615.16243.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQp8qCRA9TVsSAnZWagAAVT0P/2XejPb1irOmn3NUMxQX\nyIJwiHampbL9pPEO2XX9VmiQRzyVnSdg34DNbQirwPomhU0+BsT/7I3dLuGo\n6+RMibA82sI3gfM0Z8F+Md6sOg9I+GMMO4+Ho7gVfE6z8s8khLdP7dWodm7S\nw5ZhcrdK/blWtpL/GoIOmaOur3UP5H3+P+7mmPDL+3M50Fr0S5B4w1DglQDK\nLPsNQLM1fjeawU4o85mELfuTPf6DgogboC+81nECpNqqFCVJRgXok72peUHW\nzU3NhyN+MwFrcTMpPVkVZfIMNbUvtFfmEFL2N+jw93SExOo69DMHIVbZgsQr\nFtTSP+tYXbR4MN8qW6xA/VexrbX1jg4sMHT3yzb4/KbfNB/aD5Wy+W7mEjKk\nH+3JmYATQKP9g2lxVYh8VCd+m4JLd2Rtsrnai9AFpnWjGhHwrwWf7smG7dSx\nguaf3HJ6OYd9DsG3Wf89Koue7//GkznhHGObr9pjAXTfLpwA8Ujz+USWWycp\na1QrGB3DoQSYR5k/vsgtdINjbSUYQYUY01jRs6SmpoJBhK7H8cBdtlW4Z6oU\nA8Qkzz/vy5GqWC6zAs0/+G2CDAep3JGXJnTWZJ5Y/9nUAXwneYYawlvUF82m\n4ngd/30AlsOCGHgHCMb5Rravfs+y1EMSbVm1EBq+dR53DwrveHQtUPgEgKMv\nlvUL\r\n=miKp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFnt5ZcxxaWDF54/EjOtmAtGJfJdVtzbzdoCO/A08ctQIgNfxC6+it9N/Lx7aZ5Lw+b2gAPnJ46uDKMU4qCDVCnM4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.615.16243.0_1614978857635_0.11577872277647017"},"_hasShrinkwrap":false},"2.14.1-canary.629.16244.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.629.16244.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.629.16244.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3272e1e0a35bb5f8dbd24264c6602802f8f8026e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.629.16244.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MyewgeOMOLHDrJU4n3/SHMT7sl7SLPrtjM8/uCGSoUbCJ8ytMDdpQjzjxFMh9gnEAWB5BZWppe7AvskNHn8ucw==","shasum":"04e7aa40ec9b926ff78516da3691498c315212fe","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.629.16244.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQp9eCRA9TVsSAnZWagAAmK0QAJ1QQY4Kj8rFfHGDwba/\nadxyje+jmVOKUa8bg8VjwMT9+gMFgv0eFLnNCgSQLw2OaNn565n1yor91+v3\nY+jXZ60AIJ8TIF16+9pjlQUmX+vYWzWX9E3TjZSxqMqk2jYnggEmDH7LeyqE\nAc409FDiTzApuvakbLSuEbzlQnez+RILLGoPo62WZ8sS7i8X7/tEZsg/q+kx\n0F1P+JabyfD5OtLBvGU2mP/g5RKnU7yVKyv+sgNR3bVEDtQUySBFqvu7npfs\nLHqhFA2jbnprsHjago18TwmqFclBtZoh9+CSunU6b2k2YQfEF1b9D/Y7fT3T\nCj7e4xb5HVFipdjr7XWcMyl7w5aayCGUsNBJjrnEAml4O7OdWr7ZJkYnxs1T\n5SvKamKPmVdyMb6Gn5q4bPbtA34OR0JSc7BkfacCjCngEM0A6b6RcjZ7W+PL\n6VwcwuM+mYV6O8OYCyHpgsN/zA9HwVn+64+s0wY8IMbvWjJpq5od+beE2VBL\npmIoN5yCGOp5LsGJwfm4FYYm6919ZcYn2DUUdzK0FN3aiH3fB+qJ7Dmb7mMq\ngQfkMZOXmcZuevbsVyRavbmBGua/oiDR8QHmMv9gg6+/a/TjpNjvMHrG5jUD\nNVvO18hNtTdG5vdC5wFOdqbiT2c40bfNBP7SsxsHvLRdgdaRO9urbX0TZ8H2\nlVKX\r\n=cBW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQQyUZdX8vHAk+Nlt3Gh6Qujlh+TAU2J1K0zWMDrF9SAIgIovAwvEfTvSMzgVeRhhfq9ukb4gXi/Bl/hO5/HPwlRU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.629.16244.0_1614978909857_0.5904775634575798"},"_hasShrinkwrap":false},"2.14.1-canary.568.16291.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.568.16291.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.568.16291.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ea29ed07a63d85eff9ebb4ab0f97a9031b79becc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.568.16291.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6lnu/N21UE8EKrPorpPX8R80a3XOTFTR9iMKbzpsLZEKrr9m4Qzk13U5cFXVwl+PQqzZ0VCspOqKHpAjFW65JA==","shasum":"f9039f7a3a3b0ff7e345ac6756baa4422eba8c24","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.568.16291.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQqmYCRA9TVsSAnZWagAAaSQP/0Io/TSfRkEyA9vLvn3V\n0b/fj4K/GvQR1bv1l1hHW/l9VdkkMT1Rduchr7uZLGTLVfAieOzr6T+oFhHd\nL9tBfTaXAnnRBuaMzLEoMixSs4Q6GXTZjcebBWKanFNRbyJ8WLXke5+C8/px\nIL9E+kjucc+qUj/m4adbOaEAAHxCa1ZyTNPwVnE/bQuEQdHwso+IorLVnlEJ\nzK+BGq+WsldOJvOFRVmYpBA2/0vxSWnEB9DgXflUbDIDBkXzZzqaJi++WOoe\ns8xisTnO9o6wvu47VvNmJhBsYLmWA54SyHRMyaN01KYqCBp9uqrFBYg9DkBo\ngEVMlCG6b58zTDZrFNQz0fhaJFcs3io5JcDQOVkczViwGTjcit0pYXgA5UNz\n8YZILvLFfaz9tdvCFwEX2w3eZMXAF7RE7zN5tKXbu9ErMWS7BllIPQLvg4Ng\nkFVDa9jkGIhfuBxEzZ2aX5RayPB1mGnvMnoRnz720CjYgecV3zu5bgva/bm4\nBdvADEYNPfH/KNVqi3kydCeqArOtOLz0RUjU2zPTjVwCJ/1sQHA9M6P8ms0+\nuGBFDRsNb20hxI4B/l+jsZ8INqivyWsRuNdW/9wA0Ed/ZxgyAGyDuXvV+KUT\nMAoQ/v9OpKa+Dz4+a0j+kTgQDjgGNdCvHuj6Me8rmveHrzVL0oJV+Th14tbf\ncsgE\r\n=K/Gz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvtXWlO+iyltkqmhn7WChLpoxpaD1MEfLTtH8z3TmcUQIhAO3niJpYw+8DkKhOCbsA5nCE2mek318jWRvG8hb0g1mO"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.568.16291.0_1614981527734_0.3380125784459651"},"_hasShrinkwrap":false},"2.14.1-canary.584.16297.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.584.16297.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.584.16297.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f0d8ac2612970cda507a148d99557ed33b514503","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.584.16297.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JBvLklU/FE8lqApkmwGTH4xwekN9t/xMpPGmSGTySxWfIvXLteu+iA7HCuAn8QXJuImO00sOeg2zqmINg5FDIQ==","shasum":"539a20d7e9448171febb59723313cf91408628e9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.584.16297.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQqpYCRA9TVsSAnZWagAA/NEP/3T71val+DCR0n8WSiG5\nP+4uT5Wl5/pyiFXhMTZDnoTmb16kOikLyDe9+CltiscPn8TXxz/xDinkJ6DP\nP9xDlyzYE+meW1s3+BzSeECk0VTF4GyWFWPpA2wPu4gcqyNiDxzDMDPD+mrK\nM7qYFnLuP0mwOhVwRFUkL6+Mt9/FL0sr134Cm/TpMx28Qdo8LJUQTSAEgqe+\nVmfGTEvPma0LirNg/j+aW9YpWLSWi0MM/7cOBiHe9Ub7ynEHZOqIvl7Wz+b/\ntQISUE5T56hWtt50RAEzsfBtTku2cXC4wZjLNyGCXirxdxpbw81fsd1MPina\naj7KM8F+fQ2H3m0CEiuDW2XhfqWUvxHcXotVA7Kx8mxxBHG1DnIWWC6pEqEm\nnaPnk4Gb8eF6uVX5RNfIZsy7KDgJ/NPKD9WgabVtrOZVM4K5FfoGshDN+UoE\n/AeLeIQhRrkXklhOqJtif6KqeD/KC6k2qBKJtAk/LJNWFM4PWhwWPZJRGV0n\n/uvqZj4y0C5SVk80QCPRD1DdqyOB3MF0wr/7qkW5mDAx3Wg3ZVZ6LgUfjfqo\nU60LbRop4e6CyocsEGhOSlh6Gap9TETPsJKmiXkKxjHZokoX/leaBcSTHbjP\nx9lkTzIIU1f/F5oPqBEphaFNkFc2EwIbNyT7lrNVIk6dWerKBiuLNqeMGu5W\nqbir\r\n=up+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDv+P38FG2bNTfqu8A9USHvN3ujSnbjMSw5meO+UqKD6AiEA7HgB/yPKQXxkulm43KzLcp84+gWnJJkYlQtTtcN/5C8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.584.16297.0_1614981719633_0.48400133410178525"},"_hasShrinkwrap":false},"2.14.1-canary.599.16300.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.599.16300.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.599.16300.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"993f9133f70d4a980903a452d581ed31df252d69","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.599.16300.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZIMFqje+KeH8OFFg573LpC3HZuJMQ8PIVzsOHEjJHpvTh4j4fLneEXoqh6IiIJa9Hs2CnihueunsCz0SQMpYxQ==","shasum":"62119ba0e23d2c0ba5a747fe0da46c566bb6907d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.599.16300.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQqqNCRA9TVsSAnZWagAA5iAP/0LX/YxjLZk9U5y4Xtfa\nCp7pND0s6oGoBYmvnYinggywcO8lLeKg+ldisrc/uOdRj2CW/Rpxj60fWzNE\nyUmd+BQMwvH8/vSVQNa7n5GzjqkdjwLW+kcH0MriQmKVdh/xyl3dTju5rr7n\n1lsVQPzes9S95GaIAQbBVuGmgelZH3m1ibxX3mGG0WncmRnWqXZ6tfQAR4Nk\nr4WXMUb+4Vz6kOJc1ClmJm5Dzl82fsS/bYRfcDNzv4E5Afqjz7TOfLiVdUzl\nlLjJLVhVXMv0JoHXgZez7IBeQs6fpXCOBSua+1g/WUbIyrTBycIDgt9VX/hT\nx+ZA3lIMrsVf3CC5+1OUkJiIKeGS83EWCF5xOPvHxnh3Kv1Dch1Uxh3KVoCP\nOSYqgiSyKcT9Fo4fIu/b7dUifFfX0Uz6+4BM//Gp1mojZKJwCxLlBfe2Gla0\nqsjgCi/Wx4ccN82NfAMIMvdt/GGEI7sbLLoVNqCZClRYorzwul8nlyDtRHcY\ntIunPZVXoSv0InkYNjp9JqPLHHp8uVuh+fvjnpj3W2/IZo5wioNxLrevzdDE\nM2E4s+xFJ0L5YhV8APUS6hdGqamPRIgB2fV7vsiYA6rL4TGds8mMP0dhSeME\n2waNMksfE9S8VRJrJMZu1A4F27judW9luGK5ZP0qUwZzYHotJ67D0ataJvbx\n5or5\r\n=ltay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZw262lGk6pfM4Bsc8Xr9CU5FaCVf0bMfLaKP+/MOjdAiEAtoX0DSSh0EWAcPHcDkB38wzAmmbdvayB4WehNL0jhbM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.599.16300.0_1614981773427_0.1876656939749315"},"_hasShrinkwrap":false},"2.14.1-canary.543.16350.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.543.16350.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.543.16350.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"adf68fcdac0d9af79997891069635acbbc159557","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.543.16350.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3MHsIBzeju+Q/IW+z8VyGxU5VhK9YdaFpwy50ocdl9419ctIa3R8eOv0UWunjaivjn0pVXNxvWfx+BcicAtqmg==","shasum":"7e052c803f841f27370b2d3da1e8ce81dfecf72c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.543.16350.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQrOnCRA9TVsSAnZWagAAJ7UP/iufH2z4g1DNjLRi4ops\nkAvoA5dmrgeoLmHNpfI1v4JvPS9xj+v9c52VcVuLsIwYWItbgy8ENeQpzYeE\nRv4qwaSoN8v5eu8M7ySXWaCHoTz59bzkIgVy/wEnG3+C6Z+/QHx6TnUFZOxv\nxUBoatdzRAcIM+/srOe7v2YVNuHGKIprEXXh3cYlDlVE9D/u6mDk+9oJJ6sn\nJJJ8FjQ3pQf0ISZnxGOmR69rQNkFsxiM/r532SioT4i5zmSSg+cioJQxleex\nDZuNVk+l6outdYaBc/RBLOzFUrn8GbkDq7ZmhsKFWOF3kVKhMOQuDR96vu9f\nEMlyK/1ZlAc8OIguUKawOmieCsCWY6JIcIN+sbpUs277JlB9gBwNViUUmlmO\npwRt+rASiLlKby16hsdN0+1hRp8klf8FoP7r58dLmnTytaLo5y3aPZjmS6aF\nfy6LP7EyWblSXwXbunu8p+xKEePDb45101kI29dLkjLrxWvGrya5yR47S/a8\ntpJ6F7FZyRJrHxEZwX2nExsLekgFHlyHZViVjpSxp85+avJZJPsrySXz1s0P\nTWfTQ6oXTrzFEYfVutQs/yHhPngZxek0NtCGJaf6NCc/pZErC36hEB9f15dQ\ngN0UmTOr/bwMAVAWiv1wKdnPrmDhgBvyn+D7Lp7G2ZSvmbKjR7YSV+6D/prx\nl55Y\r\n=pyXk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj8II+5MphvTk9I6AmkTXI8yNWSmd7Y8Q9hjDdz+extAIgL69UIWRU4LEKq8f25c9tS42zdgUt9nU0YiK+CfxyNv8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.543.16350.0_1614984102825_0.7120275110309937"},"_hasShrinkwrap":false},"2.14.1-canary.611.16352.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.611.16352.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.611.16352.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c744629a71a120492e680d0759bfbff220e5dca8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.611.16352.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xy+y9Z8JW5kh9aIISJYB6mhzTbs/Rtm4o8BppaGmKeHR6LS9GuX6WWYMjL84NcerrbKox9gc1ddhM031Sk6Wxw==","shasum":"8249190af1d8c23b0576cf5ca4c7ebc858b85c5b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.611.16352.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQrO3CRA9TVsSAnZWagAArMIQAJDUWXHEkf+L1icpbpyi\nDj9cjQUqLiGmRvXvdlXeapwrNx/n2YrlNZJAkw9KysDrAbqHeu0AQLol471T\nS4FvYFdDaAqM86BIQFpcMhDbBsDwYCt3tllAU+a+PNxvhde03GtqMSiuLuSC\nPoZka1QXI2pZiqLwnYFctqo5KtUqrvQbChSrTBXuMCIGi2RsFLn+ZIUMEwBw\nLZvdcQXLnk5eqIhyuLdjXg06z87/jP7oJP/nHHGfuHBG3s74oQwBTdJpYTDa\n7i9kh1khEYyszQnKRpQfPkKJFVmmFwbmGnmIz04iRda8gd0/x0A+sEuHlOjg\ndlENzRW1+bPWNyI6YoN1FmHIl1qvbrdHv0hIBiK2fV9VH8M4MoOZmSscRk0D\nbWxD651KXjzgsGWj4dKggkvLEfRI/0paJZdFxULSv1PoaBuK3iPqbS5q7vEE\npg8sw/aujSMYsLTW5QpAOWqwzopDpHpzWiTlppu7BBpKOV64PZsN0MwCghPQ\nHNZd+/ew6ErUxWMLzRZ70WqIMwGkpPIPo6PEliFx6FxVR6a3zVQNHD3/3e/V\nzDzX/ZtIG0Co0wXC5QEMvu1+99OJRDEzxYw0PAVEr0ri5vMr2/ktY4XsY331\n8uuFkea91dSg+tZs3a6ZG+J2Tp7EX5JnsmeoamxGiLIVGP/jODr/y0TmktnI\nhfGg\r\n=M9vG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAYoKEmuSGPB1J7Xz1WWPse2cu3AS6GzN1FQGhikQJBgIgf3aOdyQxvw54GPFLHYzO+r9vN8ro8b53kmFBZWro+8c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.611.16352.0_1614984118986_0.5132339172275466"},"_hasShrinkwrap":false},"2.14.1-canary.596.16356.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.596.16356.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.596.16356.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8484b1636952aa09be545f49425151d15a6209fa","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.596.16356.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MaH8lJfZ2brKX1USzmKkkenYCTsYoHLC0q1dH06pLNzR/nrGSy8aLDzniLOULNe62+P+2H0T4Lk6gPai1NLp3A==","shasum":"e7830a2ebe99fee9209f12706eacdba7f70b421a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.596.16356.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQrQmCRA9TVsSAnZWagAApJYP/1Y7tHeNJbiAtz+/mtfJ\nQHTXdVogj4HqDqCxg52UDg9dLoct18xxleDLyYozn2ig01s6Uq7aFDFrnLU5\nprEpohqBuGpLk6emlGNRRsfQPSgYHa8teRzXWRw1RRI9OHLIk7+e/Cdp1i10\nRhJ7bU0gV1YoSd1Bp8Zd5jROXYy8BM3VOUNWVBh4Sy+7iLBLFCYFobx8Sx0R\nF6bv+VcDVxo/Y91pc3576zRkE2QtbjoaV9rnoeFaMkrt+n3FMOzoaBwKVnsF\n6MgSYMDRd/kJe9fbOZAYYMT7yDGQA6Atk6tkB+Y739TQW/O1EI4OgJK1i3hO\nP6gOSpQdWMwE7xKqNTjYtTYRonaOjpGMjEvNJUPIgcP2nd4q3aKqWSaDUG5l\nlmCyuLbV/TYkeo1tRRfqTxYASPDxAhliUZnGFjpAZNLmDyF+sVsSH0Msp8aR\nv3adc0GykYjn5eapugHqgqbrQLtT/vhiixjeBlQfZcdc4I/oobTpwybKbfK8\nMP1AVocaScf5Y2AVMB//yl1VhrXkQthGvfHMQzuCZrqBVVQkuZuhbdZTZ0ie\nk1+dTIP7ZkmhMrFScV5pYSNFQtEbrsvLIHIS1WyGUpAaeShK8FM4A1wz43/H\nyMf7lEuV/ooQj1pewreSlFG7bldGEQ3pMwOoHxEXGtHatryy6208ghRWkIz7\nj6wf\r\n=0E1/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAIezYLr3RAdaZJII+9wpeItGAfDGtNTCimvhPLBz9ZAIhANCFBnEPTdylJ/35D3JawBMCOO4NaJ8kIb8wboRMNibG"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.596.16356.0_1614984230221_0.24113258868511545"},"_hasShrinkwrap":false},"2.14.1-canary.554.16358.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.554.16358.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.554.16358.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ae6b96699f749659aa60ea44f4365faa33ef5af4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.554.16358.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-s1KZSdkotPFp1ykfsNaBzJZCUcJwg1ck8fmVgCxpCjXDVQoOjUZlaTVKc6q/l8OTMX2iPQA0J0rObxZVMjlSHA==","shasum":"8a2f453bb60b844a86950429d67a3158975c6429","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.554.16358.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQrRBCRA9TVsSAnZWagAAyLMP/0IS001LaNKM9nnGrwOC\nYW1gtRQsR+KLWuAxk6w4cbNIbspgMYjxbV46S2AccOC8w+YvY3bJ3a46jNJS\nbG4FtNplHEjGjnSWnxb+dO8U7xjuKfLYpeB3IKLfUA54gqLGPtzQz2rmRohe\nCgMbXXTEk4cChNor77cjw2ApdK6JxV3dQr7WrfdYs1wb2c9FOC42w2vwEZSD\nVCewZ1xWPCAv9lGQVIxKYNhGCKWkJRnmI9Goca9VGKR8Ml/+Uo5Ehleosqw4\nSn6f0LPVPN+kDn87zV/G5vyvDitlNOBqE4tg/e0abMrB3Lz9GhyPp8ZqFp3B\nqzqBqWxjSc6ASk7mnMnjdPzgwQb+qyfVxJwd9oiJYV0ekjbO+hs6dWt09SU7\nUSkxn8IG6kCmEup6R+/h2TjpH9FZDybUmtgXX4ZaW3LK72EWtXzzdz+sYZ+M\nMUxZ2XM5tBwt5Ctj6kcdswmfAlizloJivfxLH+fd5oKIwCA1wgOZZlDW97cf\nN6qVER4ovi4A/6QAUG3EV3ldHYgHpubZRMKEm/yt508zeiCt+HZL4k7sHpzN\nFnQpN72YI6xcU/XjMG7yXDtK+NdNpxKBsdyoNJd2dqKGF/sUzmV5SfIX38Tk\nwHgrEVFlgNPcZPg7Y+KJzCplK7uIA9QKVTX37VGF4kzEdFE6hS0k8WKdQtDx\nDoPK\r\n=FKja\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKaWagBitM8Z7hGs78AihGPppTdiRR3lUwCUqIbX6PVAiARxZPh3B8OzbIcN1pO+wO89K817kfyD+QpRShnZ5Evwg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.554.16358.0_1614984257165_0.2503302727882126"},"_hasShrinkwrap":false},"2.14.1-canary.473.16390.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.473.16390.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.473.16390.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"dae7432a46808eace8699355e0c9d55d6e28df00","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.473.16390.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EwHAbeEPuIeTmKSQKmSzXuqtP3uQcAKJiiPVpMHXpUd3xF/vKL6cJ4oGx8grwL6uFonj1V02HQXVOV7AOk9DBQ==","shasum":"4efcb8f5e700e6916136f81027b43060c7253659","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.473.16390.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQrk0CRA9TVsSAnZWagAAFfYP/jSNL61biehO7M4jFYTu\no+ndWjC6Fc/O5ePS7CtoZsvsKrf/nLsY3YIrPCw4ZlMvuNc+N/xv5IEx/Ocp\naK4UzYWJZPnnuXQOajIcBeGPVEQ3yKRzePhlYSdO7OWm3fl9PoQOAEOoW1Jp\nIvQE4WERdCxEX51Dk6QsDx95QEh0eHZ0RZKUJQ8dr9tUj1MMsh8IxW6BRq0Y\nr6Oer00dGAtS5RDUPB14Df6cV8LtJytOVd70sufZFFEhgx/d7WXoid2E1q5+\ngr6nXwL3EO6pemGZHKO2TBxeXnuGWaibQpDFV5FETdzhudHIjQrT3ajt235W\n2c8DC6oeq8LoIubgSum7dmqLPGcHvYqWe7FpjYodfsKBPvehTQWVtCzw1H84\nfptB6nfSfC7iFoxsgDrdXj/eSbbk2iuEn5iW8aXgDa1KKA91D1/KKB0sMp1w\ns1v1GQMdWCevQzXRuW/UuyPnqnVkg4O4UbS6MWR1GroBZOJYC2B74fMqS0j1\nx4ijdhees4f9iDLihbI5v0Fw3vPeAhYTuUHvR20tsLpAGRDMFMHFFFACZXnD\niTPlAvaqeNT21k0hK9mMRZ3Z4QFHdgAQOfUztIKMnSKvV4Zwk1pDn3IBFFTY\niFMPFTomOQc0IxsZ6cE/Y16z5X9QoOGf1aZd31TmEv8sz2YHtCUxc9x2g5fO\nP087\r\n=WSM0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExojYqRPMF3IRylBefNCCBBt3cHGh6YsDrlt6ELo9qBAiEAkXe4sfx5rLN2lGXBpQg98YdVf9j4jgYOBjKY6PL1cH8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.473.16390.0_1614985524274_0.14205563747423966"},"_hasShrinkwrap":false},"2.14.1-canary.641.16436.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.641.16436.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.641.16436.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8a7d40fe8e2f1cb024a2e08cb2d14c6bb5fdb0de","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.641.16436.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KDMvCBaHMqOJ+a2NonhgX8b4FCP4Vd1JiWjaV4b+wsK3wMtzbdpCdg9IaHeJ+haoJUe51fvmcKUO68uCQpJmeQ==","shasum":"a2efa947b194ddd2ed969ac057e766a9a9402fec","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.641.16436.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQsKrCRA9TVsSAnZWagAAc4cQAJUqpfRTOEYFtAXKMnho\nvcrik6RKqSu/zrzcOjhQRsT/pEQ7IL5QaCguaJuJ1lYXlFYg/QnrhsCo7/qK\neDexVqkMZe3h8AfvKcev3GEzCiK/TVB6/an/SVYx6L3SZE/XXc0RmuvXoXva\nrasrHtgJNXfkNv8kDqwAv2eBCF2gVtfRH6uQmXIctIndq9+LxvMMnAoXOk04\nYhfJnGisQh+9ViwvovyfMf28Ae+JxavlLLU7AByRx+yicd7gQRrjxIE00ZlC\nXNcx4tR7prKNSkC/oCeyl4d1sFB1hBMR46HNfx36VB01GPjswM5BOzRAelAc\n28JFTs9nntNQs9AOtHHaZOd5ZYTddDi0Ev86Cv0V6CEEzOdjhtPxyNz10SNO\nGUYF3ViaAfCBJQ2MlbJZaCpU4fpYk0evTq3ORqOs73x8n5HHSDLtXfK9kGNm\n2Z6DDpam1kZZJcHjSgRZZ9pT610gNb+7YmecUUa4aHYoSBBwDJvMbiXJgNF5\nM2KubkAMiPI4IA2tDW1IDHqqOur3O8l8zaPEe+bBDlY1JgAbS7dRcBfLo2ea\nuojFPNggV9JRnMRY5/SlsRXkYaYhx8HyfDh7mscPKTyKoMbywBy1G2NZ11XA\naSmRmNHpk8PijZIAYWeliPxvskTrn+/kxJgqiuwcq0eophY1w3kffec91Tjv\nbxfe\r\n=mQ3t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRvORx25PD5keMYidhbB47q/M0ypUQWkXsHQRKFLwHDQIgeDdHMxlaa/M682AvNXPhVCrILAn3ngtivEALOMifzBg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.641.16436.0_1614987946943_0.956358680234467"},"_hasShrinkwrap":false},"2.14.1-canary.513.16475.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.513.16475.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.513.16475.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1bb99fb4d6c25cfc2beacda11fc6a5154cfde4d8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.513.16475.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hOGgKxLwInZzmKvaHfXG2VBoZkuzqajHhJV78z52NBgeDjxdHUhD7/rPCdjiNoKfg1rG3N/nAQuJVANiJuyT3Q==","shasum":"ad25b6db7b1e2a34c03232249e5db54ae1a72094","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.513.16475.0.tgz","fileCount":25,"unpackedSize":72179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQsdQCRA9TVsSAnZWagAAZEQP/Ag48ZBwvIF+D6vhb1BU\ncFlK+tSQLj+dZeWh6ktkx3MQ3SGbUFYyDLBxFmvUIZA8DP1Vk+4OvHdvDTRs\npneI90ditjAjAQsL5xmsoR9Oi50q4jiPlZ6V/UvCLkQ3dQZHDN68ZXsfO3C7\n7Kn8Px/p+jwmEMAJyaUnQSRqdwXmvEbY6LzdMdCEMpUot0zYk0ALxnIoKfwt\nhLUhhaW/z5AhXjXGieOUTTSDVHfuOxUP3MeJBqODPrO7x6qDdUJVTxc/9uAS\nLMe0qYIiIMwWwM5x9PkLYRh1Q0RDK7NTGRCNl7+lD7wD/nHhpdhYX5klEAOk\ncU/QGf9e51Mfu/S91XoCDEOMQymrzP0e/IUNkUy4bDTmAoyqn3MWSMm6xnWl\nNSfPWWHT0A9mC2rIB6EPwXdl5eMJNx7bL0XXBIUaPlCc9Cf2w4mXXbqBcKPf\nL06gHg65KcaenqRvmQH/nU63M/6kqQThprN2DMrlehLQ09cKGi6UXw4gfTXg\nYWxOwah9MMcurvmqt1EU/qyCQW0zQ3UXdjeQbcsPgwZ9QvSZkN3xvd9zpp7d\nN4jDM6qlu4d086rt1wwWRwnXAbl7SVQk3Hs6Hkr3Nk4t0rmt+MwgNGLWSge2\nNtdsOlGPLmc8qEvHDEiO64qsu2l8lembySIA7u7334KiPU4a5OBKl36jzqrO\nvLcl\r\n=3K7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt0RwPE3KM30csfN6UqiQ85OiEurGXcIvQogeMdu1O1wIhALMzwz5LxH0nNAoSH6zHyCnbiqbCiY2j7CcvyfPtuo3U"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.513.16475.0_1614989136492_0.07296362572592208"},"_hasShrinkwrap":false},"2.14.1-canary.529.16476.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.529.16476.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.529.16476.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f30eeed2b4ba57e2a73ba1fa5f460d9618ceb505","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.529.16476.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QD1esc+NUGkI34q3r4fVnGWmG2uNli5nnFzwFU0ksODlUmbpq0L39D4XmIFAz360l8os+0iV0GR3u62ktpSCZw==","shasum":"b558ba1c567ace1c0f6ba769c1352b9f8f80ba81","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.529.16476.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQsdfCRA9TVsSAnZWagAAy+cP/0HbH1Ec3CuZHiFkuAQg\nBHhBcgIHaCmHcafewAybYCQPYfLcN/GVSzPZiXUe4pT3ZH7X+WQ7w8pDJBGY\nr5okaG1qJlG7yazPlFod09IwnGhswUffwmtwVCglyIbdejGRxad2ej1sDyAr\nOGbZ5WfbGjm072SbSvHrJRjShMkQro3uXtGJM9/7dx926VLRNEhrf7EiGBhY\nNgYeZtxjD/MnGxbOu+3L8fQ8hrepg6f3Ft538yqi27FpTElYdJ3qKZf/9gZs\nZxAuanuMNNfI0kAbAln+XDLT/WZbiMSrCKJZlDsoe6MPGELx4JZRvHQ/xpfH\n6AnwJysBvr71lRvZ7NQU2yJIS4VZ1vjUOHy8EFN4daj5wH/AjQ8bWC0Wi19g\nNJLx+dqzq+FwU+hq7AVlBgmv1NTILwdQjlkccrHuXEu/BOBo9d1GHdrNdYen\nxyvo/klnxkbprE1L/sdIrC/PKMBMq0CBeSuVKdnbp796QSYk5kzJeqpunIhT\n0d7/RsN5xwa+GOgTENyacqDl0A2pellXfTqcV6lKi2d7fcnnxNptS8ICMx4M\nv8kb0LCDk0oqklE0FO4UTJMLfT5Xh99R+48XeT75Yf1uU/GQRmcnZG/AK+kf\ngIL1aIxRi+oZSP2ZK0Re/BG/KKB6JOoYqzJ3cMq28nIjKpm1TPXNUUVuK5jz\nmcOU\r\n=gOLF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBICf8LV6tW4BPOjZpu6upDasB7j9CynOorfCFywOZKEAiEA84J4oQN9uofqyo18MzUu5lcC3tmVkgXUjpGz2sgyKWc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.529.16476.0_1614989151344_0.8351527704589565"},"_hasShrinkwrap":false},"2.14.1-canary.481.16477.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.481.16477.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.481.16477.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"11e589f9e307abc63aafd298f7b0f1192a722ed9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.481.16477.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-evQ8S0tCgmBgP1/2/dYpz2jALXWHxeYzQ0mssZYL1zHNQ821mGAN4q3EToj2WmoFqQKpb9rE9owFZ6WDJe6JLg==","shasum":"07bf6ee763062dd2ccf528d19fa58ce02c980fbc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.481.16477.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQsfjCRA9TVsSAnZWagAAy5MP/RHkkwNpCWwixWwybgP0\nLeGjCOtu68Kx9Hem8fo5qXTd+ACPclz/cTPvQsUNNDRc3TlErNFciN8C69ie\nuuzzbpfijHb2pJ4z1ye/ORxGUBTXC9US9Iah3ybQq6fKwfgEc+rEta0fFDbI\nCGiCZS3Wd9vSblLYMRQp3uqcNm4Vm5t0Ce7fKNC1uWOZxx+xUYWKj1NxWHFI\nXnWmjxRIgDz3HVPpN8ne5NR4FxnxkcV2nKwATIP/pxq4xbt0bsjaEwjw8/5F\n33uZijPeaKIFj1dEAQtXjS+qLERGajlL9lXq6rPZsU53wCF7kLuLbb+8PL3l\n1qW3/MsJKdrcVU0E+UoRk1R7ghevq0PfZ5QH+aO4pGOQE4sXkOoLlTCqG7/z\nwDSSyklin/azc88gR/mZACU7AiV3Qf95gbBMDL8P0jX+uP9hn186sjkDT9aj\n++GCDWxeLAqzyDL8Lw/Gy1nURGeD8R5etGmaq/ZmqbJlH0NnOg5toEFh4N1L\nDnq0ieRwrokCS24VVFF02VthJd9jgtEi+7kw5RlBAu22JtWowMGlXauFzg1j\nGh08jyzGMMLyJa9jjBz/x668oR5CjVFui8PC9QDRuqf5KZleAvpdzp2rK+iw\np3d1UgvVmC/04Mf4m6igHo8yDMkFRK/B1ge9r2Xo0YO40riK389tqa0+NqLS\nsJoh\r\n=RiMO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICFceuzGTkWXikjESRX88d/Ufj4tCU9PpXufvozHec3VAiBgd0JEqTQYFvYsOjr3bazn8mLV6nfy6++ohlmgLPMgjg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.481.16477.0_1614989282574_0.030017391371815583"},"_hasShrinkwrap":false},"2.14.1-canary.542.16479.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.542.16479.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.542.16479.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2c8a751569dc1ba16420f19f6d82e9b05a1a95f7","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.542.16479.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sp7IjUWPogxR1AhvA8U8BuKrEqsfoiOaFs5SkDN7zyQnvC6sHtuMljGvp7gojAYy0td/D8AhXzmnqcvxMrNh8A==","shasum":"eba8ccc57996bbc5c698336c737bc194bb6f28a7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.542.16479.0.tgz","fileCount":25,"unpackedSize":72603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQshECRA9TVsSAnZWagAAD1MP/j3J2X6cQX2QluoCfvUC\ntCHfw47nirYi5PzXePEUy7+dvDXNkpscgzMLG8RZ0jbFrJsj7jklWrbpjDHV\n2Y0HNIcgOzlLtjRAqODX3MMox0ZCnF93APgneWJovWrtgnQIbzzzCLu7IokL\nJLG2mls1i6hWaSs/G9xPNmeQZn8hUHpIFZ2YKS7iEdZzVIH7FPbPae/MzdFD\nGWYV2cBXVDorZvkQXOqrExlrip+JLNgagHfgBJXOVgSAR4LPSIlUOCz3A/q6\nrlwk0BFV5998LpH6bRDN+TxTFVUghFh0dsinPfVefQ4ZGDE4oTFp5zP22l2f\nqyWCZzR85uVwXdrNZfej3PnCwd/5RaSACPd6Ztp0XKiA3ROTq4SzdSiUSIz9\nMRSEJi9835VaWiQVScAkGm4PcbNTtmzs9kqVeo9c/WkcL6wIYiLAXkChVtxt\nVj2GpWZwcjIZssuip6Js0tXx/60ftHEqZuER/VhDMa+VnhHQ3aGLNUtOj1Rb\n9hdeZrQRHyeUtnjZ5kqwt2xiMaanHYu7C6D/LDyk+OSVERF3M7Btc1wpgRmj\ntNQntfx2nGtmZFTMyWQ90wk6FRaUH9yj8rNB/EzBCFwTK0DKmBL6DUdjljf4\n/xNy5O8uj9baqlBDsPmyQYKIAlHE4Pv1v8LCTJSkYknu7OSkqC6eRRp7KJKl\nUZG3\r\n=1PhF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyjmjBAMhsiOGSKO2yH/ZgKMrdos9vZwSLQR0vZ0GaCAiAP/z/HQf9nFyurctlRg0MyfWQsv/Bu5kDqNk+x9wcAKA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.542.16479.0_1614989379795_0.8214602434304221"},"_hasShrinkwrap":false},"2.14.1-canary.493.16485.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.493.16485.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.493.16485.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cf1c0932baea60396e3f62fc306eced563da6ef3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.493.16485.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Z7qKqLjLKl1Wul2qH/FjvSncLfqQm+749p8TFAsVb4p9ZyPmzffoH2sRkxXFzRnSowrZ0vKuHXCHSxoizm9pGw==","shasum":"7056f90315bcdedd95299525f456de8ff494a08f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.493.16485.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQsj0CRA9TVsSAnZWagAAH8QP/2HMuyi7ZWZ2KA0bUcJ8\n1f6PUVDZFABq/YTj1hiImCDMnViQshNaV82DEKNBchAli8DsECc+4XFnXasM\ngZQD0ZkMlMUMdfBw4975vXBTypLihqrcYAspPGAAfQDcNsKjKZ4h968Xtswc\nOjwNiGIgBwnxMzr0h/yFAbArY0P7Q9lvv9raIhzlzx0eFWYrMgPmR07pjpC8\nab4XMSvmHf8OAi5T72zOUvHUsZn5RMuwVEbEf+y8MqRvZFnjuAaIvVOHdSxT\nF/PsA58xztgQ0dy7tRIYcPNXrohjuQI94sluv2hqbq4kaHEILM8UngknbeKV\n01dR4MWFJ/Hykw8mKY4GMBuYCsRkpk4Ab+AKNZXxybJW0yL9zTBlJcPeN97E\nEchYtJrP8exmV5OgYnvemz8YmVteI2Deapmo0LhbwC4XeMcWyEv92PWUWDxB\ntDt64feb4urEDSmdlLEZm+4QeYNGRN4fMHFuS21f4IvxUmUOYp1zxnL2RGSD\nkrzf6mG/xSeWQYC0vShmqIXZoP9K1g0YRDiRmxi3S56w6+qpem8xMWenLsS/\nSp2Dgxx/QCtRb6txE0ZgJZcSEnRBYZL8mxRI9XAOfcGJmpwqk4MI7z/igiVb\nzcM9Lt7uKtooWqiWYsl5WPVLUHtVrE3i8yZuRRDLyC2YwJDcJyLYysP/BSij\nI/kP\r\n=7HTK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5Z/rMfbMR1n6QfknVhfH4EPAN1iDANl3qgs1fykNEhAiEAtTVRxGZE9yH1wKmZ5dlahdrphUkiJZsDiAn+R8fu61k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.493.16485.0_1614989556374_0.9160184375326001"},"_hasShrinkwrap":false},"2.14.1--canary.484.16488.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.484.16488.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.484.16488.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c09df876e2f6e3d0153934c55686fea8519a8a01","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.484.16488.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-s/uKLSXojwp55OMpNYMzMlGefWDWC9Ht/sLNaBzGeoc3SFY7BMWt+OMP2mcUh5PIhoLoXp2In/Dfei4w9N9YxA==","shasum":"5862c5f80c0436ffb890214d6da72bded1bf1c0f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.484.16488.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQskkCRA9TVsSAnZWagAAAHMP/jGK8N24XsicxxO+ZIcj\nkVYYRNYtmH3HiLycaub1mElCAYfbhhW5mKniBMlHp0bBnOUd0OIBnCt6QqQe\nc5mKkm5sC3ehytxwjABEV+PnIaKsDJGubN+8oilWHPUaiIiHhDRdTu8kaxaf\nFxIMf8P9kOmUvq110c6BrkYXyNhEWz7Gdn5MQBMjHjS/6Orj7rMqaCfA397G\neENT0AUqHleZBb1SUzj3X7Ly+7oHRfcWqzhHmAAuNH8z0kyV0UsHKNKSsRtw\nHO8ecs8hmFOVdIlsdKhW9sVifZEGg9mHTgy+mIq0rN8m6ZoEoc8YZW3Gwx4i\nlaPpGTNa5KSztcYf8uZSqRUUVSyqh0f3d+Sltk8xacpBV6F2vLv6/bxeU+X1\n5869ft+G9eV3i6byuyKun5v1AHO7OnTYA5X7SzZbbME/UqrbSntmnGPo4Am5\nxTnW4MJ1JxMI7Okq/jDgg1qOt1R6GNkaUlbTh3fQRJKm4oYO8rdF9GJcH8sd\nLBgWhoB3OcNqRQE0ja9wKulvmkPLaZ4WnsoMkWG/b3XGQnBACtfs2uUMsUOb\nrFZuYLNqLCAjO642iHqd2FncinNq3bbDxXaoalxfssDtXXjz1mfcyImLb8v5\nG9xr4DNzYH1mUBwYlseZrMIX2qfDKE2XQ5AggfRNOufyuFRpLv2xPaceXAeL\n27pm\r\n=48j+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFW1wM8AqAqIGZ8gK0Ed1UXpQnxaHhlySVu7Bt/fYrgwAiEA6yY2tCi0MnyT7pQrASt/lSH0J6Xvu0K7DjSHKb0HXN4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.484.16488.0_1614989603642_0.7488520990252929"},"_hasShrinkwrap":false},"2.14.1-canary.488.16491.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1-canary.488.16491.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"7.12.0","@auto-it/slack":"7.12.0","@design-systems/cli":"2.14.1-canary.488.16491.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"eac0c673df168980decbe72907e9c9474dce16e6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1-canary.488.16491.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dmgEvF1irMPbywYT5qjG79fMgeVOu1FWR0wgMUXQxPur0kTsyqcYrmdUr8hBJowgnUl3+rhGWutXuAc8mh9t8g==","shasum":"9d2079ee9e42345fae2b23bfb7e0a6dff3b18a82","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1-canary.488.16491.0.tgz","fileCount":25,"unpackedSize":73768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQsogCRA9TVsSAnZWagAAVTwQAJdtHyGxsHgXruqn9dwy\nDa+kcJqXHrciJN0NNTiskzmSMTXCYQ/JP96IvXxWyuOhBaNM38rM7A1Z+Fat\nblptZWneQ/SjRa78n9HhwIhm04MylUvsV1dzQExYIZMu7AQ8m+45e6gkX/fY\n4h84SONfc2C2oVn9K6DoiLELPilE0Jx0oBqpKyvAPKjaCil46C7f1Q2Kgz/D\nh8chVer6L+fX52fqS2q7mJQLaITYE5hQt+Ke+nA+crcwAVnQxEywW3BhfAk0\nGnyntjUM96XxZnRZPkQvDAYUU4o5NNvYzbLkRwunCe7yzUQqw4W7Xfniyt05\n5luhYfvS3P1V1y6tV5BZOPsR6uc79Vnsukj6touod4ZaD2EQ7v4krqkaBDdM\nr7qs+AxNhqUAGGVFDQnmgl7Hm31BynMN9EhqrTTePlApv2PlxI/tXg9NytwK\nmGVo0JyX7K7eRXKCUh7QxMAQCbBZ6v7zg1f++cGMTaXqdgHo9qLHVO7i8Yi+\n2WYYCCUo4ovtrgV9CTqfxXGZWeFiE+luu4CajrdAEvpxGMhUQPKeDRUeJOGI\n5oa/RqaA7m82zG+wr4GURldVDeie5M7eVB9H1pwjKIA82OvV6abfGh8475PR\njhiFdNMnhl9IVMEU0wGTGz7Qc2kt0JUfBG7Hx7wSbm0rwF8yYUbT4YUNiBoS\njY6U\r\n=EKYg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyAREap5g7PPISrmv+K0193RSgoqSFLpPWR7G5uZUsPAiEA373AXEcPNUWE5RJ6QabUsawlCyixLHsdPJVndY88zGI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1-canary.488.16491.0_1614989855673_0.28280546937442375"},"_hasShrinkwrap":false},"2.14.1--canary.565.16600.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.565.16600.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.565.16600.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c5fec52a36139d66fad73d0f922f2d56ab5120c1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.565.16600.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5TVOaGGMtWgvOSLMxTv7runLul91Sem/zMwXtMWD5E5cHyk3V/+stfH9czVR6ZBUB/DtzgCA8ElU7iajM97kCQ==","shasum":"cae38b7534a13bbbd617555f0fd94c6852b03da7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.565.16600.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvDzCRA9TVsSAnZWagAAnOgQAJOxJE4UV6OssSpm2s+Q\n1HkV2qR3jXJKu3e2q+a3os4dyvUgmvH3w3FDLtoUBL51t9ncsqbEUza/eRLF\nrg5GIUBfAzX57WUhWQt9m0LBCLqIWuSciBx0mUulllL+H4rnAHeeLi0fvfK+\nCeIrOhES7vJIrBwDB4mFUWxm8bP/nx4jvftjoztG6Q5qEs8TEMe037wrfc9l\nR/FM5cBtuF9aKltdFkBc+68cxc3AIwXHXS65dDSe3cCLLuKdFdo0/ppGJlRB\n3/lIGJVuzpO/YXpT9AyFaqize+uThTJ3y5lKqb3oOUjj6HisMPi01B1C9/O8\nQMUjt0bz8phlrWVCZGuu0Pb75DF9nJsLf0PPYvKLAhjIEYJ4DZl2bsGt2t1O\n0ezDUGrJbetXWqihflgcglC+mEcK/qm6nStMtkjF7gDWcnqn0k/lDEeL4xpa\nN3muwjqFDwtbaxrxZIoMHgQYxeUXRpTffFxET70ycYNlwVHVs/8OF4W1Eolw\nkVvgObu3l5Cw/9PBeieKuPUlAt+im34id6oXRsLoUGQOPsqvjc7cMUjMUCYS\njb5hC1nkTmgIjsUrWVK3hRH1Ce9AFhRuRB2N5B6iVvV0iiauBW15qAo3xxRR\nPE9fv8iwrgAhLZgd5X3+eZxvTOZ3BJX5rh4Hl0UBGTj8vV6f4zlJCBNMttl9\nj4da\r\n=L0tA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2HJ9QlhTjm3/YXQYMCdn98KE6txYzgPY2XoDrHcQd3AiEA9H3t5KQHV7eSQjCydnOzsaO/JztZNowpezJsHmJZM/g="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.565.16600.0_1614999795347_0.6043381943569139"},"_hasShrinkwrap":false},"2.14.1--canary.542.16607.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.542.16607.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.542.16607.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"99884da8a75740f90aae71ff2c466e87b650811a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.542.16607.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QHsUtB020avhLJD/4mcmyswQrDSUU1BbWBG1/5HiViEFVw29BcHgBfrmPHvnOFi46kYttXvBt4geFMaBmpfr9w==","shasum":"cd280cbda8fec2e9b51569324d7f6ab1e6f0a4fb","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.542.16607.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvGcCRA9TVsSAnZWagAATnQP/0x8WaOYKnVI1iAo6Z2r\njA3crexFjf7V92TPk5PRXpOSNrv2gzOFHTCGd/hpwUeZyxLvEXGMl4iHUcPR\n3n6SoPR98qFm/YSwSnuWuq5a/Um+Zaz0ythHpkhLJvUBezRz03P4lH8zVolF\nmYscWvkVKDvaFA9R4nycZJBIuW8HwDA0RLB3hZLJVfhzHM45Cj9yhuxAM/cK\nUqXsVcOJjXSVEHegdq1RflArcnT1SxRnSL9dVz16IFcYL/gO1QvkQ4dcQFCw\nsmOHCzADyWiPgWgfduWqELCp57IRUEefRmUFfBV4+fEbWWz6CSmjH3GixVd3\nWMEVUdBHVTDx4tJ3gbYR0x+WYRyOgS4cSXsggwG15Vjn3Xoj3+1ASSosZD1O\n9BT6HbAz8xrC3eOZppGAm5O9XL++4hnMNs2S8+jXoUE10uF0Onc2t9HgiaZj\nmL1gWRV6WdlanqiAi3GHJCzhiIPVSzIy4jwFotpwOV99u5ZqRpuCZPLoATyC\nLlUsDPiGM5ye6jL9IQZU+1iMoBTX9ODXEIooxwQ9A2Et5qMREyPI1ZgZ0C1b\nTCAGhIGRl0EK4wxHluEe6a36VY1qTao/Lz6c3+yxSAxgRoCwWdE/MPu2EYxQ\n2cxS+8ggmVyOcPiJ2CpsidD/pb7UdGvH2Bqcz3o0YYh1855X/KhzMLPTKfFs\n61b9\r\n=zohH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4r9EWrEWXI0/X+EcGfIkbRVswXdzyuVtdabBqjNCfegIhAPdoJeeghrP32O0wjpEXfXMoMmTCWLjSJg/7NKW9WQ58"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.542.16607.0_1614999963927_0.20071247416272842"},"_hasShrinkwrap":false},"2.14.1--canary.611.16610.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.611.16610.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.611.16610.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"422113f41e535b0d4060a8c60582d910f5586833","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.611.16610.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DrmFc7aZnEaYOxbz+9eC+X4X20yFvxFfTBD8uoCBIJcTMzHsds5YCYMi5BFm9/h8+KkHdS69NVwdbhlHLZm7wg==","shasum":"b2febc142f06d644fe7abb74f179552ab0cf7a33","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.611.16610.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvG4CRA9TVsSAnZWagAA4u4P/i1L0y843g0Lrf0UvwEM\n2f1nxDIJDyO1ppN5mpHB3yiHeU0YA2+6IAuMP5Oad4BplI4Xs8PYyyx0oIGc\nRHhj4EVfU9bz2XhboDTKfHR/8XmG3ezBCyO35z0IYIgegKdn9lCX2H643Nzx\nFHx/kgFPrvKeaCzGOBCw3ruFTq+aVSgHzzmhHDw7LGGiZIBNQ58FM8vz//u9\nRHkFDLoGmo6naHxb0oUzDKl8/vfe3VJaHKS9vcz/PsIYxjvg7wasvel7Xn+C\nyZk5aVlUMTQjshMndCDHJX/5q7Ug1XJ6EGuVXfQz/JWrKJoxPcOJaSySn4eb\n3Z3PesxrGqza1cfeMdg84kGWSvNxBdxz/D0lKmOKkITz7mZYWLSHuN6UrR83\nSDxla5I2uVCmRxkqk2l2S1wZxsz5jT1Oj/G0c6+9igzlFumYIiwmn6YiKv0c\nph8cWflbYsoagl1GheILFkzWYlHpdohKyumoi2yxknDKJIKR1A/DynvFqtcJ\nRybHB03SrFOr0j3K99BX/6E2ZlC513DrfOWyicN3tOIKXP6deI79ZHKvbq30\ny0SGwnoeKcMB/S8ywWOdswrh+gAGK+HL8QaiDKcqVVcyFM3R9sRFvkOEHKc+\ncd51u+jUnxuR/3VZnn0YAMefR2zmc1N3rnzubEx0/f7twIPI8BxTZUk0uFGO\nJbX4\r\n=rv2F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIIbDFUah3C3A27RYsHKT1Iv0Gcp5/hFg+qfbOKZ27rwIhAOH6FsLEutISLi/Ew2NTjEFr7+Gi/SxP7BBMk3BwdvWE"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.611.16610.0_1614999992144_0.49557735658044266"},"_hasShrinkwrap":false},"2.14.1--canary.513.16611.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.513.16611.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.513.16611.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"659ddf8516c48e02bca4bc9b685cca3105e7fdd8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.513.16611.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-f0MyFKfk0WYpyKPamg0SpLe72rS+1aWO0KuMLdmtQtk01COqmDo4cZIxCf1PA5esnxOpQM8bHNiw/PhF9TLt1A==","shasum":"b9e672b370a48559af8194d2e92d3b397bd8842d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.513.16611.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvHYCRA9TVsSAnZWagAArRAP/RB7maWxpzh+tUCFGnAS\noir3Sug8mQtZgR64TkubtXlw5Z+7GCPDDENpkejY6Nt05nDrUIUNrsNlh1X2\nNbmP3UhgplAJAB3RqErVk+QLxCLMnmtoTlN5jJTaOImvj8oLsjpiNkD+m/BT\nXF9ysLnCKGqwY/3d44bvI+Krdn7f1FAAC/6fD12paaNXFJ1pFC2tINhSIOmG\nGYPuWL4UBl5chv3qeHmmAINE8RuilOUNZBJUEK5tXF96O6afCNv+NuwJ7xuK\nTE5fukyPmk5Yk4gdL87EZOzZQ0IieZ38jORCjitB3e9s1r0ZzwFMLRn3PKpy\nuvC0IxuhT/3SHhWrFIAlBv2JnlGo39+Hzky5h7DNfLvo7GZkSRss68k+0kka\nZB2mzCgOyblOImWeJ3Q6b1K6qZe110ouS8lAU13nAlAu8irAjOzk7xBD5M+2\nQCE1beYb8/cevji3zbLDY3E6/5xt2vuM+ArNwxySrGRpfsZWFc/bZQP3ZXAJ\n8Re5RX3qkVkaOfXw8bT2GvcNcRly691lxHT38+CIoZbltulfYvZluC6pqqyK\nlk25EEmk5Uf+aFm9xtuLETNRt3y+CGPJobqaeF54mv1PoCGc4pKm+uiuy7QU\ne6ADgl0i8F7mpm+gzcnNK8T0o7iQV91kNV3+UgSEScOaswV7iMp0XSD32RUI\n9KAP\r\n=wPtV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz986yaRHXQceVrxObhfwBewVkVXUBQCJCof3mg6DcOgIgFC3+Dl7P2KatY99MuS0/pHncSZE7j9XHk0oIMHNrq+0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.513.16611.0_1615000023934_0.16423720052485158"},"_hasShrinkwrap":false},"2.14.1--canary.529.16612.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.529.16612.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.529.16612.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8169c8958865d42adbeb9419e8627a2aa6e29eb6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.529.16612.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7wQqJCGlJUwE2MfCSfdCHW7cF6nE9uUYLKvvemC7bsmvq7RxL3CS0zaSDlufcXIPlRPc4cZcZdC0FZRJxGqyGg==","shasum":"076a182ffb9bdac6594fa5f4d08a3af6ca32873f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.529.16612.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvIKCRA9TVsSAnZWagAAA3wP/jCLzr7JZSaPe+ANFw/H\nZll7k/A3sSuCB62wfa5xeChiyBw/PZfVT/az/jba7bjZPNOPhIGzDKY0QRxu\noUKQs7hqz7XPyhMGWzS2yYF5HKFoDOiD0mpyFRb3xCMavphiWDA0dyO3h0BT\nlHaFO1jiQrrVxfHv5PYM43QilggJ/edSSSaZlpJOfgcPsy816FPvnmQBhZIx\nvEHU/+7bs7eVz/TomOqkEYTf3RzkgR8fwYsQXvPgIpdv/nyDeCS4OFDKp+w9\nb1RLqLbF2yXulz0waUi0m7wuUE355Nc7aloT/rSzaGJE0HuIT22PQBH1xmkX\nNON3GoDzD+6kvc+mCJCFG4O05FipdSR25cKoDfa4tr+vQVc/EgA94+BBSNdF\nDLIcBb+s/jmvEwHhRYrm0Q1VgpogtyullAxR3NmyrO3+SrdRLNcs1bgXZ304\n5Crbj5xzG2L8DMLPmpxl1JfDsHvKDuy+kMJxTLs+N5fxRFKwQCiy5wW4gENi\nNaxVPr05BOkuTHAH8bZLmbzLYXtL4rC8da/WaRwajOJESy/e+CPFTJw14JBS\n+KGeDf3dwtl0RE12AkMieLFF5fQ4t3nVDhYchF1kJNBfNr1KKYVlRIbD0bwD\n0VjkHRj/nBd7jPqOslKdd9l1do7/xuz2AVTx7OWxUXSn7JpuGQFLHabihwkk\nR4NP\r\n=TRyn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrH7Wl+/nT6SEM3I9k+HzxoW8MKxoao+EEsX01K/udjwIhAK/AOHpaAggmyb0CZ8MCCCw3HFjJ7htoKFXsEs22CGYr"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.529.16612.0_1615000073965_0.039989632072505055"},"_hasShrinkwrap":false},"2.14.1--canary.566.16614.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.566.16614.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.566.16614.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6d49efa34e7dfa9498ccb98615ed90f91c755918","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.566.16614.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jMrIriJ9qsCu0O61LDiloWG5QEQmgTw8DQwCKevnRmhvS5kI+EhsGyCP2TMCjzEwa/EN+V9/Ucs0ko+voqaxUQ==","shasum":"75939da3558320e652ab0aa1842ebb9004f60d90","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.566.16614.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvIpCRA9TVsSAnZWagAARKsQAIp82MnqJb4fJfsJFcsZ\nJXE057YCQBvW0KJNshLUZlE3XyMNlTkgvMtexlmCWfxrl1NkMsAJ88BCsbKV\n6rIHRyljnQW5lujZ2y/hXZfeF2qtkUrHt3jIX/i7r1XgVqGEFH58ULrVdgRr\nr8XdeveOna33oHDAqHXWyiWdpCSfADUQ7I/dTFDUUk5S9QGqfId7qgdAMB8S\nhs2HELheR7RO1Re2NrF24y9d1YiMSe+w9OHJFgfdnwzWPYKCg7kfAbUJfONM\n+iAschhXSVKO4UhLkOVdV3KcIHc/9BFht6TIOMnZThhNvUBIrFspmX3LzJ00\nBttWx/wWtjyJ87+fyNaBzxWuKlcy6Wyfu+qdp8qtpkJI4bLxQtlvWVkMhCmM\nSNx07O4PBQwuZf3MJipgAaFZYlqJgiuAZH0yVR0WEvjRyry0wDnj3jjWjYr8\njMcWxCFn4ByMReotIP6SKEVR1WhBDZigL9xZ3/4XM24pay7RXIvhEUyzTdVm\n8EONXvduKq6Oe1SKLMu84jTjeg9wc0UEStqZ+OILL5X/O4ILFgEhYCTSF6eK\n38lVtgTu1k8LwR/FTjLKdh7Pc2n8PoBBws35SR9H2C7SAusviy7wgAwUjAWD\ntBDqo4TfRFHNK3Ag0DaYeUMJ1klJMzA0Dv6dTlMckNv3PbiHjAsN4CS3rs3/\nQ5gX\r\n=KdsJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzZ2k6NV+DLO7/6KJY+NSUq18CVNPnLpsYD17594KCLQIhAOYKejmLVy7JqGDr5Yqg1VGuZYZAWP6L+4D6VZL9RLST"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.566.16614.0_1615000104697_0.7009743242530371"},"_hasShrinkwrap":false},"2.14.1--canary.618.16615.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.618.16615.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.618.16615.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"886a8f69cbd879dce6931e1618cc85019c731027","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.618.16615.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-T3se5dt11VQVxNCXnYGNRZ3PDBkvo6s85UHjxRb9x6Odhm9ezqbWED9c+eW3whDH/Ivnbrwiz60qA5w5ChCo1g==","shasum":"6b0b4002e2a0e4185d3a8efc1ecdf19f7c964c0a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.618.16615.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvJFCRA9TVsSAnZWagAAfegP/2fvyJeeHpX2OVTv1SI8\nV6ySECO4QJstLpfvm0umt44tR+N6f5EBfyupqJdQ2jyyH5XZrN0oK6HPwvgO\nA2bTrPbMJhl02+IBwcVxT9grAOjWuFh3W3MhZ6kRS4MBJNiFmLXEnsWzZJQs\neVm3tfGavx1N8N4pW9bwZhjwUWAjc5+2sC4+waamUtLC64ouMGd7vd1nn/qa\nVUA0EX+2IZjzKz71gw1EaQiTdu1a4y1FKZb4cYZhBx4Be7u1+I4WVudlplJV\nu+yzkM2pFmpZy4oE1PYF4y25JihL/5vbWJevspmL4GX5gtLA7y8bpAHoOKOJ\nR6wbhp2UvEySpgOMw0YMIpixHHIhVB+/MSyxACFrV4MLF2U0LnOQXP9IncOs\nARrY3wcwgNFo12pShdDa1OecW8Nt3JcNwBr5gYc6YBpSkyNupQ+e8Ah3ieS2\nVzWyXnK5aWzbEqsEbeXJvYCXbaNOmC4bFiilP0xK/gnOHKt2fY/ns987c+9S\nr2skB4oy/YXbAIMpzb23/g01mKATp0TNNxkf/SpS2UvGCk+HsSBDo7ULIY5k\nIWIya76Y1+9G365BlWPK9kwkLCNRpDY9uFWE8IvmwKf1WkYOojYMy1TlhAJE\nXIEdH3mbXM0Rm+xf4eQf4SIRnSLns9OIhEA5NKrPGfCxcEmu63gsgXrTg6Gi\ncQSY\r\n=4x0e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqConI/pbm7V9JrSojKMBwigkbSQnh7/qJngg7XnsIzAIgfTmqxrTXcpvVPmHMSJtPloy95EuciUhBmVVs82szha4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.618.16615.0_1615000132627_0.34015985501328805"},"_hasShrinkwrap":false},"2.14.1--canary.630.16617.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.630.16617.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.630.16617.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"91863f1e058f038391b8a0f92f7460084608d373","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.630.16617.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-264zUv62AtvzhVd1Jjfkx8wEC3TnzWB0x2XCf+eG649eALpXXER7YrAEidtSP0mfrX4444uJM6scP5myfx0twA==","shasum":"d3e755e823a04b61fbd5a1a950d89d09da2423ab","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.630.16617.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvJ3CRA9TVsSAnZWagAAlxMP/ROqZq+13pWKMFZtjLRc\nUpWuEFhCHMYo7rlX17CtQujlCFutPLA1h00qfDItdRLNAOLQWrxKEKX+HVm9\nptAsZG+3PiWlyp/Kgzks2gslt3k31QXUIg/9kIPAq4/VM1rCMgwo4q986HI8\nmKLuF2sukpOSSvfevf3VDD2zZsByT//h1jsiI4gcow1NkjW1o4UaxJgTtddw\nOoAg8Rx3UW6WGZs0cYz2ROLIXelgnkBNaWlqsnvjDPx0sIcoMDZhpSbOMPq0\nGt0PWtChmT4Wqyb1FV+C20tpG0t0HNp2HGGo5jCLk+v0/sqpn0wIkQnNzona\nMssbVxvxt3RZ7WIJua3dhmN+9jTa26vcnLuxBuAFAjLEIp+KUGIPhVhTWBYQ\n8A1/hViZ8A0q7JqcPWZf7Nu3exv4Qf1CFCOGSBQUQZgfJn34CT24W7GN1aRP\nQAhIXEBLxN4ZD2daOVzPRr6T+ORDuXfPAn4UiRc8ZA2irEqwoLcJ3yHM9LbA\nUOgF+Y8vc/7Qg3UVE/uMbCnNsyggC5WkmN3tJOAGlNjehPj0HDnJ5Rlr7DZs\nl8DPwlj7OB7qL1W9PVNyevsrlw7wGtk5tP4kwG/0oR5bG0nHqc3l2IuqGG0Z\nYdGK3nDJuDQkadTGgjYjBIwo3acnwu9DbeE6VwhRO7VPPEp5LgOVbXCaxL3s\n/lhz\r\n=1zmm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPaoAmU9ZSNj/yFxf0SK1drHdp4cPMbLakAPO4VKwvOgIgW0MDliiph/NDjGQSlhI3ERy20vG95mFiNBIlDpElEbc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.630.16617.0_1615000182618_0.4830858991808693"},"_hasShrinkwrap":false},"2.14.1--canary.575.16618.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.575.16618.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.575.16618.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8c28513af9a2a3b796fc180618ea6375c4df37c4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.575.16618.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FS43tsIeAGCjkL2WhQUt7bW3/aDGjv0OETeEJrQ+Vl/r7htU61KBviX0kL2LRoihxNSpv5dPc2IMiaa+qV6H9Q==","shasum":"70321022bde801060753e13aab89299957081602","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.575.16618.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvKACRA9TVsSAnZWagAAZ4UP/jD+iqXtawgM+mqccAvu\nFGQVTJIWIV+RK3R7Npr1BhKHl/Lx59j1rj3Fi20D7SoBiEFehqeejIeAOgEg\nvgqCX4PubDGfjoPa9wfe7yh+fEEaIPAYDoQOWJCJ/2xXjVS7+J+oABPuc50W\n2bq2aMgeRxKcr6TyGFRO4X2Q0C+ZtE3Lz9CpBstPXNiy3dfRhrnS4Nqs0X8Q\nslzJv08T9GDatb+wJxqROhtNaRL5CAKbGOWzpiIv1FHBztib4AsEP5sM1g+6\nVxeFc3cx2AFNTmZnEJGohFICNW2k3n+Vu5Pzdho5LhimOlkyVCeTfWB1+xsu\n8gFmGcRAJPsSgpZ4hl8gY293vFPcqDye+OJkKNd8bS8Q1h9XBhWaVAwx++hv\nCq8G1a3VCiCIG9d/aZ3SJGUzNHalKdeSXiszhRF51mBt4DrlBbV77Ypzhh/1\ne6bmWhtDRXsldD+f+2fo9WsOs96Mz5AY3nXdAQbOvQN+ienSAkCAB3zLeuM2\nN37gBC0rEoKnpNTFeMo/nRcxZW3rLSx+sQAt3lgwcjJPN3IeQpDnITNvC9bv\nANpshxA7hkOOu02A71ikKle85rO8AWHD7azxR+sWZ6wDKzFSbQ935f9ZzoDl\nejRq/bYvtO16MLcRynkJgOIPp04gdT4atrYnrAO1KETuZc+ZZzu7MVwzDMA5\ntb2N\r\n=ga7F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNGRaJ9GAR+6Ud7kcCbvt0YfSAwnYjR0Y6jkj6PwB7xQIgAgyhq5x+MmXDpGED0mNaGwyDaHY6btKvGCn1YWLfT7g="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.575.16618.0_1615000192149_0.7510241562643649"},"_hasShrinkwrap":false},"2.14.1--canary.617.16619.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.617.16619.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.617.16619.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"da7889fe79f131ba962fba3527c784dce4f12b37","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.617.16619.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EkvnenZHmx5ZUTy/7yOvi8Jnkw21VTXW2YBqh9ppF/blWzaVCcvE/XVhW3aDMypCXXhjzDgrVHD2UjJV9+IPgQ==","shasum":"cfc00cbbc448f688f62ca7e010975794d58a87b1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.617.16619.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvKjCRA9TVsSAnZWagAA4FYQAImuXMpA4w/U0brfLySE\nVJrms1dYp0as8C+EpTKZFOjQlFG4EuABwOO6tQDeDv6VxEnF2Co8hyLHkU7A\nlkPd9NmVjMrCSS1mLgbRGMaMhxn/ITk00BElxtB/QqLtiRV32n2Atsy7yaKI\nd5dDhLbqvrHhnEpZmlZmSffPTWgqD6yOxUJUCOex2vcbodYGf2SmL+0v3h6X\nBidc0S6hV7iT5YH2XU8Garq5wiV/jTOfNcblyctsyAKuOUrc5njeWmSzT9Oq\nGGNp0qkWCLQjZMSSRrBaTGuq97ejROnD4RrK8k5xutQIqOtiPh8tVQKpCxJI\npUFhEOVrg3wcN7k4YH6nFeM5Y/EY9tNkeWhz5995HW6keiawpt+SW5T1HK+j\nSmEHnipb8DoJnlI/Xij+8hhn711vWUgrxX18/ym6dTJnnFTb9o5CZSRrXROU\nXso1VBIr3twkYaxXBzCsPKqdbQtRyMHBz3FyZe1ZMzXufnagoeNJJDNcXTrW\nFHhjB6FBmdkp/hKhy1fzJKSVKCc5N5M87yag6FCTHRNJ0nRRJitozBvZ48f7\n7vw+rs+LXALMZ9L7ASLAGA8fLsLldZiYpF5MTM1MpIK7qV1zzt2DrCeCmZAt\nviCFTA6ppAjseJMBpxQ90rf60YNWPEQiLRmtT2zoEufLhI/5lN8nfmJS59W+\nnyZe\r\n=qoaf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCkBpBoNYflOckmNHqYX515dssXoAkhbNyOZHsMvWaxAiEApj4pNdJE3lo72wAKYNnXqzFiSzMPSIseQIr5Czho9xk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.617.16619.0_1615000227368_0.21939885929425684"},"_hasShrinkwrap":false},"2.14.1--canary.553.16621.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.553.16621.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.553.16621.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cbdcc5c57859daef11002e82ed58f6c0b6ed3948","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.553.16621.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KEj0xSGf7KB94ieXJtLUhzfugkPDuP65vj/tAHkzPAzJAQRaEhhqyiUeFssQ6bP897plBSBrW7siPep2+lz8cg==","shasum":"c1122e079d3660def84190c16f011fbd3e39264a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.553.16621.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvKzCRA9TVsSAnZWagAAn1MP/jkFIAoElf8shnXg2euS\nDdPCwS9kVYfO2Ae/3GxeR1tYTBCOv70JTTpz6cNNFOleBpw5USpUjfYieRH4\nJeuFeYvu9ScJs1ZoIjBWW4mr2cixbt4QnRr98ryNLF1A2F02IuUUtz5fvbrj\ntePFbrY1gTPntkTU/ULluexcZemkaNudB/9ZPUBkfI3yv3PM5aG3ywkj7QSR\nIpdDpSMwR7cVQRCsIpJOKtYVf0WUb4ZGohsRSpxG8iLrokm5DLhhYQ26MCKR\n04Z2HZLF2ciWEtJ9zc/uZzDfai+pZt/SIbRlt9Ez+UaY+/EQNIaKjHqziOsx\n8m8VQMtkhFOtyCwIpc2mF7aUD+acWpUQBGB2uJhh0vVXZNtpdqU14pj+onGX\nnL9fjh5yHXBe4BfoZBDAOoL01vdV752up+QcMRZvB4s7uRvu2mhRfq0ff+Ry\nczcWskWdlaS+kcUxNq5WOt5Ehz6BlPlS4fVpex+bpJLIytgrzEy01/+WnQI7\nPekOX5ptxFaU+X4FFsfnu6mLO8nvVcW6HWSTWN/DLivTRfEGEFUI0AK9Q6f1\nMlgwNRxCJBgW5owM87UFz/ymD+8nevLv7y1UeOSC/jV1aT58JtmMIlFm6qFu\nakDxbQfFgK5l7UAeeCY8z5B/2WtsWZza1wcd/JIqUJoc8WK7BlDiWO8XDYYA\nuG8w\r\n=2xbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0qRdUQC9QizlLNDe4/X6gDL9qVCPTPdg7qXDKfzCjbAIhAIFDXa5pJ9hj8t13tumP/VZEUPdPy0JTpVM7w3I0iWrM"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.553.16621.0_1615000242889_0.6234747004390548"},"_hasShrinkwrap":false},"2.14.1--canary.576.16622.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.576.16622.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.576.16622.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f6e21b44b6159993c14583dd5ab52f8bf7d84bfd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.576.16622.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0UgskWkaEbtZQcvfOaABxEqJfvU4kBUsbxiDr/kR1XBuEI8RC24h8x8EFvzYKe2sHOUdjMTuFaDfXKQaz/EQWg==","shasum":"43887c28d1cfd1f0cd20a1397ef420292f6cb395","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.576.16622.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvLcCRA9TVsSAnZWagAA6T8QAIP9QMd6sPv8Zzx0gbOT\nw0Z56Ccjdgs1Qn4MbExh27lqjmJpQ323DFSMGD9qqdFQ40vxpWf2A3Rjm9sN\nbV4cdu5p9CASJ9YF1g2el+ip/g+r+Lo7LuszNsFM7yxCIb4bKE2ydRNqwlJj\nyu8o8DMxV4N30KlT/5NcGitOx1RJFRMMSKXf80htjYH25qhe/uEbRJ+e9hes\nNCTTxXTyxKJj3PMrqFyuX6NvIBCBWvZ9EzS6RZxNT4XtMuSl1pS2wTAWGV4b\ndh59XKM20aO3wg/Bd9s6jWwMFwtwzM8OjXQ3vY2q2ork+zH9wbCFDodx41tS\nie/CnUykORZYJZ6x5SrFlRWsrOKU/+1OIq7O7RXrx9IPSn2HCGQ6i28yVip/\nZxXnxjkre21/HM3ppVq+3y8OLijD+xvHRIx0KqqHZCoy10hP02Pn0OsHpRvt\nzT+H6oEQyIU6Nt6ruP7n1I7KAVo80ioWfhKOw1tujCqeFdQfPNEOpQlWkqSv\nmifB083a9fTFYtZmPk4Ltm+7YCxV4dcNdIKu+FLRVLMjSj/Y0L1DGieJMWqG\nVWLZb7gewPolGeP3/fOg6IX3umrOQsitdTNSPo/K4qJ5ee0ewaMnuBww+KLY\n3DdV382zray7RXGq1ZUkvFGGhAeS50fvOBCU0AAURVz2FTcMNkjaE03KYOml\nIfb6\r\n=qTpO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEibtkQKB9qNDpWkjcpvrPNEKLbiISORG63kz6OtjSjgIgSda0kdVLiSXmzK7CnGSbC0+xSG02DFJKsE+3r9cBk9w="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.576.16622.0_1615000283539_0.02564048709740918"},"_hasShrinkwrap":false},"2.14.1--canary.586.16624.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.586.16624.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.586.16624.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4c8216201718216fbfb9119569e92a5d8bb73ceb","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.586.16624.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HNhHNd2YAoqeGF7Jhf4rDHI+Sy8Id6mzA37uyerOptXDBj0bZ9V/F4kgXb/BMdC0Hsn17NMvvyD3nxOHJkN2qg==","shasum":"e6f8343509cd8381effcb5bd1a7a85d35cea986d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.586.16624.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvMCCRA9TVsSAnZWagAAdqcQAKD2R35RomE7+7gjoOq/\nMGWLkSN5ecnDdlhZng7OJ5IhdwdV27Lo9Ob/Mw/nrq73hdu6qTrOIwSJ4/SP\nKwteDbHh7PRwDbvZY5NBSKKme8d/sn/PpY4i2sgerCDHHk2rCJYvcr/o5AJx\nQlT5NFftkB8jiWnYebLDgQMPhJAc3Xl+47uokDFv4RaHfpVsgLgsSyFC2mRF\ng9hWX/GJ/6WMnoeto5yBWoFBXEFc6jEH1XNW0+BT99WJ8jmkyqtEvTqF8zFS\nyy/0ZNDZVe91XLogPyFrQK50WvVKKqoBF4umRwjpss0bhtYfnYBpfwpAVBXd\nG55yetEbZb1fGDBqAxHDdhJbi1ypAnPZpO2wg4xxvcQ1SfVbu9PtP3n4L7de\nqQ5r1Sus9Af/9Pe1jVu8lFR9IMDW/mcm/z5hq9BI8zLCZ3zyv8uq1xU5XamZ\nh3V/5voOjqnGk3Tx0dHi6ygIX2jY4fdpvaOfK1MnW3mtNc+LGXXgLkUr/2AW\nCz7Lz4Buq9+vD+hELYlVPt5qFnp5iD8LcD+G2bs5AYyg4xWKjnbcM49lCkON\n/ZlDI7LSo32z7kHaL6JDF9qkiUeOmhgUr1QupZuPz9wLy1V1m1oPix97uYw1\n17Z3MKd5MhQmJR/9ZCoBybPQocWVkCpqXJaQydcU6LR1QjJQ7h8UCHoY/h9R\n4PPS\r\n=ZmD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDURURgNXD6UKuEV5rvDn/SS1KKBjFtABiHJS73pCb9AIgL1ZfSzKlriOhBDF1FgQPY55bWdPTUuYB0EZWXULT+uo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.586.16624.0_1615000322179_0.34019532949587394"},"_hasShrinkwrap":false},"2.14.1--canary.559.16625.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.559.16625.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.559.16625.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a34353406c9569bfa32c3acaf246edd5421aeb27","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.559.16625.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ggpAdA3SIDh6Zfu2vvM0DdQJ61FhN05mGjgXPrN9kUhoB7IR0xXVpY4tXayV4m77XYJbz7UKAnbsKaAWcN5YvA==","shasum":"607fc86c3118005026be5505737bbdfd517791ba","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.559.16625.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvMzCRA9TVsSAnZWagAA5MQP/2w7881vyCcX4D8o7bRG\n9anvtiZfDA4HnDxD3IXweEXeus37VdKtSnar6F0YoyiRNEVtLPjafVp6bvGG\ns2d8eYm6X2oai0LRWhckVV4kMUd7OnEsKpkhzkBusRb3fADNx5whs3t71RZc\n+1khWUzmnc0LZBi/KbWyHIVkSWBE2pw5smzLLHU39DPUwgXLaGr1X/AtLMF/\nkKEx5rKfAU+hpKQiuV/7wk+/jWWIsLBAqv2ToouYYGmJC8qsvitfo7C2OLVb\nLPirAFJ4zE9QNft2jKIqhB02Yu7qKChR9X0fAmQbc9f7pAy4XxlaigCcrW90\nnty0dQEkcApBtYs7lLIWh0wMRvfMLGoi2QQA0qGAuTzIktXytFu/E87b2jiU\nqTEZl15HH4o1DnTu167I8MO+FMQfFw5SskDS8RR2wm63TNCBq9HMVCIFvFUx\nDHIxvZt/eIfEuHHeTbHJcCMPASsUxotp45Uj5vstN8hMRjc+iOedErToapEu\niDtraNhSeyXcfosE4m0AtI4vq5IA8iXQufVY64dEHiluAogEN4gk75d8RkmE\njvPnpCUU/MMieRLOUgcT+wHIw4+PJYK0zniT9MVtOyhW9J0NzrAGQ+yrMHSA\nX8Yx0QeKQvTdiyn9UdlF7I0sYSeAmDNd0BOCjyy8cMFeYwdAXgdaJTQx68P6\na8EA\r\n=AX2m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBHe+Wt25Ks34mHCdRrRbxFqLEh9er5mBxYcpXCl111QIgZBV83vzcxcBe4zyHEojKn1HaMrRzHKwxYiPaABM8D6k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.559.16625.0_1615000370594_0.9638480085387071"},"_hasShrinkwrap":false},"2.14.1--canary.551.16637.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.551.16637.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.551.16637.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e4bdd11038117c3dd78baf047786329277be3a75","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.551.16637.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yiUgM9I1t5p4KwMjUjQKmWWW3X0SuQ0laJINlx66vjp/csJLWRfOF+tl6KF8PVyokSYm9bPHqQxJfYdV/Gbqzw==","shasum":"c5d261ddf179008c2cc616c24bce95b1771d5183","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.551.16637.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQvgyCRA9TVsSAnZWagAALHwP/RIf/nKPZLaa75Kaw3QR\nVoXHjbLo/BtC3DvkiJL6MOPk4bmxOpeuq1+Y0zD7/phWU8U33oT0FILJ1eWc\n7C4oWk9l8EXog4rrDUjA0SFkU+2VtHVH74nhRVLDa9r6Ia7A7VFvZtrX4ToM\np/w0lo8GFnnkoVcjI0S4snJOQmKahnMTjKycxAKPwyqJLEt3wgZ+JrQ9KkLe\ngSdcVIKN+WgtBtC4HredLX5M1gjnO/dCr+a+ul+zfP/Gd76dRbECAAkjj03A\n6ct2vUb+MuUzj+DWr+1whu+Od/jcrahJTz6/ysVRkgmpu/qAPbf6pu3lIqyB\nLo314GCWsjXI3LJZNhPOYfMAB4IUKKNH3OGfJ9n8gQGTNCZV2Ab3fzIKmxMm\nNOhAtvfhXnZUeOrv8ptTuZKeWZ3ivGlNVC/XyiEaaSvJ0uSfIhEegsJu5knq\nusonBJK8+qEmOYKdU5T83UE3rGXXHzV9+3pAK+PPO3iMdy5MlxAkf480id5H\n5ayFgQMkvMSTsG6ALRo9yW3Rf2X/kFRD7jOJfirGjT+orw8wiTTx0AdXPI9O\n9FhHfHS/QkN4e3w81OMljr348iCCnl8JW+zU+lp7th6K+vSL+F8GYr2kKc/q\nGNJdoCKn5eGadb/+BKZ8+fNxmPBarsmrJWDquqUJMW4wPZqWNwvcBTkpxT3u\nwtxJ\r\n=Jm3S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALOcMgOQKEpGX8dgwjhCBVFm76FJPNd5js1kqTpY+tfAiEAnJWq3CYmcDrpFfrDH/Hh2UTaox3R1Fw9yWs5FzmKsgk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.551.16637.0_1615001650403_0.11170441966698208"},"_hasShrinkwrap":false},"2.14.1--canary.488.16643.0":{"name":"@design-systems/svg-icon-builder","version":"2.14.1--canary.488.16643.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.14.1--canary.488.16643.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"65142abf7f2061ffff54e9bd5be2e01d0e77e894","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.14.1--canary.488.16643.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Wfaxxw63Afpn7UawMDB/d2QCApqYf+LCnCYSynct17SPTsByPUVHAJP2lJKn1N4G1A7OeaMXyXYCXGtSm5mBhA==","shasum":"c42f88437e35b78a70c812abdbeebfc71d519e50","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.14.1--canary.488.16643.0.tgz","fileCount":25,"unpackedSize":73772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQ6vfCRA9TVsSAnZWagAAacsP/2Bl4IcBNfqToOxtrhUW\nRm03mI9rHEUwQliIITUaoyvB+Q8E1xps8qSs2XE+nnbetVr7qCOYJfwVba9W\nm/4HSpNpJ8FcnGuZcpGiE3Ngl79W3fzCESkShXZVnq2Z+ZAfn6qiCRCPs2D5\nM5vsmPgF2JLC85Mma++OkFHIp8ABRA1cwKzTpE3kCJENYZNSbVoiF2UjQrD6\nuAqP2pOqtKEJhAdymuycGrGZUbdxW7eb3oZGXdmDVdziC6mTx8KjttiquH8a\nMsqtn4aB9VvAXi2IuYC+oIiT+pg9fZni8l9hfkzaAI0CPr4D6pwuEi3sN4+1\nNG1Tmtxg8AWy6Z0uHpgJ4y1/aEIEHuRTzn7GW7YGdMvrUgH3Fk1FCv/Pom44\nMtY0cMruI4ivoEpjoKYnmLsvT+G7iCIx6yazFcYWr6FIQoo+LKGc16CnYeQH\n43i+NGgLKItZGfOdmhpP/uxHWSYgw6OffQajuGSi/xZE6EWebEab1QNxZHWL\nCmTOMuuX4nlR/9f7ZskidgnQ/kmrjhsYydL30EHKAMOSbralrSaNV0NaDt0E\nrLzFZjimc0Yb3eOPMs64015ixISHDIRtyWQbK9KJr9G/fVGtcAy9avmzyVNX\nW89s4j+IGfn0xAyMq4UkE3ATgQB59G/WQlcRzXD4h+mXMhFcXm67NHvDTFHN\nUG2Y\r\n=689/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmFCQX+b4vOXQkMwe6j96gh+6XoemGvd0BoVaQkxQJEwIgQ1yYYnBczv0wodAvcYmOvRIYxdHfKohNbCdr9CJB+SY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.14.1--canary.488.16643.0_1615047646622_0.1360303514023764"},"_hasShrinkwrap":false},"2.15.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.15.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"359bd0a467f0532d64829be12fe1993b2df6d1fd","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BV7aVTtCNlzKISL+lUtJCNAMkzEyl6NJzRcD6NNdiKZ6WCODcp8mSg/eECJLfjudUxmmDbDJNJaqGh0pSMxb6w==","shasum":"d3937c140979acd5fcb41e47d9f88b955f952ec5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.0.tgz","fileCount":25,"unpackedSize":76710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRmQhCRA9TVsSAnZWagAA1oEP+wcU3Olj0SEMWJg9buJt\nQOyWBWnegnjliEZzd8ahisID3AwSdL8sTUn6zJZSDGB0Xflceyr2BQbUitGr\nK6jHceLRrZ42qy7tOZe5B3h1vGMTtN3dcZ/o2vCf1tsNOzo0yHu6MvVwddPv\nbYy5+bnVQBe28a6ZP+3T9PXCaYpLMwLs9PxReI9m3MH0p1nd1fUBa9YrX1r9\nAUOX73O0YzyRivi1mRoE0yMFiylrSrZQ1jmhzGdTFeRgJ0zoJJwkHW/BZks7\nC+kssq+z25d8kz+9a8hIFT2cWMrYth7N5bDw8L8oOfNTdwfvp6/NM6bqT56n\nujAYPNf3dbd0v+WmyFj7SSDambzHufVBUqjigpunQgE7c3LDtEDSLnclfyOx\nM0KQBgH1f0hOAaR6wslcWr6MfM3+BrTFhbGFje8Fe9Fn5J45rrmjT+56qKjP\nTWa4e3gGCKwM1ZvfSEz0sVqzQTQmEdhmbr/fAoF4m1rQ+XkK57SVx7aTFZWg\nPaP6QmXbDMkdMDay39NBxVuihQ/TSsyJbQub24E2GpCnyvDOF5BQ6BnaZxRH\nIM/I4ydRy9FAtf3KxFE0sc+VTv5ZScuDW4ynTLuPgcxqTUrf5pmUxFBIGyIO\nSqC//eWv6y27vFGFeE5FFuhBGm5SyqMpjnOyaCEWJJrukxyEvX/pEYXpNE8X\n0XSt\r\n=s/ri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ3aTxibQ4elp3ZTJUWeSLHwuDKvl6ZTtyQ3oEQ1xOHwIhAII4w6K2HZySzfmrsjJiNq7FPhCOqu+4KBmdUgOa9/KH"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.0_1615225888919_0.6217084951535656"},"_hasShrinkwrap":false},"2.15.1--canary.642.16683.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.1--canary.642.16683.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.1--canary.642.16683.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ec7826bd55bb3834831d53b57b2e1ab5dbc2e15e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.1--canary.642.16683.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IhBTIvICEbFlYe+V707sHOsTEW2Iuaf6kTw5quZAhmctvetkbbU3OcF1tUglkUu/otzZzHuBX+Wh4RyDKZTizg==","shasum":"08dc1f0699141db672e05690390285c6ab4a0f95","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.1--canary.642.16683.0.tgz","fileCount":25,"unpackedSize":76749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRngACRA9TVsSAnZWagAAnCoP/3/xA9OiOIF9zcfcAbNb\njG+5naJH9zuK2oLG63iHqO5g/QY8lqxnkuZOXK+Goy1eZ50PhjK4476jneOp\n//BrCBgd4xlEvIb4QUoHnYWfliemi3dmphkrVjO62GI5Tum+KnRysDPAzF0W\n6jkK7lLr2PFwpITlaTvc5Hhy0CJbmESrnH0hNSY0dWa5qHmajAF/IYT4Vi4f\nIZ11hxbRgxTnUx20bnrNJEOqhbSzkGqw42eTT7BUki57ydyfOADvxehxIlRW\nqri/Ih0N0ecmK70q5Tzcbul+dLpFlq3HmR3cujx00O3MTj8/u4Is0vQjIkwf\noVXvt777cnOtQsv1/kQp8Jz6Jle3tTfkNsWImZXIYRM/tLD+FOtN8qrDI6KA\nLaTxhNxgpmKLHQ5j+DWvi/4jHfvRtjFYp/KR35HrKcOYI0lS6NMv1zkMvwKu\n6PeTHiM+fiUfqLp3RWkPkXdY780qc8PORYtT+g/DSCNjNyIUuAk3de1WFDqz\nsXxTcGCMMIEBh4jcmeX9LSjkzVyro+1Cg7X/9Mt4ghQFS8XxggQWYFLTc7Th\nKJ74c3og+LzHXtJrQD5s/MLRj2f6v8B6EtMyBoMFy2ORlMO0xriEwnS9pPgE\nnzn0FlG7SaeuFawd3jqTHI66CwMkn1LYqMnZ3JdF36gp4Y3xAFec49Vd+l9E\n/4Jm\r\n=kyBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+BTB9ok8njkclg8Cfw40OAcHSSekqfXTv9Jp/uK7jywIhAMmvv0jF8ZD6mJ9Et2pXOwQswJzTjBa245+2u3uBAg0T"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.1--canary.642.16683.0_1615230975780_0.7381458283587512"},"_hasShrinkwrap":false},"2.15.1":{"name":"@design-systems/svg-icon-builder","version":"2.15.1","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.15.1","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a55d658f325397e9c498b8ce51bad85a05820487","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.1","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ouHHiMEnZAjIkAQXADVr1JwFcdZz17fcum3irgTxVEbdZ9Lv0bv8YNVzO7AMxhvRi3EwU4bOcq/+ezXaDBvN5A==","shasum":"5bc0dcdc65ffdbce2acf74541b028dc97f9cffae","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.1.tgz","fileCount":25,"unpackedSize":76710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRnh9CRA9TVsSAnZWagAAcW4P/17UQFs16s2zzg2pIMMM\noTi6VozkNMYF9a1+Oa46/DGLkUkw7ygxt+kiVy9YG/aMG9vrOa1i3CdqRPh4\ntKhWHy8mhZSxj/qh8Epkj+OmI0H2MCrSwNjQkwmI/nAyBA37K8TiXgii+oqY\ntxjuU7Bi7cb+pRHJlyOjyXtZWIVypCNYrQU8VmopFQyNabZj7n2IGzr5yuq3\nkyPZeSJpZdw8sdm39xICg2AOXnGpUwKkirQEsuS7TbQGKkeCM9B3wySmswYd\nMR78CGGN6N+jHYj9fxa8bBU9TfXn3AtWuJCpIBrTGJmaT1NWI4I6m6SXKE9U\nfVlQx396xI8mFF/jhU1qNAymhvwCknhoaC7g53Lht6snaxOUuOSmUYoqb1bb\ni5tMDcBgoZC0wfJCVwDvORXI26HtvKW29xD0I0Nm9aKsMC7GJUVgNQdHuhr1\ng60pFZfy06Y2dGW926YgFlKqoHet2wMhpE2l0/rLX9qu4N+xa5R077M1ya+M\nMfyGh7uJqYAZQseLBibriplcJZFYZik1c0jgChZsNGgk83iz7x34QeVIwNvh\n4jJA8Gkp13B2XvFxD+aq/762IzLaZIaIrJ1ZETjJbRZqkDG/nIv2DvkxH+El\nfCyMXoa06L/K1Q/G2asIvlwGCAuWf4Q1fx0XkDGEv9DLJWlecV9/GroNt9Wo\niy5u\r\n=sFJ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfQBlGXavI9r68XTur4jgbY0Ig1htWyFAgnl0K4ZyxFQIhAIxTLgG3acYuVZQIo6nLKDHaCbdtlx/EKSll123ehMcA"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.1_1615231100671_0.9992927169600967"},"_hasShrinkwrap":false},"2.15.1--canary.601.16688.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.1--canary.601.16688.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.1--canary.601.16688.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c5b76c6354bd6b32608e307d622583f4c7469ef3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.1--canary.601.16688.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RgluWyOLWpp0QuqdazRTw7JSfyx1MOUv42oXmN9vXdotGLd76cRnYQvmvwuBJPZFa7ksUif1FK6OKTz1HUkToA==","shasum":"2ba0ae55af68c8661588ac554db136f78f6cc435","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.1--canary.601.16688.0.tgz","fileCount":25,"unpackedSize":76749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRnibCRA9TVsSAnZWagAAlSsP/3WzU+GgooCnu1BKc5RH\nxwOkwO9sXLqEkDqxFRUxavQjf/++dAqZIjNDRnUjMFoefjpWUQQo5eAlxFuE\nxoXOXBOXiUqP0IfqmkbbkgtUVvM0+GSvfMj1znrHj5jgBiTMi/d4Gca4x0F1\nUJodLy4Lmy+i6uS3QS+oPNIlLhNq3y+o/3GZtlnffqyKIz2LxhnB6tRAtn1M\noZk5prP0GLpXvLrUfLvzFa+5UCYXtApIg6/4aSUlFYJTIRovTj3aYSowi1IG\nSHiB/sKI+ScCjIKTxTlawgNVIlXL/NAm4I+xjSsrj1zcGG30UMtXRh9aXgUz\nfDIis4i05ntFYs7rwUG2q+IGqpEiFRRG2z3inO3xBDFuFNOI28U2lKRLK9OT\nmFsg6FgsXerosstTdQXXI96ilTN/imLbmdjQBFRSFL0q1ygO0Umgw/IzSv/s\n8MSpKyeHXkTatCZeOmkBowWz3qjtWKb6vBAJj1SYYOWQw3QjzxNortnSyAN0\nmehenVIRHjR+zox+LVM50VRo4j9B+QoPa1r2TXUubfrkQ+fuUEUiZ35BZjAh\ns9P16mQQIP5yrFHQmTusTohCDy9oHkaFOe/9Z6AXx0wMv6iLQKYTnc3jFHYy\nHKJlOHF8aGeQjsxtbE+j9jJCxQL26/9xJYOGzcki+tyVn/v83UIH0EJ+CI9g\nE9so\r\n=PJRU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHixSp9FYHfBxGOz5DBHhMIIYsBUYCvCZ4yCBNFKI/DtAiEAjk4p/bF+AGKT+mzWzfogJjLLkTr3ZKL7Ds7fBlGPk54="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.1--canary.601.16688.0_1615231130719_0.17915001649013407"},"_hasShrinkwrap":false},"2.15.2--canary.643.16710.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.2--canary.643.16710.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.2--canary.643.16710.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7af4e6db39f267856ba21e1d964d31f0057c53bf","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.2--canary.643.16710.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gnaMfLZVD7XORT+uomssjz8vt7dnAzs/cHGV+0561YFixlOVlvKlCpnoWHxu6b0q/WnTfN3I1TKrAvgqzsLFWg==","shasum":"5bcaccaaf5c8efccb9b46a86696466fb15dc1786","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.2--canary.643.16710.0.tgz","fileCount":25,"unpackedSize":76749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR9ZVCRA9TVsSAnZWagAA8noP/1wPBzpYZ9HQ+1ptxR0g\nN23shRvMkYI1WalyeUluHvrTCUE/oyVUHl0xJyTNMWIwgdHKQxIBONtwaD6F\nAZLj5RApKyojGvPXbpMC/QuL9OP7z6+yHy/5rDh0P0LZ/fIG7UGuXgEk2Arm\ndLwNASz8zhoz0QrVAEfZTW0yQdD7ZUWOiVYmhQOI0l4n1nVt6xr9dXCjCvob\ngyl77HOWW8D+xVH+LDl8DD6gQDfYqm5ibm3co5RSQK9rZetiw7fVSSyvhJFJ\nk81vxoNYD8GZr8IYE/pYKBo7OGvq1bkyuszh/y7tqK9CMrVe5iAIgVJwMSRK\n4jBNA0oGRzJ0jvq5DAZJjIMjTqI7bCZi5cvfe0XVHU+mncBHpR2g3YMuPv4O\nSuToVrHIttO4t4Xl0Ye33avhZ+AhLENn7cbHcuu14YJ6iY6F+UVDS02PgriZ\nwC9D8JiUTCW+aO29fmnO5IkZGap1cYXSI8JLCDvaJdgnWpEImi6U9fMQ6CW+\nurcCYSQiyLj0ETVWz10iptru/pk0UuE36JJioQdjLRGflzXKkd1fn4xmMk/A\nsPkRVi6ojtmCcUirZA1T/Anft7T6var1sAufA/TaHwZTkftOWJDJ2KolbtkE\nPcAucIT1oc3AKXoVt398bKU8jqiLtI0HPZcQL9xMp8IjdoJ6xJ0Hm8i1jboF\nu8AA\r\n=uwMx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwyeiooWA3rMAnVol53XXhS+IDykaHvT4Uv+wtGiGmwAiB4WwLWXkBCEo8cseuGjcV9drCBfshL9TWXM+lszxuWvw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.2--canary.643.16710.0_1615320660706_0.3785313149377567"},"_hasShrinkwrap":false},"2.15.2":{"name":"@design-systems/svg-icon-builder","version":"2.15.2","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.15.2","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"61418cc128cce7e55e91a27a616b88bd7b14b4af","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.2","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OAHIzQSLIExvLPJdKp738AtzzPLec96Wc/EYbyWFIQ4KcSzHBTXHp0BvYF/6CECLEOqE5MuS9NdssSquZDNJ0Q==","shasum":"b70d1684ff0936a6da8724d53c54bf34f4cf4cff","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.2.tgz","fileCount":25,"unpackedSize":77012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR9k6CRA9TVsSAnZWagAApAYP/0MTqLczwSNRLjQJKA7G\nqUyozT7sdeS37+v0ulW0pT5CDn6u7EAlpMDqgYTvKGN3++QdY57wuA69NXg4\n4LOOB35HMByP2BZ/VYctHk3ppX1pvbTi3xqPtdd1jLjVA3CL/cs9ypuamo3k\naZfonII/ajtfVRcbs40k5c+kd6xOJmrft4ZcG0BVlr9v+SKb28ocygb3mE0f\noYa2Odb39VT2vdZf+4gWYULAbqXs2r5VqTaTVtCDJpwTxfbePslUxFlOGnik\n3izwNK4yvl3dYcUa+CqfbA2x0+HmFyEuD4igeD9adI+MEQIwKSiq7wMwexbs\ntD+x1XevsEkLoUYRICaiwbpcyCHWCUZxpvVfEWk6f2l546wyFKRNCi6tBuqm\nyJNCXi8Key6nE+CduLI1EgqUGPkyYbmf5SL44Hur+aXPl2OrOdhKmCuxOI6l\ntgwUQvn+E/P52RrcdmWBx5JjhGySVB/yMgBimoqZ+sC2pEPZTisg/KupXoyM\ny60QymqtDV+jXZD+q65pD/ud8XVWlXsfjbjkWf47pNkm//hej5pmXIIbFcEm\n7/tkQo9XCmzsVw1XLpsxEQhDI3J8Ihwg2jShNA9Ul/kKaT1LdxFXvWMd+SdB\nbRZ1mxXQwOBcvICTXa8npzuhqfHQ0kkX0j6ND+Ux5KRFA3FbnDgHMi6CvOnV\nxec8\r\n=dJWw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDH1zUV3KJw2sf8+YiCMVzS0t3kaP8ZQHfCVkIg4TtSGAiBN2vXKIAkG2fzncCOc/NnVud928XFytg3GBjb4Njx/dw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.2_1615321401568_0.95545617323222"},"_hasShrinkwrap":false},"2.15.3--canary.551.16729.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.551.16729.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.551.16729.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"72384fda3461d89f7a87fd6f7babf70bda31580e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.551.16729.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RV+d3hxZ1Q++s38m5B90040U76PRes7MvtlB4JTRcIuN3DzryMYpO4CaSBKcvro7LJBjoVu6+ZHcfGjppRX7Rg==","shasum":"044f6263b6a40c17e976627205a1f67475a5b101","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.551.16729.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/cFCRA9TVsSAnZWagAAcCAP/1EsQ2EAULSfpIN9OA4H\nnbcD39wX5pojGGpeiGgSa/A+fRozEUpZAOzixSCdsit9NWnce+yeUpIMKBVD\nkSrfkY6glJAFQcWqpN7LAYiCMCKIdxY5ay72pIv11RjIjSyDMAEI7w2UF38e\nkwSSe6OGLeRKnLIDHviy6+bKvi830uRqxO0Tu47Ef5lF/XVl7zFDqXRvz709\nMcQ3suLJctSxDW2L1eoKvgIK4/MOJ+RcvcmGPQ8/RGGM3TnbSU3qVyGwNbtY\nHhzGyyPB53haEL9r6GBxehV+wr7YPsTCN7g8RurugqVIU0wQVIL3z/U2xOyb\neS8O0eFOncQBZ15UOul+dK8RlfGQXruRWGwLaInMo3Wp8tbFCY1bAXzlKvD+\n0cfDk8u+51RnmGGQaqR6aXU5f8e1+kqZXLPddjOZSrWsUc9nf6JMQzxInvCB\n2LSdtTeKR/OQ4DJ9+TVztzaebeGm+MzmlaroBA5KwG7ED5UdHS3Bc5m5qVER\n5/GgzxPf2sbJ+bkSKnDYXPNI7FxE6PFBHo70Ny65CnMV4COKMEXGtAzTIqtx\n144V05hQFGPk/LTDeExItkabfN8OD+zwSbHmVjTSRDdpaHT0OPlKwORP9qjh\n1DJ764nhFyPHZUu7GRT48UkJPSjE81FTvpjGnvwbXxDg3+Tbb1xZOR/dS146\ntPYo\r\n=eu6m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4wK7IWw85Eonh84J6h5KslWE+wuwNdJBDWNdu4ilFbgIhAPoU9Et40Z3s9LGX+hu/+mtsWbXFcK87dx67NilN/X6H"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.551.16729.0_1615329028860_0.42005421534131826"},"_hasShrinkwrap":false},"2.15.3--canary.529.16735.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.529.16735.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.529.16735.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b220de10b2e965a1f4375f08593422e458d36787","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.529.16735.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rh6pYMK11XNXuNIhKSDRdmXxrbrLBZcLvIbi3ggTOHLGJiBCTUy8K0BVMtChSg1sFWPhJo5v32gnZNJY+Q0AXQ==","shasum":"c973aeb4bf3fff9e7cbd2b31b645df365accf8e0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.529.16735.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSJFRCRA9TVsSAnZWagAAonEP/0Vdaup6aXBROOWATiNn\njV9FBGazwEK9zFuVA/5HK7T7fFAR7GsDRngqUsh85NXUbXOd42ukRnAeVgT+\nBoNtpZ0VpaAOAMXlGKCH7lslWIJu7XSMR67RccuskbS+37aAnGj3xWaLX7w+\n7gBakikUQSkZMSRPfLzWGv1mB2rxd71jD0pQJn0Ed0qNOZ7z8x8u2bA8YhLo\nYb1eakTQTAsV/43R3QKvRFMO+ZY4WI7jIQvu4F6N4XNsQ/iJYUmmL6lmnLSq\nRtJHWoXuBZuPRurtUylOz41GkOMX9NweYubU2DsUugb++vbqr800CWtRhW1X\ns6MVXslVDM2ucH34NSt0kG5rg/akHXx8emOfYYmwKPPN2TLQaBkxnpSoN6tw\n/YCu0FUAKTl7us+efujFAKQ2WX4ESO2pPUX+zqFLB2X8bO9D2RRe/U6MN4Cf\noFsUd7F+hWdwBg38VJsq19N/CR6YKST3fpc/CB4trCGhAQ/4HjcnV+SHotnz\n/OGIYI8aukmTpI41pLjfiukV5dgrvXKZwE8dIoJR14HDPRlvD7pAdfr98N3n\njV9vPjtwIbD7nxenBNIL0vSl1PJNvciGFtlCddRIBFfzlZ5GWHsTTVK8Z3M7\nKcxkxKMVB4/Lt8WUkcHZCm3MHyoUHaQfzXF6dOIj95VZdxMXs+YMsiFZKrXI\nPGvO\r\n=S2xm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2I+oaWRDnnyw/CQWugTjQcWA606aU0ouuyWSlTJwggQIgfkCDhJsGQIO8LYo/7ALlQrl/Vh4vEmK/NeVzwhdPWMo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.529.16735.0_1615368528732_0.42194090248042726"},"_hasShrinkwrap":false},"2.15.3--canary.566.16746.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.566.16746.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.566.16746.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fdc7a2078bb24690dd96eaa1b593edf2d68fce03","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.566.16746.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fGhi8Isl818qEJwlV9N7vDzZukLMlxNk94i+JiZRDU4AY85LquF1d6MpqIWpUtSPVJeo4t9UPp+hyDeAwB4uXg==","shasum":"1be9412bf737bb31a5b4e29fd4462237a3e2b444","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.566.16746.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPNSCRA9TVsSAnZWagAAn+QP/jClkqmZGyxhv8pbhsGJ\n8zM14C8hV7dissMeTGXM+CwL0y40Acmdd2USx0x+ae4iIx56jgPvDPbb+PR8\noDNS3aa1wpladSwyDuLNXtqbRkyxPICKt40h/rwCqqGDep2skaexevL19m2p\nj87ymAYa+F1zQxv63bgP04x36l94DkAikunKvvCXtMXnbqSJaNfIvYspu05L\n3E9P/kbCkesfGQA2IuBZh1GjOnkpYRXpCA4ObQt7HhAL4bC0fAgtyrsLaUky\niN56M8y2uGuA4+wFOB1wT90sOwAqzhA0fNhwpyzl3D6kYP87TrW5yu0UyFqz\n5uOFqHZa8YkkaMIkf6HDuwqPKR3ip9AF8xYfJ52YvnkauPqf3LoWuvtlyFE0\nfefy2T6eX6xZqsw3QTfFNRt+w7u2ompxibDl29nOt1zkvlBD9NZXBmJO/bri\nelAkcDi1NoMPggQ/4bHkUhv4ZVj/5TIm5Kt993KEoHqgPai+EFkzAOkUv8zl\n79+7SGQEWuzv6evKU8KEm4UNf1bSz/FuSrsneA6WuOKir+rWZ3gb5OxvWM3L\ne0J6u3Czm1s+w/AYHii1qI9Kt5+t+rAM/H/AEDX2zkNUb+XLvI9ezHdQpu1W\nSxNLfYJIrZbdrrww2OQ/9xNcGGL0qll8O90YIKC3tzmDd1BAGTySJIwF7KyM\nwupg\r\n=xTNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvTvFijYpvNJakISytgEPtiJpGIhN075FeKmemofKrbAiBm8uIhMiaNcspKlAlau7GR4KBNR9rA65MZdjvYfCdv4Q=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.566.16746.0_1615393617764_0.5436731842441569"},"_hasShrinkwrap":false},"2.15.3--canary.566.16777.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.566.16777.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.566.16777.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ec884d987ad8e6cb48ff120741a8f1c0132d079a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.566.16777.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-m9EjykAJkk3xj7Er5jb1eftDVLJXeO3J0tzZ3dJCLX/iUSUHast5gE/1Ct6L2f6qF233eMAK7pLjCrMg06E/rQ==","shasum":"08d9904157059040844aec4cb75521a249103a91","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.566.16777.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT8ToCRA9TVsSAnZWagAAKlkP/A77+ZoSF2e9BD1YeKC5\n78Wmhk0UVK0Z5+tPgfikTjlvayZ9Fle5lSZS5kj2TztbnIw08Vl2xVLOTgyR\nHDvkq/pWEIVAhWx6gQXjnGzftWWcb3HW864VLE0KoWJXr09XB9Hga9cfAoKK\ng46DXzCYuDGTA36kA7CrvtDlR1ve9oJKXbaLMHRmV0Ys0GCHl0so+JU9xdcl\nzdimsQC2h3AIWiXePdk547YM2LDEYFyL7k2x5tvXeYhAcnRPKSmZeN+Jkhqg\nrjWMm+I4G/I4zhQabtOxdmqNEAjWf3sjyCgAmljMXmfQsoi47Jk2Z1DLef4w\n16gVJGWPUYrdizEF7tU3quG5K1hjbxAFHuXdkDd8T//wJIICwtXfJg8/TAIQ\nGsBYzC2ZoKBuyfGzaErMIk0ZhpQgYIItgPWQ8hjnq75PqnIBsDv+KWeAQU66\nPPOUVYkQg2WlTCCjVcmGyJnHpw7S7nUvvkqKBk2rxXJWYImplTJv+OUp+fM8\n3v1Vlo3f54PrnmyPcPuIFOJ1fP40exWfr1GwZZ3zBTfPkrGh/EloVFaepFAE\ngST5YAVeLKjEj5+zEqiWvxvvhB7j5WdfRY7yWcpDcGymDBgG+SqD8crEBENb\niMYUP4sRlpGFyUyNpKpCQ1m4DJ7lTLMAwJGVxIZBB+fAK8XmK+qcafjUFnyC\ngQVz\r\n=TiIn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPwOQXxDzuqWaDcnT7Q3TumN81g2PRYIjBJiYJLN76yAiEAqGzs+EsBVjphhTNel459owO9uTs383S6IYA1pvJL0R4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.566.16777.0_1615840488339_0.2769700676553908"},"_hasShrinkwrap":false},"2.15.3--canary.616.16798.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.616.16798.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.616.16798.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ac2f9d3239c371a756f1fd401a85d71d62d91958","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.616.16798.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-I+xdeRxHJBKfik0b4NVwP/3/bg6KEqgOfA+9/88IPTJTYTEm5xKOY6rgi381hBoPzD9z8fHtUst/VnbHs51F+A==","shasum":"36fa581f195b21400d6374cdfae3a8f24f8f9b26","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.616.16798.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVKIVCRA9TVsSAnZWagAA3T4P/1zUyHvFv+dmaaJXKS3C\nMUCSRU4OxEKiLmMc1RlYr7ugQT498w6eE+oaVVnmXuuGp7LW/RJjgWIBPXjC\ng6p5vrsQepDIdOLSDbcfxX3BPSQb0XE83BGtzBd2H99ArgfazKRJQAOpP/4Q\nRcJDl9tLbtVe5mtRvT8Gh15Jwn+yLseCZ+bnWgH8b2XN1i+BBZYtaQb2Hq/E\nGWt9Wu6z0ozMncuNZxE0yKNuAIcA3ephfK7vQsKF0KHRh8lRwsa43HMKDTpp\nqe1cx2yRJB4iimDq2uRihn76RBS6WvWbbJ5ib+OuTUPfZCMpaYGDgH/ykgHX\nnEaK4a9H1itLxH6rM5JI8Y34MYipp2h/JSOrZ8XKy13Y5vDdRReJS7Lm7kLP\npAStT8gzJCViCUKgO2D4yUnAG2inFIJKZhXyMd42araiKS4KMj49L4+mgR5d\ntBKl+3Laz/AAZu4ZX+pw7nFIyB0HgFzfTwt13uj1MW/IPHxpPLv0NdNLe7zb\nC9OJbdP+rGCcWtCyOrcixqzp9j5F0tyq9EmojjV1Gkdq4vc8xdg4r3ORiqDb\nh1wZfD98lDAKQ4iCZUCn79ENsjS3nBk5D9/M/DG3cLgYJrehbnsIAYdb25Y8\nvjbvc/uwROTn7iJVaMcJGkITW0kTgB7QMcLLJTTs/ozFjW3e9IIgQ9JYNlix\nDS2F\r\n=1Xj6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFkhYKNVIXsAODBTamcanYeoa+fybCVhjNIb7BlQWF9yAiBw0Jhg7a8r7gisWBg5fiPCYSSJtkA9O63Ngw25+8mtDA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.616.16798.0_1616159253348_0.24791681346889138"},"_hasShrinkwrap":false},"2.15.3--canary.618.16809.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.618.16809.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.618.16809.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"84fc8468097dde092046ea17dd46ddbbcea5d401","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.618.16809.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-REbYPfzS6YN6f5hnF4ltNTIy7T8TKCszL2cpQkRyc0zc7XKduwmHDkQws8cxeqMiF0u6tz0odkLbeJ1CFc/UWw==","shasum":"3de2677eb79348f180106957446f041deb22f5f9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.618.16809.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgV8LMCRA9TVsSAnZWagAAE7gP/RVMSjPunncU29bqr9WZ\nf/q32RCPFmPD3d5JLrjs1QZbIc6Zc43MU1/qfds6DRGi+w5ceelzzwRDzP0c\n03PEfT/+O0R+ZzeQDjpRu9Av+Gh8SpIjb5NBqXai06QPs9INPWrspnoM5xI6\n5Dfbled4gaj5INs0U2gwnpqAtnnwKf0VMrxvHYc1CTOy6JcHM0cnLxB9EffZ\nbFDuo8J0iGkh2gn6POPVqNgwl3Fp0wnQsFR1TLzV/EEyVr+simIgbSm3oMna\ntDnV3Z7YwBIexBmi8UKxxY87eY0Odh+yIPCUwqn+ZQrEoSfRRrKSmk/jPFN9\nIFn9seLU2CcZk/A5wRSW0B2pZyuaWsTy4n0IZihmXxZrTPw4gBdzSw6yQumO\nFHNGFAe3eWULnZV6/jM6Cl05dA1Suf2WSiqw6lYAmDprld65APq7aGeGr+u9\nM5ayLRmor56Hd+gxTjGriHF1GyixvIrww0kzBJLUI2/JdDiRkibDoiiWypqU\nTDlqBKor8w0iMB9XJ0s9t3jtzx/wpq4m9XFU1TQ0O4IgrXvfxO3pZYDXhBCs\nyvuIrhi6BmxomHR0oPkevPgnaGVwOhk74ls8Z/m4SvSDKL20lIbkOuOQG5pH\n61zxZA9eRPxQ1ZoHtDPkdX7BRvjMkeShR4gerZZltOwlacHF9k9WK1YhrPHT\nxe74\r\n=MoDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEd2vBvrkJGmn4NvzoXdL5rzXLCNb2JZFGuYq49F5gxFAiEAlHbfAWG6IznXth21wUpmXtN8UuqloW/uF07iZAwBAeg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.618.16809.0_1616364236303_0.7346492268284859"},"_hasShrinkwrap":false},"2.15.3--canary.544.16820.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.544.16820.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.544.16820.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6a8a8104ca165358b240dee2a4d8f7f93aa734a4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.544.16820.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kZx8recXHf33yShgKo4rGgwcd1Tq/AIlHGtZC78Njjo8fMgFeySPyL5L9KJEklvYLswCgKrPcFi5ENXxY5d+nA==","shasum":"cbc6d1abffad645df6c46d8c2597140253c4c7ae","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.544.16820.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWSbYCRA9TVsSAnZWagAAiW0P/j5p/pjKtO0QE6W1nrRc\nZsyWsVfK2LXHpgv60rT274pTEntBbaSLDGkOMyCKxCEtoGWDJtia2VxmaBSP\nZOGtOV0voLDYpGY6+ubUazNQX1tpZLQMihq5tqR8dbHQT3tPcorUPVF46aET\nKhd/zE9EPq/ucfyHyvCjQRwA5nPaW8Th1VIk+b8M/qJmuqPi8zG5jz2Z+hBG\nXt8BOwLG0WybGq4aoipqSQi78gCoX35FUf+8RJL6FgaWNbzR7+MRDOvV6poh\nQc6XOUDgH+r8yweYEMYLAfBnP5vwYW+VJj5XKZZWrIuxN5P3BZ+qJIBt6CVb\n93BkQquRS114Dp4cl0yC9/+N1S8p6gxseoodpbk8VKticnoVRd9jI5tCz33I\nPqslqTD3B8kpOGsaWEQvO16ERoRD5ELMRnY+eUtk+HQi7m6x8RCd44+nt20P\nkSxme7s2vXAGjNONWwelr/++sLgRIVOwy+nlJ9WTUCD2A7IsVNo8a09N1YmU\nN2O3jBV+poElU578NDqIwzsB6n9NOvYFy//xo1+4iQhWZ4OG7k/VCMTaKDT5\njvnqFJ6zFzZj2u0bWo7Smr/LlKp/klTKdKWgEBs4pN1HyMQwqanMMJALLC+Z\nt6mfBjOrv1KS6n1IKuV5+GmD0NnT2Xt4+I+OxQkRHL8nzVAg7j9c0RrRJ3c1\nd+Ch\r\n=jl9b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPetSh+Hdmis4Y+uLmDC0kM6xfqReQm8xPTP5/BJ+3/AiBaOO6lN+c1DxCHlgmYkmNDR+Zua4Qcs+SCoeCAEXPI6w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.544.16820.0_1616455383764_0.5676126285904295"},"_hasShrinkwrap":false},"2.15.3--canary.566.16836.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.566.16836.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.566.16836.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1fcb7a1d461bf74ec60589f6f5fa49c0a28c8458","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.566.16836.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Qj6LsHWWlQFqD0h8seszeqM+oPFae7aA0HOUQBj5yREhR356iTziCjLrzrXb1ICO7FqgwX/C4PrJiUyFeUKoPw==","shasum":"7f8c6d21264113f57170a730745bd5970cf4b9ce","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.566.16836.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWyrDCRA9TVsSAnZWagAA+7wQAIm9pWvZdcc9Q1igeSfT\nT9HzS14M3CAKfi96O2ganRK/7hAtTm8n0Vdk2WkPT7JkrKbYhJf6bBmWETlH\nhgXgik9UOJX3bPDSXzBROS8ZwVzNWdZIJyAgToaxkKVKAKBMhYt6vUnRtlAs\ncXhPvFMX0w7Vx1cRocGurPJnMBQqcyMmacscnqYdEdtIf3nPxkQ7L3hdGBri\nYeM567awB/HyWZyCmCQni+I2r/i+/WQBgb01O1hPUEzlwJP7MyqQxdvn8lEV\nYHgzfeUqMG5C9hKRJ+znifz9Sf4I8lyNrnaAaZQDRovyErfuyiDcyitM0LtZ\nhg8TXzR1/0plt2OjRcp8+nmFWXAtsmWjmLZqeG/mZnNB2Qdi31Pk0F+OL5wA\noS1kliWk8/5v926nq26a/jRAPjkDYpK5yFzYAuUuVX+iVfnGYkoZ06MsTmdy\nzDmmGj3SkvQiwduhCRyA2yu+acqKLA61zY3wwTjrS1jfb9+avDsJZ+pgyVDV\nohn34PCMuz24o0Is4Fzh1o6bJrdgvS2TBlJjfyInEPL3h7PrPemV91WImpus\nmJh/C0+EZPLcQqTW1lzZ3Yx2xsuIP5g1aYXZmf+QfOQA+GUYC+lwEEcsgBXD\nfQfPTAI0NryWs8SbRqwDPNGZr2ys2nyxKkRXrwpDTIVCuI8mrodfDzqfx6fm\n0Ec3\r\n=5BrA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlYMKizHb3x4yJrFqBXVmiJVjDPEpFUMv5RQqzlGWIgAiEA0v41Xg12YD4nwVXIs1w1Fg8C1OKWkEArogx8uwUlFr8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.566.16836.0_1616587458576_0.45540047859410504"},"_hasShrinkwrap":false},"2.15.3--canary.566.16842.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.566.16842.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.566.16842.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"73c91d71fe86e68252b624031f2c38fe2ebcb89c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.566.16842.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-NxtfOrgbj4ErBDkMZCoG3cqIRNa3mbQBT4lIPLOm1svoIhHJ0NqL8X32b/TTBvZuR7imTju6SGzDF3q3QhjJxA==","shasum":"c51f377e6ad88db21d98d7d4952bb0b636081393","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.566.16842.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5CcCRA9TVsSAnZWagAA0XsQAIL9rpnzH/JRiSGnYmj5\n+xTjAlPHMbMny8OGLG96SybGuIUmwpYUhpbNvfWCq0b01r9Oz9y6DBN+GPbh\nHnNeXsR8UatkWZBJB0wU/bUOsQr7RbcrCDONEh2lWA6dtEhVMKn0Uk6wdmBP\nT3yp7Bj6hY5O9Nfo8dH6K89aitEUujZsDofj288WXujZ6sjGbeKTHN2uItqI\n73HvC+v0ldJCK9c+RKzAIdttOjFzhW71LIjwOSXk6HXchTIXCMUmMedZGIG7\nCU7jE0Jd/1kXmUGjYxxZek2hB8xkiejjdQvUXpyM0168kwNuKlY5iXXxrRpE\nm1o17bZNRnRpOYFrNyx+vqlZP4zZiqIEz9zxQNe0QvZkKuHZ3CL6ZLtLfb5a\nhMdHeVhAjHtAOydMXoi1vtr6poNKkW3pDqh6V1TOMKmHlQT4EnFjv0nHHEVg\n5/QEIzz7EI5N8XkDjpcex8Mg84+i4KRstXwbGNUvlY8p80pQuk55TyABWrUR\nscIt1J/bBd5UjU/4rkDEDsW0ttyBgQK5d+MWjWsJs8UDi/gJ4pHh0Oo2Xs7b\nN0ei3BGKp54ap7VHTZ4vPmwSipK2IDYFWSzA7c3xdAAx6KYEJ+mmFdIawN0Z\nH2z3/ZU2qwg4tcih14J0zjZCmEaqNC97u+uTdFullAIkhHQR3bZJzoQGARB9\n4x++\r\n=wRoj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAoYpmI6TXe8kIY0l4MhdcoRyAyNCaiPgU16PyOtXafAIhAPo8+9p5XMpUuKBo3fvZa26d3X9oSywXExN1v4SiiHm0"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.566.16842.0_1616613532096_0.10048580660729667"},"_hasShrinkwrap":false},"2.15.3--canary.562.16850.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.562.16850.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.1.0","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.562.16850.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.9","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6eda3477a861e96b5a2764125df4e69d10b3aa71","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.562.16850.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mmcSbHzuX2djPSHkEYWYsYcuhwayoHXL83LQwQMtfp3vFuFbe5kPanbi/Qrhd8aXgmP+5mmMMLo4UGdzmAB91g==","shasum":"a3b570b520e3a6c6d385dafdf328c05155f35980","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.562.16850.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXPHdCRA9TVsSAnZWagAAepsP/jxwsaujtHVbPYcelCYq\n9b5aLZY8HAlk+26KmqJ/M/0Z8P+GOEPzEZ2Kz/85M9U9l398BmGyCToLHm+t\neolpDDm3KW62/VSvMlFt3xMtZVbjrz6a95ANOffVei2IqnifuHAW5WX8JQIJ\ngpkBEmxRunlCajt8+SrLwjqsVwds1owShMmQZQ+bxYWJAFXYGDiQmGPU7Q8i\n4/hQKfc2eMFdFK40wgiuGlge7d5b+/09OIpe/fc3RC9vzX/NVVsyfcU6ggER\nyTuvoXe8cVifzTYVpMPao0LIsDVv9ImPvzlcmkyBj1nB6D2VzA/glth/yQmc\nSPnAY4ATFEkDl1VT/QyotqIb81krUaZ4x0UFs7lmfGHPhC6FaEJrWWJJhvdH\nX4yyTmKN1iKXJ0Up+tTFujhVmR9OjDoZkyZanIc1foJry/qwBDroqOjzTHpx\ndjmy2hDPBwDavtoJJVTcnPC+fLZySye/oz1qn8W4Oi9Y4ZzJBX3RJTco10AR\nIbh5+MYDPQ8GKxJHGh7+XaNyTvLqVtSOI393OJBsWJAnqMHik8VnNH0dEIiN\n7u//OOaWYUwL/1pUCKWRguGZNU+KJGqF2JPsPicIKkc1jc/YkI+qSnB2l5eE\nTkZ7Kg8R0eP9zZdha6Bz7zzoVIybBpokx+bO0BR0bJKRcgPmWPAE2ZLl6J30\n7jPR\r\n=m0zF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6FgemLr00p6AQijISZIBBuu1AmeBTcB8Vpwb4YiRJVAiEAxcMXog8iXTG0b7SOUY/HApkdUpp8SoVy/FjWQGPBUHs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.562.16850.0_1616703964472_0.9727576294350173"},"_hasShrinkwrap":false},"2.15.3--canary.612.16868.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.612.16868.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.612.16868.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f09aa5b2ae0db7953e6c9dc35c135b3b3b186c91","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.612.16868.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MqG9O8kruk8YhULWbx3FPfsBtwR5QSEwD0wAGKbHr+6kapdFkBIuhKqiftIo1fDly9I+JoXqsOyYx1VeyxHdeA==","shasum":"1cfd82b5ab76037dcc11166721b8657c78f3e3ed","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.612.16868.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXQ8SCRA9TVsSAnZWagAAKd8P/Ripy+HbE9vtLT6TTOGW\ncabgPq+3NmAy+pXaCEoGXFcmIbSUjj3EfFrzoyPe2TrYWIlFswwTaKebqzeW\n/okJSXZzL/AlrZs04IlgbyXn/3Vbq/XBF7CrrVkN2r1qVbBw1zVdoOJRZ80Z\nKpOtXUQu6k7QRjbe6GciGfiNzmQbQN0zwE9mZU5J9/qi2BG/O4Bq+mEW9f8m\nc44slBhSc6ZC1D0w9JJ5Xolum7S4iKYzQwDb6QeU9zDty/9MUZ9YK2c9zV0p\nbYSsi4GLaWbsoucmL3uo1jgPfaUzZ+c8c4JaKf4cL6AJjBpZT3g6TvHJO3do\nnyFM518orlRa4kYWFkpmEyv0H0VqYMXtbhuvAtIB615OYU/HXmWAQY4J+3Ll\nDbAIeO9V8gltH4I5R2piJKIUFcw2zKDiZ6xbj6q0G9VQU96iKzZxxfKIy/gY\nSxF8j2rEGU9LLosiskPEirueKYoBmnhOc01L17GYfJ1eJ9m95nVXuq8b+Ysc\npj94x3gV1nd/WOz1vqzmLCoEJ2oyV4QzL73pFBoY8joZyVPxNDP7UX8pZvj0\n9HDmPu2Fa0xE8iMm2WBK3ywbFBVvCpmNuPLw8V/c0NzVk3JEbycsisrXfadl\nyFYmHEX/uqCuWjywJ4MFiLl5CcZM4JPZaoNVGYyXzUXXQdQJs3Ig8XZiXWUQ\nUAZf\r\n=taGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBL5v+/0ScEnZ7svV0wvp7Rh8P+XGa5BcAx1LpyvBYT2AiB36NvRg4lMx7B+TOJN7Sm4grBaggF4mL5B1iOdpE3maA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.612.16868.0_1616711441961_0.8201714700842349"},"_hasShrinkwrap":false},"2.15.3--canary.553.16870.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.553.16870.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.553.16870.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"555989c9c0d3f3b9a71feaa48f9d662913873766","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.553.16870.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jFFU3NSmDkhiZJsdK9Y8LjpP0K6JK+ScLSUE0ryoz5ugtuXzUh/Pvi3Ay2A4lljFCdPb176Z7yyhkO9TC/A7Ow==","shasum":"e3a3873352f7ae722e445bd63910c496a0f6fcbb","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.553.16870.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXQ8jCRA9TVsSAnZWagAA89MP/1v+XBw9IEWZGmJyWuNp\nnmEntR971db0WP9392HXFOXlPwlY9t5YplkxG3V41ODgalYRBwi/pE86Nbui\n6XOOr4Exp+m7f9ZVr0j+SEtblh4gSqDv0BnSPosRS/uIQgKNZAJY0Cdc61kp\nCxjO4QjgAhR0TSKRaZkKGfYxwXe7xpOMB8H0GRg3hpL8+NvAfyDijE5zND47\n2DUA+nXdYgTdSF5TX+F871vh46JONgxl0t3kHur15gB5+wG524IaJ1nJ2C2O\n23uPYRmQzZwfXFbzrrdffM4Mj6e8RRbenzWwnvsSXwF/jxfCBS3VlllcY6kX\nKQniDb/4NKmvBsw1FBBKgttYGNAZ4IjL2nRrHTEN0HcBXPTvErY84PxKLCmO\niqhXq52Y4tgVYTt6HVeMOv6ovYIr3DxIkvWHU5aobWNFfXlgZRiM7yhk//th\n2LD5y4jXq/BWCarnuejGj/3nzUgG3L9dqyKVo+4xFTf8XCf6FUPagyNsR/9v\nuIFK/3swX2se/oNdzFoCItLpgkS4iZjUGqzpscEqjVjU0wAJcYtmg1JkS9kW\nwq1H3c7wOjohEN+QF9mVVyvMVvibA4odXiMt+5TjKqnW5y9NEUEA4FIylEMa\ninTHux43MNl84OGlCVvz80DBrM+8KIo3nxYA9Ig4dyjm/0GJ70vzvngz0oFX\n2SPN\r\n=sKPf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfPaX+1Kk14tr5ZrQnFmY3XY4huVXE94LGw9C9f3I+SAiAYy2ng/ZGQjPsczeviQnEfxuaFb8YkWJ4CAkUtmuFRwg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.553.16870.0_1616711453120_0.7218993101700419"},"_hasShrinkwrap":false},"2.15.3--canary.553.16876.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.553.16876.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.553.16876.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c8d70cfcdbe31408da77242a20c86e867d474515","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.553.16876.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HklFcDXYSnqmhBrcT6XM5fk/uW9c3kCYY6ytC5canwD1KYgIZtCz7IAYiZ9ZvPg9AhFcZiX/L1KVhGIIPZUeyw==","shasum":"f96fdf039744ee7a2f157dadd3b46031e0971922","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.553.16876.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXkW6CRA9TVsSAnZWagAANJUP/A4HYbK/T/f5MFNG0w0b\n20BNhcknz3SPNyKQnDJ3lGJhCV3wDBXM13PBDN/z1jYog8wYGXg5TVsgKB20\nye8hfbbtiWilIyYsN1ItxDX8dA29PTPflG3agE0eC+qsZWEEjFHew4x56ul4\n43Z30HM0WDResrtA2I3pDcin+kIAtsV8JnXz3XN+OLk/pEEQJBultQ7lqihL\nppn17cJSiFhSq0wUyY+rx7pL+r7YqBi1wZD3t1mN4coG4Mc3Wp37aQ10Beqf\n1mfhgOKilg9xOJgfTnhXwSWpMl9/1w+/rKhvg1MZ/tR7Nyiq5jhcbl1Kgnky\n2pLBbFFY2p6knTmSnmjw7RKS8hI5vZPkBJPBbeMWgVVtAzMMFPkqmnas9o4g\nVvU5aVHABgrBmPHxMPQhQfHYt7tG33jRXNitILwO0mGBF5zNeKWEp3Wu2RWg\nWdeQR8Bc8/VSPGQAWTHFbGXII/iQz/Gm3EYdQk4Zs+nD7kLyY8QNxBbaGcBA\noAhauLpEQ0qoMrqZuHfBr2OkCelpiVuuX2/YqJVDnpIbz7VaEQ5hGPqIiDjy\nd8omFz2o5nobZzD+A2k0MWbM1MqiA3KmcJrZJgOGDV2edDbTdTsEMrJaEpjg\nlDE4m8lmbjZpMfAuW189iBz5Qgd0kcPMZRS2u0zxMKGw7oAHwmba4QtW+Jxj\nSJbK\r\n=TGWB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDMzZ1kg03nhTDe4+l+R9f5weVbc9Xd0qk35nb4WzFDgIgfJAkYR+yiNIRCz3uekDqvlyVL2KlMS9/0Ueg+5zmXO0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.553.16876.0_1616790970063_0.5855387567502266"},"_hasShrinkwrap":false},"2.16.0--canary.644.16887.0":{"name":"@design-systems/svg-icon-builder","version":"2.16.0--canary.644.16887.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.16.0--canary.644.16887.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e025754ac5e3dceb68f90159e584e9031dd48e97","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.16.0--canary.644.16887.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7CjhfOA9zOBIrd1oe5o8x8ybfbRnVWwdNumj3L1OZ4lPDJD6OtMKhfZuvZZcw2vfmSkW1WENWNxkacan2IYInA==","shasum":"ca625c5023d4ae74b18dbd9a65083e5aa340afb9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.16.0--canary.644.16887.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXn1wCRA9TVsSAnZWagAAMR0P/0RJNrUQZUL0TXGxtz7S\n/rdrKL7MqHmR4kRkE0oImRk2/102DcnI+aqXRDdjB43wTPGIcRhNTntMLpop\nE0hP6ca3eAJKxCQs3/vJYKJRGP2asKW5Q8Kk1jk+be5SJaW4ZGfufg1LQiCE\nzmgHw0PMi317owVv+PMEmQzJmbMeFT/a7jVLnPNjaik0plyn9Lffu74eegVc\nX383UKeqgSYS+Vmq8yrSUEhFHcDQFX0mHXwW3r3g31eyfY2SQIHYFtVO4oHL\nmmF/5PMCYm8HXubX5sjrEgiF/yG1fNOwojR7i/Gtgteys7oOyWp+KTq0aF4/\ngm7jLnIoxyoe9a1resauR90IADcny2XIQuxbDNFma3twsiWfWT9n0VHoLUY3\nwe/+A7RSsWy+uA/RWzYrBsJ1PJzHIemdAB0+sUuT9pGin3ydJvAoqWk41ogm\nypi/WhZ0GznCMh/2i8p22xIi7VJrATKu4lwWC45wlufRaNnL8+nMwuQ/nClM\nZFImR0dz10CH0NO3hkJZtnZsRg+4XAp+51La2aQyY7lNJFAjT01YwwGTC6ul\nmeLuaYoKa4B/FFAHDc0kHn6f1qjGOzyjcxD82I86McC9HQSCWp7AgKg9GIm9\n9g9v5GE4gKP63VIiQPLrmO5PnQzumjH9c43oGsYro6dKXhWzQ2Sv1ZVdz7BZ\n9mB1\r\n=hcv4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8Z3fHPEwx4OqW8L7mZ+5S0qvkGs0IXHTuwOUns0a2FAiEAkbZ2qyDPpvYBPlBOapT4yEo27ga0kq6cIN0eFxyv0wA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.16.0--canary.644.16887.0_1616805232203_0.9140252419178869"},"_hasShrinkwrap":false},"2.15.3--canary.553.16893.0":{"name":"@design-systems/svg-icon-builder","version":"2.15.3--canary.553.16893.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.15.3--canary.553.16893.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5b52a77b24b20044e26ae0dc64d4de6f22095141","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.15.3--canary.553.16893.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nUvB1CuMMjS0PfqaP6gT24gjkAUuEQ3AItJtTs5k/MjKpRIV2geX3PKOJprHP9oDSZ6brjp6OexGsvxBKILRYQ==","shasum":"58273c7b81d97e428a9ae4f444527ead32c8f0f0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.15.3--canary.553.16893.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgX0NyCRA9TVsSAnZWagAA5HAQAIK+a7EdnUWGlTJKncYg\nY3pkNw6qG5JdKtklt8iU4dx/W72ffwXAlniG2GA934AEbG6ZNpRLpF25At5c\nUIeJOz3pDZ1WciUCJiXAnKptJIGb8xgf+kEpgIglz3zWVYIpE9y0Pg6S7/cD\n+AnNHb6YaoWNky6Upxk5EuA6aZLVy3fRago4Uo1KnPkKSsh7/yzobD0Ea69c\nYLx1/XEXU8xXgVvhV9hJP7ttEuI8XrTE0Jf0YZp2nqyPF4wYMD/jHfhnpveH\ns4IV2liliHRP6qiU+QgQSNFbQOQGogpieV6iecb9m2S9JYkjZmfJ36O1fygP\njvttYBciG1h4tXWxXNoyZahNnVFFyi4J6zB0NmkKakkAzr4f4ih04D2nycAA\nhPF8AsFJkMv9i6+j+FsBS4/k9uSkKH8WW18ggmF5nCP2fWdhy2S8KvMFE2EH\njxqMGRjJMFTw6Hi63hbqQVRc3nKl6AbpGiyoTh4AQ9I8lQFHUsiX5/Ad665z\nWXVLq069GQ12CH6wvV/KYO6Cnnm+dMmdSHhl+sBukKnnaY7YfEukM2EsHQsU\nr/G8lA/BR8WACaeLbq7G1vA0dZQkziG92YYW2z+myHtmlmwpI9FiJG5cygsA\nzSV2U6IibVnY38a1i6p1+Ox3yl/L4ENHZTCEAO71A4eJROsI4DyMLgd1i+XN\nP9NL\r\n=16K7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlun+8D4cFUiYy1qilXtZ+gqfJzBEcbLvDQZAR4cCGhQIhAKmfVhdoJbcgwoLFyRAaFIRI0b/35NWjM2VGkBXGZNgU"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.15.3--canary.553.16893.0_1616855922332_0.3285504851207106"},"_hasShrinkwrap":false},"2.16.0":{"name":"@design-systems/svg-icon-builder","version":"2.16.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.16.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ec89d244d3c7fe337bbba91e92bb679ffe5ee05c","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.16.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QE+H9tuvZWsRL2Uygs/h1kdINqN9NkSv2JY441kU7H8maWIdlqMhd0JHpDgCClDIL3biX1NkfMwZ/YdR343MGg==","shasum":"a8b722db61af6ad156fcb26b7d31035130898e9c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.16.0.tgz","fileCount":25,"unpackedSize":77012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYgfiCRA9TVsSAnZWagAAKNAP/0PKeZQUEu2fTnisVlEw\nTohSt8tr42zNvHnKyx2MKY996Q7k5Os3t1TAlUyYlwdznc4n04VXSepqymxq\nSq1gDbuPTtVNnHF48K1MvIaVx4CoNOTUCLQz/RIxcPz7fvE8frtcm1zXyIdD\nrZ0uw2XcIgzAQ0t5lBLjvjHdIMR9iuy48RELkv4h99WX/nrn8g8oDoREN+YF\n0xyK9QU3EJgZJaMeu8dsYMmdYRYYu89ZCb9ewdx+6Oli8Aer4Vm1PUOffjbw\npQPC5SBJfQRCSBZLnk7ZUXwXenWeD1yZBiKoftvdpT0tbHSuzhePSiMmATn3\n8BOqSay7ETWiyhDuO5ekY1iMRV9kTYsiFQrouNC+SjJcxLvfL3fcfvfRVNrA\nTcucI6Olo0s5Jff1gFMjmmEa2C5MOfAaxbBij/FycuMbjF9YIdP6t47uaiq7\nOIJ/OUu/1GkWBJhlyA4ZY9TuAeKKX6VV0KjF2ZYM9fGCvWvWCAKB0k3zS2W5\nPb08+YM+V40jugOCzKwl43hTG98RMiq2QOYrgaGKtcJlEg2pOIVBex3SbbDD\nhvRuzAPSHtjRHSMacLq5c4FD2PDCKV1XNhwzZbOe5lKwTRtVd3ix/maUcd+j\nARGNRsQFQUPyL/MBPYgTbCiEwnbSng4LhpOWnk3XHuLYGIOZAe6LikX+GY3G\nuK4s\r\n=3C1q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAiuNg1NYOvoucAuB4lXpDySf5DQx3l1tTXmwImfI0yGAiBLkGDhhxV0i4PzBA6o1ZPyq0J+47/DAFoY9PDsI3WCAg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.16.0_1617037281902_0.8130676751779591"},"_hasShrinkwrap":false},"2.16.1--canary.645.16907.0":{"name":"@design-systems/svg-icon-builder","version":"2.16.1--canary.645.16907.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.16.1--canary.645.16907.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1b653daa048823969a8fe373ab97c1c2cdb0771a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.16.1--canary.645.16907.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7c565yihMSaiRXLbe6kakh8/s3UAMcQsG6Axv78ByxVRIcdpEEJWaD5tkxXxZtAsSQHeumx8UiH6+EDMiYFhbw==","shasum":"425f8aca42705caf1b873966f641706331a29569","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.16.1--canary.645.16907.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYhVxCRA9TVsSAnZWagAAd5oP/0pGBp8FH2GiRoJDTk/8\n5RmT6Nb8zasqVqdAi4eoAt37LMi7ChEXp2Pr2mbNyRdYyPlUWdMJyOmlC+dy\nG8PyregCu/Y+cWOFsJ6je7nqGQ27d6H5lVNpVBEyEz0Zbcoe9w6c3xR4NDwM\nPr5FxaDxJkhHpXUaq+mOnF4pqur/2G0a9bGsqyRDBnzso2X1rM93svpKGCV6\nvrNP7Zf/ycHfuHjM9PR5XVOu5SHGjF4zPGSl+c+I41/zkjfxrWfhobJi8G7o\nIzZhZv2DMqW6yS1MwErAU5rUe0g/3rVODUy8WVf85m6UQ/jkxh71EZ3KZp0o\n60HRc3YwNYAWxx6i23Z56UnSHhgvXVm5YNuejybgqAnhcpTUAkhnpa9l4Va8\nNycDYDojfZVWEy6A3Cuj9cRGT4sbjOLAIvgfN4L+CiyjJLo7+EeJ1QSrQqw5\nyo8X4lrcrEfQle8iqA13fCsgBVS8EqH29yWEgJzdML17EYGRH+OoKEXQcJXy\nqCbHHBvosfAaW7axci123bwX3ZNMsE7DdB6geQQNMYDeilp6/W06HnZ+wgAC\nbzK6zPxFb4M+hZnMLRcf4lb3/66hqcpdVZB32YYIRvnsuAVgAe/0zJC1TNVT\nvYtMTKtVhnHJjLc+rSbfUq7Bg/gjQuOgaq5D8odx8+Ef80ox7iJFHw+N1mvh\nctPh\r\n=/xpP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcCOEloo4tBxZWxktt0wipnsUVQPOaq5U2SeX5Jv1+mAiEAhv7u4FQA2Gpb8Z3aMtZZ1aUXqr2mcHpiSlyjANGaUD0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.16.1--canary.645.16907.0_1617040753219_0.03146742019636806"},"_hasShrinkwrap":false},"2.17.0--canary.646.16945.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.0--canary.646.16945.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.0--canary.646.16945.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0e421963a5890cfeac45cb08398b3cf1885d6177","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.0--canary.646.16945.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Go1BRTtEwPSFJDNEffmMGdzIeBSWv3IVyx3VGtL2sOqrOOGxX9UmK0w7bEuLn1qEUNDI9n0qttuR5t5thQ03wg==","shasum":"9662af8a49d4c5ab9c8adecc769c148ad651348c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.0--canary.646.16945.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYog1CRA9TVsSAnZWagAA7toP/jSP2C2NFI4yHV5UkAqQ\nHVP6x+0hNwaKFMQod8la2Z52pcGASN4ks62N+mDwoo/XV1RysePreeVvmWK+\nOYDwDu1fbmIdXAi6qsrt5JDi73Lf9TeBF91MbJ+Cg0jY+kCU5x+Q5MoRGVay\nHwBrBB/lnNaXtFnwcwuFU/V+Kv6rExyBY5e97vfSOQA1M4/IPNdPvX2U3LS4\n25OwxvvD7dFGIImGqExWB11W3WNIFs5sQGyygKdhH9Ca5unnWDA2qQNCuKcX\nVU9VRMmyde3xQAQW0IzXo40U/IKRU114rqTLddbymXkL4MrD7zfEK1y+YnbZ\n37Q/TAafIsc0dtSL3GPraNCwC6N8tUaDVrJhyOMlJ/vqtHmN8Qlv5FuRhGh0\n30Nr/U0neCSu+3YwuN6ukHDGX8MCNUGtAplWq/70WwG3XkXRytTfEEpHgsxt\nRU1Iz/mnGIxc4d24AZzQzJcjgAicIq6zy3YqCugsZU4P6wF+KEFbTFtn53Od\nw/xfFKyKvsQ0oso9SRiPsI3SH0t3z+Z9Z4uGM32ch6Tm3/73d0YEZE8J2jFo\nX0RGJ3J9lDuF2HUInM9hw8TnMQbL0M4byH/jjKmiTxvFVIJR5UCx6OqRymK4\ni8AWgOAWjLeoEzmfpH0kfPVdbyiYudoxbUWu/Gqv9+P1JDWf+eKZcl2MjZ25\n3P7m\r\n=eBuM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAR22ssU0OBvChcW2FqQuLS+G8LshceRm4i1IdmBJKtlAiAJWjczfP1NkiSAEysP3csNfsMbwOf0rJmhcfdF5NQJQw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.0--canary.646.16945.0_1617070133448_0.845012192086144"},"_hasShrinkwrap":false},"2.17.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"482352affd5a79cea83b7cd9761f4707f4401c3b","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5GcuoRKApqluGLc87NqftznRtDC0cLel5q33QoiuCREulU1PMI8GEg+EacQb7mkx5Got/DTpI8gFS/Dfk5Gvfw==","shasum":"99a564369f79ab264caf357a44e64d368b837f62","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.0.tgz","fileCount":25,"unpackedSize":77012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYo2PCRA9TVsSAnZWagAAJaAP/i/L1c9EkwEvAelCaQht\nvpvESfH2VtKyLUkJI1BDnfXAQLKw5ql21ee/hGgLfJGdEcjF6KCAhdPVBfWs\nfMx7fkk2AYT1BUN+QipwEPCQGmpiBtf7K1xKUpOGZjI3HaWc0y7Z3Nca+HWF\nLG0vM5/q9Z697BACFqkm7lxrJZXbrqfhuorzR3wx05TFjVTFlKYTmE0A9f96\n4wY1YAGOczV8TyJYCMMKO6F/M0FQW2VWjC3+qpY1RQOpE668WxzyxsMlhOBM\n3N4qr7SLwseBLr43n3kdfz4LyOLEe3bFXhJnbzYLYCAxI3rs1GPagT8lTck4\nZ64REiyXAODZhGUTF8lBOr6kvHOR/7LHwNeO/oN+qtLZL6oZOK+DPO9vw5R6\n/+FVz4hKb7Ddlu7n3zxMOwrHd982nV/IV96vQ8bPQg3dg1/xRDnY025f9u/p\nPq1TkUbzndWrdN8aniOT/wEQyHiyaOEXBl6msFt85CEyJui+VQrXfuGUf8z5\nDPNT2tYdB8jy1GNHrKxCYTJmO87ZUQ8waGNB/BWnsJt+aEUUK/5oSayEK7lf\ndFZ93y+WdA4N3P45miZ/REn7ZL2NP0QCOs3uuiUv+VanJNzX+xRLyGjJONCb\nnLupzmJl50BgMP9C+3OCEqDlEL+Vm5zUJ5YDEMHCrBW4mPSbhc5S62v30Rgb\nlNNS\r\n=LuKL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVL+aDKDWqc8kdi0wGiByG2hKuGar/4Lmkit1X8N/8CAIhAI9ywgp8YccdFZyOUanQ2Dr05E6v9TUGuVsbYq4DKXh5"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.0_1617071496594_0.438428679283845"},"_hasShrinkwrap":false},"2.17.1--canary.587.16971.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.1--canary.587.16971.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.1--canary.587.16971.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"349686103e03ced5c5e8c85ba49592835ee6fc9c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.1--canary.587.16971.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Eplx1Ht0a4kRyWRRJJw/eagWi1E2pj1GvkBVxdP3HbXa/vQeu9JDP+32hALGauWnTzAczmxnEshNXE4c+khIag==","shasum":"034d36e81469b64ea30d328904f7e1d2be0634f8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.1--canary.587.16971.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZEQqCRA9TVsSAnZWagAAjE8P/iq+EtBoYw7Qk9HMItVl\nKamDCgIxeb4kobnxD7neEboxzuREg94+8oFLrs9kZvOSFQ4ilyD+jOXa/reV\n1Ae9Z/jgnTfE/JSIBqBDAyYANgCpH28ZF72xvEVhuaQsF7DWTeFTJ1WiZfDa\nQr1/+H71f90tVWZAbA1YHNRSrmjJK2fMQXAkPgN2fCc8rd4k9df+uL0xeLTv\nDdN4nUlbtg/vnWmEAogCbV2rzCmEtgmzblRZFbbjrSc3g9uIx5+dwkWGgMxA\nlIi3Xyvsb+60q2qY29U/QcGH6lGxTfDYQlaA1Xc7KaDAM+T7ROEbY1PqoJ4Y\n4KjfKR6nzBN5ENZInXpLvUuOlPgzw4hTt+JuhANi2EO6/Zuthd7p1EI86WLw\noUKarIfcDdYVTTUt0v0gaqwKH+QO8jpGlDSxFNaQs9HchUKg6juBrtecW4nZ\nfbmwORMMBq2h0wEU1JDYVGJH79Kg1RGVI2LZZycJYYt68mpSST+7ti02chV8\njEMFObhD1M0sUN5xAd/bI091ufSKSiEMIEH69TNL/HnMYH0JWFh0l6zNgJ6H\nBR4XGTlkVyeHfhw3I/guoEMz0vkaUXOi3GTIDl7vmjG41Haac+AB4xjQqIWh\nUe8UkvrGBea5iY+hjgtQCIdr7cmvtkjEUBacemHg9GSP/p1E1I4xLQW5kTys\nEJ8T\r\n=mkvC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD45XdEjtZVmbZU5ho121k9MZwtC+WIkWSTQFaxyHZ5MAIgaDI1YLPbznj8W0mDehyEj0EC1fqoMIszbBULKz+mXQk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.1--canary.587.16971.0_1617183786262_0.8666090721008535"},"_hasShrinkwrap":false},"2.17.1--canary.647.16978.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.1--canary.647.16978.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.1--canary.647.16978.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f2052475b8d2f2a9a38f3add65ebfdeac57ab6bc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.1--canary.647.16978.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VEkxDk4u0YsFBsOyx07A+HW4RoOQlFnlVxciKTBr9oLqS7/ZFyCogSvRhtJhZeMl2+SkOj2WU+xnsRPsEQY2RQ==","shasum":"fe36fc294bc0ed83e63cf157c1f42b79d5b8a319","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.1--canary.647.16978.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOEwCRA9TVsSAnZWagAAaBsP/jLNFySrxwBd52PXHyoZ\nWjoZZd1vfX991a+s9v6Tk/N7S4FTL+KTsXDv1ZPLOJ+Ar/M59tmWiIdd8kfr\noZTjHgVfCdyngdaEGQIpF9vEpYiVB1f8SmtrfX/MdsRmYFB6HR9JPJqbgX15\n4MlF5QeJnULwzAhZ1GPz9U2dobQ+vt60Y7AtH3+upKrFeF28bZWWOW7jxlXf\nMeBlplI3l+N8KmL96FJbFWXMFVoKjqUnQurcX6lbULV7bI5N8xpzdJgHilwv\nhIaU5pYoOri9jJ3EZ5PJSrpLi8zziDjiJ7R1ag+ATDCuiHinTREMbitlZo0C\nKguBJeElYTVq9RRWd973x90hrI62ZK8F0ThEX3eyevBSi3+kBZt3cmZu5gqe\n+tRL6mNHcH77Z9RuL09+PsZO1OnISSivQpJDCEyTIumD05Q8C7QowTVlfUNn\nt0N4vqjdZ0m2h9U7LSoP1P5xpyIPgjaQthjtEFQPMbpA+4qzAggiou3DRjOk\n/Od7tnFGWTV4mUlNOG2l/zT0Y5+zHa8xliCaIir2mZSGmkGXmPr7QxdaKdbP\nhQ/Sai3nhMED0Xeftx2MO+eAOdw8an7V4eh9YP2Z7QMizpF+hbbQyXauJ6a1\ngP9KL5mCJcIjfwyghp8FDfJSsBEMTn5NKVnek4KvxozqVwfm1FbZZKzi69tl\ngwJe\r\n=VvkF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwWgHG7HsWL1nFEIS3yFsHNEydI0LT3x6+ZutoDMtNJQIhAKkxvqJXVV/EMmKgQ4nhE9RigT/tWCJJ9DWgIPin4vgW"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.1--canary.647.16978.0_1617223983752_0.37277434623975636"},"_hasShrinkwrap":false},"2.17.1":{"name":"@design-systems/svg-icon-builder","version":"2.17.1","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.1","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d6c9af60eb14004330e90facf107f15683e4e3a1","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.1","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Rqjruks+NtHU/3Ob+kn99xbHfaCNV8Ovxg51rWTFhy6vpju0Be8scO+6VbOYLn/rLE/XBY4O3JfT3A3ujSS8QA==","shasum":"ccd8649da89d590f784aae01469efd847567dc35","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.1.tgz","fileCount":25,"unpackedSize":77012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZONRCRA9TVsSAnZWagAAir4P/2CeOewuIuB80xPozu2y\nsLMlo7n6Atm4Y+0cbO0Pr5VM6MjUrkWR963qrxIfMB86p3bnitszCZp8cLFh\nlll3+dhxHkWqbTLrRK250Fqr84pnS/RaKHXFqr7sundm7Yz7LcTaTtSD6hcL\nANZIEiBCyfgI5S0RrjWqcD4yHWOd88AYpOHxa7wAoMy75N64cqtW0moIxWnq\n72joOitm6RqnUYBO3PSPNbIugb/YhOee9gAfD6cdxe5wp61vDA0cqKK5MWko\nsVrbBCYBBmLZLKvZTLmGwAZrI+hdxzvQMhLp1RQDxZ1CDrdaSIGjmCRmrN/n\nZBp4y9hpk6uOdrSEgecdSPoc4pd73ddBKanKENKhwRahgDKfOqtr3RVTHYyP\nfu6UNLgVQXJugmff+WcHpfQjble9IE81AXnPVcMcmWqOxnUZF8g0UsZHbxVq\nnhKglcXpcK3lXezS8lX+PXBLeCbxILmSUapwWo6/QAu6JT7ZD6JFQeWKqcYp\n88v//ztO5TVu7gGDeIp9mN1tkrTaRckZoX76vel4T9rCr0d16rE5FBxtthOq\nxrRz0eaW+IVhPmivtqCPl8GTmt/XcpZC7kJMri5UaLFogkame4xQNe/EhvT2\nHY3yeZKo8OQN3q8lppysuwGZGSNE1/9Nkagbdo8IrNNZUhxpntNehqA8FKtu\n+ZGV\r\n=wkt+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLE7ubIXv0PiSnJpAE7+glP8wbqKQqYGfVps8k07QCYAiBtrNz+wv0GahnsmcrmQ/jgehHrt+84fT6eUEPfcmsWSQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.1_1617224529287_0.6745478812893357"},"_hasShrinkwrap":false},"2.17.2--canary.530.17002.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.530.17002.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.530.17002.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"de22b8bdd837e31def48af63a9346da83d739870","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.530.17002.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/EOQA6pskQaOr7GE+UoxpyYrdcqES/xSSN3o6t/MocpGebvExqOVbN+3T4HCMWK+XtuL2LN37YleFWbd0peKeg==","shasum":"83d1b3c1b3f519a64d2b1df9d0388ccd100231f0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.530.17002.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZaRiCRA9TVsSAnZWagAAnUYP/imBpJzXuk3gjEjLLmJi\nSX9YkgoU2G2OlaugRBZL/XIBYDvq4z4q4YvvSKE7JQ2ISiKn8nn46jDGwmBf\nY/gomIQfViPRL9JSzcgj8aoETb/GQtbKCXayxaP59sal3bwtNRBfsSaUZCDY\nWONs9bitvXNs2Q41ufhuHhFTsU6MUh1HW2uq5ZIHURGpuzYLI8fM6bd0yI93\nyDwXq+tQjNquSamnxhSdjXJwt+gB4/F2SnQXQ5qqJbq7NESxhohCdQoL2fW+\nVGVV5kEE/w5ZExZdyMidm/IVkteO2bIlqSnWIJWfIJCiOP501KQJt1sHDBNa\n5ZFlueWHFsbgmz/prLANxczWea/D9VIr9AknFqnRG8/GjM7l8DssNz8bm/u5\nZ1IUqVKXPx11NNBd4sNKpU1YSkv+VNIq2LqXqvvajYXoKQlf4yOuIZONeQ6H\n7Essq4Ox/TQFyxj1/UZwo8n/6dIQLASnJ5iYZ3RmvYYWlGjAV3W82IjsNwYL\nuzTmsCh4LVU+qz8mD2eugs3cOC9xWBc/FNggFD96tKTK3LkXeDvnpoYyy75M\nlQFM7VuAr/k5v8fqP+Kv4yC6iA9bO4uDuVpwJBc61rWv5FJnk7RoDHEVaSuF\nJmkNiflqCqN6mQ3Jm0COcWJaKZVPAr25MPnT6DxLw+R9umkTsb+9zFQCCr17\nrJCZ\r\n=0eQG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO4VwpdMJC6fRASZUpPGmtbWU2ICyCvT+5T5N3mPvZfAIhAJi0EcN6wfqvWAIdSXppuNsj3y17v4E5Lnj4m35cSXLI"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.530.17002.0_1617273954076_0.8244458248375903"},"_hasShrinkwrap":false},"2.17.2--canary.551.17042.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.551.17042.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.551.17042.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bec5ed4a2cf55a539cb27315494903eb602b1191","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.551.17042.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MjWFU01zOapAvGoLZ3k43ga37451kGGv41zl9bjngxkX/dPbkpDi3u347xeFXJLHkr1sjg9GcHpLaAh87pUs+Q==","shasum":"59ecc2e231ecbbfbcd86f730dec9c3fd0f877b21","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.551.17042.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga2iGCRA9TVsSAnZWagAAMrEP/3Rr7GgMrSKSH9s3U+fW\ng0B7CHrexaLmSsPfSlfb0RJL+qtBjO2c1VvkEyM9ShGiM4IQxOZr+idPG8Lv\nW+f/LL8bH1bgGANKkz6Dgx/KvkFkQ/JY7Sz1x84yY9hbBL0rN2rZ8sKGwe9q\nXJGSSgrjW1IwBsbfTuKISi7+k1t8/KKBCGa1H2DnFQWJxl/ghbWf2Zgd1s7X\ngvxHI3nY78CfX+DfU40LbkprhjNt19pq86A1HUtDusEa/DnDPHZ4SLsAEcTk\nyn75PxLk3jjJwJjSNFBc4Ee7Fjh9MRmAa8IibDvRyFAR2q7ixA07iKJozLy9\n2vql7OfALsiCWBCYbbEgwNIhVdd9R9dEfQ1ucLb18lJu1SK3dc1gtrnbXmE7\nzW5IKBGwJQetz2EWBs2K75Nm/EKpSYa/SpuylnzoFakkU0hxBveGQl1sW75p\ndMkmzRYMorHl0GlC3Qsos0Yok10OOSzu3uY6mBguQt7o5BG99H9WSjULToQo\n6LACFTvWqSJCIvbkXC4SdmyWyYhCl6Ung9UqPoQ1vZfu2ihejT2JWoKlrxpJ\nFLRkx0L5xX8soW0uL3zMfYInZwjn7tccJe21TWN2vtwqOBaMmPMehyCSYqRM\nYv3/3R7QES4ZxaXK6u8Fq+2WMqxrLTWQt6I0mukHVJs8P9IXiHNYX/85m/iS\nHhsy\r\n=tdiz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTl752SzA1y0NkWFpsX1LU8rf502iCmiMV2oLKl8MQbQIgep0bLmt7SbfqMY3rEd5XGzPbpgoGx9Qes6xtYgR45QU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.551.17042.0_1617651846376_0.8224653007490081"},"_hasShrinkwrap":false},"2.17.2--canary.587.17059.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.587.17059.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.587.17059.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0acc0de05723877eb71eba0ddf98e9e1bcca2683","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.587.17059.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-K//yaogyhScqF0oqpMVOHpx/82dYRNWPGtm7NDBqodzWw+/QdLkAWODgZqp0L5tYHBt7jfXU1zJNodb7f5Q5MA==","shasum":"106e91cc3b11f0a49549f606e70b81c8becff24d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.587.17059.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbhUGCRA9TVsSAnZWagAAmU4P/R2AbW/5MJh8Kf5GWh5F\nI68aEY2lfdAAJfTK8KgpilL3Dfp/iauw3fKuxwxnrJEb1s2rkEyZj2HCF9mF\nBc7++bwZyk5V3qS/KBhtVkD6KnBQjRbRRJpoc0Eym/OZF1iLaFjhuYpODRWf\nfwWnvyN7cKkPFBPaz4KQszvL1zzjAfssj/k4BxAr3RvldVXlGRgCfTm9Zjgp\nToZ1dwRtK2Mhi6MIgIgjUFnqoI0KtJxVTdhz8/dxTMy0HmW0hX3ov5fEnvBW\nP0qemn4XbdYyoLPmM2TJzJtdxwEJFSOrpA/+fT5aE7bgsxsn/otfNnKTc8Vr\no88cU/Oqqg/GHnlcRVByaqEmyrtTMBy7+zcOt+GXsOcqgzFLOFI8NX/9GkwT\nVoH+uRaR3vA6lnFObKoCEw4lvccXzWGKxDbfegj/FciUWCjS+WxgUQpdnx4O\niBquBLz2DMdh6oSgGrW2fNK/72niQT1BgHgARbH+XZrwa6n/JkUdkZcKrwGX\nlW0HvKG7mohbm8HMlg7VWwpTNxBMS/7mkO9OZgqsxhsTjjOwgN9zYNBz0qdn\nOsjo/epJUAlyzC4JgKwVo1XRGcMmw6Epwcgc4ZpuFhQ+VY/KTUmFwEXoak7L\np6QhvNqir8OgPCOtFkjODOpWloILFna6PiPq9SXVYwHYz9nny1RTLzV73CIe\n5F9I\r\n=KRr9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx1zvUq9zjt1wCcSXTHyL/rwLMcGH2JjxJ4uY/eNxKSQIgYpn3w+MTbXz4PR9wi+myNWPMatRhuuWxCKYJP8ga7OM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.587.17059.0_1617827077824_0.6836614304636415"},"_hasShrinkwrap":false},"2.17.2--canary.604.17060.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.604.17060.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.604.17060.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1d7397972aeb4fe17f0b6e456e45b4c9c4e9df77","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.604.17060.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/4.0.0/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-AtqgOjLcLPKOdZdDgUDkfyZExQlMqDEruL0aF+FpZl9V3R55j5jtAtu0hzOUZblSmkAkyrN4Pee0DEX7Z7UiNQ==","shasum":"a417aecb899e2f745581963a96eeb6a94d13c214","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.604.17060.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbhVHCRA9TVsSAnZWagAAk54QAJ2iRourjHIb5wmidAPk\nX5Jf2iqwWmnfDIos56zydASKVxny0+DIOqXogNasF6Fgd3CiqkC1u8a/HlJ6\nR6+lyDFjVciCkE1y9FGacka/PhfJmXv5fEWZgferqw2SssLF4hqSeY0rH/Uo\n8qJUbcLqUaIcL0vn7Cz7j2q6yjylwqrotweZO16lEDJf9csXyeZY7wylKAHm\n9uaND+gDLw5t6mfRpsEr7THIaAfFnjORKVjGvd6yAw0FQgKjgrzm0882l1PA\ngN8+s000K08xTV7rmmdJdGfv6/PtUv776uDU16qR5BJ0A8b5A6KcpP5sd0Mh\nKINd9DunZ66Cve250CXa4JxvKmGPSvqX0SSsWwRzaQhkmftQsy7/w4d1oxpj\nkC4CRtI5pOpVHBC0s4/L/kWwQb31OJecRL8PJOXrsB6jPEyCSTSoWtDl+jlm\n6RPmAophPty8CJ8rLfHfMGF9+knlIyAKf7QK98k6gFeIF2Jyh+M5uIo0qgml\nzPhpPYBH56eg1+Nz5sMeYr0RZ3ZOkxlIb1PIkmn5UPbHk0WcOXPrDtP+LHwO\nNTPN8pjAhcn8xq4g+xb6BLvTADPrbd+t3Zr9beMmVf10P70X2+IzsUDRbXKk\n095eBsjMRDqR8hzsWg8DtxhMn8+yEckP0R8etxiph5x/rCZJJKNXXTppnZit\nbzCo\r\n=NkDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+ARYoLqMeXOBqicwpOsYxMll/ua+oH8qBYMLWxH33nAiEA0WlkFj5sT1DiqhVd4QoroBQS1votimOjp6l9hpfLd7w="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.604.17060.0_1617827142842_0.9992108062954024"},"_hasShrinkwrap":false},"2.17.2--canary.566.17087.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.566.17087.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.566.17087.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5c12d0392caabc0bc4709f13d55cddded69cdc96","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.566.17087.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ineTJmfzdQ0cDY52Vc5wSabvD4BDq8tRHyaKcez/X9FoH6Y3lFJnwg9Zq9cQd0c+FWYDv9KIqbw0lRgozGqmqA==","shasum":"b15cd7e234a260708973b3809ca25e3fbe3a8d7b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.566.17087.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcIHfCRA9TVsSAnZWagAA104P/jNHRKZZ73UQc4/hAiDU\new6jY1/vUd5RN5+P4/x/3psLO7Cyh6wuJIgvS+fgk4HNgAOARgPeDYHQLxkv\nq34oR+v7/icxNgb9K+3qQ5K81X2GHRIh1SMfFKpSgwqMVA2Iop7xd/5Bmuv9\nnc3EAt4v+Q2jpXPRWn9wkeJ4Ub51vr8QmDr6KHbL87I8QT+TOc1Hx1mLIcjW\nVeM6qi4+2wr+Z/BH3FZB3FrZx/PX6I7lNw6R7MQ7z6N/6VhvJYODdNwbqAa7\nyrFypQ3K4faVlvXuAN8h6wxt6KR9GOMkP3w1b1s3SbtDzSzYJjIggTm+lCQL\nybFrVS4HxFhG73tTjXOCOgZ+HSxToYi9dei6ZKMV71UpdwZGMaxLDmw8R4N0\nakAbH2deVA2Sh94XhmJJyPQZS9NRq7wxhtAlu0VswfXoEoZrP7yYUTUObXEZ\ninNuLAe8JcQr0EKP88YyXzcC2VICxUuWMNCsYw4fBJKThi68XNrBOMVYxVtk\n8LRHGPTpyal9TTybtdKYBVlmmUqpVRUyJUdoUUTQNs+K5f3N7zTpI0qQOezC\nYvTHm606aI3PCZ0J1Ez5Wc5NOsZQa4j8eO5yCD2XjZZoka5VhSLWyq4OhdF/\n2p6qMWi/2iIhifSWjEWvi4LDnvCT3xsEKdF9GCPH8WW0q9EMgLrQwYiwE6r/\nPn8r\r\n=Civv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAIx0GM0ltOCdSNgL9aNOTHgO1GG4bQ1XGH2Tkaqm0HwIgDuljbhwfwx1RUdw893lg9PnqDHR08qltFuNkZPLg6JI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.566.17087.0_1617986014568_0.08060851252608225"},"_hasShrinkwrap":false},"2.17.2--canary.649.17093.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.649.17093.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.649.17093.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fc67966cb9657adab35abff1ba18b13ba516f2e4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.649.17093.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K1AcBR5299Ni+DHemYtq4R5J43Z4BPfoy/SGfWwaXO8f4JNM+/Ub58YmxZ+PIBTJUEvCL5ynitK2AsKSTHNTNg==","shasum":"3fb89edb209761b7b16558d49cb0af20c9282376","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.649.17093.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcMAfCRA9TVsSAnZWagAAXf4P/1XSHk7F9Mk5xIM3weu0\nrQQLNpBfaI+Odc625tTGDL7zccFrp1j8yThz6GrHLCv5Yv/hBxrR9jZ8ucmO\nCLsn+f5zgqTmMw8eNfNELDCngEOV5Qq8vOmMhFeaMlxYoXnf9HuUddKijhFM\nfDOg5EClKVQDdUgodAN+4kjgaI+EusVK9H69offeRh0RNYcqbCTc/C/uy4hd\nN0TT+LSeA8/9Q0dazmUNPvh9eW0q1bS9stTI0LTPnOfmhFGWUZGv7tTNpvoZ\nQ1cQ9XgKajkEt45nr9jO1bjWrIZej0ZTRKgW32xw+OXSmaR5OogfxJ6r66Cr\nNdY7OJpemg8Dsa6P2B3B4ZqWSH5yme3v0+B+C7/tyn0TeVRFzn3j8aW0eEf2\n1eywVx4q0YAIc7KGrLY0tkNBu/c1ALZOjqNVopplcAbliy6/7CyGKvvlDuyS\n+Zf+YdgkRU4SEtYYEYpVTn8qhD4WV2V5c5za0AxY/XNsOF48Y7J31NVa4HZO\nldSS9Q2jUP7gSQYKorbs8jtMm3jM17tL7MoqEYMZ2ujkV60RtPblyuE3bHUP\ngU7J0GTiES9N8zyji+zlcNbB47EegEZ39vtWzYpiFAApYSPAz9QG6XH+tWmi\nO4qPGW2uxGVDhHlZXDiaUbH7RpICSZxUl+t2f1J4bZVpatSVJEadzaTj+5Y0\nfcNU\r\n=gIgh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtuXmMRyL5LwtlK6gdbbrLJH6JLGQWLgNmwSBHHrx5tAIgF/Iblh8T6OY8E6jtaX8UNybtlrtYEVHoJG6tufcQILs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.649.17093.0_1618001950628_0.06473165936953817"},"_hasShrinkwrap":false},"2.17.2--canary.617.17106.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.617.17106.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.617.17106.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"837f7bbfb1258be1f313fb413dc1181787e41f2e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.617.17106.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/N/BBAOpi2smbZbugck3a065JgvoaQryxWSi8QRXGXlhgS6oxorZztNUBVI+uZDArdTDSMI7mewqw8w2yHjKBA==","shasum":"1a90ad00326f41eeb9727da788e5394a03c29038","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.617.17106.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgchaUCRA9TVsSAnZWagAASj8P/i2xAkpwLGgk4RRf1iA9\n62y8kR/rBnolOFzQYazmEqHZPPtZ3+EGw2IBkw9aAbXrHV3+/SnTaxICkZ9M\nfuUYGpnHrhx/mN/w1BKIXSL5HUqhkVqcIb3f9QddGKzyJSpcKp6nGaosvTt8\nxXnKB9EAbMJBGfcIKhtFPLWBhGW8For2Qx2iwds4c+Wk7jLZQdj574UKJ9Ux\nxW7nJsr/gzuIWcDv1JSjy0CGcHtFRvKQ2IgZE2RyKjc+BfPbV7M+Qz4WplB7\ngmSMhw3dBdmZ2ONsmfWM3jgZTwqhVj9GFdMfe5avcCyfwGqbOen2yw7no8gr\nIHw/px4U0x35XgAJBgoSUcRiVTnnJru059Qdn6lVKKHV9lmJnBbXaQ0RvW9M\nl9nwgPnx5CR6MF66Vc+neSJPSwKwCgcidilXMBpAgitZpxVwv4Hceqo2nWeN\nuZ1cLxK15ES2/6+7Re3T3OKnXA+Aa7/zSbanfQtCHs+EvzOZLjo09+L+huYL\nm/xo7wjinD6YiKE0iuW6cyDLMSftiiZB0CJYFcF3TSh+LzmIC14EZOIsEyCn\nSRscmN38ZNfFka1J6LWVfFZ+ecbaBPht1BsSgFsMy169FuWjmTyV+NTaz+Oh\nMHjDk+qnJ5+yfQR59+69f7QC5S7aMQ4H+4pHQkMyaoM6GAMFtkCENxs13PMu\noBjk\r\n=BIL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6k+daYThoFGeNdWs0sOUD2krJ/4W5N6EBEYpsoXWExAiEAiho1xEQYYsMsfLn+KnbHg+C31Vr3QhaAOeKLEpObprw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.617.17106.0_1618089620381_0.5047238355723138"},"_hasShrinkwrap":false},"2.17.2--canary.617.17117.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.617.17117.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.617.17117.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3f3624b7a3ff7db8944ca4a340c10a2ec18a8476","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.617.17117.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VkQXBsOxrHoWwRw7g2m/1j/A8kn3CdswzyQ29Sdfbn8UsYdid6HzodfK0MC7lYpgJJ12SfoxMg2V1XWJ0hO7AQ==","shasum":"4514f7ea33ccbd8e49365e78ff815b55b0eb5c55","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.617.17117.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgc1a7CRA9TVsSAnZWagAAfcMP/RFyYYHe7LodD/l2RsXT\nn0GGpq2XZ2ceKmf3EOGehj4pdfdDsrTyF5JJnhtbPIaSyaD0FJA4EIPBdYmf\nJ7IRbECUUzkacEAEBxJE3VdNE3WbaX9KV0XT9scosYxMz0OLItDcbOsArReV\nIgJolf2OixAuY2gCVpuRqiRSbUCkVTKaZUS+aRNBZLlkxB/vIWiTm1Z4QKDL\nfdSMDK6VWUuJfoPAMhuQ/MId8chJ6fRlVBEdmp7KYvxwgM+sffYfcn3wRbGg\ncYMUMLPliDNyxXSEifLNrWZCRPBhZctQKEmV2EdCSFaNG5kdF7yFvgPIDOYE\nc+mphY1f0fo2R0JybcFqsBFOUQ3kuq4QGsg1FD6uPXB9Ryvd76a2yj4itNDL\nav77Q4YN6Gs/wdabXB53HW/+GwUW9YSpJfDV1fG/evC9agxTjlSbJJaYcHSd\n3tYL30EZAQNxmpfi6BdRWffFu5NRSgpiXAWduqLdTzYOvD5YPPQECdqV1By0\n43Gd7oft8qZ4EdQ22BZjSOAclvhTDDwac75NVdy2uQ1pAOVBq4xiWaVr6NRX\nDlkmUotHu+tn/N/kCkQSkupnsEQwyC34OtyKcZnpzFfoRqBGIs68OMZiO6r2\nNXAsKdyISO39OsKiw0yDdt8rhNJ1b6BQqADDD13wS2ezUCKJSLpWjrjUUMyU\nwWxE\r\n=uUx/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnedja7LixlIoQC/Re5BPNvt3EBBE7j60U2A+finy5xAiA2ttqn5MAf7SFgoCo0z5/GBVN1ke+q1y+C+ptOOg443w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.617.17117.0_1618171578993_0.133736293650075"},"_hasShrinkwrap":false},"2.17.2--canary.562.17123.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.2--canary.562.17123.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.1.0","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.2--canary.562.17123.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.11","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a09f541817fd9b4fa031f31a966f16d68ce34ea2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2--canary.562.17123.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-elLFxc1jr7B5vN+AYm9Z27b5OxAqMaEeCUJdAty0RmqT73IM+5wTo8S95gcm/wo6Ec6fcuv2uoPRcoflmTVRbg==","shasum":"ae995a22dc9f076a59852becfbc7f842277383e6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2--canary.562.17123.0.tgz","fileCount":25,"unpackedSize":77052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdBE7CRA9TVsSAnZWagAAzCEP/RF+lA25VDVubbUWKg3E\nhoA92oq4w70uhvciTWRew5u/UDAfyeDSC74h9o2cJeqIl0bG/qv+uV2b0XRq\nsP7azE8isRFzmHHvrwJoXA31xB0tyEfIw7tkGmBGT1EkVxLGkBEibrBDRSiJ\nwox6rvw7a7KCAZW8wZvJe1WeNzglQSim0DVoXBuiQ+mc8gAlVRin/rKEaBvi\neQgyrgcEELqM4sDcmR/hn6UqikGz79nzZC7L99qFnWVFK6W2LTmEznNfA0TY\nzTONW0Qxi9QMSNtI59UlPFV/C+dF5dZzbdvbRxRu75AAAknKhK3lySnFgCLj\nUC+RfiacXQfrGyc2Eg4GWaXTs84+w0d2xCzJ1/112jDWXVEqipoXmB6Ba8lh\nMUsoDHRmILDDxvuwGQyXHzdxxTt0Iwyp0H8PfH1HlK45HtzU0DOam8muWNQF\nenX/0Oki1VEFqzaZg/lC0ybVjQMzdVh86px6CYfAmU43Rhhi0YEE7gIrgpv4\nPks9wq05xWzdTI4aGCN7RVbyeYEZ1iHp4ksY2f1MlXd51H8QCKBjKW3pz5MB\nC4jx/yKd5kmesG/F/xRLrjcL0tJquLBL+W3T09r4eaS0uqFScQBIuPCuGsHA\nC/eUqJDaRj4b0SJvZTI5PUyS9s0+RiFB38JBYYLzhmnDRFQ26gamTr0VaMnO\n+att\r\n=r2l7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzqCQAKGDnBRP4cjU/XXA3UCR7nVdt0FjVGi0/GuddtAiEAlCInCnrBsIAHu6AEAIKpwe5MH5bsR5vFs6Css0eceP0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2--canary.562.17123.0_1618219323183_0.6171640617415193"},"_hasShrinkwrap":false},"2.17.2":{"name":"@design-systems/svg-icon-builder","version":"2.17.2","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.2","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c9645fb21f1b707e3dd8ed40046faff3f9209a8e","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.2","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hfQf5/eDrEDHzA1hDtOIkiOPEd1JDxx3Z8ld2UGYVIyeGIYi/EKzBva/gA7bkg9+Bf01RzhsrqB8aR3QxbXe9Q==","shasum":"5f7f76d44b3ff7ca6598a0770cf02cf41edd6210","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.2.tgz","fileCount":25,"unpackedSize":77012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdJzWCRA9TVsSAnZWagAAOK8P/iTRihIwm9STPs1jkVWZ\nS87daDoviSoNbXg073M84rHmJGS1289yARo2Emlgn+2mUDM0aJvZq4j42mpr\n2o8nt7jYMbNl9SgVSDvYaNelFpkVl5un2kiKm04UalqvqzvJLEnGF+qBkRfy\nY7jB2iwos6XiRbdb1Lo43b+3bq92QnvuoR66k4rfy/Yc9zH4xfaWgZrxLRbl\nZ1sHKk0YNrlIqzKgeR5cI0BVLPdwYIDtlW5nFT95u4xs8NMaPAm6PA5u0x0p\nVwkKtkTIG026Jf/Hi1xTl8GYaiAsKSfzEk7spiSbtJIGouPpfIvc9Qjf5SlA\ngXdod2F9FPtHDqrWYtQs+3ysbPgCzt5Xo2Jl6enO4OZWt2oGwnln3iObvdI5\nz5dUKeSDDt9UjmyJuuNi4cgBWKfPeAaD6vq+kn2XJmdoyZR8gjhpXBMXUeAs\nuv3Fo4caqSGwOw5Vm1AiFv69W5KsoOX+shcMtioEAGiEdS7IZSArqVzh76ay\n4s3FhhkwwZErE6bShoDp7yBlHDkN6c6WkRP3pu4KsBvYSOHwctIrb5LfL+xD\nmzCyG5Cm1RObvuSiCsNCy9tgJW/WOHFCz1OYYMoUD+v0gPyYaTbWspFwNBzy\n477kAjhg1DTucP/9HLHIOHGFt+vVYeDtt5Wxlu4uFABUxm+I9XLi2eURiEvB\nkZ+S\r\n=lifw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj0as8cTGxe5CQ1ac+S9cEf4xekBeMbDU5Q6lKE1N1pAIgGVcVGABVtsy7tlfkb3snuSRfaVfEpRGCCS5v6vLVHO8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.2_1618255062104_0.6342335746811145"},"_hasShrinkwrap":false},"2.17.3--canary.650.17144.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.650.17144.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.650.17144.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e975428c29d5bcc63e331ff7dab1cc540aa77865","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.650.17144.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eajK3fCUCbpaetmFI912qz36tqD1jWSkmHmX9Ds/pcrU6v6TZbNvl5R6+jlaUIpG+QOcvLCBBkUYQD7fz2oE4g==","shasum":"139bfa153a71ef0176d13162fcce245347d568f4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.650.17144.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdbywCRA9TVsSAnZWagAAKU0P/06mYbXwF3OSDSsDgS6M\n6g5KKNfZjUQNxymv4oQd53w8xsi+7Wq1dnYwr6a6l/hCc4ha/Xzurs/5KWgz\n6Uq9czZlVk+reRltAMm5N4exwMeUSb9nJuWOiAVyYV4TwSiC3j2ShYC7ce6z\nrYOS9IzWlmLfuDsYgdxPE/lqZZ6bmJ2/vPBvZYRYWn0Hb+KYSDYGM+5856bc\ny6F0TwfilbttLQqOdSEMSac1tHfkH4+V6HqvYkJ9kYkkN7wRVatWcNjbf53V\naA1jYpfnl4gjwn49qd6EKR/07m/Z7yap3iJXKffS+z2i984Bw2KBZhbEk2eG\nahx4hXyfNsRzaew4RaLP9MJqzwyvgvBLZMAO+m85T7BkYnkMOIGv3FnoRwKV\nyPdhxpp1egTSHXfP+29X/xRC23Cqkw6QvFF3XgYKBxw6CPDDTGoU1BxQsTFJ\noXBuEUBKcek5E2TpcUDfcXcisy8ONGCn9uMXrr0Gr5rujTTg67U/60Gienlc\n7cl6usrWDWF6QHx9w8CsOxr4J8NtoZ47d226OJERsSoHJtATAYBQ4ZlXX2Cc\n/0E11IhDncgVaYQv0UjbrSxD+uoz/Af+wb+H59QET+QEIelVGTZ8/Eq/3OjL\nqY/B/rmsCBY7Bs/MxB/dmL00qKQ/fOkjlouHQZ1rVz5LP9GxR8X6ObkpYd8k\nnpFE\r\n=+ZyD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZmtCO8UqcmPsXbi8DX6f4ZSpbaMAGSGpC2gL+nKN9DwIgf9c6ySISmzzyX/NEF3VrUioqJtU1QmEkPBc0VcZsT4I="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.650.17144.0_1618328752370_0.9860646559752784"},"_hasShrinkwrap":false},"2.17.3--canary.566.17181.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.566.17181.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.566.17181.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2320f69c69bc73dc66adc5e95a8172761de14f9d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.566.17181.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2bCWrHR17+V2QVLIk66dnc26NzkRgI6uUeGymNZm13UisLPuYONUxz2f3xqQeUqYNa8mz0JpNS9YwmleljnOdw==","shasum":"ba4f51932cc22eff33e9771b399e575402f5ac07","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.566.17181.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgebLJCRA9TVsSAnZWagAAU4cQAJmNb6b6qwVEtKVWRerV\nWQYADdditKForJxMtSLkZvmsR1NPi1CwclCUSPMIziJUXMpi3mi0Zkxd/6RQ\nz/2QFdCmRi7xtUetvbTdwD3nZO3aJaPLBIb3LeUNAs8R26EYJ5JtA30fLV3A\ngQE8wjc8JKlXVQLukJHOkrGy+bTF0inYlUad9RcJTOkIY0wA4cRPBXjg59sN\n7S+T4kY5Y4XvV0g491by3PYHmdDhb27STSVm8J2VIH4N0DWHqgR1qXL8XD9q\nNg+LYFfyg4yhBdKgpOsm11J4HZOLxQXKGQjfP8MahTqaDbbWmLSSvjQMvakO\na6qBWR7mL9fit53k13l9sfs2tR0w7opuJn4HMSqDY2iG9kHGyaOlbe00XNdF\nzndjtSgRXonEW5EQXJJsPHoyFACztvsFyqRtoDLU9rtrA2VIuwjmayv+1h7N\n9w3Vu4pM0aW3MMFopGeaJlL0dAi6Pgyms3Ah8kZZJXPqZXl72ziR0sHoT0tv\n6BLxdV6dXNa05HmMBQySdIu55Q2SQAK6tnio81Ojehma5cUtBDu9La50WLnU\nR4YBVUJ9icd4TrNNZ7N7yMcuxjstTG2z6K6DBOKY4sc509l58zqo6dAd0kiH\nMW9WQ25UJVH758qlksCx3/h/2ZDBrVjefz/UCypm0JKfcB8Nw9mSm6izkIN1\nOG+n\r\n=EEg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBbe3B6+3mlafIErq+4KSoKQb14ymKme59LFQX4ijzsAiBFE3ahGM295YzecU1rEP6uXVvTVsIp0Ovkh8cQCUzx2w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.566.17181.0_1618588360616_0.894243982419882"},"_hasShrinkwrap":false},"2.17.3--canary.566.17191.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.566.17191.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.566.17191.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"484c7ea9ef22613c0945246a4ec5d3cbec4ea9ef","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.566.17191.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GKgvOWVzYzbEIp2p0kOe+BCpp6+v3nVylH2Cu2gVVDxBJNTi3Tk9Tr54DKPKC+KuSruqo8zCV4ryPBbwQjnJPw==","shasum":"cf96630620c946d90f2ff03dc6cf5870d86bac30","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.566.17191.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfZWACRA9TVsSAnZWagAACmUP/Au0jK0WctNfOCsAorhx\nNQo1qeSX9bXivrjZ6RUGQTnEuhDhcxQDo8xKVTwS+Rrga2VTsaTq/RE6awtx\nu7rvPuVwvMzJi8K3/BQx4NNdg/adBo6BjZGnWLej0AjgmHIdkMWdGbzADCyA\ncYTjWu8wy5loLyx13v9vRVc8hgX+DxcxTjHQdwJ75XjjgyvYM83GQ0IDozWz\nJFem9EyHAXJeziiDU/tfdQV6bvwG8stjHNRPqMCiHUyUPebtiqZhHRAKOD+f\nNY6oVcM+vGB50vm8t2U+msZT0eV18so0NzAdQpE2KIk8MpSEXxQmgY6XdHV3\nwvroM23Y+/gSJqIS1GV7PufFIrN9u7ykqJH9P5FxcwRw+OJwpG6hAoqpKx5i\nKZcKCdW0pugx3UowxuAFLHAIMNtGLbCGJ1AOorfsTbYpfv9ojiKEx6sFlDcq\nd81vzaad0jnML8cdW/+CwTnhmaMc/Jm4sMUCN52BZZUhlQ5LQAOQbfa5xQDQ\niHPNB/l1fsyMQhjXP3HL9F/4x53ZZSpMCe/kpPprSlBpyYNmbWXtXiTX643f\ng/5Ri2DtgD8J1l2yph57nyhLP0lwQxCvRF6aGb2Sgi+mnkXWlpEL88Hx0Owu\nUEbIxfMPPeLmdIOxfKFwrFAr6JTQARlbLolnMYgAJyS8KEQ7Eafn1kEdLXso\nUx/u\r\n=qqdP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdpt9X2VY3NA2J50jXuSvJ3MLX7rhd3iIRvu1PDlAkxQIgUyzyBx2bJ407GdJTa1sif4Eq8BIz2Yi2Nqx10qARTLI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.566.17191.0_1618843008331_0.33836863613346013"},"_hasShrinkwrap":false},"2.17.3--canary.587.17202.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.587.17202.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.587.17202.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"84f751ae640aefbca14b74d240c683315d04ba83","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.587.17202.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NttXZBIs6m7JSEkEzPvJq7qGOXXE4KKwcRtVhTMTnAKl2zILRpv21vV0iOOokaEhUflTMVgjAD9NC8yynJgyoA==","shasum":"bd9c97ab0d7bb6329974945935851dcfc5edb8d6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.587.17202.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfdi8CRA9TVsSAnZWagAA0OoP/j4hir1Iud04TC27Ouks\nRABNRPiVq2Lngxvwjh6xlBxGnMY9yligINw68cKLGZb0VP8XNgYvEjpwz1QG\nbgdFjkzzJsAzSMQxkzhm5xtq2bVAt0Hb3e1X7kLv5Pm7o8bnYmI/gEIVcFs7\nibbVf1D0ANz0OvPphP/K+3tPimN0LSr3mNOxclxeC2h1lXrksTnn+ldpTBIh\npGcm1Km8p3i8iUUiuH4Trl06KiWx6M6dt4szCE6bWuC3K5f1HDoyvGTqxeFr\nGM/QMKxGCWwK8qV5mupGk35tTsWnkHxTqXe7dEYb6Wl1YSPqkAGENFfsZ4vK\nSQUaON60lW9N4sqkKsM/ccbqak+pofVGMR9LOTY17KXPiVUZy+04XAVDsalP\ntlCK40fKrrkpEpbQx+ICo08eISwQm3VdToJv4h1Hj8pAkKKjbjJ7yBN5Eqet\n5Fz9h+jvNYLty5ljQ4ZIaQ7uqHNWEAiTtfiMl3UBXT0ExE5Q9KqcQf/6jnIO\nJVwjOMd2lnocxcCVjbMAhEIuaBFLoHG+BFNbVbTjv3EFWY1ptlpwjLJhPPSy\nMBx4hrAij1QMeFD/ieMDfMDPuSNcSWDBrCaqFuUHzgBUuBGHDcnw2NY25K5/\n/TsYNyJkB/sl9GBzWWwuUIJyoKvwjQWX7fJL12cV2XuVymrOmirKx8um7EDY\n8rqg\r\n=jWBT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHizHEZf/W2rbAemarygAW4GMqtmD+HBtCQnPNg+aaMmAiEAgy/iQ/qYcSjBd6hia0MUvja0lUcnLz3o+UhRHURL+24="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.587.17202.0_1618860220408_0.6800853445750987"},"_hasShrinkwrap":false},"2.17.3--canary.566.17203.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.566.17203.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.566.17203.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5bcd84cc96f5b4bebd8babe1f64a61f575bcf0cb","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.566.17203.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tHi5RrHfG6dsw+Jmn4zWqkZ1SoJiIOuhtKWDU3BN6r2N8Q9TmFcnPmAa9ewgGmIvZdlV4sPU+MPFFth7xi7T4g==","shasum":"41c3aee16db2f79a68bd2aa46dd37dbf4ecc9228","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.566.17203.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfdkoCRA9TVsSAnZWagAAXekQAI5i0QzDds/o/duztSU3\n5+mf/Qs0mnXXwbjXf8Hy6WO6iJkUtH+NGVBLwnhtwq3BYt/GbidUJsKwZTh+\nAIEMglnXXuQlbZkWXbWbTLbDDkWSBn8edIn7pKiQ1qJwt5CzaoL+msAAsjY3\nhGyStGsRYb2kU1VOTjC1cvnIsnw7J39m4f0XRQxjC0DB67vIb9+EUn4aNZQ1\nXVVaAO8DTKYbvXLC9fFzDXC9YF0BYR3hSnjjp4o5ZIjWgMsy/qmzY+DONqHT\nQ2qxSoyu6nvAvuS9ekLfY+yEaHABUvhWTw+o4iPYIVMb10JfqMyvHaOG9doP\nlh5LtOe3RsBKjXRCiU+0PQRmURlbjwSHvcW9gigqHS6e/ovTQNpX4Vqa+33K\n7kLYiaWyPrfR1Si4W2lFjOMZyP6AJdm/svOLhNRKRPuq0Oa+MD2pjNU/Nrfp\n+Wi38cN5nJZ1tpWy5CZkXARAQvic3w/APdBn69M+Sk0Fr+4HKU5KFkPAI9Y1\n2Bh5RJiOzEqtU1gyZ54zz9emXPMsR++LW1YqNVdG77EG6W9eWsXzjgKW8LJj\n3B6v2D7fDmse+XzdWRzuph3geCVt51AtivOOWRyhHgmRV/8pEyEizItGT+dc\nsPW22DpaTok+e4CmX50Pqn32Vd8evW3MoF3e73EeYS7jyZZQQG8hWaDAb+1E\n+7mj\r\n=w/tS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbaypMZ2kMhUzfhmVUMBhVZp32PhR82YFxEILdVPXPBQIhAI+tmeseFLe/H9Mfv4HjjbxSKwWD/ZsFBz+xjxPP2GmW"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.566.17203.0_1618860327976_0.511233458058209"},"_hasShrinkwrap":false},"2.17.3--canary.488.17209.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.488.17209.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.488.17209.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"94ab944127fc33213fdb478baf72ff8ddf5c1498","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.488.17209.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cw6XHa2g+HOIjYyhMCzyqfohI6PZFZIFK2jb0Ug0KVsppsA3Rlo54DYiOlbYROzuQBNLvRAwEGVW9ZTgGsLzTQ==","shasum":"5dccccc46fbabc6d07f062fa3055018aa81d155b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.488.17209.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfuZqCRA9TVsSAnZWagAAlV0P/2IJCCtltA8T0BNC1Kb8\nVK/lSvmVbGbWOB/YHpc/a5RU2KWQi7R8pF+QfxortleCo4hOWJ4LyzoyRSZq\nRIZk+JyUnkzDOP90OzGl86uSj/NzmFog8pgVHtBiDa2W3us4uYMa5D+bVMDy\nVYJWpOgmiSfqCVJgRMu6l9cKCruT0vnYsOeHqMjQnC2vl+p1XuRWN3kXZ/Hf\nszDymVgPRQDlRYjCDU5Q/YruhW4Lb5BtKvil+pRiscDmelYVeZar7adM2kF9\nObl968RVspzjzv8pQMXCbCSJ5f1eqt+u8sVo9Ul3aMk71g9rszhZeYzPjX85\n4X0k37UsG1bdZmJZ4FXbGMnfcBRPqBJrAtAh3sipBNQyG7Dcd4PAhafcPgmc\n7WPLmxq5uynTA2rYNKw/Fw0xezzq/EVIvasOyAZYtrKLPLNPAY8u/+txSLry\nKSIJp5BlDtCeOcX2tGLT02k5b71WeS+Bid0GwWHoFMzchHFXcap6XCH+FEi0\ngx9L6sJ4IhA9rWgGz00Pys8809WxisWMhy2Qi9LjGlA24QFOqLlTEgPtcaM6\n71jzyT9nbXIobd1iO7pK//tGxHThaJTUyyYO5CZDrS5vDo5C3Uf1LTMR2LJ5\n0Gyshn+kZ1RoFRHziicNaCnJIPjHNJeweA4u2/SbN5hRcOP6XHL1rCBTDIn4\nBu54\r\n=/zgU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYotDCj/72RRfb6RpK2PZHM3vuQ1KFuNwQ9vtleEPutAIgMWskKtBhrXOriyr5fuiZQp+aoUvgOD+iMYWu2ETGncY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.488.17209.0_1618929258165_0.20238990320376193"},"_hasShrinkwrap":false},"2.17.3--canary.587.17219.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.587.17219.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.587.17219.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"444a131faf7866c1f83385d76a6ffaac5860ef73","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.587.17219.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wPmhLZJqD5BrEHsN8N0cOZnc74fUIbM2QHvFx0TdIQnuqUVZYGzuV7i1kk85sCjg3JtxVsoF0oUVBxhwLJsjow==","shasum":"3905cda052ee154f5fc811a862a44901cc6b1056","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.587.17219.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggXtdCRA9TVsSAnZWagAA0jQP/3NUAj5NmU+F6SC9dAFG\nnbD4onsfNvz6ZoVkopiKYblBYqvsU+/iZuSE0eMLl8Qkg1vDcFB06aN0sxGw\n5U/cbufcCajPlmhDxKsTOiWOawah4MHGbNVHyMRMF2y0Jdaez64bvavlmINq\nGa8ksNqiNe5eo1ZoxXyZykqieyOl0wEf/GiSnq/jkuCPanCzSnwiVL3l1D9E\nLIVKnoZ4qXuhsFDa0DUVwznkZ5OaCALsdhaMUIYBg1A0KLTaNgu4LWHVkUP+\nPAeMsvcT3lUYMnNmsUa2V6WCZqNu+UOIDBlnfhfPd3Z4aeZlua1yvI+GCScH\n+pL4XWCu/usLYQULuRGOGJjSR3xTeNqphU5N8QZGTh4+6c0FBS1LbPuBfUmY\nPgekrQdB4PQegBxJfgF8nIx5aU8UUqxvp8cE0CHhmR9HAQU3dsSCvGpmLsVN\n6WCfrZH/VqMq7y95doeKYgzonDFWY4+aY7kh6FBxHCQ7p1jDipyIxhWfZ4wh\n3YN00NZXfickONKoheKtgIuvcr7R9jzw0DS6d54Tf3mupufqUws+CJKxdgGi\n0Mt6h9zPtQtdc+uTPrBIm1qw/IGjwetsRnk6obVWEwPyR7hOfz3zEKpQYKlQ\nuU23CkpVIYI84y6JeRWIdUcT5urT3p6sw5G2yPROS5j3fjsa4VHGdArClBo2\nixIm\r\n=HJZP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/m56wpgFuRfHQTFfnGRA8F9JV5bjsYtcvQ0jynsDhaAiEA8juJagYsmVEPuP0ycH54j0LEB1HXhJhAyFJvVeIpxFE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.587.17219.0_1619098460923_0.4882909583269186"},"_hasShrinkwrap":false},"2.17.3--canary.488.17243.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.488.17243.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.488.17243.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fbbd6386ccc1051cbe84a5479d54963cc5299e37","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.488.17243.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MEOMBgVUWHt3DzR/LSD5AxFABVjwt/FVflNgI0R5KGuIuN7FL6/uLz5OHqqQXAh+HUaYT5gPpMdtIc7Jnq+ypg==","shasum":"07cde0973202a3a9434457d62e72cc45f978e88e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.488.17243.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghHL3CRA9TVsSAnZWagAAwRkP/2UqycItaN/47b28hjc/\nEXwItzdG0CL2PE30dynWgwyuFakTwIfZc7vPuge8XWB6Snrp0grMki4RQ6ZH\nty9Z0Y5umljpRt4d7gRivIhpT6H4xkK+Z/FDYBnadvlOmxLY/AyjaiBmKkuR\njdV+Nb0cjkCVtSFsbH+DoG7aIyepF3o6R9T9uy7VqBj5bhnJwKfDQSdThUAW\nFVSMSm7P12zs37u5eD9tb29kDZpSD3PrBp1GPODrL4EDJvuSBLcmDcLK2P/9\nO5Qk2Q5VOiBPM4Z5C52kBv2gMsGH8l9qDQ5HGqs2omKa6snw8eIGwu9BTCds\n/m13VeSvKgqBtfqz7SoVvjEnH9UrfkIQ6RkZfvoWw5prRlZWvl/QEsBImpT+\nKmFZO/4IXSPaQp5EIscnGsxU0WXQsR8LfblfwKMUwsMc0p5yf25av5lnoxTI\n59IiuwvZmGL+QlIcYxwPJWY3Yro+zTosc45ULTljVOM9TCVpj8WPj0FUB/Wm\n9aeOlksirS4KLK30ls7a6Pb57BIHOGPQFBWWzHSbChdYhiY3CXDLxqjbnuwj\nf7QOC8TRvRwq4uinORoxun/NXd+LtBH72YWB+BcePD2/I5xp1aTCjKXuT/+6\nIf3lnZ7rIDh6FSRZeB5a5k3KSCMA38mCUyrBDlqn605pxLbI9f39fd8XS0Av\nRwfP\r\n=DHlD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCswyhiESs9nfvY+YtZXQs4G58XY6rMXyPGYL07qDiYwQIgFUmlXkYwrRTu786WJs3mVyq/g3AYAJH1Bn6UAeEww7M="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.488.17243.0_1619292919214_0.8213521192053466"},"_hasShrinkwrap":false},"2.17.3--canary.587.17272.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.587.17272.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.587.17272.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a654ff3b2363fe91737e778ed9f64d4691703462","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.587.17272.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/kMD7wYA/+BL0BwJybWewa56OzzYY2IUYl4W4RIdS2cc4/TYtvNs3Z0AfJNj1yqcdLXSZkHN/lts2iHiN4W4Mw==","shasum":"1e8eee8db1614d2680fefc99af90f39297ff2253","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.587.17272.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiXV7CRA9TVsSAnZWagAAnnkP/jOk75G02UFWsNkug9g6\neZAUL4Nn2QgotTrGFJ+SejINQDIiQ5A7IwXrwMEotWtT5dVyvHA2JM94zUDD\nLdvAfOhtps+vPcdnxOg5tnWVZMc3hkkENbn4hq9TkbSIW3xaVXSrTtODrpH2\nKis/DHrolRIprki8xByIp2YRd2jGFeoMThJlJym+20Sh+n/WHyyymJD0zzQy\n3AFjkfr+ATYsB/POykEyD43VTMkUm67xLiliGqQ945fnVrYEF5skxeJOII29\nzrNAwwbVX7jqlp+oVU7bAMBrzKH6XtENDPtmTYWLT5MUFVYXxqaDpVUw9NTh\nGMaHCXP0+5GuYdkc9/iMB/ZxBxsnwzbkXnsZh4IBVtzSlowc57+ixq5wZp+Z\nlz/9adcxI7WAfoP/GIvHiOe379XwNJU0xu8TJ0yv2kHpBRD2QHzWSOhmgpbE\nkfOQVeWaRjHoI+YxaoJHZYeUcK8a08WZ0TsUSlkqqGqi8B04BmR5SBlj+o/D\nptDMCdQdy698KdsdwqlBoyNMtLkEcZRh+d79bcrD6faVQ/IRSv8WIklZF1vd\nAJHE4IM0Oy9JqR4A5J2hJy/bKG4TAMuV7X6JZGQ3XCs0g83VLzMCCMVsT02a\nY7UtUFkIQR1YnZ68p9mGp6eInL70mgyjfJMlPqYtsjcoNsUgRaTR2bnoVyDb\nxMu7\r\n=Ga1a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDR7WUOKNxkdki5ZaMY79Uy4XDrqSnNIaWK7uJcp7NT1AiAyodrtulE8TiXH6W34nPchcN8sFk7DpJ++rxvzhVJpaw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.587.17272.0_1619621243148_0.18376843218586814"},"_hasShrinkwrap":false},"2.17.3--canary.488.17296.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.488.17296.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.488.17296.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e622662b57a3b61f9595e544470a720ee6bd5425","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.488.17296.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x2vMh/M19xJuv3t0XZne+F7oubsDjXbzcmk13K229j7ipLFKg1xp6ysk+ZF8jZwZRiTi8v7viXJQM/6Ir2TQwA==","shasum":"89daef4b320e37257c29b5b1a2bd3e23be5abc9e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.488.17296.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjTxdCRA9TVsSAnZWagAADxQP/1hBkauzUVpBkrvDvFbs\n1j+MLL6Bd4P8poXwkutn8ECHYsuuS+UMgd4YtKKau/5RRV9uz3Puli7LXz0G\nBiTT01fKvbwYkmMzQZVEDP/9NsAMXszV8DzVlRVL0p3UepkpIjJ2paqk2I23\n16VpCujd4wAZQQEqTZlEz4DhcVJUsMCXXXvb4tE2SBqc8RVtz1br27vc3yXs\nptaZcJ5F5eHPTZZLmrejA9rdBwxcDOQmhlujCxX/hbUXsul/tQrZCVaqvMsR\n20lFRFc2Fj0J5P7Tlw75yAMjwIZojqUPYjLAjAIraSKzyF8J3uGjIXM/1JD3\nB1qzmw7/J/IjbztDgprm+vs2wNjkG72Hi+afUO91ealuikGn82ZTWT+lLeMf\nKkJzory2t1oFZROFX5yJStWzNec4dfDg8+dMuoMUIJq92JjLsl59ihL182mX\nfT0i3b+YUTKmPSVV7g1qvgF7QvP6TZ0ed3eKmKESY8P6YhGcqcId/XaM1N/p\n8+8Lt76c+5WCt60sR6t7YL7h1ZcPlQcWO2NC88XE4WJWbrV0liX46aR4ccs1\n1O8aV0X7TUCZbfJEMdOx7cHq7N3Z7BwtDADlI3IzMHEFvqFuVpRfDIiIvibh\nXIWiMImNJUJzPLmiIEg0nspNNbIcJBogTB070JJcVIYw/AOfoGkr/02UTsfL\nz2wM\r\n=C9yP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZ7Ed9hOdCqVgUEhV86YkGNZNwiXY0e3mbOK4VaKA0UAiEAmjbdRsiPuT1oJTa9BedIZzPUe2y8lZeLyBrEVYn7U04="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.488.17296.0_1619868764953_0.6535083496992711"},"_hasShrinkwrap":false},"2.17.3--canary.587.17302.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.587.17302.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.587.17302.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d13e0accc2f9c24132bfaee4a6e86da4584c7a95","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.587.17302.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F7sbyvrvmZW/Ji4UkeefKiBFqcdQd4cmLt9sd0h2oFl2HfLaukx4AIzTCgMXvJg+H0KHdF9CeMSXxVo1JSDh3g==","shasum":"595ba0bdc2d3df167eaacd95a5c0b6f2001dc11a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.587.17302.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgj9x0CRA9TVsSAnZWagAAy5QP/3SgSMLz9IsW3IW0Dazd\nA36v8eJgtMlt0Hl+JvjmkH4/QNuEotEQ23Nr4oEQuEk0eLJAuQdFrBaG7UT/\nOgaCA8ybEtJTEkaQCGQzsOlluU86W6CpzcFVZqJCsKbGs+EUlvr8iCvN1/DJ\nGFhTCQ0LIxRMICivsGyJx0wH8DeqUd+6Gu2dEYpsN2GPGu/qecklO98Rl1g0\nr0g4bSoR3vkB0O8eICcp63+w7mIxnKX2o/ZhdBW/ge2o5krhwYFOrNYNTxrP\nSNTNY6yMCfcXD6DHFTmhI8YsypqNdq3aAsIJekD/syBOULxTQB31BRfvvu/v\nVzec9BF6iQ1jx+vp3uHcvwL1KOyqzjBezgjwqZhr3onHWmqtRYbbFJNjxSmE\nbGN9QZvkuSvq5qjdiTAnopR8dymo6stLGae/m74SL4E5cVuyjkNoVgSXmUTm\narUip6oZ88coIzsXsCtxbEm96A1CcpjOQ+zGkG4H4QlPA6RTef+nN8J2ysEU\nclgQqs8PMQADbiNsXFfO6bQUZSDpgzIxbjt+/bseP4jBepuKfNezh54LhU8e\n2g+7SxkmohrOm5dclZ5RAL5V+7pDTjlA8i8Bs4kgpoo5BnndG/hdAOrwPsfb\nGI/rAbuhr0A7s9V7mhLk/0WsWHzSdzzd+H0Zb2Cn3vXzUTjO4e4ynJV6L4TK\nZZ30\r\n=MDWZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkFqxPxznWgXuz0MKMjrYnqHyjvaQB590hLQEl58omtAiBhCYo9GyDSKQbG0XZt0HYttiy1uxbRewace0sYnFvHnA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.587.17302.0_1620040819854_0.968101760001205"},"_hasShrinkwrap":false},"2.17.3--canary.587.17324.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.587.17324.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.587.17324.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e2694751a306739f32e96ab4243b3b06caf44bfd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.587.17324.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bSuVb6NAi9v/mHJcsIaJnNt7JKegRepbunLz4MGeSpS3h6lzAeeKOZYXrn/uFGrBjuZnFWnEGHKE26EuN78Itg==","shasum":"07302e9e531ebfaff4769de1ce1122531809574c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.587.17324.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkrl/CRA9TVsSAnZWagAAEnYP/3ndssamk1dwhg+36k5Z\nj/L8AM3vjYhalzHTo8rb3zo4zdjuKMkQPJuPAiWUExPkYGWH0H0Y0vdsjHzt\nRg5id+YNboUCbvvBDuNh/t5642+ulq4NCoJ4WsaH6QAVb8mDxjfY9KRf3bZM\nUyNVd+Ti0CGAIyCZDPoyPmi39GAkPgwl12C0xHLF9M0w/lDUSHWGc867TPLW\nQnooNkwagt1F4URVEcs603/rlujBulrLhiLTY/9wG8P13oY+BjpIMKj9HB2A\nAsiPjB1O6e4jYHYNQjaDdjeUX6r79F6BsC8JvYRu3Rn5JjoE82ISLJLVKaS0\nhZodABel2ylruZ19MF2q61kLYduLkxlOCgvt27eXKujjfWsCHH+wVGl/X727\nmZw2CaKEsHaQ/lgcsglHF+SZw4IPoSbw/hSFxgVB1ncFpXJULY6+LhEH8Bcu\nmaxz8LYaSx2vowCzkN0/oGezkVn/Md/vio/FR5RB+JK0Tq4XNLpzcn+X1Uau\nfXW4mJq7R2/evwwYRe8Nrb+WxPMeZ1mnJH2taC13l6N98x9wUwGRpfttTVw0\nlCaXuALt0vZ8eiQ8bIPg124fYXknlTF8IYYv+4eOZFwCJDa2yQPudBX0wm7j\nY/zeKYIWD0fH2zGTDUS/iuITPZ/bq5ACj/55eMyDPMgrSn3FV826iluKJClS\n1NTN\r\n=NiX2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAYANy8XpF8hepuVfSyfZSRSldWdZktGTqL1P0sB3yaDAiEA7PWtQRkAPntf8WQB2wNsWVVqCcpnMJs45tJISWQALWc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.587.17324.0_1620228479028_0.24804425074235925"},"_hasShrinkwrap":false},"2.17.3--canary.651.17331.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.651.17331.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.651.17331.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cb8bbfef1f63d0db5f0069be5a19cd7813efaec9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.651.17331.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jS00eTXW2DsY4U7VzjZn6qQSTMbKNX18YBXihXPhdB9xfbMtSynMY0Mm5SjwqeRBz2zebeihuQDxob7uoj7iUg==","shasum":"ff2a961023a7ad7fe05316047f73aa6b93ee813d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.651.17331.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzLHCRA9TVsSAnZWagAADzoP/1vkNRi6DZwsLTxwHvVn\n6QvR+B1Au7EmjebVs1Z6jUSlPhpkotdEUH6V0ZP8oWNTupeWxfco7jV5WDKO\nJaov/ohjj19Qo73LnI+46PRMAxwaVU+4nEtTO5hb1oJn7u2uyH+S2o9Q7RYF\nmLzr6r/8R9DHIcV76PK4X1FagFIweNUUwKm14d6gL58Lv28RZTILS0hhouOP\nr3i5mcYuN7dMsOprdDFnXGRU3STm01kj3aJ81ikywkA8/gdxy8nQmhRw92VB\nju+67ThzLYzL0qViDjx3asVloplVwri4bdwCdTI/paELQW0CBIoeMHW88cDW\n9V1JSqocsdcAT8W1feLKjl842E+F7UVYbmaE4IBDhddyzUtClZjhW57brLbG\nK/wsPgwo5LNL44ZmdCAT7xpkFXXRyZYbD4mlQaRQsgr+ZzV4UTF+U5HzHjft\nHIqtuFGWA2Lv7tolbB/IEjoTUBP9PPYccFqIGhKkzXvo5R6ZewENN4O2fdSJ\nFonhhMw1P4hXlSeJos548QOCvNqC6tZLbn67Fm/xkooR8QmSfii6+3osB9Tn\nsxbG+lGT+oyuhaF+MPeEqRV+yoGn1g6ujA/MSOsExqlYvhOD/5SfEaiVuYpe\n3eD9UJBE8SIIxd/ocKxvHEQH0S+/8kOTwosqiDQbraTtcXohY52g8o+dUAA+\nfip5\r\n=LGS8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXl2yed0R2EY1EKap76a947GxgbtWdspMgfeX7U6ZWvAiA2pqWUZDIOWWp5lAQBAsSba3VrBF2T1/9Lj9bCI7nhKw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.651.17331.0_1620259526942_0.15429394388474127"},"_hasShrinkwrap":false},"2.17.3--canary.559.17343.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.559.17343.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.559.17343.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"538624b2269e4be6b6fae0aa4c2a515a6e12cd21","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.559.17343.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DMWyvngFY0PA+/lnD14JycoO/j91Dzo5wVw80SDncmQZ1HJ2B2rmg+uiX6S+1fmYNG0+qOHmkc6H0rPL/H+K+w==","shasum":"5a9ac623a844f2e48f0ee3d56ec2c9d110fd4b66","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.559.17343.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk/I8CRA9TVsSAnZWagAA8PcQAI58S5KO4YjXGb9PdD1Z\nEBWAhTgTUeLt6o7EIad8dgqjmtEdMHJdcXZzUWDNDUJddbEvE6zfj0ZuO9MP\nc+YgXOwnwlVLSxXoaNM4wFpLjg6u6XP7bxstVNg35fNUA+kibH24P4tgyA8N\nL1lo3I6ZbO/Kzx5FB25ftmULn1Rm2J1p0ChLVrz8k++YSPMkE7/XF3dYyfpK\n8MyCSxNQiKS+WGtOHE2aOQfcqqPv5EfKqBBWXbLvXZl9eWsl8XmAPNMfv/jP\nPT4CSzELa+/yttRun6EE+83zA7IAdLD3dj+F0r0DbQahOO9pv6ORSVUjqkfp\nARqyJzXpYtS+RUN0QpSUUHi3o2YJPwRjWmPZMTqoGJnAT2YaAA34DJpj2og8\ngwAemPwsc44qqeLB3bRZIK/7eyYLopLgeDgSF8JaqZX9l7FmDb2BeuMC4xaI\nH3nUjKMLqjpKslCRWD1XHZ0wrtHa8StUKZdzar7A0c0hJvARxKKzFmjyKM+3\n5xh8FRrkLeg7rHUmEtHfoG8D3QwsIw0ihzxm+NsW0EGHp2IVZvNOhB8hPP+v\n9OWY6jS8sHZXJtFQ7UQ3Xs3m7z8Vhaq7yOIZ2bXPRO0WxKofIOJw+aoer39i\njp490TVF4Yjj6IZKbEqjXvY458pUNfi21h55CbVJdqvj4HHONxLbELGayhq+\nWV0c\r\n=OQDX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx8sOzGzkQUE+hR+kKl0wEL0hoU9Tm8NPUWem4PrkJlAIgNOcz6C9AxQ5p4Uu1Z0OHuT3xYTUq3wwM6muwLKHrgt8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.559.17343.0_1620308539965_0.451295728500672"},"_hasShrinkwrap":false},"2.17.3--canary.652.17355.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.652.17355.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.652.17355.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4aad0a50717ad3d64d5170c587555ec05163f363","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.652.17355.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ICV5VucNRod3+ayXSRaAPHJflg+bPZnZGCOrqhFmFJIlXVixMgQPnY7U6K+ZXO+S8Rt2FVSYp+IobwwEgMH6Kw==","shasum":"1d63de0d14ff2a6866f6cc4743cf04c81e0d3e9a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.652.17355.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglYRGCRA9TVsSAnZWagAAtwwP/1bAedB0u3JSDsahMELU\nGyl5F91E2KdHitCYZEPVTxX7PwizkUL01WhfuBjqeT0NaoB2i2fHApBIwBNb\n2J547uYPEv/RseA+idfQrEIKwDvRIo4+JyQRuCBHnpj3l98X+2TwLBxSJt0F\nELMBvY5DzRUmLYwfRPHw3/HUuQy1JKNCGuMQ/qJrDUONWk7ZulJv52YIraLo\nHDANmO/tqyJkAm8uHUQJt21cGcKYz213JhHuQwI9C1yj8Kx+B/QIZJzrU6nn\nJJo94PEowN7cQ0GmylVZWvvDZWZ392PAnEMi/awlcNf9/yjxLtYpZQ85iR1S\nV2jQ7K/vRYsgKxNsmlKpdiyUf884rD7WWw5MJMKFpGdizvNUNZ9q5iLwxKAv\nYVpgf5ZRDLaBXu2i0uY0gg9PCKWe21yHOH/9htTvJTIkd/mfG8OmtOoliDQL\nERQfduRqK97FU+Mi2xh5S/rRQSLgegDfZedY0Al+Fs5t8Hp1JHGYMkwq9b0x\nkSpsBwJvEt05ZOA6a5Jc/I/EHpeulLBSpLipG8qCRwEjpbWhKBbkassrSq4u\nFE319A3nIUhDuIYx0sjA0DVEwKRKzLfsS2rXqfnOWzc/6+P6n6j/Q0bR6fL+\nknhqztCr7rsv0YVEW+ywAZWhh520hnWOYSwp77fZwVeSzfqOl/SCH8FtkgfP\nL5L/\r\n=fX/v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWUjXYoMcKDLUkTJn5SEogq/dOM9SPp5kBJCDsxAHPxAiEA2WaLyGurXOF0E9QwkT2U1gdn4qV2g865aKnqPwV8HlY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.652.17355.0_1620411462350_0.3727733302568419"},"_hasShrinkwrap":false},"2.17.3--canary.651.17359.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.651.17359.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.651.17359.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cb8bbfef1f63d0db5f0069be5a19cd7813efaec9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.651.17359.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xMlaZH2uJxmwIiQ+Uel1QOzLssfo5U6G0KzaGipq7gRDi+SSepzLLTVBVM3fAIFX08ZPkjVhNpN4zl0qm2tdrw==","shasum":"890e57548e1a3d9de639e5c75d4485d9ebbdc59f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.651.17359.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglYXFCRA9TVsSAnZWagAAUoEP+gNDAgA64/zzatjP9nke\nW6pEDfvdI9NYLVuKxX/4g1HADpASA3UChxkahaYvxCo578JUpgMZre3Q2MbS\nYzut9boJl4IITajK+BXsCpLqCs9Ux9SvOi80rOVeHspMqzFE5rEZNezbTU0m\nrhCo7zki7aHeS89mfWOzFh1/olLwhx9eat6oxxs4Hjlz9LtTeQaLiTD8Xmgl\nevTmY8HI1A4X+PusOzMkfMiS/twcm7FFpffwKa9g4uPOJDR6o7HIS5CBbawe\nD0n4pTLWlPd3NFpCZ+F+hvjogJY2hnoA63OhRHedxuDyzfy2As8KZwEc/FPA\njDewttMTRRYqXoogBQK61r1PLQliUOX8lt+v3xN0A1sCo7oSim0m90udSNTa\ncn7/vl0ahAjupJSa0tDCO4BVDaT0I14j7qwIhmZ0HgUO0i/8/NnHsXOOu+cD\nDQCv366i0XZAS6lF9DFkh5qg2jnPeyPH0xbmpyeYlfM7pdMN+O/KVaaEnD7B\n/TeaWQDm7fb4lEKJCfgKLNCEarRbD6de+5AHnZKzNM7ely3B07N/mUELXay3\npg8L6+BIyOAa1QPDmrm3nnJaJdUp2nYGxf70ikJADECoQ7LJL21bgMitI7lG\nc0WXDDcZJ3zH6MCZjy/5S5sE3cDEtQ/ldbSUGtymoEKagzgDRbkqEgsPvz2U\n7QUN\r\n=0EXV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC70qecLf8ULvT6HUbPni2uMXQPSY7PqFI9hxnNuZum8AiBNdbwJg5LqdExNNvW+cef7h0quNeWI28CJzy9y+T4LCw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.651.17359.0_1620411844701_0.7216560723556091"},"_hasShrinkwrap":false},"2.17.3--canary.612.17472.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.612.17472.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.612.17472.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"aaf1f2d138a204b75b5afcbb0957ff8b3a9d0af6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.612.17472.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zg2h1IFzmCDdHdRn3X7isq3qumsxdBF/ep/zlupvewDWi/RlTaYL0P4DZKaG0DNcw+GWA98ezr1UgZLl7gK7Gg==","shasum":"86334939fbc3a4f93b66e681da2d61b9d9215964","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.612.17472.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdoCRA9TVsSAnZWagAA1LUP/REdQMNuDjt4PN0UGfS1\nG7ArqW7cv5gfO+Jn5O170dJknX/34OQJkrkkNUGuBEXETacAo2CDH8282dYV\nG0NySAKPcJ1SIyVIL+C/8Ra0yA2imw7PkvuBeEbX9ohjaQ2dZZlGbNGy85fg\n45ztsDplzXzWX6U2ETjtgb9ckrK9gOtSMe0akyw9aoVe/bc4ur/2EYkLM9sY\no0H3taTsVRn3QXTUpuxh/UE+4tBRkI5ngBSb1Ohu+BYjmMmECn9CyrTDqchr\nujM1rn6Dc6Zb/KzFOqdAmaR3/gwNGXDhYWBM/3ijvYYkQy7DfCOIXvX6hzRw\nRTwR34/IHky8EWKedloEGuAzNeZz5p2uYD46e3wHmkxWKyPs4NvZvqFZojcF\nJsjdVRNk9fYFlhC7GS33+zoBltlqOX8ot+E1d4YmsulWzTnk8E6bIpw3T1Cm\nlj6tgFjufEjwmoZHX0P2CuNFOCf7ntzM95UllErwwEvkCcLJUnuxVTOORtjU\nwUyUdduuSgtwsmHAHwaK5qgFTnqe5EMX20Ti8rRJZ9GQzOTyuS5sS76jL6m8\nMAJcRBrRiLVw7+jttBGlNltd2Ai+Wz9YTvXLItNTh2aObPQRNCm6VANSEQlb\nwF8eyMwpm1/bh+qtx821uyn7dsywAt1Y8raMEwK4x4mYCqxRuZBfPFOzMM7n\ngBak\r\n=zxF8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR3KtMbPoUYvn2E2M9bvNVR+4G55UQwsk5NlcTG2B4TQIgVFgbQgk3lIy/TefC4CbYjAepO4SVEs++0KD0CJyb8RA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.612.17472.0_1620424551813_0.041960536712899676"},"_hasShrinkwrap":false},"2.17.3--canary.604.17473.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.604.17473.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.604.17473.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"dab0e2abb57911b81bcf98659c5542bf85de1867","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.604.17473.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BxAgsYFa9x/sVK4opPsw5+UQPiMAmvisCOqCDJ/aBg4ALtWMQKXT7IukL98IcyCKu/D9bGIpEsHAu6pDfkYUbg==","shasum":"7f48cde8b53825995551771ecb2d1ead2a44e8ff","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.604.17473.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbeQCRA9TVsSAnZWagAA0NQP/jUopNmEj0uoNBxz+qhU\noMSpJmnJyGo9fo3e2nL1yDAUuX3lIDne6mnkypw9lYg/80suSMq5uUXGHxg8\nTAvGzkGSz973pLLdaygtkBrK9idP2E5liN8hH1v5fVu3rN00zQQP94A5c30O\npyXvRSYSk4PkZrJIA0vcxaDI/za53HfznKe9dx6FP41r95QsCrWweQKWXj7e\n7QeidbtN6Do2O9LJwiwBDN/srcT/tLXA3R/77osyaHovG+x/3HHpGlwBhIrJ\nxw5zT7jT8cpnapU2i8ebIW1rJmmuZL2a62o25vBHLZJuqNGyXK7aSB305xjQ\n8DNw67UueuAz7jiZXNcHoBZWxlQpoNKcxFEn37dWUqSOc2AcKAdnazSNKR18\nHotwqMd3b5yaxwiUYqKfUw69Cypzk7R30SJaAuEwgYmXAbjPgeroe2RXMaGl\nnXVWhMqX2wcOl2NQo76Mn+uz/SVm3p3Z3w+g/Vz43NyriWAnxeTNk3v6OW/D\nME2qs56J0b0h9Dh5tZQXpUbenai/LHBOLDIEFvMK6xvPWsLM/18GNnMJGy3K\nLB3RX6ZZKe1QEC1ssNaFicVpcWJAEP9U3lzqTC9dvc40zLfOC9Af56uywKGC\nuBXMpGJ+GrrlI75BNQk38CXHgCo2fTv8UYFmDjKYSuqzJhmCZOmyTPlgaX1D\nF1Cl\r\n=WaMt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVjWvIVWFpT9tuZpVbsDAJNKZ4GvSfZrWK/HEFsNWbDAiEAirVmUXrkGKqZpmid4jW32ppiyAelcXO1YB9Z6EU2hFc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.604.17473.0_1620424592034_0.8317159857098184"},"_hasShrinkwrap":false},"2.17.3--canary.562.17474.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.562.17474.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.562.17474.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.11","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"07b81ef2d672df0449ca7d1413d6b3748083db52","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.562.17474.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B6Wsco+kfSaWsdd2NHC0rW8ABzqL8glYudMF8yxagPBRARPDG2ME8f7F9h4SCNdj0CTLlj+7xCj/w6j9mzzvBA==","shasum":"0a1bf023f13225092f88d0f47d7a190fea9f4e17","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.562.17474.0.tgz","fileCount":25,"unpackedSize":77052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbfGCRA9TVsSAnZWagAAztsP/Ru8J4oQx0GCFavUHdXS\n2Jor3TEDgmB0UevvWkysBf/MT8E1HlVX7eP8qTfL/66oiyi+aLBwtLnEtEjg\nRwj2enDf//zBIL0PFdTit0b7vc+6Az3hNsrhh9ajscnfdtFqeXwo+kUUH6XY\n8VUkElyUI/OWyAIeva+3NTEUN85hSozj2o8ujzVRynf3hDbYRB48U8Pom2YA\n0gmkJm+qqwXZiLGR/x/4XtG4FiD3m74YsiCdNw/hBZHSio//fIxQFpZajR9I\njnofpZaodgTk5EwSJywkmK+2F9h7WrTkOzRm3y6HL3LVa7iR6rsAxrZlilIG\nsTiSsq3tG8uFZV4IBwLkRrm0eUcyfWHgDkT5U0L3Yjma6pRLgpNGuhsPWDEZ\nJLLEDghvFW7oeo2cOrpohjGsBe6aYdinJAO+5UZQOvLZXZp4SlOYyZip5ngJ\nggg7gfKWBT3Ek1TrrGKItoMhn5uT18Y1MTTL1Ch4MwIywpDXkUAVlw2OL2ea\nFQc0fxyy0KZq3BGAGOa9BOm93RSTsYruouUDFW6Ak0CSXL1XO+wE0po11SqP\nhPDGgXCXXQwkAQxFlcut1pVSr26FYtAceda2+CoJYS4q4BbvNxg8EgHrJMuy\n1kCSDKhZJGs2szf4JSTkr5r3VnuALvEdi5XCE/gyIeZg/6axHPF9+BQpNbvi\n5MBE\r\n=lRGF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI4sTbIPCDz1ELIaMa9wPCArT5jMa7L1qkAunRhHDbUAIgFFAfcDmROZ0YZVV69Mq5OCh1GzchhcpCFq7bj2Kc4MA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.562.17474.0_1620424646039_0.8019888908623152"},"_hasShrinkwrap":false},"2.17.3--canary.565.17475.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.565.17475.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.565.17475.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"52859ebe5b8467e4dadf972ad002e41c5e54f553","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.565.17475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SE91YqL7q2B7zHSPQ6MSQHgqEUdco9nyNL2bbaShmTta90c2CuUNbGPUVqhXt7B3/CEmChheoKXTkD+apEvG4g==","shasum":"13df360ee3d1757292424c967d35f4a497ad668c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.565.17475.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbfgCRA9TVsSAnZWagAAHH0P/17AEWnX7NzOCUSYu1Du\nsA2cGO24Cx3a/AmWE9Z7xS+1JOzgn2tYx30yUp82c7J7yf/RN0mpnmpHnAMw\nfBDG8HNPVVz73Wl4srvSjKKUolkFtPYO0CF/Ou3qlQNkgVQIdrcvOxhlUyhw\nRZ8EV6Xxp7QQ6YOQk4XRl/N2N77FY6JLVLMXPQqcxneHIkbro0i9j/7mJq7z\nxr0xmy3wGWl2KsFx2ltd5sLOZGFJmEYUarJkU75cvgZ4auEhfpYL2q+5ZkOR\nZLhYXTX0XmuZfJTyq2eWLrh/FXhl2m3/NOXppYKg2+Vd3RV0sxhZdkRFJ+Vu\nl+L1oWAk+8BMWk7HjNwK9KUXRDnwS29GzHo6Qn5oK6zP8d2yopWNfl+2t4X9\nt15IhNdjd7hESYrKIAzk/IzgebfGk53AZbrxSgys25FwXOK/PTstuAoWiRJB\nx2t0ai0PpNKg72I72Xr8Ioq1ilVjuuybVScvnURMWlDwsxSJvYwpPCzDpSAu\ny4WBgyEfjx4NPR30fN84l2jyFZB/P2G5smJQDkyK7xlNVC2oDR6zyxyKt5KT\nI3GsaJLjGCfbooINWz3yfhTZPKvIqwXWVgd/SUEDdDv47Y8dcMZbI15L2ii0\nzv+0EamRr8e9hIdPytl85AASXTFGnvmGSTNaAacP96kvn1j9VMFe+OU5VM/U\nrTJV\r\n=yxSo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbEyzs8qGSOWqdl4JB66TWJB8yTyVvHWpwXPRSkyTDfAiEAhRihArt2qvQXHv15wA29cepSQY4yCW3Jd7qXC9+Mu9k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.565.17475.0_1620424672427_0.9132226097028779"},"_hasShrinkwrap":false},"2.17.3--canary.587.17476.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.587.17476.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.587.17476.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"94ca1f1707b3a46b6f290a85d4123907907b923d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.587.17476.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+UTJYLiiHYyNoHbiRjpOdPCWsLBhLiPwFj/tVhaqxaopZrYewKp0XIcIn55FrepN5byDOaP1in015AViwTHIkw==","shasum":"a833f8855536475ead4791cd36af4bfa07072f6a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.587.17476.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbf1CRA9TVsSAnZWagAAiKUQAJHvpH3aaSCAz/OQoHJq\n0qQl8s7E2RvA7wlGPMjpUIbF3IO2fmHrUe+kkm4IFj4lsCTvNHbMlvx3sNUs\np9Ozwp1QvukvSQz6SXBUtfDb7A+Qzn2QBHOwvIHF4LPAH3JndotF2s/SviZ8\nINez/05Cr8O07SiDn7vCMPAo+/aWpS0ufvrxeuIaYcaBNSW2mZrRl1a/rjIV\n1cOzEQxWSUi1LbJw2VjUSpp1+fMOFrTcMvILuJRLlkoK5fheeFpQBdLGovvl\nLw58GF3jfjhzhVx8NewdkdW5z4G6WrJq9N1Tfcg6trUeXNgWSTC1e2et4jrU\n91XwNVDjS3BPBcK/BU61qBWxRk2phj+JBPdYna6yyPoi4oTRJUETrJCgdJbL\nHobJs5BT/F6+UGW1YN1l16vCl/gnCFWBvrtonphOwwS6yNw7GnbfNDVSyESD\nMBWYc9UgGQkTMwdxcoRKbhs423TNxjwKSFql5IvF2Vxu0+cY1iSm+sLnpKdj\nYv9cJHyMnZGoJR7Z13vJjK1IzuOr8h4uikGd7tp7QeGSJ5xFhPr1PqQ46GbT\nrW//cZKMrxD4+/Wv/3XfcWpxCpNCCSoqo4v9cWOmF0AhiPESrHr/Pq4mxB6n\nCJZk5CLUMK+OVQ9kaeSKlxYA1fwXvZwcKxaubw4KMgWChFy7j66VwEUlh9Cw\nZJBw\r\n=3e9R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYIuWn0xmoZvsznJvFbpAFpMWMLOusyLLTGnibZwK3pQIgV0PjK+tVJVTEny2Cajf4v328N+Qs5CwMEKvzk21ULBA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.587.17476.0_1620424692625_0.7376719666224438"},"_hasShrinkwrap":false},"2.17.3--canary.550.17477.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.550.17477.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.550.17477.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cc2ce873771dbd002f48c9e15370c1dff916d963","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.550.17477.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PBuICewPtZvuUDjO09U8QAFjgZGB2gwliqdtpBxm+fn0fdsxSnAk8cFPWWSvNeyozoIXQX1JcrZqUDauCNh9VQ==","shasum":"c54d6815c5229c431e2c45fcd6cd7f5b5e4b14de","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.550.17477.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbgSCRA9TVsSAnZWagAAH5UP/Rp6vZx2L7ZTN4aSAR8H\nEhwITWgT+YSpXjwUKctRrDay1CJfPDZ8QuE7yb/KHx2qirSWUvoWKfQ+d25u\nq+pth4HP59TpUdLwSQBaCT+iaq2DBdS89fXOChidk6/svv38OtWmyGrHjdWN\ngTmW4H4el76Ci2xhjTQq/PU9UMT6oJhgPJvNET8u1HwCsl2OsHKJC1Qj7jx+\nT8UvkEBcTsPINucmUHDaO9E1yq7o4uS3mQCGVnCXh0Y2KH5S3opU8lLLwAzr\ndaqR7J/Gnkr/+5a/p8+IOLQMiKf+LB0i5r3FkF35HBAyVCRzcgAVHLzueHTl\n8U1FzP+fG9Ke5MXwYiI0yRJ8AEnWxGzMUMQi46n17U7mEbWmzpobJgzPzyeD\nmjTfljABxmVJtedPU94Ei7vfnjO9MiIBJ7nTEpIAL4eJ8wHHbcrwF/gFHcpG\nBHhMeiTe28Dh3Ow8zbobJdQ1Zx8oyXnv5gz0r15q1Bo5xvaQEJX6GuzDGBTU\n/oOrDN4avzWBDqEQEvBbRoyEZFLvciX+KrtQ1RhzHV6Dqmm505xADRr97NHC\nExtsFqgmEpqw8j47bV7/NR9r+X3uF2rdAfKmBkC97XEhdd/CzAoZdcw9xgOJ\nePdOsMYhgs73mZNU8AXxTgBVhBKgLNTV12oa6btWNZ4B2tWYMvXv7muTWeAT\nkRrW\r\n=NWrK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRaequfh3VV5Cr3U2bU5xILNzLwmSreBA+pzooJfGhngIgF0kbSwHvYBUfW1AlIt4Xup8TfoCP+AmQBITVX/R32qk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.550.17477.0_1620424721963_0.6781020353907887"},"_hasShrinkwrap":false},"2.17.3--canary.551.17478.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.551.17478.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.551.17478.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a2faeb6fb37f8bf212166e1056751cd546c5db41","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.551.17478.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LLyZsW6Yi0gBapmYYH1sAmQ7Lul3uYodEpoJmGiZTjC84QlvOUDVmvMJLWyG0jjyLWaIGCEy/MYD9qBS0mzh7g==","shasum":"9df1036b6af0a11fc1d597e4b0951bd9dcce72d7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.551.17478.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbg5CRA9TVsSAnZWagAAU8oP/1sxPOMQrHFLH3BMk/FE\ng5aWB+QJtlRiCjWBIVvFv92RFPaWmnPjuimcYLdnOrynssaWnSMxva7pSlqG\nDQMv/3SqykIfQNidPPLRPyEmnPP0I+c9uGDGuK6niQiFBPaYrVdOfsYbBqGD\nNlRPhMG8qaTvI/opNLkN3FO4KvqUNLp+lnSn155h6sgmDbOGr2qeQBkqhMVd\n4+EIVEEIs0A+Jr119U0eFTJGhxkBo2Pmk7X/M0mkHWb0JZslEQ06uxLaDtRp\nGqX1fOPw6olqJtTGlYJkShvKZG8hC4HL0zLvczahdJfPpMdp/3BYn1L07xZC\n1SyklBrjtd5xWxlKq8zZ3hFC1RHy4T47iJYIIzRYlDxR9Km1S19a3fjx5+WG\nZFrhWdmkzs52mD1Rjw87HEMPJCcxnULcBBkJQqI8rdezZbYYepduXFZkmuw1\nOBTMEJ7WyNhZOf76XBPw3sShyHUag6FqOkEThezl8eewpt/62qSuyMD7sHxw\nBRDntw/eU5BHxLrJXoThRVLGuGlSnTf0XY1MxfR+LkTdjzRBqq/TG7TYltiF\nNXVmFhmHEtaAJ3QJo28n4lpO8bgPf3ZgtgJa2ERBPUbVo2+Qrux+TyRTjuSS\n97bL6ZGPZa04viFjUUdiqT1lLBU9cOXBo0waT3TFLLnMXxylWg67dTb/OBqk\ntda+\r\n=WsQQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKcnSDkPALF8YdCBTRuK3ekUEyyhH3E2SKgG7Ut4/xqAiEAuqk59GmmeCvytP5jA2v1jOD2YkUvGyo9VZzfxC91KBU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.551.17478.0_1620424760711_0.7043321128380846"},"_hasShrinkwrap":false},"2.17.3--canary.605.17480.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.605.17480.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.605.17480.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7e10721437dd900919fdfdc4c9e67863ed363802","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.605.17480.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g3QFoZkjVT87BJRE8kc+aiUHpEQ/wG3/4KhGy84vyBJyDn/KGkEIt2DSSr1jeTWivxVr+q4+pH5PcoetHJIB3w==","shasum":"f289ea0d374e3f911ac1c2f2cccbe7a51b72e0c1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.605.17480.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbh3CRA9TVsSAnZWagAA7Y8P/A6ng6QhFLoe9JdLQjdO\nzVBpFsMhLEizt7sfNiB/ls4UipWpJHhLyJVb3KlyzokYGmEyGWTMpmr99m+a\nRJNIl5hM6X1ujgbu/Lb1rkQyafTUu49UBIPPHsIChduK+hYkJGyM4IqLBbNb\n6Pcuw+UwxLRZK63ew5MTRgh73+XWohX8/d7RuE3ve3ozvE8oayK4AgTdoma9\nr+Gt9xeVTeenico9EQaj1PwWCoTBFja34rztFv/zsHCZkpKiV0/zGaGOuOh9\ni44MgOwkoJffEZQcYEkKmyV2LlM2PDg9rIrWVbo5HBU12kwOQFZOh/sTCWci\nh942tZRr/KZV6qb7aEoBiYXRtZHwrL/928qgrDZ710MGP5rQheWBhTx6YF8J\nG71mXQI+QiK1V4dpjrjguaxlI+2v7tbhFNKeoUmsjrIusCQ7J66Zw5gTvqAy\nKxOnH4GnwLPRXhzNYEAJq70jOJW08xvG20zp1EKjVAc2K6S6ElAXtQyLlI8l\nZK8DsI5RjzhqsZqYnN3LN5o8WsLH/nsdXxjDdFOZLqkXgQNPTPLjYJ4Y3HsG\nc9o/6CdhcDu/iQ/Ru7RUqwpnRoTtGF+PTDSwWEugLfJu5pKIOYerJeZ0b9FM\nsJ3rXkfy1vyYfKV225bh+nnY+lku78avJxwB0AW1VtFtFcbYH1fbKChaTDJv\nkV6s\r\n=FTy6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFdH0ZDlDzqB89Q3/sSZ/pREDho+iZvCgPIz3hPAKfxAiA3K2YOJKDU2C1wjftWomurQkDSC1na28vV7FSGwRWouQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.605.17480.0_1620424823560_0.29990472959690706"},"_hasShrinkwrap":false},"2.17.3--canary.530.17479.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.530.17479.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.530.17479.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"537ce77057b5687cb4169659c17a274838fed45b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.530.17479.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-luGYgQ4Cny0IAW9F31GaKyiqWtqlhkWZHvIPIoMn3z/cRGtVeIdEKcMA8oZg5xF9BEUH2qrQ4399TMawlvhlsA==","shasum":"c9b9240331083893643525fad0b8b944671497b0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.530.17479.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbh8CRA9TVsSAnZWagAA3AsP+wTclAYUSh0FTOFZ8ZsO\n4NUqVP6/bNkoBxxqnVDwI/qo9x85/oV+fFUnSO0JJNMXsE6Up7nmFYACetlS\nNlR0bqNpWLyx7rINNdKCO7SGTJaAMx5zA8c5XTsil7IacjmP0LeT6EYAKbUj\nRA0Dv0QOtHuumlSWY4ZLTzADNTVPeQJgcDmKKlSVL+EsZRzGNJEoCOBreXzJ\n/xmBJuZMMMHpd2sl5quB25aFwI15VRQaImY1ztq2JbSxTq8QfZ7/2YbDPSlF\nCuDYe1ABBC5q6Fy/9icdofAswTewCTYeGBSh0SLxoIx3X5O1ndhXq/GgAsFz\nGPGkFEwcgdA/YYSq1bFnpxjXi3Jvo+jFnq2KAGgE/ADQlZq2QphYNlw9JULP\nMKZQTYRzH4skjWvw0B1TIa5gYefQ1N8ETQgaPuBDkYYY3sVBi1vHE8oRm1Ve\nYQL15ghkpLn/tQoPXamE/cZUJ6zbKdTxq5Oa4QtCisuOGStcyLPjNjrC5TZy\nC9nsBTvdEW/Eq/UcdCleZ9dAoY3N58dQV1p0OiRD09RlT4RjdKUC9SWr89Q1\nvEnM7zoYc6BABLKUzug5fYcdz7UtnLMVmRSWuqVw/ck3/5MTcU/oJb0xSHvt\nqohk2/NofqhRLiFSZX/w+T3QZfbE1vAfFOqEJS4Do351fY477dwIgAbfVx67\nDI+S\r\n=R3nY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpqIamlskpABT3tzRGnWYp3C+KAB93uqqX3XYRB3R8yAiAv9eG8QSIVaOHdsI54tO5KM/L5CKwMYjzbDJZVDfU3cg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.530.17479.0_1620424827606_0.2973529881638479"},"_hasShrinkwrap":false},"2.17.3--canary.566.17481.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.566.17481.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.566.17481.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6da672b3533bb0bfa9c8099a6fa60624212a7b13","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.566.17481.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QOyTo7DhXOxYbJLOpRYY7/RNBX0DL+9qHMVUEQKE5s5tJc+/I/r3taAuyDMumJRv8eklNs3/bNqo77RpxQUyTw==","shasum":"ecf773e08a64fe8ff64ed1ce89a00a0d03153aea","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.566.17481.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbilCRA9TVsSAnZWagAAu9oP/RoZNYmRvwr1LOQD/e3J\n/Bnlu7CNxVnFJ5SVxje5kvdxWDxxpO1HoKoYpSzOAQX98uiwu9Bld5GKMKNx\nHfnpGEcWbd0Rp/uUv1nxlSmcHcqwcngFD8Y3MVxsGhkwFh+DpK2P4a33YMbB\nvCQBE28GKIIkX9FNMXsq46PNB8fsGWcJucnaLGTdVVpB5pMOPfWAUoPx7fi1\npemELdb3NgSbI5gJPMYlXvulZlcs0EmpK51GsqcR4lJPWgqxwVr5WVVRpszL\nf74sG0fb50QZTiSawXPj7IFuow4XlHr5TzG+japEXVoiPVT1U5l+xxHLU7yK\nG6o23oD5fu1tyeHmqhd2bRHSMzi1zL8V1D2EOWVwRLauzv12HRGm4enYjHQv\nOUdj1U0Bt9IySFC1FcG9p9deXqtit7oy9oNdFf0WGJf4P5qi/IxEm4nOlM8w\n+MtVxXmVSW3aInRgnHU/qCbxamyjP12fKu8LbvdBnPa0q0GW95pKzUinh+cE\n+NT6hmUHo/MdRzX6Dfzp6JFcPoQGspYIpXW5f5BCtAjvLEc+R/HCPHU7JGa+\noc8HfossNqjBfaLP4iuinvNd3SzV3S1sUc+GdyzKFIpgRWEPugCUhwqN1vwv\nXhgB1zlH4Zi/sXjRlbmKFLHIDtiwqsbdvVJ1huyBFss4km2U4Lgpb0j1NPwT\nEFEV\r\n=NU+6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoxinOUzX9tERbUL/M8xBRzUG324Hr9Q6HK7f6x+34qAiBzA6qwrwjF8/dNq5yKSbK3OzlVw9+o3ECCXu3GRGGgFA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.566.17481.0_1620424868855_0.26414919389089375"},"_hasShrinkwrap":false},"2.17.3--canary.616.17482.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.616.17482.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.616.17482.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f32cce30dc087b03f85061646b43ddcbc1b695ad","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.616.17482.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5bHe/k/2MPAjIZFUhlwrvOrCDmUb0HzwnVbOSFwtYlXiAreFXOGA56KdZEQVJeAOxDTyS8pDuipOv1Weox4Y7w==","shasum":"c34caae6c10d323f767a9a56c1f7b00d7dfbe7ed","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.616.17482.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbi2CRA9TVsSAnZWagAA8fsP/1ng309Qb1EAk6NmIdX0\nyTWTOL40ISGg+nw/95jFkm+xyT35ITVDQtAO0Az3J7vkV4fZ1mwTdebQ/sft\nLihjZO43n4+WWdf+dFom4mYh0IwLIq3sR5sY0fowoqo53xzymN5UQ6ymQ2e2\nSEaUWv6m6zZvzUzKNXJLmWw9SWOj/0YNhpTfTchaNqyqx6eI89K/iShImBug\ncmPqh5O6CF75FLY6CcoCyIHpZIn7pk81FhNrYQimDWVKcLvxcmBB9JonwHEk\nFUtRdco5s2NdikqF9txLc96HW8DcoSzxzLOjUttUFImxACDypVbhB5N5vg5t\nMDL+5gKsJVDxU+YpnqXUaYUB/1W/ZImSfnS1m/RjUK4JoSl4b7qStvBIsa1Z\n9cnHmLEnaUdfF6V4BwRI5S0fWvh1ZldaEFzm4ijKy5TrCEnKM+ieGdvipEoD\nSa4M4bxhHdKG0FXz88rA5XrY2ml6LQFCpUrn3VAx1FeTIuu3iwm/JNh8MgKS\nlYzS0Y7I46uaDbx03sx83SNf15/mtqX7GAq6Mp9hAuXviQDD1C9zNpsUWJRF\nrGAqD7uzyqe2FSFnLHOqgu3ER0VlNrp1Lodsa9yMra2HsREwD7GLpNnQ/Gxk\nmhNT5jpiptly05bfFGFdxF31N6KH106rbyNrygIc1h6kuFkA26HhsOzSH0Dz\n08Ea\r\n=+//H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRoBQAFcDD4C6fcNfhBtiv7yDniDtSnyEJMESfxOuheQIhAKAMrzqsJowDMgbd6mFIKsEXS8gw3X3QKr4dTZ1iyHeB"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.616.17482.0_1620424885694_0.1609922288530663"},"_hasShrinkwrap":false},"2.17.3--canary.630.17483.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.630.17483.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.630.17483.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0f0c366873762b0f887d79cf06dff23471a37b54","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.630.17483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EQrvf76l6nbH5VhR6JIUQJNLeWbmi4bm22eBEsiY1l/c6iaIOkUbMYtNrMlddhZc5qmAcx5Yj3zrtUud11gXnA==","shasum":"923dbd767dd4b5231a27d4073c0da0d320e729cc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.630.17483.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbjkCRA9TVsSAnZWagAACoEP+wbs3w2tN/yni/J5Tc2u\n2/X03ZlSInvQx3i9WzYFhUecWxbNdngROrVTQ1a08hEQBqn3AymVFxLyYjXt\naTO+Brj3naJe237O5aMYbky7THDes5IW/LzeSuqWk5Qv5ZZH6Y1stqI3eFGn\nB/tb9QOkxGDOjtuatu0ustfhpHEScFsZdv+QyUV8wAkq2WOQoFDY3kgBHJbL\nQeGDYM8JiVQiz+1xSNpRWsqBt6SGkoUZ8chvM1MJoEhfZwhIys+VX2hwyTBa\n5zXfk8spExm8MxEswM40C0uWdP0dzfLhmYo2chzSOmdCKkiT+s8MWaX5hUqx\nDjnwEYG/4JQjW1AEN/a7NkWmEwCGlC0r72fttKG7xdk005dA1/YI9EYpcNpM\nRjjzVXQeWsKrh/6+iVCwrJ7gTfgcWaYNBgvUjylByMYeY6hTFtiRMs35zw/B\naCxew4ys94XI2askTA08QF2K+xjvPEfYXx7mKtmTtVLlB1rDb3O3ZzXE+X9+\nPEfReh/A2Aq8IHHxkU7rddHsE1S7ufxvH1JBeXIKqdJG/8j8FHVL0YRsrBp/\n8fP1Phlrf++5r0LtRc4LcBoR9bfpb2ooYIFGjadswvZtZBQQWkBwkiUb857O\n3Smi0Xx3b3ZXmifHA6C+zwFcLpGwcUaldG1oge3/aEIqoWYFG4/bcpZe1PWk\nWk0D\r\n=SaCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqcdI6dfFQLHbEJeKAA8qIZnW/geDxr2sl6vnyph5uIwIhALu4VvFb0uuEt8xl7n/C+Ndm8NHjVlja8GfaLl4kbTeg"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.630.17483.0_1620424931721_0.44077490871632263"},"_hasShrinkwrap":false},"2.17.3--canary.617.17484.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.617.17484.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.617.17484.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e6c12380ec61c657c369f10da27ee3874a93a484","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.617.17484.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H6fGR/B46sHyqdlL5pikkM8N1LXILpLutKTMAAKOPqGuGNL5yKosWqArWT5heu9miaxbvKEexxjoCM2Exn0I7Q==","shasum":"c7a9f4a326c6b919559daa119fc3a21753567f7c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.617.17484.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbkVCRA9TVsSAnZWagAAHv0P/R8AkDR28F458BeSJB0l\nY3qlSUyXy6GzcdLa9h2Yr0uINBe2eR8Y+9U5cYUk8Pt90SRLQwnFxwJMFsMN\nhZ5ypDEcbMPfW5PoMHwTpPGIov2PS3CqkI9RiheQcR6bVcG9KoCbTAqvLape\nU0P2GE3ervw3DyVRSBAapX5Mks6bVDFnXB/EkQha1dBtZ73Co3UcHdHi5bbi\nKr7+ONsjTE573st67dN9zvxLN8p5GipYTJ4tarMfCKGO21jlMRahQzXS1JMI\nWY5Nnj7v8khTymYMIQ0neOT2G1w3X59tBR+0n+MryQZH++kp/UmgIGEYzg2e\nxJTLn0AHaMSEr5n8oc5ybo7VGegrNM0w0H66EalDCTEQCRtaYgR2VKChGPSX\nIJJHWSOZ2AbJ3gDaNj4LZi9cAWDeZ5pQSGSgsWYrppPmBNsaL1y0MpFu/boz\nIahC4qA+S1vZTviQK+fPUVNrK1haHsljS3dxWXGBIjDnAUkr6SxYuZuRrzjx\n692UVX+8Yta7HTnVANXLXshkMWzyC0pmH1Pb3MevaGO508LRfdRFbUibHxSP\nVhKNhzHtt6/krwcbhuHfPbKp8aht6hFHDeauk1hiI0mMImULjifQ89hg39Pc\n/+UhuZTFaJgg1nhqYTP44d3tGtE5h2RPmSXvMa8EczcEO7fApFN7jEW8i2lS\nkLEm\r\n=bDaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZXqH940x/WzCw7XHDb211Tke2WMOIe6d0qpoS/WNcYAiAcepJFDSaQkIBL8tlUfsdqTRr5RJ5S+WMovi5s0kEoOQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.617.17484.0_1620424980699_0.642842177600017"},"_hasShrinkwrap":false},"2.17.3--canary.607.17485.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.607.17485.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.607.17485.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fbff66b9382e2741da117def416b3c3ac345292e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.607.17485.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ygmIYotzY9Zx3MBvHep1xXzsFlRsEZcuYi+IQ1tupz5jzP2eO2OXvEiZ+/xY3Bu4//tMb0U7E5MgwRCDJSBWQQ==","shasum":"4294edfa70fb5459604e8d2312c6cccc2241aee2","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.607.17485.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglblCCRA9TVsSAnZWagAAIyIP+QGv0z5PZagJir19MCcA\nnazzlBM715/dA/HTkNifE1LT8xJwHrcqRE1zCopi62KOFZOyJyKb8DgiUGZn\nA/MOePN1B5kty0gY95ViL7Ai6Ei2MtM+yxVKExDFQ3SaZAW7gFmv4dHy8K4W\ny+pp4cp2b+HUpNENjIqeq6IEwVnRPAmMX+P7X5XxtlgUGODE00Abf5T3BGWF\nqlv6PTB+iowL3Hz/EHIFkQyKEAp/gt6Mg80nEowz0MulO+RaxG5CzCsjyH+E\nDYyIO5ycLSyEttqO+DW6PK8bBvRW8Mx6Gw5vMKTREEAEYsOTXKCcZIG12JrQ\nngcC2KcQyjRl+xs6hMfsEzJloPdlLWoBMSG0+5IHHwLofPLkvBF3V7f8ZUDi\nt61q1itL0PakD1PQHUqdVf6WOZ3Wa9853ZN8INdZxdx/ZkvyUhSEKAGrAz78\nQJYO0+AEklWyR+A3mzhu46H+QPZJ5GbvgMYvKSdsF+0uaXHVi2p9NOYAjOuq\n2z66fuOy4vltT6XzDMaH2Q5mqyCds51qaN68barG/vxZyq3HvsWwkBRrxoim\npl4D3XryMbqS6di8cKyZvR/xTUBzjLd14l8cYjOBpeQFezljiFFj25VSdo4l\n4PbFkdVJmmrZk89Vq6EpQ2UxK/7JjkfaCmCQKZZbU3sQBg7MkclJQ6YtaUMM\nPm84\r\n=iXFL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCYO++ZE0BJrVjVtaaTTWmB7QogbeURLqW5z2SBPJXiQIgOM00wABLA4vlM6Oqn5/cJD0kZO881hGCGkrdjvAC4iA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.607.17485.0_1620425025724_0.18451005309170254"},"_hasShrinkwrap":false},"2.17.3--canary.559.17486.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.559.17486.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.559.17486.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e4fee2b390787a2d043b7fccd78d8ed206357071","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.559.17486.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4L/LzJv6RL+ZJO0rmBFQ8bINmYxx3mOq5WXy9yh4+qTWir1bgf7Wlje8Vf4sn7ma2xknUsUOyGq9ymH9DuZR3w==","shasum":"a128e24fb555950fddd45818a97656e9495c1340","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.559.17486.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbl1CRA9TVsSAnZWagAA5S8P+wSUZiNWDM4uPP5YSxC8\nmr8DbAFfhadTZJ1ScMhKPaB7vjmS5/dukXh8E/e985KFo5yvn4ZMWDbp3aQg\n4wTiKO651D6Q43N0p1RtzkbTeemP7LWhUlC/D3yJ4V/dBb36tTGh3gW3MqjZ\nKbtI5DrfKXh3mO/xSqPeiE1hNfVp9iwH7xmA5RJvoczviQ94TbH24MDttYMH\n5jLBkBdg5IaG2YcTsJ/au5YtkuV5CpIICzJkZqgbD8hww6Fm3aOI81C/D/Yf\nfSAmsDedQCdhR8AkZsKv+joIX281hznflsSwrkHqfiokKVJpXzFnqyO6rqZn\ns2ikXVqhsT3ER9l8UabT240SORJfbLCoomZfLoF+EiPmlCs+Kot81P9ebxUK\neGkFmxB3UqV7QnPKuV0esOlMPo51j9IWNqYwu11aAp+m+27oVNvt6dTpgYK5\nedp17wtn4p1QtAgNLl41tb7uErBq/AseBoac4NGa+JpTebsMYP6t9CGLaHnT\nvnFemGvsiEgC14ReFrLHt58TtU5QVeO6+JRbHjqlTJUla2CzDBDSpdqw4l8B\n9jrsOqkYODjrRIo4Wv5fpEzYCAA8z2GdxQAVWqCWHqP15AvEYe2b21XRYrZC\naGQGJEjFXv7NjNCFpiWr+tCuwZ9HlpRS+FfmVlbwYP09pfdbapT9693Fc0g3\npOC8\r\n=cRKs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICeZ4kWCy/8GVYeigLrCOpIiWuQwGypYuqq0Ss/Ji8MwAiADLSUof0JW87VZQXFsCyA05aq5iVnAxEmW5TYv9pgmxA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.559.17486.0_1620425077437_0.091475024224549"},"_hasShrinkwrap":false},"2.17.3--canary.554.17487.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.554.17487.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.554.17487.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"620532c8cd1ef96ade6d0ceaf1d9994d1080cf3c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.554.17487.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q7fe46TecAoY3ZsdhZx3227+Rg3yYhGf5v0fm/7fgo0yaO0w0xpCJmjFtZQUI/NRoRDRayPQo39NdHestjn6+Q==","shasum":"113ede99246bdcacabf37c30718838b2ebb22460","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.554.17487.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbmdCRA9TVsSAnZWagAAatMQAIEeygAFJE0Oj655oz0X\nPS/7wxwfmQPFVxAUXNUoaafwtoX0oT4vI5bIYZIEpJ7XWcMAfngFBdR9MFH1\nFeC3vcDcOQEAeTh2eiGB6yaIrIr2DlxpRhYeQwOgluyqzmpSnXLsRsOZp+b6\nA7bCysi9wSM7n46w0RX23Jr6CGCEp42vhpo62WL2TNJUfat9qEZE+2orkcSB\nIsNKyTAUBmHrxs4s1h1779unhlw/PhgTX+EDQ8QcneJdoeiHzxlyALfa/XAU\nRCdeUpZe1PQgDyN3cokL77nfbFv1I2QrnxLKUguCQ/WjAZANLiTJj9Dj5/ol\nKdh0ACwCw6LQAx1FfKfBi1S1u53eJK6UJZ/GW2oBk2tpCfrJCXipqABr30Gb\nFBjHx4pEIUEv27srCOIipE0cC3c5mHHLCja/LZxIpI/hFMne97aHsjzTmY/u\n+s9Bq1dT60iH5DGgdrrHN5+lalOF8kCIEB7qu0XqTh9wbTzolR8AfVZEyF5p\nBrnOuV2D+OVxzwA+5dzTIB69uzM7ymaEuZnnUucgRqhiIdpOmWKIlQzRD/xO\naHeJx7sTJ35ZcuKiSM65ngf2XlRtIiBA6EyYfHhZp89uJClvX1nHEDlDyKAb\nYw2UIDDJcAJ+meiRvTOb2LNgnZlA1bElVeCEa8gl6G+sROsXqowx2j0hx3Ob\nM80i\r\n=5nsE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIAq451+9kxjMKNmZ4XXPm5Z5Z7ITRSy5gON+0QqtPUQIgX8vn/gGoh4dRXuufJd48aGSR82/nhVe/YHrUxjggfSI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.554.17487.0_1620425117307_0.2552308689690652"},"_hasShrinkwrap":false},"2.17.3--canary.544.17488.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.544.17488.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.544.17488.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"301ba91d39215dc70fac63d2fccbde1b68a8df52","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.544.17488.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dE81f5T3ZKE+BqkwgbKKF0yPZfP6AARKhVnzrIfbtpEFghh3twoc+Mt8dW4thA1yy57EfY3LeXLlJoy/yU41Rw==","shasum":"c1a8da242111ba04d43b02090332443db95c677b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.544.17488.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbnECRA9TVsSAnZWagAA7xoP/AgahNXvlmyHIBaQ5OW2\nmAgdapGH1HuFVydFjrVm8vIO7SRwJ2SFpwUSouWy1PFlCdaU/1nNOVGLXvfC\nYN+xrhXZ+/aEUUIeDAdtUDSybcu9nqrFEYdKq5VNpQhbpAcm19yyU1a5Cb+G\nOUrnPoEpdbqAMN5vrLa5I29+HeZyp73njVbXHBl2D7yyN3Slb3n6BuPT1jFK\nIBqvS/Vu/sJxzZf9Co5BfOaNKU601vlEqNkbdIupIo4xmE/uQB6tHDBm6kkB\n8x5/kuBYTJaFOdAylpu3dezSwatp0MGFxAmXVcau1h2HxDp5WwTOuTEy0pzV\naXk4fwMDLl7uIQkIz2JfXXRSjQwElNFGMGUYBe7FitLYrjaJgbRGt5d0vmZg\nWIteopUuRWzIIBxaDbkgOFN7kaFF9Q/Ls8fNABXzlFZWdBHAfvxnytaJZLoC\nT1PNgd/MXaDh2vzb+bpqMZ/jJCWeUKW9mPvt/R1HAilHdwjoQd1FB/BTwXP7\nlGco9L7jB7LYBvbEDJV+AfkoWI05Vf4AGI/IafTKDILDeHlbptWvxZLaCayO\nrGaw1AxBKXrhileTC7LN6/aylmFVz3xZSz+7RzRq3b/o2JuJ7gj7np/pZEey\n6bXpPWupptsz9TaQq6gTbPJzs3JlxFXdaFrTDviNBPi4PhiZlIKwbdQy5J3I\nmbHL\r\n=m2BG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDarKj1Xd+Zv9StDGDN1bhHCc46bFctYvsb8BReFkgqPwIhANgSDJzZcwIXstVcXED8TkG5se2GEoxKUXuwNCI5i8fY"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.544.17488.0_1620425155724_0.6414076594338638"},"_hasShrinkwrap":false},"2.17.3--canary.587.17505.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.587.17505.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.587.17505.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c637a758f264aadbf08427415df50607d4f44554","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.587.17505.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UXGCqch+pbnbFGe4BHIIlkyfObPhJS3Gk47SjdWZvdoKzM1WbDit6KzrRaPEcEaMj5l8P8l6+I7NVFRuzLEEkw==","shasum":"3684e862a81e9e51223ef56f6630c3390c3f21f0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.587.17505.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglwScCRA9TVsSAnZWagAA8d8P+wRi0i+dlWpRF2DGwHQL\niqVdlFXnZNiW1h+TbOmKSzUcr07JKlP60HOkcRALek6lh8WJ3faUvzYnGCJB\nNUGYzk1Ni1SoyW6yJumZntCz0lL8lD7YO4WfQqJcsJqYKXC3TZ91HoLJ91H3\nCzf6+mP9hRvsUmDm1cuIYkY+CSDlWsfBBj+p9qjl87ZrGnTJ91TO4gxDjKI3\nokXauu/8/p8Ce7Jk4zqmyc0ZwKPjUlbvpG5+Ktsi67LfVr40w7oPtWGPKftk\nSOQhTGZHg5Gi6g2FBfBs2DX4pRBtSpUNls02CwTY23YWC8NV9V6xXg6NsY28\n0RwWy3P2xGCtMbiyatqo2RjqRymWcZwKitU2WrMdI2dt2d35kE0xcpUqv5kA\n+IAvZ/qDU5q6zfTafBItdhHeeEvIL+ZvgQTg5yz7n6Pilwi42rnoBK4DDtQt\nPuiidPMq//pAnPfvarDIifac9mdKmrXEBmgglzFeUv0Iz/xp0F8GiGJE2YnY\noM9lY/le6bxhtgJGHF93wHqX90EgrGyBsxH097t/osltq3teETzdDus8hRAd\nM7t8T2UhiD6/PJ3GQZJNbxyLzSEp9qN6cD/6+4h1YZgTK6bUke4yJ8ErtG0N\nziCO6c1cCLpyEBDpj8PO7vQqWk4tPg2CWE0nuE4AMvwRS/ffRORi8UlnZ0ze\nfhL3\r\n=rv5R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLn/QuzgfTcsgabpY/camPVzglrmBxfuqoOC8p7L6n4wIgcxG+ChoGQOtEup7nnQR4/S7GymigAzjau1pckg4fIKE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.587.17505.0_1620509851835_0.4984965602231819"},"_hasShrinkwrap":false},"2.17.3--canary.576.17516.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.3--canary.576.17516.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.3--canary.576.17516.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"53b594d432581740a20f29212f37f2bafbd40c6a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3--canary.576.17516.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L7U7UPC/DkjQYTAJTNfEtVTHukKbJf0ZPuaBNiKgD6bWVR6VyVjEPYeikYczGthAr6roZl/H8CAI3YKLm4SkEw==","shasum":"25a7e52d161892ccca470961578988998452bdac","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3--canary.576.17516.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmIlmCRA9TVsSAnZWagAAlmMP/jg91vCO5hpPmGUN/52e\n+57fs/fm2FQVRPsjo3GJ9nzU/sOOJV59nd9ZA5Jl3v81iStGgdiEuLs5ZerE\nXedt60nDSzG+VLTuHEANtw9xITRxOd20j0sQqcQ/P/NE3QYwuEZiVYcDa1KS\njbvIV2g0itlpeIhmQ0k0Fx3bMfsFppXFHYfc2Prrc1/ZR1Fz/E2ddLWjmxhm\nKsd8CTIAv8dpaZLHHlQ++G6hhSAF/MEDx/YgFVQWzko1Vb7lUmGX+pDilfVh\nK4AE86B7aACE0TxBe1y7sEbjWbFfHiyxunAtGCnRnnNnS4/9AADIoNu9LXCR\nieQ9g5XBPJDo3CNFFg417YPvo8rGQ2LUkCnXVSC2ltpjrHbyEgQys6o5a4tC\naGpwdYfbR+lB3ThTFX1ONTz+2Lx6FJQe00nTgb8ppN1hdsKcxCYvr2ILbNJ4\nePxOIVsDr/o4QJ8k1k1anKfzve6hhSLINuVn6kVGAf6P9mzlmcXSLgxiAKuS\ncRlOIW3zkEtZwbFNwp/HOIxQkqTMjJ5oYTi8wPSUMKSJdv9dcKC5ueemS6+t\nWtkpQmTM03qPOQaAQqvBXoxDYz77lNdGbOsLeg3gm4bys0U6CtmNXtmA/mC2\nv+WPqcMaGQnoiMV+GzxXcwHJ4AEj4xC1h6ta0KEfVHtxKxs5o0W5HV6GhyQi\nnJ4Q\r\n=bNfu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHW5jURfPKM1G3159cxX+OkrBpxIo9iGFefxZdWrTzAXAiEA3G4uf8aSkAC0OdRnVty9kHhbz/W0/wIaWwCh5WJ0fCI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3--canary.576.17516.0_1620609382181_0.9389654165903676"},"_hasShrinkwrap":false},"2.17.3":{"name":"@design-systems/svg-icon-builder","version":"2.17.3","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.3","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"929957355f65a22daf87b204879196ac2a672de4","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.3","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qkX2djE5FLLZwmJz0coGe87jnIQhVGS0nAy7oCk0AFuszODQJbmYFXwsgJ11w8xK9Cf0h2IeZP+cr+20QBzGOQ==","shasum":"1e0def92538dd6d00aecf30ce21752dff3230230","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.3.tgz","fileCount":25,"unpackedSize":77012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoH//CRA9TVsSAnZWagAAKMcP/jsS2koYQlag4DNBq7pc\nDSupUHTLRPNOiFU3CS70GnH1sJXKpZLyA0MOoyYBP43TfxOcH0KBrcNZ2Ceh\ngvUMGGKpqikPvfgSG0guzdNXy6+IN3ovguT2EzYhj4ylAg8D+vbpAEWe71Th\nDfHNhkshdOh+K4xkD7mkZt/JFvtFBUM5leOMwfUyM0b57BY86xGTq2CUWIu5\niaYIGSOWb+SHnel5SfMF/5jchP3QcGLlW3cg9QjbyX7WBzvlYdGHne+3mu/0\njzyice/w+aiSRxqIcV9EglCinCcVk2qAFvvak7eoxW0XoJwo2b4aT1kei49u\nDhzq1CFVinw7oL7prVfcExZ7dnoMV+dDhlCnZoiQKmNQsjAa+b+1+o/qjU3y\nGKqyXPO4BrV7f5ySpzMwYJ2pR2AlWsMjEhicbFxFXCdS7y+md9qWYIbMyIsD\nb8XdY1TU5MLFQdvhxNCm28fcjD0Nohco3kn1I2B9X/Q0Zbv8z2G1STw07IeM\n9822jAh094obXBTqt0C5Hpr8ArbYnSwPQdjOi6bm+UB8A/wUljd4EE5c8DaL\nwSQT1VfmJ6HHxSQ02eeKCPpzAkHsMvrznvgBRXB+BfSbXL2K8dxVuC9N8gRd\n20VpNp+rhtwUro31vBnEZEyf8Fnx5VWTXnKVZAgmtl3a541B+jyY71EepNg0\nQiiz\r\n=5SDX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFljTTk/JNpbpj9CbridzsGDAnwZfOFKboij53/VKarWAiEA3/uKSAgWs7ddNO9xpGySRnXNnczc5526Cue+Tc53dTA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.3_1621131263125_0.7467878660479508"},"_hasShrinkwrap":false},"2.17.4--canary.612.17569.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.4--canary.612.17569.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.4--canary.612.17569.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a2d4b7d72c93a2c6960b8018b7afc7518f697de1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.4--canary.612.17569.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zm5EVxtVpNJyhhYEdiDXkOMz5O4vrmA60BJqbiz9x8PfmzqP8xT1PzRgT2m8uuTkHemw8leVo69rnlKPUXg6Pw==","shasum":"66821c0edc0df94494e0dc6f9f6cd719b93be307","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.4--canary.612.17569.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoV0hCRA9TVsSAnZWagAAQVoP/jK7L5cw8Sz7DXN5rCla\nTAg02cUhNp2lbYm2lA6V/CQJvZ244brSSMnymskTCKqIZZ8jQdsrnjhK/9Rs\nNF/yIo3bfpcfxqyIMrTP7WOgcJLm7vuYPD5iGNRAhsUCEaTnY6TACPWqXqE0\nfbMyPQBwB7mn5fQB3rTv1ZUmJC1rtnEP1uHQSqejH7sBMgEavSZmlCsFuhXo\nv9oFPZmJHAxtK2ox9W1HYAw0U+CO4eji2brs2ITqxpKLTYzcwXfDhfzBal1h\nP2MUs+5TygQIgfIGd30MIufHWDU0NbyB9ZXWhHxJPSJJGSorg2fGoaRCKUDC\nK1XdF3kCDVfRrC+p98UzDKNneI25SnxCu/a0jlBrtPTN6RVK4Kn6HTfK3EaJ\n5REmkxeUcBqcP/BwB07sddAWVmo7NvhL28cA9yCaG8x+d/zQHti/IW2fVmRC\n4vtuXGG+C1Evy4Ld/f0SvGbUKriFjI0Tn7po+uF7b7ocl2QuqWM5FHhNuyaI\nurkfJu3bPmstznPMHbl2N3r/g7hV2JltIe967hs0PX24j1hTcj1nFtGUuDuq\nrSNH7yGkWet2hpraZ4fTgSYQvTgbLvO+e7Zf9xods5V/xd0hDRIGmiGQZUdD\nMiROIL/1PXDYMHhyDtNQ0Uz+GefhMYHXnyxNVr0RNsHEu95JTuCHebJ1H4ZA\nMquO\r\n=SUVK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAcMNnnp4ULwKSv0japqVXF5fV9lLd/VHcGYNbOkPw7QIgbt2uwMX/qfSLaAyP60nsx+BXZL9kMf8FByXxoU6I87E="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.4--canary.612.17569.0_1621187872796_0.49159501481633816"},"_hasShrinkwrap":false},"2.17.4--canary.654.17576.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.4--canary.654.17576.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.4--canary.654.17576.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2d310b5cc80948199eba9fa7dd4f8881dab40f74","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.4--canary.654.17576.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5NTNTkF94UPJusSwFxxh3V+01SsNGfHBB/1MJuIXTqjxMe7P7cklfgml+4Dd0mhSZFKY1hwpd8Ue0BlHE3ShIw==","shasum":"8bd356cf2d016b8b34238e5b9aeb3e73ecb7c4bd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.4--canary.654.17576.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoe+5CRA9TVsSAnZWagAAK3cP/2JE++VcvqnsT5bjsam6\n3fFQT+HxdxSIU22g6jroUMIawl49BYs0f4xFizi5NylMOSkXQBs8SVo4f6/y\nhQkgjkuAAWYJcqXuYjU++mK2Pk9qwT05dfc3jizIepReWl0/kh9eDmNYsFnT\ndRwwfuN2riveGP3Z5AK+YNnqLuSwtIJppdlniI5Y1ZgIL4bMEPjsIsgox9Jp\nTmXmDrpsndRmaSh/cNbHgGbrW9YQkyY/incr9jklQ54blQVYuEW+LZI8bep5\nCXVCwmy+4snjFf3G19Cqe9Jo+vzl7JogtHQreI5f7Erki5rcKPgwXG/wVy1y\nvLciGRZQw7AVRplCD/ResDKIgv3MrcO7dFBiU9W68gwe07vqKQq0v0eFvnk3\nTFysTtVZyjxyLRf2PGD5pYIkbZXZaLaY8NiVHwQA6bVOkDhbe3dORff5zWfH\nEGR/xRnE/OfQaWKI4y6FNpDX9pUSaxaX0OmEAWkYpHl7PmvBCsB3UajqAfQy\nejeLKNiQWBcl5oi5I4TNlgbiif+d74hXL7IX4tdc1NPj3qqUmxFCKL68dOkX\nTRn4dDuBq10yt3YsvwE9XE9AiGfKV2H04ApkVMKxPBDOD2V5OLYSpZkUZCUM\n3feoht4fnZ8V0VVlb2SMue5GNxJzyVRYmGAUf8RxuljclawogIxiwq7CHTAk\nRNxY\r\n=/9Kp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/q3211eR9WrLVSHOqaPi9q496kvd6zQsk0ruRguwXDAiEA+b+TJ5TL4U93DmHj/O5zezWKSDHTSGmURWpgeu5ENd8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.4--canary.654.17576.0_1621225401346_0.26622317382982197"},"_hasShrinkwrap":false},"2.17.4--canary.607.17584.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.4--canary.607.17584.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.4--canary.607.17584.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5777e2abb04b35e9795fd19c02d85de5d83310e5","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.4--canary.607.17584.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4V8W02jfg+rLbKtBo/W3wCXBs7ndG6jFbAL4xgwrEjhkuWNIpzrcMnTq3E1HqGODeIo4eGe8MpdufGIRYyrJtQ==","shasum":"c099e71ec84181a51891ec0e9fef2d4630f0d275","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.4--canary.607.17584.0.tgz","fileCount":25,"unpackedSize":77051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoo5rCRA9TVsSAnZWagAAyQcQAI1nR7Ldidf66QSjXEKK\nRpgW/A+bxc7dqI05QXoKFFYaOioZWnnQlsEesvq9iloTGJn/WTeKWSeV8CSz\nZBtw7nU8FADsYuswfLXO9aVIUt8wkdPx+B7MaESR9JDD4ETdED5NASHwrMlo\nintWeFd16htOJhDWGNUhN75OlOcWZjE0NYqTfeYLABemJvAxjMb2lFEgYkKU\no9UpgHRtlIz0ChTHkyvXTCQCdQ08KsyVoKXTlRR846uUFaPDBAJbSeA3gglK\nFJHQ+Dnj/yhvtDBK/lkEAFIlvyA5X56rzyD9/ULsj4SJOmBV40sQAoIku17U\nQGZzXzOhf3Wd3ze6VJKe+rnaEDpMfqT2HXvUDJjyQovcrLigiqhIkx8IKfxU\nA6FrOAcSkdEIVBApcsNyCz9v7qMLN1MbJj90f68pGGW8EOO2O2MCGtbRCGg2\nfG/AZe37g+SPlALpVcOY6uTR+0BISwt7h1RaPm3YfHST7wOb55kFykMGItSc\nPN6cte4F0JSYbtNTIP+wVACB4wtdBehXJCUTBJ6cmfAUWY2qK/GRcFr7LruB\n4aotEx1UJ1TIjKLwp1OTKMbNOGXTGIzSBI5CUa6asoPpVE0w1IDLiKOruznY\nv5pu/LqFYatDvfFgpVMw60Y3yZPmwva2G0AKjwC5My2nIFUIwmQX4L+syAJr\nnS53\r\n=YRaM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3XcZ1O6gBCLCS8TwnkU0glaq3e4o4ztYzZXTTRjZ5aAiAqojvkUkQxXLt8gA+IW1E4X4i8feZ8PqvCDpIifLhCUA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.4--canary.607.17584.0_1621266027089_0.5206839396323908"},"_hasShrinkwrap":false},"2.17.4":{"name":"@design-systems/svg-icon-builder","version":"2.17.4","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.4","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"457d987b12f5cbbd07371d791b3388ad9e65f545","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.4","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MWdIXXAw/9BbxSythJYvJqd0JMUe38Msv4Zi0pLvb4PAriaQrCnMmw6I4MnHQgF5ykMuRNtwiuJXxHg9aS6NnA==","shasum":"571cfe31d4a4f928bfd71db7275a1204b3122562","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.4.tgz","fileCount":25,"unpackedSize":77012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgorZuCRA9TVsSAnZWagAAuA0P/0lvmeHIO9gMAORO3XVB\nCXPL1a77oQr+4+qq8zuJwve+/xvR1CgxcxfDGgXY4lhPX0FoM1tzeyjoAp6x\nAHw/MC7An4gFtbVOQrsSw0RyvEHSTlSp9lNsUk/cMD/D1SMDOXXqeZ3pGN2A\nrq6+jxlIvgsWCqQo7niMBemevEjD8Bp5Q5zmPNHLWRu7Q0OBI36wc10Zzbby\nHHFncCeoekhXm5f0In2rpNf8acRblOKEpcHp+/kNO5ONprT8xYQX/hXDR7B8\ni7J7pOKNCPt0OqKryHNWojpXYyUU0vn2jJHRFWrJ0ZDe2Ua3FkVZ1m2k2Avz\nN0g+t/0Ui+gqu/XivHnFWg7M0pQQ1CiyfdBe0lMDhGi7l61Xjsltj1bEVdfQ\nMjfXD0PSkFxnJLj+FAG3nKkSWMCdfiWkvbxK5bj8ELLPT+CnXC27rbrOj4rw\nf/nLtHmUPO1Lr+ueP33IfAUkXgLmms/Za8m3y2r+a/+8Q88CxtUaOTu82jZy\nvEd7hxY6GqRUbb/q45G0qfELJZQkYt0fCvOFdZnYoM1VMBvRzEwTVWaf71qT\njMa9xM4xldmm7PhGVXStCwih/DodDqdrUxEuQ/9HOBKRm85+xrH6aRfE5gwy\ncHIo/PL7JykWIvewlyHYawd9mWkx3Zja/Lmmy3voCAHBfI7HM+FQjqol+ucz\noVxc\r\n=bo/I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC47xDXY1ohzRYgKH8Tj20Y/QKfM8iGQgK/GXBwGkFRAQIhAOMfM19AurSps3fUgUbcuC8N3td92EXeppsOZ+wxEhWL"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.4_1621276269619_0.8947702365361276"},"_hasShrinkwrap":false},"2.17.5--canary.655.17602.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.5--canary.655.17602.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.5--canary.655.17602.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"efebcda84fbdff45f26c1c997cce65df25eeaf48","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.5--canary.655.17602.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9J1A3OhjYxytzr/FNH0OC7Aon7U+5cd2oq5udnIV4o9fanJ6gBk/DQu6bPBataNFLYtiKUPwZ0JqT/+PLROU2w==","shasum":"21128380165cb09d5fb37fc0b0cc22997db0f1bd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.5--canary.655.17602.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo/BGCRA9TVsSAnZWagAAbR4P/imtHdqnJCFJcyMuZjuI\nUKKtisDrV6CndqZD21ZTWqQm/Lw1YhBP2We+d7/tCW6o84l/O98cTj4meURn\nv6kJp++TDbzprDRCI8vj+lW1zpRTz2it3yep52Ub4SPqqDUfZEttZpLpOupI\n53mqpSdFXsZsCBnjXaatwiOp4MHl0Qk5Ea8ebK+9zkUlqpU1ugEGwt1zETEv\nae1L6ItkqTghnBRU9BwGr5bFVX60q8MST4hwliglddqIhu33sr9go9bhyuB2\nynhug2+HKPXGAhEaRk10JmU3xgPZhfHz3XVvhy3NTysBqA+0T1xBetF3mY51\nGAr3YU74F9aVT+pykaJcW5yj6FFxVRw5CPmd6AeN1m8jsIP2gqgqLvJQpoc5\no+gMHmbsE4WCggx3jHVatUO/BasCk6bieSxU9qK92cqHnW00ZiygoR7m0/YG\n18XxQ9tIXXFKGuU2vwq/mtqECIrKvlbNT9r2qLyfVPJnwMjUTArT9XcDf9Qs\ncSmyNauFBCFqHR6JppdOl6JWo8mk1o8SSr6Tgx6T0He6s58zPB8M4hY5DiYp\nkCRVgnU1Biqq0AGDNqlR3AWsQErawDC7X6Qp0g60o0ImiS7GzzG3zHPgF++7\ndSy5rJjYMs0Xk6krCahSgyWnn7lPyl7wWqk4JvpEYjNYUZdGmxRIVFfhGsp1\nX5H2\r\n=txmQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwLnoy89slJ/IZCDMXZ+YyEQe/mQ2ki5ETfXJc0Ix2fAiEAjj2vrErGvQ7s/q10cPD9P+9ibBRmXRF4+8059Z1C9KU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.5--canary.655.17602.0_1621356613809_0.3301471147970594"},"_hasShrinkwrap":false},"2.17.5":{"name":"@design-systems/svg-icon-builder","version":"2.17.5","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.5","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3388fa806f89aca3c8f11ec19d57382ca56fe7b5","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.5","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A63mMoug0RIzK/9TtEpmcI0qe3wa8iIqo7lx+RX9RrBet7z+Six5X3x24096KlrWCgAxPGhGBANXS5t5QTx5xA==","shasum":"88415d3f99e54b6774d7be5d870aa65b43409577","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.5.tgz","fileCount":25,"unpackedSize":88748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpEetCRA9TVsSAnZWagAAdHcP/0SjJmTEEcet2K51kmpA\n2rPx/vuvsgzzZJqQ7uEjlnlrCJFzMf5JfbO9eUTHHS04XA4D5lbtwNCGCiWg\nodJa6+vNaAxsrfxkcrwWR2Jpmw1q/JOlxfzEvTF7buLZ/XDld1DktysKro/H\nueztg1kwPrX7rKGum7AJEjDOEuG7AiFmQTd4UcDobSzmxkQU9iHqqXDlS05T\ndaX3cpyuW9fDBqOJgejrt/CrEamVNhK1wCroqLigHYN+Laxv/737ejWyjV95\nK2TREdHyOKKcPCHYXaNksuiIYMKKJz9F1VZn6Fhwf1BRTAGXnLopF51dUid6\nEbZqdtCWfQOrcC7CrquKV+limR2hGDr9RcJRv1xqiE/rVQJaZUfJ45ayFpl/\nOIA6MpYr6wXE+bdLwpa+k68Jd+wJfFQVxv/Dc5CQzgiJy4Jtbbsqv5KIZvpH\nW59IP/sOAga56FVuGPoWNEHXwqkbkxq1ygBCpFx76txVuOi3+BaYjHBDCQ/S\njMgSDADBB4Jsm4P4vjuFU1uK5ZxlC/i8H41ck6MlZL6wuyFZYBLKaFNGhOvA\no2BmTAyYgiuWi7y+yp6mx5nbNLlMQE9eEL3S1SFf+HHQFdT/i7OiJUWZG9Ed\nUoikGQfl7CYq7J/J/oJXruUurtUPTpi4c7rOEaWdJm6usy4HAf02Z7f6vHa5\nYN9r\r\n=v1QB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCalfMVAbn6wl+2X2W3rXYswt4sx6u8N2xfaK5zp25lMgIgWotO0Oc29gBCSUJnOSYni5PxsU4Cp0SaNQlRJNokuwU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.5_1621378988820_0.5927934366726508"},"_hasShrinkwrap":false},"2.17.6--canary.656.17616.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.656.17616.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.656.17616.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f79d26f025535015ed337e33f9e0ef2ab61c053e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.656.17616.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HgUQJCXrxETVKB/8IBvYowcPgpJa83qw2ltFl7ZAHWsAMZreMkErYPpV2yhKpBha4/e8nhRausnolBo8q7+iaA==","shasum":"812662af96be668e09b6e10ad475db99bc2c861f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.656.17616.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpGoyCRA9TVsSAnZWagAAC28P/1sUc/goSQyXNL1CD3SV\n+rxXDc0vJoP5XOoXEtRIyJqG6XDs1c96xiy1nhVS45VL4GDCdMEz61IWckqp\nWtKuSE9+82bTyWWUPHY99q2w2vZC20TsLTKEbciSbnDi8FOB/JEYS5eJuJ2R\nY9JSoJHJC0vCvUc3CeDSwp210CgNmuKhRRDhjFsFEB2Hr8XKmzyVIGNVWu1P\nJQlxCYB60/jH1x/KaikcSHtpnmsIyvlhGM2HhHCWjI2ZPWAUErQhezxqBUHT\nhIIkoDgWEWQuS98mGRXXJT5yj6f3kPYj3J+oCSShgt2x7DIgXET6PkZK98CW\nfD0cyifhF36x2Uw5Ck/6CzpqCtct3QzIWYBI5MUBlQYQVViO8bJ2RWU4Ku7h\nxO6xtYy3qdBRNKMgRmxxuqvY9bal2EMPrDRS1Wmfc6roBiY6KBDb5/fQEUYN\nNLr+K9Nn5jxk98biOKgX7fC6ZsN8wDZyfU4dPf65SuVcipFBt6Kg15z4ttoe\niXJK9PtoADDXL8du5E4dsWnvAy19dlfaJO29oHIO8xPG2sFdsScgqVtnlZb0\n1s/5ah9qDhHsr5kP/T7YjYRRWACZmVR1re48BdRnTsCISvmLVurrqho/egH0\n+JZdinWk9sqagVcnOtCzUTYYz35/z2WehxS450Pf568bBnSCwp9tC5aQWNxZ\nZ3it\r\n=fXSE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3T6VAZqcnsBI4r5PS5EjIgoI9fEZo3ssVT3p78b/ukAiB8W8AZyUk0AguNkMP5Md0CRFYYLzqZLjxHvEoC07ta8w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.656.17616.0_1621387825494_0.8092589351318815"},"_hasShrinkwrap":false},"2.17.6--canary.605.17623.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.605.17623.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.605.17623.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4abd5b055eadd35ae463fc29d0a8be889ec81cfd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.605.17623.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wGsjxEpwF61TnF+aaSqZN8XPZDfD4b4Q7DNIPa6muC4wxZnObPEQn2xe/cl4jEDKgvaG5W0jJ7Tc+AXdGVw61g==","shasum":"acf04c24b232a735fb6bfa733e851c75da1a1586","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.605.17623.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpINVCRA9TVsSAnZWagAAqvwP/jrEsMIidKtLbUckPlmo\ntKXra+7yrLzMuqTOgeXyv5J3tkWtx0sa5CHTRXtOJxdAZxIg85dZLTgT+pyh\n6T6wvSVHGeJgv4QTtTKRhvxPmfN6isdvqC84aAVJ9MkV+dRg3IgGeewgsTMZ\nbJeshKILKz9ERyWrGY3UOZJ/Xsm2/4gFrD/85qhkCMliF7cneUxdywxdD3Wo\nTpz9P+sQsbRI174o1aMxWmNn/s56ruEXVMiP+VL6Thdvm8KjunkqGy0ydjER\n2ho6d2sG7FRm49gc1kKr8zP1ylbOLdOmdwgwvieidzT+wrZ9ZWxNvKUg+O8b\nwFyY4ncExKljxYQkbATrDrKwi9naluZjrsCgx9AXBzyXkrj4lJD6xCVeC0eZ\nThsMZnijDEX2esteNWK6ygN/AZVLDagLId58MLNFn2vVwPVPXYLMIFlhZeWS\nMEvVWVoqHvnHeQVIZzb2ogUdo5f7NSd9m/Rs4OOuRRWzJcMngDFZH4JzLlfs\nbhzeJWsq6sBYzsQWrO0LXZPjFAaIgTtapSNpUvRfv1dKPShMV5cXa8eBLXW3\nCcoH3r/1ZQyEtSxurJRE0z4UqnaEZkZnuDfIWnDfi4OwFYui9EGOFxMOUEda\n0M6eEN99Iu8RpTRWw2pJzeP2jd/A/LGwVxFmdCMKNOG3rTrDPGu65kw2Iz84\nzArZ\r\n=hQAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSfEjSkgVv71BQF16XzEQ/xwgilqor3ArMykkn/Dq6wAiEA8fi1waz1+slOgJcs61ZOEKck1eO/DI88jazkM/eRfM4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.605.17623.0_1621394260592_0.23416236936019663"},"_hasShrinkwrap":false},"2.17.6--canary.566.17648.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.566.17648.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.566.17648.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5a589997c5ebcccebe524a0fd92e85d2abc96c97","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.566.17648.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4A5Hhm9gW5Ludy6Ee14/LwIS28qyWkakIH6g8PH814vRAQuCY2hihDQtqrs13tuyoU8LiKjnhIbJPfYsbolTsw==","shasum":"c4465b382cd9b854ffd13b1f06246d22f6f6403e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.566.17648.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpnDBCRA9TVsSAnZWagAA/9oP/1TPqPbCu1Ko3Xpc4rSm\nCSzkE/69G+CfsI8t+hCSNof17yMVfw1dD8Qm0VLq5rgB0KXKAw40uEp7nvjR\nXowqb9F9Dbgvur6TY73tvZCXavVJW/pbBTCK1lKDD9hFT/og4Eeb8i5QtAEB\nB+Sz6Sn1R/VOU9iyZpNcdiMeIBlDPvDXYxvhYj9U9B6ssgyd1l4BfbE9Jtl7\nvhcxyUjQFG4GE7zRO4tZcSsDwbkPVort+v5vM7GmoTzUDcU83M+RTXio2MvN\nUOzLev9KEH3klydbRqA603NC/SFvLj6QaYEWv9KJlm8G3ME04hUsfTSOpJ0J\nFAXiI6x9Pq3Wwp3BLaYGcVXtJtZKlpH+dlqMdKLMKiWV01ni8KSF1zzOTvga\n+Qqh6D90NDmqD7qxU9G6FZEc1pjfo+Buf2qUHDC+5tGc9rOEnkuu3oo8jTt+\nuUDknpokalDSEJcq7B3TVxcDOOw+c8t4DzQqU88eALyxmK/FmMkYkpP1vkX9\nY8pBGQYFGzJD7dBIw2O/TOQt+6wE7fxF3P63TQ17EuWoLbYzFLJVU/knJHkj\nG/Jxl01oandJ6nNIQjr926OPzztrL5d+2DgGPDIhWCaJWwnrUC2NHmHrrfaW\ne/JHF4PB/vCVWKR/ULmfviijIG6OZ9IalKF8wpNRCP26v0HpZuk5R5yQ2wxM\n8HK/\r\n=brM/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRVuSYdltdB9tPMGiZagvFXbrZC9H+3sQF3AIYGQcklQIhALIq20VMlR6I10XGxSQZ0YZg02iHulmAqFin5B4AMuzB"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.566.17648.0_1621520576934_0.9702733001350241"},"_hasShrinkwrap":false},"2.17.6--canary.617.17649.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.617.17649.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.617.17649.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e92f36d0611182474aaa62cf48075f67927cea2a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.617.17649.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8yhgxUsPbt/EL0qfu32KG9/Jc5++kc/IYZs5+T9585UVI9UqGiNN0BMDYyZmPqsEj1nll5Z7fbVASCPCoNBUIA==","shasum":"ba8434c81dc4412bf24a38fcf80f871d554ce130","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.617.17649.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpnF2CRA9TVsSAnZWagAASIgQAJze/XYFF535gccNljYI\nG2Fz4BKoQh/yMATm3pySDdQP+eXJi/PlGqBC4nNjEjkvz1AYRTLVd9S9R1XK\nwo0WB/9sOYWAxZMzi1dj6XHyUviOADPxqDYtjjaaKr1HnK/IrQOtNMTTvk24\nfZR0cAVuKwlzt6YfvnZEMJIgcV8rjHQ3ookYGQKyV7mRZSiP5DPvtU8euMos\np/0ojTYIFygHIOglYGlvOOYysxYpjuzbXu9V2JVcUOZqJz+1VY1hvEVQYIi/\nZzwgG1zAmctXcLnLGtVS2sem1XXsWIXJXuoRWS2UbrTG6RTHQrNi0kXop/op\nVrry9FEAKxksT2PRYhtEcpHv1xAXEMIiRJaF1HKcSz5iGBX0dxQotCnyXMha\nc37bB5HnYr/BjswY5Dg/15ZQChbg6i6dB2ULq160wSjqGAub2MSJLLZzu0e8\nLqtdLAt+4P4bjt1mEfEzwIlLwj6IKvBjSJrlHQlAsNm880Kn3jIH+pu7kEKl\nZHNOr9+GPtomprctVlBVGNy8zFYvGm778q4d7oK6K6CfrG746m6EJgHgJvPW\nMQsDGxQuWcMasCrsjpJp/6Wt9O0mujU36LrLIG+VDqbWjI7weizD6bQ8YSvV\nsFr85VhE+k5L2j7mHABb1sWQOT92CQ2lS66SfUbGYKpwKYW7Qep1tXsUug7F\nGPfc\r\n=TZZw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsqL6zw6tWN4gGnM13uLmjlANX3HP5GYIukSde5d7yBAiEA/zHMaYGbpOP6zV///lXEjzj49TUN1+MJZdCsVd/5fpM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.617.17649.0_1621520757726_0.641772142288737"},"_hasShrinkwrap":false},"2.17.6--canary.630.17657.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.630.17657.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.630.17657.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d3d892ba23e3f1d0d5bf4d06c8f97af627dcc9cc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.630.17657.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cSo7CuTXPejYyhTqZn2rydgVcfDYbYlf4mqEYBV3uvkc/8S3JsZe0zKU5+AGeEwft8VG5EHLB66a4Ps4wCQbxQ==","shasum":"9c0dac89704026899b0480eb99ef8c95a5add274","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.630.17657.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqB25CRA9TVsSAnZWagAAwgwP+wRCIA64sf43QWQZ/Q0f\n3+cSImt+Q46s3pu8u6UDYs8aJRgWcsAvs/a3GM3VAa4aN3irNg0FwgX76aG2\nTfKHBmIyTgMVk/Z4cDtx3kKwd/LvWhbNBJECTkJXzO0nzRyrz5fxBY1BVt+s\n1EoeInxuqRijUv4eTnuyJpGixpBy72o0hWsCW6TIhdD7FAINmyI2b5IwnSjb\nMbOON2ZdCMgLa88hBqRNp9jTP4jnrT4eEZefFQtaPFdHgxPI5h+bHIDv+VYs\nEiZAnh5MBSk3UDWecQYoydqDqknCp4GI74mRxrFeuta3pLsmbvKRNh+5GASv\nf21QZxqE8tviL7pAaPnYfuIc4R2XGr5Oj4AIIZGpAy3+SIvFugXD3PhGzZq4\nd5pYQzKG9bFaJRzCEu84Nrlr/brQi+qHKfjcWZJh6ocpTshsaIlEyHGsksas\nME+kuqaOtzKQaKSKeOm8xNWrt/uCT1CVvglfTG8tlhvq90L2Vvs00ddVbxrM\nP3joApjCnCbwrQkA56LmMPHlCxmFQpy56rXbUNuUAv6qsMUCXDxA/I1MDzS3\nXETt3K4sHp7LERoR/hkUeRBLR9h4jL0OF/+oE5jNWzzZN/y9gdwXz/ceSD5v\nzQa0WkhmCW+GZ62GiI5tbyJdZkJ+5HVLKppJY556jXPDKSx1S6dL3oouHXhb\nCra2\r\n=dkV3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuY4DMiFi7gUoQSB8ScKo+0iBE1nVD4OrYojtJPBxJ2AiAr2mnC+FmGC6/1MORl9WTiyA1o2s1GfRpqAtcxQ9ZlJw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.630.17657.0_1621630392107_0.19699551708067697"},"_hasShrinkwrap":false},"2.17.6--canary.617.17666.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.617.17666.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.617.17666.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b2a2b997102ea23ed1f5f250204d89f534df2215","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.617.17666.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OrSwQdpj/b54+DZaVX8dpmdTOF/EvJAAh8qd1bFcZFHCL14P7PW6fQ3QupBVZO++DVyC3XjVLnAgs2JN4+2jUQ==","shasum":"91d3c0513d6fb014b1c475e8a35a34fa2cbff328","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.617.17666.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqDaiCRA9TVsSAnZWagAAWMkQAKHo7N8dbtZ7uEGFoipE\n/bVOw9ukRXYykcttkXtKj09H7UWSPb/j62ixuiZqLiEyrwnnb7mcg7KdnYNr\nq3K+Z5rUOCelZZ7Aj2p18sQvWh3ej/WZUG+FJ+luDo/y9hCx1ntefdcHBzwk\nQbHt+O3WvKoOiMnwe4RwCzk/6cX3TgwYD3KkSNaWv5Layde8xw5iG36muU9n\nDm6VRPSaDFf2WNuEf2N+JH/NIxho/vUdzmtceJB5SEyujJC0r2Z1uRZo0MXf\ntz+mVs6omtMfNkfTclguRuoVhY6Y/JErcwdvmr9AL0pxx+Zpg4tmk5FCqsHk\nx48N+0myc54LyoMyUZM0W43GUuCJBYkkXQS1lrAYGLjhbGlLiQnSh4qcPXhp\nVHB3MEsfCgxJ403kNvSQOkuvEfAT68yjl84nfLb6yjOycJxPBHeB12GjKi2k\nSSzlsNNMhQEGxyU8KKImJOHKIeeXaNOryMdt6cjAB5mo5tJ9fa1Ut9Vhr6R+\nebyy0PPcbvHaM1zQO72lZFmtf8Vj1Y7EK0/6K6l3IiZA9dLz5/YLT7UuBWlK\nqQiOjWMo62jpXiESAp8WADhUDCAC0NR80vas4VDv/lNCUjUo+Wa48w4J4BUl\n/xMUx6SlKnpBzit21aPqguyaW8kefFB6auRjHxV0rgENqPL3PirHuojxgjWM\nX3N4\r\n=JxPH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwQ6TIDTaD7eUQcoH3C3cq57UfA0HuvTESpGan1nsGcAiAEd4VABzJTbOqgxpcp9n2eP1tbKn5N7N5YBG7ovLyrNg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.617.17666.0_1621636769982_0.09039586777107567"},"_hasShrinkwrap":false},"2.17.6--canary.566.17678.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.566.17678.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.566.17678.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c6ce4c7f15d5db2e1c07ba0d86a4f45c6b7523d2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.566.17678.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2d3B13xgRmHe2tpDAxsiyE0HHYzBmAle9IZBdzGZRMsdbUDjDCCAgaCaZ4vgtCy7DSK+le4PQKTOTOkoV/T6SQ==","shasum":"5329b1fccc2a3b53495d765f9382970c58772eab","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.566.17678.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq7vgCRA9TVsSAnZWagAAWI4P/21k0vWkfpxK6hI5JPGm\nEtaEIj6+lHcdOwIuEatt2K79HMOjNMFRo/JUoiBnWqmBtin3wZJLLpJC6LyY\nV/pNabejgAoNMoDvwzHY2qjkr0jqAaw4Z492NQ3rShPJ+hmpob8U4Ne+9fEo\nytO3Dp4jQa3pXf+8MvITjMRRyp7FGKxKdAqBl6Fx8ZwMVmYcT+Oo3WzGJjE7\nwCBpnVjg7BuN/DfLoA5cBwCkgJ2axXuOhSpNvu7QZ4tlBX9T+ZstyaqJKUQU\n2ljZvopA633NDzM1XyzhbTUFtvDevqgqZsp1qCvTyIHNkKgkB6i85wmzp1WW\nLb0bs9Pw0N3nOLkK/65BiK8tqJRhqg/CLLY3pWrvqTSBMncAtYpDdSHFz/g1\nKRR0fkWxFJKLpUQcBhGYuN9ajr80fAfO81F9nzA1y/CH2fW4WmZk+q52W38U\nSbtaa9PfmO23WWI/jDFLA8PfDpLZyNJqgoAqFb9I7CPYOkjRuE3DocAeW1Px\nOfL8iwKjIrv4u51Hi7v6yQxIkvuKY37YxlTQItP5gDM1edUcqf7F9B9c2p4F\nv8qXxuI8VJr5raN1CCrUWRsxGwgM/kJ7hUqBlidFPe5qOeAK1WirCB3uCZb8\n0Xz/afYT6fqozjxuupgReRH6JjQqJECo0sWtxQ+55Ivnhp8t+lkhLypz1js5\nqrka\r\n=FQSJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETJQSdbeDbwOI9qGVdzPO8aTzywsQL8ky5dBQ8NJ3nyAiBJ0w9ZcxmcT4y5IktHEIOtutD64vSN54xzy94zV4/p3A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.566.17678.0_1621867488095_0.006411286115130865"},"_hasShrinkwrap":false},"2.17.6--canary.657.17690.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.657.17690.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.657.17690.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"020b81d1d9c520c595dbe16bb3bc639ba0d91e51","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.657.17690.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UCCBbQvzqz4EWx5jMCHgK/TlPTRqQjx2iOMecmUIZERtlnwvoR7mf5Fum6HX+ycQ+EZgAszwPJl4z7C2w3TCnA==","shasum":"c751e733f60fd7086e7914311b98ba7822da0a31","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.657.17690.0.tgz","fileCount":25,"unpackedSize":88798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq/jfCRA9TVsSAnZWagAAHZkP/Az2sctUgmsSORTbT9er\nTfEUmiqDgUyQ8UajKqoqB+e/OBr/P4n64/pam96p3mu0cmRdxffJhbJkFe4O\nqgWvKHTXJA8XJWtwgHvZtSFrhRgk8HjZW7jdZnjQXhXxbqBLJf6H72V0vhS9\n5+XxaEeA1nASP4zLWBbUVRNPXetFVMDR/JNfpMXynQcUBK9jTbTpDGZs5rAu\neJB0N7gJqP+4tQMt5qYLfERcTroMBXA6CrTEQZp9/5z6pm9e63WmXbXJB4R2\nduvfmbRbLjL0JhIKzQOv6T+R3DdjnzyB4shrK49DXTWTMymCgZPIVK7CyWhZ\nG2FDa564JuUglhaW2+5dXfyyaTfpvguTcZIwGE8e1VSzgAK5ySBSbfRQ+Feh\nNvSJah1D0IVMxPrlK2nOzkbAXE614dfwPVlD73iTCi7mARjveUOPoIrcZ5h5\nvnx16AKd1RbsltNdQg02iKOXaT7yaeT6qKxXFULyBy1njySQrrYiY+ecDalh\nU0PcgnMQQCKyAfLWzbVqfornI1nV6Ed9wGNthxzjCd1dEm5++jF0zLYs5Ehq\ndEDk6aIuB89snYhSEVcQhvNtX0GKRJsFcb1uO8dqYfGrj3M+jwOVl7nPVLiO\niAeY2UckfViIhc8r3ueFL66SJDwUnmJmQOqFFcB4ZGm1cAwYaGB+HiPg2Bhd\noZDP\r\n=Jet3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAD267e03+4aF2VRHX7Xk2369e9ZFEnG6wW2bDBsXrl6AiAUN4nfEFq7MlbT9tXerrnh0hqnBlsSWLMy1fcziGnD7A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.657.17690.0_1621883103297_0.6708096220870479"},"_hasShrinkwrap":false},"2.17.6--canary.549.17709.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.549.17709.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.549.17709.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3e26e00f4b45891eb8db47c1ba278a797c742fb4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.549.17709.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8P+TzR64byUtYLKcnqW8ZbvfU0DhpKwZ7189HBeaWTyn1u3td/EGuyMOP676c09Cf8hjE2XY860t9gEg4ky2Dw==","shasum":"4019907db1dacee21c5f9b9a0e59b75d96092194","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.549.17709.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTSsCRA9TVsSAnZWagAAki8P/1ddiRExGeXLP83yIMDJ\nmNUDu940b+8WnEiLJrOwd1bJg+dxIlbLfQgN8ZMTRNpUrEF/TMkixjliBzAP\n/SRey3pAS1Kr4RjnyAQzkYi/XQbncUZ5JniNFdh3ELqPjTPvU0zFQUFI3iqQ\nulrYtXcthE1jAE9cbIs+yY9IUTaIocsGh0HvxRC9PxvmQLv2qSrQIp/POPi7\nRF5zCMAHY36muZYunPX0HzPT2i3cJje/MJ6RS+Wsce7thhRII9n/aGane6W8\nqP9Vixph8FthRgt7Hjn01mDiyAEXbaqB1QLX2L/O1r6qHM7OaNwsdXmr9J4c\nl4HAl3TB+kEopM1wwmTYyvCaMZ7Um5hqaIZmvVOliEpIpkoQQ7MTQE1aaJq3\nV+e4kTZ87onvQRriWAxg47m00+Af5NZBVEbW6xCFE63ipsxabb4Tjsr/E6gK\nURUzL8dgyC9zlfrFoIMSytftB8lrzaXQmlAUrGgx+sS4UJ66u48W+Pdg0SBa\njFjlPjk1fGWtzuZWU/WeZYYmyfOWP4k23UqiSh7e9C7e5HldWkv5DkOdd2un\nbPv0wUNdSLAOBI0II27viLpZGZ598LqXOxtCZjF2V1oImwknvY9vhHaEcA16\nvG+hF3Y2bEpyXM6kJsgtYC+6vEb5srRugXVPxC7ne0iJLkBbw3dm6LVjYN6b\n3hUj\r\n=UbWN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCej0ZwS1FHqJU+PVSz7VLGNxwWhCfh9otN5/sRJtu//gIgapZpN0x9Se+n+Spx4B+WAKc/OCXWUiJ9Dum24Wa3skA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.549.17709.0_1621963947657_0.11022670058094164"},"_hasShrinkwrap":false},"2.17.6--canary.656.17719.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.6--canary.656.17719.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.6--canary.656.17719.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ee14736784c617cd2302fc74bf8a89acd7d56ead","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6--canary.656.17719.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zTAzAZH1ML8B2zT9qhZHFVHkIm368MR4mbTkO6omy0XA+YV8haXUo6YSGUB+45cIVJ7szgikXRON6KZm3NvvNQ==","shasum":"771b00cee79f5d1d24a6afeef8d39b03292918e8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6--canary.656.17719.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTt4CRA9TVsSAnZWagAAT5MQAJDhTpbS2kBL7lUy3tZu\nRREuqvNVP5iAoVCW9w8QAyEyi08SI5CUf3H41k1Tspb5MCuKY5S/zpJdjpBW\nqM7+GqL5lHNRL5tAzRIcVfKnwiaEfUYqK04swyzVRHW5+o5J5Evijot9vKco\nSNBqV+/QSaw4PgczoDhL9Kf/XDGQF3XGEWzHRe61rgxwLOqTb2L/HQi+Y098\nk4tOQRAEoGC0HAeHfy8MNcgSg8rAb2QwCSKnIGhzQLtlrb2at0z74EHlNYpo\no2VJ+KP3Ran32Bge/HPczsP/92F0OeY5e7ZYyNoU0J0tVE4Ndv3/B4oI3M7w\nXghBJu6D04BaXpigv0NNUSSFvRtR3mMo2Uau6pia/Mp0y7v4siVJsJU+glg/\nOpBu2Jl3++CwBF5lKRqJIj7p1BpEueJfNx5l9jbnmPkTr00hPsxVuEd5KkHS\nJwgmFGKI5B/ZyhPW9YkrLVZOkmsK4Vz5DMqALrvc4cm/aXfJswUtm1pJ8jlU\nsVq5ZgV3WjFKHtS384i8HteGLRK4ekX0NDLIjjMSpBykLMC/AIjpFrOLrkJY\n+33hJBv0y0Tygi2GYztPPtVW0H53qrMjigTzawJdnERVxQrIgcfSh8nt4hH/\nmN69s9VhxGj+PVTHO+A5kaaM8MV5V7imS46TpXgmjaTurETgHpyLRQehXW1n\nkaME\r\n=7YJp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfB/FUV3fwmSeHkBkT1QoU+vn3gRqvdWX0FYrBC4Vs9AiEArAJQIcaNEudBARNqEpatFrUE69u92pIXmPqGU/JAyv4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6--canary.656.17719.0_1621965687458_0.7719890523320412"},"_hasShrinkwrap":false},"2.17.6":{"name":"@design-systems/svg-icon-builder","version":"2.17.6","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.6","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"abf2ffe8da7d4bb8aef974b4e0b7cf02a8748973","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.6","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XRlfnyMWeozzCQRd5JTqtVO+aTHM+SXHSqjG6Z4XwhMtIf8z1q2o9i4tHc4TPFTdQj/3XZi0tT6LwwlFM8N6QQ==","shasum":"7e583e38d594c5d37fe0ad59ae1a1d236fecf9e6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.6.tgz","fileCount":25,"unpackedSize":88748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrXNoCRA9TVsSAnZWagAAjiwP/A8++aUDFdvCc6muZPRm\np+aYZ0okdGq+aYMRU7f1JytfFazgQEYNuOG/X1ubo41Klu3NC67hBzDKGZhR\nvlBRcyiBx5dMEpXU3PITB6Ycd9mO/qPyuRaOJUi/B33+hQghoj0fFif+TLxl\nKm+xOWuSW4kCs9n04l0rlysVTjijoND/pTZGYNSj/iRI41H9PzwacCvOlWbA\n7VljYW6A8BDnyGLXvu2EKqTo1dkbrv5L/9g0gS2W/WHbC2AKh58HXSwF8s+k\nv57+DSAMm5rCq4eS4ux6PPJLwBL3XMGnqHW8oVVE3BfrAyk8uH98ouvjBMw/\nUBoaY3VFx2CYIIUJNB8dQ5Q/lZYaiZ34w7FAYMTx9nOpOse4pAHQWhigRJwP\n78JIi5eFApnbN4N/+mdJSCC/BrBCG0akKrWzCzt9OOGK5meF2S5LsElBC9Jr\n1tQSLmgzrTrUMO5iwr+X1p/WITqjtK6KXpx+rkPhSmPpCCouHCFpsbgwEzBS\n0AOTOtenDfK6KoI4grB1RH/0/OQoEBy1DjwZ2/hd27kzl8QbdUHOcZaFyjip\nEyVjMVHnHQdJc6XwRVB4eljPagLLxIlsQEHqiojum0r3hjzwkx8zgpTRpDB7\ntRmOYzuB4GQrjemLTjBLHEdboeRxnXd+ote2fvoI5q7nGlw1qq+z0p1Vc+aa\naNgQ\r\n=tqxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1ORvnGDQZT6IBlgpQjIe2dFTaOADWVxJz/osvN6ND2AIhAN/nWCX2rReRAw5wBJlDOLRm1ozPwM62jtNlh2JZDNOe"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.6_1621980008225_0.7817535545641818"},"_hasShrinkwrap":false},"2.17.7--canary.611.17754.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.611.17754.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.611.17754.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7b6d0ab725830640c281f67b521b9df900bd8c9d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.611.17754.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NAQrlDsdkGVBEkwpJBCtJuQPr+37BdWoRiByt3xRCrD5CMOD5YvwDSTqmbkxfEaOa1vD2eMAbe8sUMNH/sJJDQ==","shasum":"312426c3d4ea2afc96e81e8645fb4dc5f947d75a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.611.17754.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrvTQCRA9TVsSAnZWagAAflsP+gPsYybS7hgoxnyQlyH/\nGlpomSjixvrJHtfzH1Z5sLWdyiYDfeN4i8JKIGHvkUB7Q8R8EQmhVJzI2RpK\nIwyZaVfiMK/G7SJ8idSuNQ+IEST7niFaaJ7a/QtooD7GdPeCk1T8pBYx63x8\nqycA/amdlz7Ea4PxaNObfT2GSPzAKponarwRSO1kx2+Hvy7ySqSMdkXZhLP/\nHmGhd0zHEr5B/9bD181mhl0tEhff9e1lFMQVSDhGpvYdg4G0iF9wuV3RxU+1\nHHmPZbrxAo8yF7g2hiKKK8Dm1Nsoqfon+d4NLxCwrhojFoqBpx46FC5kxOQ+\nihWAwIfPqbCfev+iVQU7PGTogF4Ga1eQC7yHVPSctPMbGxXGKgikpx2DzBZn\nuIOcVACxep/LCRYlmRs8+NbGF7jLJe/6e26rPOIQ5aumIQ+VwUGB2Obcx53P\ns7kethe3GBz5ZR1lcKwrrHlN4Yqpor/MSy63LkqCyvBY1Kok1M/0CNbPHPqm\nlZQE/Zqw1hTqFCFJ8oGpOHJJmtOCV7uxOiYVMWncX4Hg7KIMrRXkHQdI5kfI\nvqm+WkEfxNi/nE8JD2BZw7Yp/iNPif3mV4LsnzKleLuiwr7Xf/D4hSJ6UEQ5\n7SibNH66Niu7ANDVCPSFr+fIDvrlOW6ns1jeD3cu81GovuBsOqqkd09tq1FJ\nAoCJ\r\n=gfQh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxEvU3KXYaxvFLwT6dUtO1fxzOf6MmM93kYYcQpzdm4AiBKM+zJQepZLsMF38wsn5JNaK1zumHlYpx4FdY11o9wRQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.611.17754.0_1622078671874_0.9425791284810854"},"_hasShrinkwrap":false},"2.17.7--canary.505.17760.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.505.17760.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.505.17760.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a6699090fe89c43c873b371f7fc411501d5e8cfa","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.505.17760.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oOqnB7EuU8m3ghuTgtWPYqdWHyGKDTbnZCZTkAkBc58wJumoxDZc0pG0W4CnTOsExGvC3pTJOv7nsJaSmYZv/g==","shasum":"23dfada761b174cfd38191e9410d4db0620476fe","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.505.17760.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr4dMCRA9TVsSAnZWagAAVt4P/17QJmCQHjMzg8Y6kHXR\n5hD+osneKWmpW3OKW/sLRzfe3H+ovtHsZROqbMQJnlp8kPc4HJ+pO18PzPAe\n9mkCqG4ru3GKyRgzprWOyL1wYoc8+KY4zqvIgjs6slcRpXS308zz+CXX5Hg0\nuj3PHzhpW8idyeqP/pokzlys78B23J3iMTWLYU4kuL/SQYYSckWIf+YhVqV3\nMWTaWUjSO5+lb93FKT2rt3Q1xKO9yDeZiI9LIwTwcbWlOpw8Ci2r2IQTCQeq\nttprZGYhtshQENmINTcZVVM8RR7AbLiJM2SL4qLS7h/FrpzC4BRdlcQoP+JV\nPxxkUocy2GjCjnD+a+2D7OHo1NrsRvzIzhNWAq88PEdC4TiSUGoijqU3l76M\neRnWdzVghNX3mlwHmQvQQ5f1g+YWeaQXGtA5ZIM9GKIRbnZVFXUhEa8SuvBl\nDBekLjcv7/RTjfEzrSMqOA7XsS0Ik+ovVbdq3Td+1X1YhiUyWfIw3QWH+tam\n+um3TaFi3F2Fv67296G1KMmotbtD7e4aRSk4HxW8KmHixXbc7wNaxoEsUMZ3\nvy+jUnVWvhKCVt/xwYz6u5jj2xArxWZPBmfDx6fCeHPIGcivsrIoxHQVTcp5\nzTmPoO1qSLgv3JIrR8xTuowv8nFJkdCk2rYHRz/UFq2GmMmA3ztYDBFFQIvI\n+7Fc\r\n=EIqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXuZr7kWwIGw7ev78dIovAHfxWr24Lp6BZaTjUjBgYoAiBRz9wPkPupmvfwXxrIWP7fz/THKyEFFb5vybfgw/Eb7Q=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.505.17760.0_1622116170982_0.21131715982852128"},"_hasShrinkwrap":false},"2.17.7--canary.617.17766.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.617.17766.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.617.17766.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"88b317773e6d3427eba4f2a1c0d761fd4a1947dc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.617.17766.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Xt3T6sLs07wQ8DeNZ7onrVeAm0q7uCtNw7/Is/2RA9sUKWVQbdW/TsEQ/ZaKR1wLk3xO/cZya8L7d80ES21xvw==","shasum":"27eee43195f5cae79e33f62e305072c75fcb8cbb","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.617.17766.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr99gCRA9TVsSAnZWagAAa+0P/RO8K3fOX3t7qirG9F+E\nYc/0tDVytPMH8+RkWKiSBo5Oi43E0rkEKP76/3XNxV5GZ6QmwzjR5cyq10hj\nkwUE/Yc+dE5XqRZPuxBPhEu4bM6/kM2ALM11m+1Pf2zsBoysWkG60GBKtsgL\nsWOuSejdE9tdBI4MoDygE9AJGCtEcwIvnkj7bOWBWzXYViVGDeuVh14n1JV1\nZqrvsuAt7WM5+rDewog6MLbrOoRlTK95FowJ9tmRpFsxwQk7ZJ49N0LpojJH\nssy/RACQeZKrhmcejQoRwSpxc0WQmMuMthC/i6TQOtLjfgRJSM4r7SKEu75z\nYb3SwkRUcoGg9Rc/oh0zWYXZ/Dj9pelZtz3VIwb95XgN8JZLY+BrI0XdmnGG\nsVVBeAnnozCjjvHJzIziRhlfQeU+7+5p6JVePJLmhO8OUyh5WOAXDMtaBWIs\nJ7k3veJevViACUFJMSbVha2S/THkhaFWaFtdlrr3wC0jRduIbzszLHD7EBQj\nGxOKkd/cXMwZU94MVcTrfkOdJMNXNsfS2VJ2rQ97DG4Dsjs4f+SkJJZhYwXK\nxBbvvYaMcROR7lXJ0I+IP5GxAIiwVxgjW3/7dVNbVbapQQzDp8skH39IT16Y\n3pJk+TMGTmcCt7xkzvj3ln9J1zT1KO4DqkgfSSqQZTvUU6eOrvZeNnFxVUWw\nqvTj\r\n=6Dia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLO5tXPgtVJph0UBTLgjctKJLZrdasr+qcYSzeql78mAiEApvrdUtSKFaESYGElHtVO/bKTS0/BVQE7uGowHY65xCU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.617.17766.0_1622138720330_0.40875125708686255"},"_hasShrinkwrap":false},"2.17.7--canary.587.17772.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.587.17772.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.587.17772.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7883a6fc4beea98b58fbbd72c4ff326a6526e24e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.587.17772.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BaOmhtJh71LTpNGSZSifOYw+YF41kQupYEfwb8bY2+jbjr9PGkUUfkM1YkHoHI8EZVLhFhXljp7cc7oJ0gutCw==","shasum":"974958d137c42ce6cff1ee7a7ba211ead5c35f9e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.587.17772.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgshC3CRA9TVsSAnZWagAA4QoP/2dfSVxAA+4dpiPK8K2c\n18RZCG02Kll+Qb+P8PMI/dywFe96zBnPDh/XOX00+73zSEVrJwtZ84OUW0ew\nJ0ppfRrD5s965fGuphDTx8ac0/c1X6lseP33oVMNCCH+7pNuIK/KwnAjiuGj\nw0t5gwBREbIAXUtSlfksjWGKIooPF/lsFgyhe/hQOJ7K+nKK3zJLUQFhTeau\n5RINDnWxYDXcTnU6a+FI+1kFA6ZtOS+Iz18VC3l8WpC+pckubJXUGiKYu1TA\nSl7W/wRd+xuyxYv4a1SXxTa79TqThWHwLdH7JQ7sAG3++h6HMf5eKgtN1KEl\nnLTHwaHA36LUnq9vqV82W2z6Q1JtRRKDzrx1sKDM38edTHMSIoDq37WnQ7Iq\nKQi1ho5ydHT+00n/jmwUG/9R0N0F9Tzh8Gvd20Fsddx7xAV3VPyf0BKRw5W6\nrWkidExx5pC60bcxFxJFXPfMRdys3CWFjHsK8wOLn3S1mroj3pmTQnWH4loU\nG0eRkmFz4YyK3bBnSjK96GMUSNy5DzvOnFidxdQq4lK+Bc5ZVsiZPimJAAcS\nTxt5H8oPUiASK2U28zpNfLNfaWa+aKjckDiK1H/UFw69e1gpIvZmV6VjpvR7\n7GrOjw+EbWUvElAAPxltyZOIYxOHmTT/uzPNzmQH9YxMHpFOax+qYxXWfEY1\nfFhX\r\n=vKFF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwfXjVVrtcc4/karp0ZhLIlQIDFlprKHRB03kQSlAtWAIhAIw73g2oPL7cpztP4UFBpqt0I/XxRbtdgbIASROncN+Y"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.587.17772.0_1622282422491_0.3504328338792999"},"_hasShrinkwrap":false},"2.17.7--canary.611.17785.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.611.17785.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.611.17785.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d621d308a1c792269f90faaac549e211e07ba371","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.611.17785.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BVJVD5SXpLo4fHGhd+5Qk+gRRsKeya39j/xVV0eDM7ZZzm9X3QYqMW/U5s4r3gYssTxvo+6BIQtyG5XBaBNUVA==","shasum":"577b5df906488ac3af583978ac4716b4015f8ccd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.611.17785.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtE66CRA9TVsSAnZWagAA6ZwP/09l14knFr5xGf15ebND\ntGV0z4mnB1cDt7lykinmlGesGLd4J3o3IZRD6j1EZh51V+I5CVj7MA4Kn6W/\nXe5asixp4XWous2Cc8W9pkUG4RkCNToeO+p0FfhjA83WYbxaQeUZOlZyEzcu\nmUtPpugOWOx6d6zdLIPkCdOhYGUKMYmDvCuvD9IUl6IgwAt0Q4bfG3BO8v/9\ngItcQVVg6BLYN+7MeCod9GIgIB+A9wsOtNziYvU/UJiCa5e1Gr5Chx+4ZOuH\nWB3v1XaF+ug8IPMhK1FlRMxhd9DZ1l5/AoBVYzTFTE/pRhEKigySsnX3uZcq\nHYvDtQLp4wsOQpnd8N6wzLzkq0ZFZWpy+FFLLsrevTB6ZT9ERP2lzAJt7q66\nEw0iIPKplxT1QSXZU0vZm6PdSTlJ4GwkptOxYyNqgsVpa708BstbZ2kiagj7\nRYEnnQ5/3Ucu6JbUdCHjCq4r99NMs/ukbkduJcvSpqw2eVTjSGU9sJ7gz1l3\n3v89G0YXyQJkE2YPvSIVqUMlQ7DngYLHXRomXO/PUBKYHtEVjyzpASAsrIyf\ny01frroCQJphcA3QRrVxq3hjMBd4avlCG6Z71D29iFS00wchR/1RIxGkA3lD\ncO4Ju/q3l1IbRNuU7+V1gFQnEzDyxPs6i5Ygrjxl4rB2nkgGTba5E40Nn0/Z\nTnug\r\n=kPrI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLm0TvcVeO24sr1P0dV0KsU0iu0VrFDPI/Fi90ItC6PAiEAsyfkOXroGdN36qpB6TYPgElAqOqpEnTjOMstC0o5wxo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.611.17785.0_1622429370205_0.714131138219573"},"_hasShrinkwrap":false},"2.17.7--canary.587.17805.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.587.17805.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.587.17805.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"94381bd3fcd8bbbb2a50dd4cd1319ae778096a43","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.587.17805.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hgUBjyTjUiVgH8bSxwcMfOJlnh0X2lMiY0U5zLRmHlMWqmaWfMoYBZqv98u8cbMrJUyNWRJh2nDKJQExgDO2Rw==","shasum":"9b94f383dcb587ca8194b43487735fd297a6a579","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.587.17805.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguzzRCRA9TVsSAnZWagAAtU4QAKNl+eOBb+6A/Yw5nOQK\nm+05uyiNh7/6wFsboH9Ve9hEyCJXDAUuE8uKnG2rTpRN6m3L4LhZ7jd5jAay\nwtjRtnmeuszpMtfoPfRwdtJTGbxRLPPRvQ1qBmi7mRxQRaa2tRInA6a9veUs\n01J/UyL9jEAQL+5dmFDL2KYiIWFufOhz3aoXsk7KZcT5vTl6uXNgTAXmA/4m\nG8IraEN8gb6BhWif5DciNR0cOTKxw8Wp25uV4+PNa4gjQTLxUODVOv7w3BBV\n5nF3/pyzWameIMugHxfZP9kOgJA4tbnaLAyzOClT/I7Y4mwg/bpHchT7vBOs\nkiKcKbj4yJ22uuK13kkkWnMut8VYicMndynZz1ap6fSSeVYwiPyz57aHC8Ix\nhj/TMtDDHOmHiWh/2Q/GImui0wqkkA4NMR3u5h1O1OY7amz6ZfGr4QfO+wB8\nvrjzdJnGkqROVzoX9oO0xnX+QE8UyFNUORwuzPitjiEGz+EMxyxtMLSFoNpp\n3N1Ki7lJ2pgodpRebg6eexyiXvRsdy7zwQ4DVgBez1KizWbdzzVfIjzLW6pf\nRVAM5WWaJP2parKPd0gFm1Ryjc3lQZgITO04tx47hctt03uZ9bmNa+h79vFb\nmSLZPdi9fWuXbmqtlNjM7e84k5aqlRwaTDhVFclySx65O0TDrw0w52Y7BBJx\nNH3y\r\n=2eCp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDBjDmL6Mh9dxqaSyGXR8ac0wqUETLG/t8pyhrut1UmgIhAOc8D/6e4iiFS+Ky4Nghp3APys7hMiuFLK863mt2Gp4U"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.587.17805.0_1622883537096_0.8449461491200783"},"_hasShrinkwrap":false},"2.17.7--canary.559.17818.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.559.17818.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.559.17818.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7552ef8d04ff72b62a1024766278c3e03247b7f2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.559.17818.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MW1L/8PctvIHrYbv32Ea30pgZInnEQyCuHeoUd8fcBio2OqP2B5EWTC7VdGID+DXCCYvGM7f7Q3T6zg5bgZk3g==","shasum":"cb98db0089d4f40b2199cd993572a2e1fdf2e8e4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.559.17818.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvih9CRA9TVsSAnZWagAAgr4QAJkIVOYNBRMno+zH7KEl\nsEMGoMWBsIyUccdZ21MTZg73w+NO0G5g17JyhI1otNHqath+tM8oiteRq4Wr\nAqOhHWADyLtbNk3E6i4W74v1aKeokJGHYAEvFSeh98QQ2w1Q2B0pVZecVtrh\nU4kGRNt+uzc/A2GJtR9K4GvJq2kRiSeIEp4DWO8z/TnU6sxaD3A9kv83HN1P\nvZgEjZ4GfR4OXi8CFsCBY4HJb2gfUTRq4LyWdbdPyp5BQpM1QhppsV2BLWsP\nhGZdqnfpQD36cJQWBmPxQVq10vdSMOKyf7mM4QdyvrIA7OxZ+8G9cXBkvi4U\n/9oVh7RqvamfwEahHzxuquMoOg9aJybbmBTrb5MpUOt/ZeaAsKiPvNnKrN6q\nsdG75uUDDlV5NTWuXM8bq1kJWpnAYxRbpK5CUPTm7+CZTbFMfOzH2+wupqZr\nneVGXpN6gRz+avii19vTw8WOMhLywxb4XdBkjvXGXcMi6t3I5F1eLIa+0taI\nHslVG/V1YjoZnh1S6yqiMcLDlUSneKSBwRjVmwgMPBgI8+RtCUiUIbFYddG+\nl7Sc5d3zaUQhrZiA5JI1pJm+bbzEjFVfHG8U2kjSlMWvKqIcWkHRCg+8o1K+\nxbYa9B2irZcFf+82T0MzTXefgurT/T7KsNhNkyaXRzwQHdadpMNRHEtgsTdA\nJ/6f\r\n=7KYv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2ZnMe2lN2hz+k7dlYyThPELj9yFEMXXdwmWqZTsNSiAiAP9ypcRlSeA/vgRNo1/5NXLMf+Wz/Pz8FQK7GprhIT6w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.559.17818.0_1623074941686_0.7464662566634455"},"_hasShrinkwrap":false},"2.17.7--canary.559.17825.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.559.17825.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.559.17825.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e26b94e4573a52df94b60d1a221f3e45bd087920","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.559.17825.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rekN/UT84NEbZYM0YrC2XBxyWad86HpqF87Ew8NId/zk8zXWG+hLY6cOMMwFN8gkAY0VjASINtcZEE8tKcdtGw==","shasum":"aaf11ee06b61d9c2bea96fb650736e4b55e6c987","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.559.17825.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvmH4CRA9TVsSAnZWagAAGIUP/jZXlznm/gmJeNChqkKk\nDNt/Ihrlj0ZR1mSwvVL2rjCLg5f+27Th6i0kXKyVenFRtwZ8ur94heS2nmjD\ny1hXUhiHbdlAcgUydCN9F9ovLQrnYTi5zCOZJKdujrFwS7JzqenpzaG5TUvd\ntq6toIK7tcJRSyWuNT0xEiRDib5macmzJloah4M39veKOxs4XgGrWuKYkVlN\nRumULxkUufAqmrzwMitwrWeNZWaljnfRLoPcXiBpYwiRyP6H0PZ3Q1oXwF6K\nu4mg4Ifcn6uGkGtHrcqsR3Apvj8UBOr6zofq2tH53rVNhXFMmJYNX8EDkw4G\nF3uPgfQ5zVXF92jOfA4NwI35zUMSS6QXsT4+l/IFnWLM/Jyl7od6cwLfjGlA\ny0KbPbHGV4AUsz233MVjqX6tHMDmgyztBE4qieRYfBFwF0RPr9ovGKBljRHg\neMV3Am2nj2qZLyvHznvB/TvcBlPKnMbp/iKeAUQidXyjgVMTjFpR2dqWRCnl\nDdDbkd8ru3QJ8sS/yfwUFEMwRp4eOeEB9PkfldeU+LfcRIbl1c0aVJuOKhNY\nuTNufa/HvUa6IJG1Z5WcJmv8xv2mypoamIXxEscYXG6/gya8J0U+ZHTjEInt\nplqNVvcTMRNCoFn6+b85QyeYOZhNbSEgpS81GCO7n1cDVXvKHGN7AyBjoJuo\nXcqY\r\n=n8f7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVtexUWutB8tDxtrPQbadnSWgvh44u/Yd2YUwHsmHlywIhAKBW/TfAjQBnJbbNSH8i/PrDBw+M4NbiDOvvgK2ik0uN"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.559.17825.0_1623089656521_0.5356236817293796"},"_hasShrinkwrap":false},"2.17.7--canary.549.17837.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.549.17837.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.549.17837.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"63cc70ab2a4581dd02752b76fc0b447ac4bb8890","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.549.17837.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jZMfpvBSA+tZIzpmSMRIJ83JV8Dic00hPvunmF8M/UOqgW5NDK2OHq5Vg/Feg8rBfodxLiOPOODHgO1T7EgAzQ==","shasum":"dd3d3d6aa593331605256a8db9e4f506da527073","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.549.17837.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwNyhCRA9TVsSAnZWagAA4foP/0e9xYTWqRUHJr/xDEj9\nUpXUldZ6ClNAQXftqjVogN75zfkIFAuCbFoc5bAZeyI0IjP2kMg/V5Wi+kqA\nE2IGd4BzkJIa9LPoEREOEJilN//gd3QtLkPR7N9DwY3RPU/gZ5hClj/h1I+f\n5uDtzjrr6/7MrJXSVy7/WeakLFHh4ZgkYtXlaTtMdCMWcErnUMCGehXw44PS\n1KB1MaEJlL21vGsXlNzr/9qKp2KF/JA35afCrBn+U+wiCbqww48xaFGdxNzP\nF0FYZLPaDMBlU8ggsMe7Z7IGV+ocaZJmOzru23XwdPN8DxgHzUMMapKuCoTW\nmngRnFC1B0fTyMzjV7Q6ZHwik5CPexhR4EgHZ4X8ElOYL+y9ZUW8MMcJ8Gar\nuiskspemH/lDKdrcYHsnEXYrsnmq/m7z45CdRpIBbz0LqzpoxJUex0tiZrdJ\nOFbXBLJemjB9J+buDcIDakGmxbkaiP22GcNwAiGt6LF4iqJZqSKEjXejrZsb\nHd3bP5f+sef64Frdtz5bjStiMXP0x6+4kAts8hHzXNbcsaOFmUJwanioNxfQ\nFWxHpoz4dAbW1rV+bQXe1vR1ZNJwMv+99UknLQ0ROS9Qldt0MGez7Zmhy1y3\npeC9Y30hHWaMjwJdH6k8E66roAfXAhgIgA5KZl4EC02hsqPZBwqrOSSiVZ9D\noRU1\r\n=dMGx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF99duqYsgB+jsh/UKogDRe1b2lTy3RxwT3i1IzYORCaAiA43//j+qd+HAOsCoiLUmHrvGbbEDsz/wJLGqZombJbMQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.549.17837.0_1623252129005_0.6906617194004032"},"_hasShrinkwrap":false},"2.17.7--canary.659.17843.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.7--canary.659.17843.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.7--canary.659.17843.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bf7309f9c3e2ad0ac96a18d67728c59f04701a93","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7--canary.659.17843.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-loIDC0ddPuPK60jAUvKnDbwx/U1eYV0WuiewwfzQ5OHpLaxRjBljpyX3rOBluvDSOacnrb5xkkkR0d3uacFrIQ==","shasum":"ea7158ca242c583b554c33fa0abe466142e0f53a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7--canary.659.17843.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwkkgCRA9TVsSAnZWagAABJYQAIUASfuZkmluTycF6Hi5\nomGsiYwG7pdRPaL/y472uLANSnG+X5VBWtDJcHDxfcUJWkd6FvaR9gxWYnGD\nkAGEX3BVNV2X/vNAdLn13Gs0d0qq35HIVgg5DI4UbSWhR9QvU4+LYnaxyN3m\nfssVqQC+yPmxJZ8j55Tg0URW6mANVQDZ4oI/WvyZRc35SoGCCcDY630qSZHs\nJiHNRWVjSQNnacOEg/12/MmEA/KBk9P3EGaegRPPqL9hmWw15oY51uNv2Y+n\ny4/bqQiRNPKI/YOsHORJfG/0SyG7dER7HqV6CLvwL/EtNKmooDV3IbkLzb7I\nzuiMltnJmUVNE+E0dnlj3Oan+rYWKIi9Alm5U6a6WoWOjcv+SiU83urb3LGB\nB7dmMFO0tE3dje/nfgMXPIFgkdXVWFlz/QHTDq3MfWrexDDpUHVBlnfYKC39\n/R+CH8/qhXuwB6hOzVmpEj0zwGdn46Xsp4gB60tFcHv+1cIhNkPElIOHcJqs\nLPqJbkE9dqhfxG34rcWKPspDxM3/FbJaPWosumsDKvC/7YVLkM6vCHbjSRgc\nQ5xOGfFWCkIzmmT/fDvYyy1QYnHhpGz6AQoUwFIQc+lne49uwPln092/5ayl\n3PZ5RPrJeDd5duVX9SXts2ar+tP5YDTK46jX1AAALbx6VK47v1xaKGNIYszj\nyFol\r\n=cfni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9DqgA7sNtWyRKl1vS2+F/ojGO0Dc14aYFHTXhCX1rkAiBY3EuTyMd0x58r3XZZlbFaLFwwNdo3skll7+rwMu+mrA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7--canary.659.17843.0_1623345439810_0.39954937608965535"},"_hasShrinkwrap":false},"2.17.7":{"name":"@design-systems/svg-icon-builder","version":"2.17.7","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.7","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5c5766d26676bc7f83d2114d0c1f5194e27c73b3","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.7","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dd9m67nCo+TlMhvQ6J5hG46J+WhF8EuADY8IAkNDVTdXK23Vt+UD1b3JH0POEcwh4md9rYri8KmUOoq6U50c+A==","shasum":"2e2a34b766696d2989f26d87147ef0be015fb432","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.7.tgz","fileCount":25,"unpackedSize":88748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwmbdCRA9TVsSAnZWagAAaRwP/0iORq/ynUgvSP5B6ev2\nU4BGBf79KfhvESgbFMqjNn2M10bCa1wJlwrMMDBlRYqPRPGPBNlxyJxq5LoF\nKgdKBfCoSyvVCHPWHrAHBRYZmjnO1VJhR1LWHkNiMT7azG38RAJIYG/wkOqh\nXgd7Rn7RUPaHv0eBvs2zEGNKWYTIHvkAqKZRVIxONXZfrEOTfgLnJzDJVz+u\n3SqclieFHts+oB8ML0j7JfkSVGNMj4YKI95FzyNO7GLJoBtorGhBjv13s/bz\nvKOMVaDcFGUvK9jD3dC591GUJwJzCqdpmmmoovv1Q2GQh94Tevbhe+mqrxQ+\n1uR1RfLAgXJLHvMahlnfWAMrOcu/xkxTJmvgr6I34BD1PZKxh36AvbJedCRX\naX8PPv+EUFfl9bVXWobhAHZcKfEX27zzCKiPAwpxZylQLOU/qbhyXcgG0w+S\nG/I2x6G0A+U+duiR1+ESX8LUHNzkbdKOKGAJHhK/SKeNmc7MWGVnhQnrT3wO\nJa/cRjRpkkn1SihUpTy+wNZzVGl5CRRMU6JJDO0R5Zz03rYgru71mSmUipOt\nd29uRn3SC1eD4/l4PV3Jgf4qH5EW2763p8x89uc8PQZzw6p8hiSvk0klt6JL\nLYn0kARNo5Obp5/dpMuC0VBOi1XY49llj26wumrmJocz6z3DZBjprc9wTAT/\n3F1P\r\n=FRwB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwhsEINExotMtGwtMJ1hPn3/vdtfsTRYDfweySSQjLiAiAWWmkjZ4O52x/n1CBQUudPEsAtvfam7AbaTGCrw6TgFw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.7_1623353053630_0.28545338462446157"},"_hasShrinkwrap":false},"2.17.8--canary.612.17891.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.8--canary.612.17891.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.8--canary.612.17891.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7e0e7d42487a880c35bc51a745d10c1a9c354755","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.8--canary.612.17891.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qltCaCMSA5AQjnUFp7Cfr5z7EZdhFX1NTTjxsY+pNAY/G/dd1nDLl6SEPvPU9BoRL8QDkjvbeJFYxu7gEOXIYw==","shasum":"a4dfe871de16de2c2888ce5d52352205627dcaca","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.8--canary.612.17891.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx8SBCRA9TVsSAnZWagAAOPMP/1hoGWQ0uFOk2KGVofuO\niomvcX6nvk1YyKOXio5OhBrMUOMoDnbFjuMDQEjZU0BhPxndhqHCQE1xLylm\nVX6/CsR+e4CrGVj5qjSssQvmjpIIAMVJbmCtXD24NKbKvWpx52eOELZpqUTP\nLuxFkGMrWhjBBLqtZjAOoGvrhgR3nrQ1MoA8qxUOXMueA9pgE+3XAxTUIkQe\nvZ43+dh6Mlixzg5fzrzgRZDFW2cRZ3+ppZaKJrueEPs7JYnKOuwPwT/DxLLu\nMOK+vv7kP90b71hLYlpWRX2k4sDqPMLHJ6q2KlJyLzM7nvkzF9HVu9QpUfZn\nBLAw/kgXygtIKsUMQ2floSF5kJHw3pe4nAa4dYOVlHYUiaUKYgeH5F2jFjQd\nSTHiqQbwGIHiusewVAE52ITfPj5H6PB+UAMEhcugGFpQGMWLIfzJ+0GUQC30\nvx4M6QYNvw1XLkeP44paR+E3/V3V9NqIr/gCwu/3QHd7axFYIXi09CmGwYwX\nCjH1GGH/I7wYfqDSh/SXWLm9ANUt1m4VpJy5EquJrtOCrHAr4aBVo/ud2C12\nBi5u40v6GtOvYb4TKfnX6W0TC9cmS/JhQyctRec4ZYCO7q9wzuv7HMDmSZ3a\nqPrjx8iSp+NL/vlfKelbephY7eiWp5+6Sen1QXl9x2XuVi9LfuwGXNP5Nbwa\n/hxf\r\n=TAs6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYRHcLzPBG2R6QP3L5/nG3jrWgrp5TCiTlvYg6rKjQfAIgBpqarM6F4l74P4iZ9Jk/MC37kcAeRYyHzrCz93MdjJs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.8--canary.612.17891.0_1623704705201_0.9466402627929555"},"_hasShrinkwrap":false},"2.17.8--canary.551.17895.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.8--canary.551.17895.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.8--canary.551.17895.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f1545b7c1731f374b06e6822887bbdb23746ca3c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.8--canary.551.17895.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w1COrlokCw+hV1hj/uZ9KKbL/7gyUnipkYu7HJFaZ+svZISeoQUt64mwoB+EKF8bzn78dvICOTK+iSAa4AESow==","shasum":"1daee0238752037034bea2cbf2a02c49e325b4cf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.8--canary.551.17895.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx8TRCRA9TVsSAnZWagAA5eIQAIvLTDkU8tlk9RVudXYp\nJGg/+F0clO8YtXuBl15jgAUCGpPer0C2VFjKLhz+i0u1s/nRqcv8pRNfLRcu\nbXXgKCpG6sNNMtMbM9OOJge04QrUh/yqTAyUUrow1VYptChV4Tul35r+lJyx\nSL/0WMbzHCdAyB0rHgCYkl2Ds+fKHiylPq3OL5XkQcKuERoxhuE7bVwqiT3q\n2AjLOTKYib3+Zau+Wbm0jcQ2rUqWL/k0fYRuN0DdvvYmDHE+BxVzXFggzMWd\nyvclQcLjROf8jLFEvOV7zQsyga1sKD7UlZHTrPLw5tysypr67V38QTGn4Q4G\n5Fi302QC7NqoNsJ7Mn69lQq+QtwrIqLaPZ8Q9B8u3zlqrhznkOKilCY4J2Hq\ned4us4uJcNBU2Ku8GXThs86HooHCQ1Hl7Ijh6TdpB5MQLGj/jwA6jNlDJkMG\nl1zrQyTiogOT1kw5BcHeouxrSbNwza8Nuo08FhwMIwu6VnE/9r29YtDi3A6K\nFRGsmwqQBB+VpuU55G3T/+gnd1fiyYgIsftsPOtPMDWk6gXbMmvgp4FFQ0jD\nbfys4+4NDtH0LgWVMCrbX2ZIwN6QqbeyZph1AurHpkiFZ5YjdcY/IjOQUS2B\nl8gKIi0fdZgeqwiObUb+SY/jecLH/sc/ggnJT0wHvICCtIqiILBJnV8cSH+u\n2wSi\r\n=e/bt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFMWgBvQrnlD+qomoDnoSN2Eapa5jvl6CPzN391tHwGPAiALb+LkQPb3rYf8sGSIe8RiZZP2VedZx8Mw2I8VqO51SQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.8--canary.551.17895.0_1623704785647_0.055490892657921176"},"_hasShrinkwrap":false},"2.17.8--canary.605.17896.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.8--canary.605.17896.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.8--canary.605.17896.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"65672343b48c718f4e8249d6d7afe73ca5ef3049","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.8--canary.605.17896.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SaqgfjBJCuUg23uBUNINFv+V+vnoUoGb3qBaasNZbE+CoyWcF124OkPxe/UBXpVUUM9vqJHfG05YUPSdXobSbw==","shasum":"05ae3713da5771613544c33f6736f4ee6aaaf9db","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.8--canary.605.17896.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx8TzCRA9TVsSAnZWagAAf8EP/1hKZiKzT4OqDZbK8kGC\nkSzMVHWM9cWGFIht2+4unY+Z3HVEwSUVnZXKFk1G2rZhGKM+WQsqIVfUidu9\nFs82wFstTsNaf4mPf51AO9nb0J1IRBM5ZUQ/iJHAScv6q12x1eFS42RwMIgn\nsnUqS+wg8YOPki18SgUYxdefBbh0J9Ni1E9aIVvZ0DuHDvwf+r7VKCCKyVF4\nsfJ0ZMC545j3m9/bClL2gphmoHdhdsJQdYlMbD4qycDwPam23w+wJUX9LcFw\nMSIRQy/Sm+qK8a5JvV6AExnK5dvB+kAnrvc9X0lCW4JaO0/zkPMYROAWA09q\no4Vcs+B1oStq8k1hv0tpl85380y/3xcUMqlOehSU5+hvOxkHAoZ0CXBCZ1hH\nFhkNFvm507j3tY1Grp7Eh15yGO5GwyXS7DsQoQApf8o6yAYS48CXj6nFZLNJ\ndIyUxbXS3YCmKQuo4u2vh1fpC8vWRUs/qQaiF29iU0KCq/zmwXxLmicQWBsU\nKPEGLznYl2VwI7RmCN981gCHcphhIM7p/9skKDaiNPL8PZQzm9QbZKVdrLqs\nF3wvPUIqFCO+4MU0un772jRDpRPW/Fm+MPHx9OBoyk15fUUnMeMPGDHWRLQn\nAl0zhQfhFWSOH+HIP9HIpDGKXiVqtpPUqwPCuh7o45OrvJCsk5Ehfk/WauuD\nl8tH\r\n=jZOs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIGp7Ke61vrteBkWxZx/zMlcz2a1OO7sLfmZealb7BOAiBr+r/YEIgPlf9wo6XaBNd+nEMhzHSmrAIo4Gab0VJrdQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.8--canary.605.17896.0_1623704819090_0.2522927824255874"},"_hasShrinkwrap":false},"2.17.8--canary.566.17897.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.8--canary.566.17897.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.8--canary.566.17897.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6c873a4c548670570c357ad99848451ed74e8fcc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.8--canary.566.17897.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VAux71YK2Algd+1jubq8LdAPS7880TXpk67LOkciPypXtUag00MeVFyvyFKN+Mn49PWTR6UJ0mhWaiiaz1nNJA==","shasum":"19fe6c96f2789d75105eead75ca4eb3ddcc5a0bb","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.8--canary.566.17897.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx8U7CRA9TVsSAnZWagAAM8AP/2lSzQF14EHddwZs5nGN\nUjuw7mkLQXgCYMsDCIIKB3j30zeVz04SG9SuwgbXWS7MFw1bEaKUsWgFvYZM\nc7wWsbLNs3a0RjaoaQXFU2M905hpQik8U9m0avdYkY8Wke35AmoY2lgK6wO5\n8/N4Cl7gHSvWJII6eWrWJQ9SqR00jZQxo1JAo4ktOYxb5PzVCCUXG3j+gyb7\nBS1eomC3qfyWYg7XC8OfbPhjeatTjREN9QtTNYStxCeTi8w7JKxiYcb6WWuA\nMSPS2nw7tMe1SpUaTPO+i53GH+O3UAAknQkodiN94eKlEz/4XFb1C0gfdxMk\nH4N60HiWKUmSbXEaD8DSGWWa5+wSGFH+YVGEarWdMqjSA3f+/uiXj+HwQQxw\nJzUIEIm5ugPV49iQel9b8wfutoMeVOvatqHPIvhVJiTYApNcaZww5iM2Fw0c\nbfc4md4u5Dj72e1W6rtSQKnfARFQ4qXDFfvCQep/+j1kXMjX+FCCGwCoAXBt\ni1zI7Kz76MEdaUKiSWwv07UGxyZqpKQOLt9gj+mrqqtt5A8hwuDagrLb5jWl\nUHLAwHg7XN85krj/U4fA1IU/KNUxF5TE4xCBU+o+NcMc4rMdWIF6eNqpOeDS\nboPsheOCmkHwZnRSipUdMxwjzLlVv3LP9ttymLIIKptFcao2k8t88+vpHuny\nAE1U\r\n=ZER3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBiBxjGCvIUlBn0WRajw+u+4u46Tad+BD03HF5R2k6E6AiEAvoLJYh4cfkT8ccYW8NZkr29xVv4R4DKXGkNfhDtcQek="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.8--canary.566.17897.0_1623704891645_0.8721121274575718"},"_hasShrinkwrap":false},"2.17.8--canary.630.17898.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.8--canary.630.17898.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.8--canary.630.17898.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a060a99d49d3317dd40b7c6d7b1053f3b0f4098b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.8--canary.630.17898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WEeZDFOoBk5fHBh1vnxwZ2T//9drJxrHf5u1J68BkjJ98UjpGi2oarXwLjSpO3iL3NGS8ODN/qeMSjB/LTN9nw==","shasum":"3c4c9a581a6c52e8ce62359a0efa1d9c6ef518ef","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.8--canary.630.17898.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx8WLCRA9TVsSAnZWagAAFVsP/RnizFxa+2r4tske7oYu\nGGYPn81zrbT+DmQjoOZeXCQoxeFOHSuXJxI5o307OqnyRoyOH5H0B/Fkceo+\nRrp9DEl+nG1cvTGzZ1BVrmH92wteyIpX7M7n7Tv+BEiWAXtDsdvO8inGtLNl\nglOICbrGnoh4Ld5Hz0hPlZ1J4ncyNaQOgA7oiyDvDzhOfob1rPIw004B9+RV\nGnSI7hR34RB7obPi9z2UWKPwJ2dWG9tLUcgMlQhqNkPS/q0qmt5enJviTnQJ\nXJ0NdTEo9n5s/quWrQpCyAc+hvw7EJxSekGGETAezOAEU+AxecPzURpbrtlD\nMeyLKHrOBOcMoCWbU11OVV+OyBwlH8LJE4vAKGfrF+qxSrArBMQa4d0FGimu\nKqNDCZkvi7b4roBvnoeLP/kybya0VN2YBXO1Q4tqeCRjqb+yHbEyHBiVyxHt\nvRR0lAchPcEHpF9d5/kp5MOa0JxWROFsucQKbDWKrmpQb4AWOfhokHoP8DZf\nZpNEPCYcJWV3sSMK5BP3s71yMRbT42NYdUuhRsLqetPRMgL1bWJ4NL+Jlxwl\n5gZBMphbQHlZKNLzF3AR2a0kFFmuOG8Lo7jHYij1uS5Hwy8k44iZQuDL504y\nLlbJbb5XQBTmni1iMu4/RNpERXXaGI4I8gQHhddWJ0F40/O/hlb+ac1vWfPC\n5UIl\r\n=YZw2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCatcecv1vtBIQQHm2+LF3JS6VNZNu5SsfEyRloPTuRPQIgLv3Wlvyps8ghtkPRyvSF/xpvgTmVRYJo2r04xPW9Ufs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.8--canary.630.17898.0_1623704970905_0.9776898436341301"},"_hasShrinkwrap":false},"2.17.8--canary.660.17913.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.8--canary.660.17913.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.8--canary.660.17913.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b5217461cff43ea70a3b13dbd86f6e50b97954a8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.8--canary.660.17913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JfxLBHSV+pViVioCvnYfhRBpo+FVdfcJAEVlaAlqKVKSwE5qMVI/ZKzzpbC3T/y8MkShYwHmZ7C683y5UfXCVQ==","shasum":"09f5b907a5572d669cf6fe000c8afca8423d0e77","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.8--canary.660.17913.0.tgz","fileCount":25,"unpackedSize":88787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx+sPCRA9TVsSAnZWagAAavEQAJhIwMP2pLCZG0Mu6mC7\nGcYskwe+LaZy10I7fcBwK8TGYN0VdU6kVwzIM1BBXP3bqwZwUKZt/Zz/Sq+3\nixkHuqC8wyF8koIBYyaY1eDizU4mbCflF9XqCwIEUUGQ9a64PJieUspagSPv\n6iGURfpc3KOTeiwVnkiqAGaLq/YS0RKe35sr8cErkdqK1/xH1hYPvbCwNPJY\njdw1GDk0BUq5cgy5zHXL87NSVqqQAp+Fv+K5eiFpEh/VAFz6mpoqU+zAAntH\najQXFbOfMe48eR+Rxoep+a5FRRziy+kI+IlVno7X5ioAGC586zJNLWplc9d0\nDso8GhiF/VOcdk87SnWunMpv/0+XWUq71s50NJk9VQXxpBuVa7yr38VX9TSo\nMbFlW6k55bf/i+qKSiqoeuqrlwaAZKow/oK4gmguG0Kl0TyZ59h9WEodeb3w\nuUfXOnddKFPWtNCkD1vJHTH/0Qj0opZmgXnhvswYxGgcUNIQ/1/iDLBgreyj\n84C6NJWYsTtNpHgbC8HhayVphOSIZgdngQbsf1EWs8y/LOayiz/hg/7voIYr\nNZYvewqSxdEuVRJxJnzXUqgr65BtmjA4a53C/hRX3HqcraYzPjQQByR89B2K\ntJviFfUhH2VdXkGMYadhnbw9XXHjGlxcKbtojBAiksLsgGYu+izu+k1kqlRa\nfssh\r\n=WPcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEejiuKVJpNz2wl4heapG8QyliiSmFH9rPie49/grT16AiEAlH41AKZbeegSr2Tt3FhHeiSTN1chi5bWaRhTeM9m6JU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.8--canary.660.17913.0_1623714575676_0.5211710140990091"},"_hasShrinkwrap":false},"2.17.8":{"name":"@design-systems/svg-icon-builder","version":"2.17.8","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.17.8","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1568768cdd474fc16839c6f26f124d69ca33c3f0","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.8","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TXmgEjfPQ5wvAkWlkY3ZMv854sv0LeZq7KQUPrJd8P4v1dt+1KPxTp9Va66shiPRp4MkeFYSOH+rxQur1YOIjg==","shasum":"97c298b4a2ede06600fb6605aa9fbdc1240e7ee5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.8.tgz","fileCount":25,"unpackedSize":89151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx+4ZCRA9TVsSAnZWagAA5OoP/0hAxr23Hhts4SxtPSJi\n7p+v5bJZ3PUBi1AdwidGNlvaibEwUkZhbly62h+S9VWvYDVvmQGR1QhSVfkP\n/ThnllQXPxCeFE3kFwHV5T8AWoGPMg16DpEIQ+cB6c2kxpQNKt6j3GcDPe8n\nCAu6WK/RpefFLvbMMQh9aIMIa/1Qf8dL9ZBwWNgCTgxnpLJm2wRGNiZgGL9L\nfw3rkZLTsrBvhu2NN2pvWAXQbfSHaOCX2UCXy2PgbRRBAtxbGb4YrDnwJaqt\nUaVmD80gWpeMUyVj8iUFl+OfNZImi4QP7P1VdJm2iAJyXxyF2ylpIqLdnOZr\nBM5lMKbxhHV9eqQ9xc44mB7nkDOZxhihjlIGYRRDhNCtwM3xr6Qu0rS6dUAe\nplllKmVzcZhZOez0muZHg4cir/v+J2xilNXoObE/J3LRceCkC1SzWvLd3v38\na9MR5i8K4kJDH6/on56cq1Z3efP+Xu7EZ7b8wDSqS3B6qurEwRzfEzP8iDhw\n2WRyImagNEnBm3vcuIG0wvUG1KkCknrGB+aTZJAJebwugMVLJG9sbccod92T\nZBr1pmOezNpncdKT7dhS+iAiXdk/8T661zldJWMoY3I+NVU/fDIPyXPT2yC6\nbdzLnbyqfY84WqfhCflRtW5jU+S+irCdoJqtnxXkhe+BhMf81xgaYdFoDJDP\nxMwU\r\n=+ym0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAuqJGkruRl7MDxgHupDIU89UMLYFmpGeUB2v40mO2H2AiEA4trVEgTURbQtoK3sSaZ0GpSLDak1u6NVBbHpXWkyoU4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.8_1623715352922_0.5332520547846586"},"_hasShrinkwrap":false},"2.17.9--canary.565.17928.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.565.17928.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.565.17928.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a4f8d93ebc34fecc2cb785845779a2122d0c1c4d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.565.17928.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UTe46bxszzLZQjr9AkrpQigzw6/RakIX0R+FTvNMBE2stXhK6Wm4tiwewnTgZfwTb3bcqmi/odYwgY0JnFSeLQ==","shasum":"8e179e7cad4079d9957f1645f8f2bfba63711e55","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.565.17928.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyK8GCRA9TVsSAnZWagAAwcUP/1Gm+Yxp7q245m3PW3Ba\nBx3E46WLzf0gEDBPUJaDz+tk6BXZHFHSf+yGCfH0glIK3auJa/FLPsbfQDkd\n+Hh0WXN+e0xAsUJLy7q4hd9wAtgq6e4GmYxdqZgb5x985YC3/ubiVN6s+f08\nQwRCXmh2JLjL/DE/zmFhU1UcBmYAZ4vAdIZKAZdY3PZhylSLYEGmaDllQuFl\n9Inq5UOCaKk1X9Zf5nIsDwz9LBofm2fz1RKBkpzvI6UKGC1CdBTzGSVjoPT0\nEptURrK8HchKD7oR6B5UOePGbDCzvLP7NHLlqA4+Ibn+x1DUEdgS5KRNoh5v\nxjnaiOhZIajeInYwTfhkaIc46cMYXCnQdZAlL2ZCC6HFRUSHRuXn18FXcqM2\nbdfxMUVE0s5Cvh7TixEyE2+IOVGZVv6FW9NBiIUT0X8Js4x6iz8DI05LUZSk\nISBSOlTgSF/oIiH7zjIra0nWCBY0XqD4l4je3MdQeYHV6KWP0TS+WCDR/H94\ntpDHtGRjFaA+9Xol/dPnT6lSaVsI4nV8sAPgqaX6x82gp/oMcNPouQSNG+pZ\nCR7fwYHNDsRSOip5+2E+P9YvLo9B2h1i/TYSkJk0iPoecJqAua59x8n//2Av\n2Q5aGIwy+yuVTB7ywaVRyYSq3+z3hzQ2wJWtnmtOgPJl4dryHeugAqAi2/MG\nfSZX\r\n=6Jqh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtHwB+H6j5YHRYrCNfFhA3lYMHMAI17uISe/ilG5nHHAiAn/GJnn7ILTRelmHXvdAMPjymCkQxlKSICwW3BFDXcSQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.565.17928.0_1623764741962_0.9255834016487807"},"_hasShrinkwrap":false},"2.17.9--canary.630.17934.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.630.17934.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.630.17934.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e10f05d2394410c072612bd737b681d704e1cfc3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.630.17934.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iIOcg9zGTJSfnYOHXD5TuIFmsk1Dj8lkWzEFeZ0Cxc9X2vd/6kQzLWc5Dirh+W/ocpTedvoZbow9aQRVp8PdDQ==","shasum":"98ea6d51660dde48cf30226d85354d1690c1e6c3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.630.17934.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQDrCRA9TVsSAnZWagAAnuYQAJFogzfj0fGLLMF+prZJ\nj9j4aVyct/Be2gasoT159mK3tWy+VAaL/6wTphL9RjBCGV2JomUFbHk+yp+q\nbmOw+G4/Ht72r1heE/Jp3WcTdW2PnLXzZT94F1Orebtj9XPAa4emOMyTTTs8\n7+0u5/Il/E+mKfUNdIShul5AuxdCWLQWGG8olrR31EyG9c5lpsBEwNAIXj+2\nchw7MSIN/hb7iBunuMVS/mBVTY0ieklHBSWpOMWcS6/0C3hShtLf5n2ToWTU\nbV4YkJwm6jxu1yAMwyetlVFX93w7xj7pAq+4RVk2w6P0relB7CzQIUoU447A\namuT5dFyjk6G71qH93ICW1X1w8W2vGsWqiJVX+Y1oDvKUuvEIOa23CUzIT9k\ngQlQEk2yPdOkApP1nHbu+HTHD4+N8zOpHtyYTd+qyUPK6nBIku1FW/OvYcY/\nZykgbmCnqTUbACBPMhiQ+hoExJvMbvbfYhXcz+BQHqPZxHOz4Xwu0jJdHJwB\nS+nyEqBv6P5Cpgq4WvOxXplyFlDX0jo0NNIRx1mcu97hJVhCNtpgA8o/NeMO\nR5KsDSZ25yvFjLgmpX7N86qvBClnBX7uqfB7dpJFe9gIDqAB48GnjavKm1uI\nukJAuMgs9zUFVaj+KPiHayabNTr4ldA1DzWd0S919J7Zz2tbKKmBf1Hm52Wo\npE28\r\n=AgGx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoS8jfbzURlhN6cyTEVwT3CmltTwhs49oDz7RC+RqysAiAX+oRzNPro3yAdxrHQyEFEcE82+0LAqE80vY4zS4BvaA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.630.17934.0_1623785706938_0.8851338926513148"},"_hasShrinkwrap":false},"2.17.9--canary.617.17940.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.617.17940.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.617.17940.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0469cb9da504f5a56789b97d9a697761d3e9d7a9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.617.17940.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sZlQN1TReTEMLYUj8in2qbPVTZbeU17wI8aNgQkTg+F1cUcIgvKvgwqvmFI+gyCJ+WclWY7WK+NdQ14HzPNjOw==","shasum":"e405c45dfd109cd5bed94cd1469b23610584d955","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.617.17940.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyT+HCRA9TVsSAnZWagAAdj8P/1cKzkRs/vFJgnrJ985r\nYMGQ4TyECYsp7TN+dBSY0nhN0q/QcNE6m4bmcGLsFn0X+OGH4igApi9koqYe\nU1t78ZdGYejzcFjRpiXSp9pMCQh6db2U3Xg67EPgdmMeCNpDGxe9wHjzUQ/+\nLwITIKZ+0GcPgLaWfyGYwcQayQLv2WSlMYWQbxsvW7eBry8xCAgq0Qa8XcWO\n506UCn0pFb8oS9xr4KEzLW8PpBDOrn+E3+rSlM8xs3hQa0gmS/1MxQRM+gd4\n1O6EwI9ljYdng7NVHS3b+RBfkXmPHkWTy/ONsuu7NGgOR+zDVm24OOfBkfHN\nWlXNuyg4rngDO5Ak4n4d7bEaxpiBsiIeryir/rWdDpXe1ZfsJHIbdOD/9ne8\nOfzBwthFcPhIrI+9bLF2twnXRL89c5o200PS6W31G/k1HP5M242FQyDqR1N0\nZgkzV+LEwcf7aByhzlVKoIazFi4c0RYWAy7tMjZPIIYPsz0ouzLbjAE9m5SC\nn56UM3Ae7eoy4RgZCgSU6fBYaFsOsBd+YuiuJ7t6H+dQRv1divMSRf7GLMDu\n6rbIXYnHhZj6mafCOtU1K26cOBWUy4H8sCiKE/hIfh4KO8sGW0z/f0hPi15G\nJ460x2hAX3Pj5JULY3OTvjI8FVUA/Zsw4EE5p/LHvgfszMh8hS2+PoJ2iOrD\ncWnR\r\n=EHhc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXgo7Kct7jKn5+Nq55krYOl+5dNuINGPCfWJ1NP+EaggIgPY4d4XmXPhEE8FlYlnNdIHJx7/yqpN/RegI+q04DhYI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.617.17940.0_1623801735679_0.23685249709164746"},"_hasShrinkwrap":false},"2.17.9--canary.587.17954.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.587.17954.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.587.17954.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e7bb0fd0430b1c8d1856031e3d27478998b2ea89","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.587.17954.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cMTdMSE08PwYupd4Yd7kt2doPY52iHfDaFMhAoY9ayF1seE6XdyUh6ElsZcQNldytLLbc/lnpw0eF5q3lN7Tug==","shasum":"1cc1c8c138a337a556df2fe41c0282a4b52b76ad","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.587.17954.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgz42/CRA9TVsSAnZWagAA1lEP/iRGtdJii7vmEgt4LOej\nrxjzxueRW8kFs3X4fziONSI970HSnW9DGStu5n2U2923alCKOXNNu16VeWnH\nvP5jjgVGPPxNxdzQ4GUk1c6SRctyM3LIDSztj70EqOzKzU6qfb7RV/zmJ7Um\n60IS2rk00WkKjJdfXpxb2nklEX0NFfk+Uyak2mrLb6BT80dV8ObbT8Sr9jki\nCqoEmNaRHVkkaIzkpxNl0nW0uaEJ7pwDBSTmjgc5T456h6sLKzWfHp/dp6z5\n8I477n1/5MItkamsFhHpNAOH2PIO+XZmhijcglMjDGeD+FbdOi1DU8j3bdOF\nsHJRDXRb5FprJx7rcn5wX1O/yEhKqlQcX2JAilG4dD1hVOmh9eJVLZ593tsA\n4uO39wkoYeVtAn1lWIIr5MuY43uHCAy0HgrpxikFWw5+yiXKjv5f2APOYIKr\nxM68wEU8Gp/10l9DBS1053OMIKFDKRTGq6E/5Ny3nYAz3eb9FIFSZdFernEZ\nQTS1a7gSERi3b4oWoTKqEfVC+Rv3vyrJ3YY/X0PxV+y1artfcU0aOG06tzA+\nWc5er3Ls4U4W9kPFDsVLM5ECfZVYtKYsUqLC369uDgqtZehDodbhw4XLuLYt\nSb/vXQ/L7SMi3CnJNYJAq55QgZpaZdvISp7KrJr+v9xlaoS1cEztdY+aQb8P\n7ZHN\r\n=nc54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbFn+oFLq/0st4TlBHjihiVy85MHlRIwnC5isHyl0pHAiBorYNm3ePjOAKpuIIPmgVBrAWiAtIl8HHmAt+WfH3SJw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.587.17954.0_1624214974926_0.4779757540456513"},"_hasShrinkwrap":false},"2.17.9--canary.617.17964.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.617.17964.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.617.17964.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"71bb284375fb76783d63fecf597f7b979f2d8495","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.617.17964.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uD3gvdqBAf+nROO8i0yj/lqhkSNEEWmyKGtRv2ZtRN7fhXO6q21BR92wGuN4T+jg32idfOilLhaLEG7qPxwaew==","shasum":"c3110ac4207cc9cca249afef23ed09b0f9b3c4c9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.617.17964.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0izNCRA9TVsSAnZWagAAPNoP/2fUKhbNxyOlkRaNNypM\nLC4+CUbhjgBtgz3nbEM/LhIf52FeVayc7JzTft37WkH7m4ZVAyaDdmkWqnY4\n1gYyT0YWZLF8P+hVoQ0rV3dIPj062d+PlLKMf9DYQkgDYVF10gAysDMKuMge\n5H1ZztAYYF8V1taAHqiIsTpyKr71+nXMSEcxCzroj1VWfIvPhCR/8zF+t549\nNa3aU4GZ9ZcCXTBtf74n/PCxr0Y0CGzXiWVjubitSq8O0aMcZI1+4lWkKUZs\n1hBd14ebcoqLCSkKCw8F9w6u/kdyfEOTUhwL3pP6hJD/wgzd80Pxn49DlHPD\nzczr9uPhl6G55zplHhVmKBVm5vsJELxwv5Nk8VsITw+P++A9JXzEjATWiJQH\n9YOb0GlxZR+sXILR7T1lc5vEI0mxa62MsriRRP0hbORyEpK3/ARrbg0oxQ9n\nN28g76vGR2cEVWbt1JauCTQYkKwQ9Kf5B8nexwLyMeNBfUA1TyGAsExZ2Hxp\nqfgPM7AfL/J0XLYrnWiHQ9iFZcOxgpwCXjNE++TbRWNJN8tkBF69fgK9eAAT\nGnJjdswRyZw8yyasFlBkuxSOjZEYgB+Vay5nj61gK7GUWzrNHf6eY6Igh8VI\nvlHIYDWU+Jt1En0cVZ2BX4uVehhi7sDEtnR+gN8PuzRUJQTibAob0oV3T0Jy\nJENI\r\n=Jf1P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA00nXa5MiRHEUrDgfYxV8jv9uvqOXbGuP538qIoHLw3AiEA3iX/BMGZJziqUUj8TVHlid/6yDveY1PsrNrY+vI9ct8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.617.17964.0_1624386765243_0.19008914344161942"},"_hasShrinkwrap":false},"2.17.9--canary.587.17970.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.587.17970.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.587.17970.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3e3dfaf66d92722df8b847ac0d045a99799a431d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.587.17970.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IOu80RwqVZQoJj+YWUghz0EAIR5Cgc/cEwqQ4V3IdsL/CkFHKqgxU/Tahrr2WuqNLU1b4UUpu85XrsDllzFc6Q==","shasum":"d63804880df7dc07e63100e6104b484aea24bad1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.587.17970.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jdOCRA9TVsSAnZWagAAm3EP/26WH36Ko1nobt6jEKZF\nDev3pW34gVZeJLCRwO4ANo2poQ13IcvgEnJ0lD+0coq7WKLXhWAJjTTduuL4\nyxQtTjjfS8GZ9VFQhrkFkeNeUALNe84L6Nejgp7p2lyjHsFQGTScqHKE6AWn\nQIezlTl9JlmZJccJAj+4s92ynkPRYR/LgpesPok5fiI2DLh2o7DTBQlPxVuW\nEcLl3nu+BhLKASFN5D79xLj82MZU8Gwgd/el/N0CsI3B5u1lL+IDuFCOiA/M\nGqifwECDIpu0NESDgccoTnGrwUQDS8AmhmpxfcPHI7/d8uqAkVVIt9f0jt7s\nEgSqF+h8MLL8cajNh9+l/F/gWBvNOLY9lkMDTgu+hFIP9BtYg7rArAyW1CTq\n8SwLiVtAMMAGeSCbY2ao5E6NzPvIVWFjvksIcu22Q6K96ClDzg/ueZn01k+3\nJ9JuUW/Xuwg7yj7d24Vm8cxiScRJFJtxpGwGFCwfYbn3fTpAXug5ndVIWz8F\nzjMTjrTJbuON3sk4xcJ46CnP4i5pnpPcCeqwU23aS5TeCpvgyCBLao91h/8p\n0V6SYlXxt6nH0BWZRktgD1dzGFuQSoiIp/mE18gRXfFNS+weufbGjEG/h5YC\noo/HAj8gAqKsvrKKGGg1ZSqRZiJwnP1rZjOOcGB2Suu3xSuGPTnpmg87V7nq\nou7U\r\n=Kvdl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3iG6E+CKVX8Lxf3IRR/oT0e42GPvmZTCS6hD7i6Ow0AiEAqgOXK4i5MNJNh5TXmYEjJJYNQsMPWUJtsI0+gJqxYHE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.587.17970.0_1624389453880_0.3796751965184064"},"_hasShrinkwrap":false},"2.17.9--canary.612.17976.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.612.17976.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.612.17976.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"95cc0d7b1ad04894218bae067ae5b59852ef94f4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.612.17976.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-btmurddt/QK2JoQj5+LPjpHDnUgcekO4ASsjO0/nd+paUZ0EYurM1jistO5p4T75yB4+dGLr80vDKjuWHMbiwQ==","shasum":"34fa3d7148785a63f287c0da506eb3d9d047cf3c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.612.17976.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0kskCRA9TVsSAnZWagAAE/8P/2bf3CjyiunjDUy9zb6R\n4XJULgCPKALQZ2yYV+7fyKEjQS0p0ICkam4ckas5dp2QIiUMKsa7pEJb9bSL\n7+CAhXveW0Xt8jajmflx5yeEggQYkdN+bhvAzsk+deYo1L0XpGgp96gGBL2b\nF9aRlg8z3elQqrEW6HbPnHkknxWFZ2tnn821B3R8/V2RzLfkTrK/hQJWEFhK\nP13hCGHH6fb+CX79SlYyvjAmlJOBhcoYlEfBdftNGpj6sUalq5RISZ0hFXJP\nnItF76frUwtwvSlc2uGlEeuNuF5LewiGFOzO8g893LO0dFcV9HgLLoXihRn6\nSpqj945IHzQLhayS2fAacnBFXlpyhO2/bGh4XRG1C29FlBqtrplgcJ7gxsHj\n0c2hzrAdsPV9clj8k0n2sba8vYuDxfj4TcdpGWuJQc8tzUC99OsCUWWxKWML\nO+AOy2vBqjCU0c9HeoDF6rtdubZAi8EBMdrLZTdO8ELTKXN080Olwpp/lPvV\n7JBa15Cob7zz5bepZ0KtKoZyAvMJYpcQ7k+gfvbmvm2vhqceYKq6ujAUpAlx\nygQLQtzpUwWAmnJiK09EskjWFHGaQwdkRUFkcoRtTjhYcDuPqErVpZOuXLVi\nuFzRdhx869xtIuWt/UoRokYOzgmAYKd6f3mevx3e6+FAEp6EvMqWghp8U546\nmY0k\r\n=D3xW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEplxGqCXo4yD8IQbdeBgloYbvz+37Rx8tk4HBGXqtgrAiAmBC5eifOGFhXLVWNMOavOJBxntBdquziczg4P7nDwjQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.612.17976.0_1624394531882_0.04850756619785401"},"_hasShrinkwrap":false},"2.17.9--canary.616.17983.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.616.17983.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.616.17983.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ccf08e540bbbaf8e217131a7d8ed624c763e9122","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.616.17983.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SeBw+7Rc18Nnow6H9tHMfvcZ3NucsPdtZ5hbs9Y5wTxwkwgyxLMhsytymO+dHPORm9SmClNzAHUKD5f01C4SnA==","shasum":"996e3d9ce3090f75c3629f88437cdd1a57cea069","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.616.17983.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1cl2CRA9TVsSAnZWagAAD4AP/jYxPw2Q52RoxUiCoNT6\nu9OZPDCBs6uI1IqDLPGcVSZ6mdNTRNeFBpx/a3VxuMRw5K9uQRwJ9fTegZSu\nz6SEMxCBt+ZQeegsB395iRDlPbAZEi46GpskoSio9jrbSmtHKUEk8kDbkCdW\n1ksR4WImxkAfGNj0j92mjje9e/PSlzEmOejwkmFlDR39KweTkS7laNuid682\nK9A9USjkGgwWJzMguyT8cV0cQauzJ4HIOYZXzypVBmo9oUHouvpo3bs9iws+\nh7EKnaJRRQ0eLlj2z+a2w0cIwcivDCKq2nfDnDKr0uijUcA6sqBSn8eqZ6NJ\nOQhO3ALL9Op2ORk7KUvDjPjtU5hgM1xdZuFLBW3CI2j6yy50ksS3xxzMRfye\nFhxdQX3vNdpOeXRGJi8RoBOBtKVvxy619Z4LPaytMI4x6i1FVZG1qGoMa6C+\nDnt9Qdqj3zd5siW73tsgw4SqBZPVSdVM5REeqMUixACPIYZdO5v3WCwr4z5r\n8o2Cwr1lyLd6oWjBP10fcSgDlgL5vQ0Q3t1gVT95gDTQaq0LdoV9cCQE2PTl\nYKtCGajwa5lgKoY4shgOmvAA2VUZUg65c9g9yzpEZBxtqTM7cs5bvrfepudv\nwTQJw58uE8SI6zHMXduKWqmUpVPXPUEf/t+v8C72OFwwNOCdzr4jt+EfEqqW\n18MX\r\n=Q1U1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD74LLg+zGpkAJ2avKKtWlpSLpmSPmHO5X9tBz/el7GkAIgeivhfPw5e5weG3nEPNfFV8K/yU9vU8h5G+eBYjV/9tQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.616.17983.0_1624623477556_0.16328176505950642"},"_hasShrinkwrap":false},"2.17.9--canary.617.17991.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.617.17991.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.617.17991.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a1866323dcff8d265da2da1ae1acc5ef1c23b212","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.617.17991.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GFRO2D+lPvhtn4GJKvw/6owoROmVtes4Fgu4fxr0adK1cB/i3sW9YiJCYW7LgaUvn85HwR0S85+sjCdo4xLl7g==","shasum":"043d930c2741527e9f1aea04721a3ca9f6ab2515","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.617.17991.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lAHCRA9TVsSAnZWagAA2XwP/j7heYzuquW8IVP0BAh1\n6cNoMb6/P4evM8tFw94fNiS3fO280hYTRi7mu8ocuVbUsB8r8e+7Bqh5wFNK\n7v7yrbxxscP37qSnVm1qOiqyghRQZE0SLPXztuD+NhSPh5EtX7gtLi3zfi4A\n4aGMrHE1LUmAPOYEeP1pM9fag8Wm4zbspQLjjyZF5evDhrNuyU0CuMokA6Bs\nrvVr1IIUE0ydDSfdHYdpryCQ4tsojl0jbTkCJRHe5dyGamg+8uvpGNlFU6kJ\n1PQHImdQFbRX3wZcC+BaLV916WJ9NwZLKqhxTZIcNC3I3Br+xjJA03l5p543\njCl6ucWxsd0hVcWs+gsCJLx1A306aQNGubpGOdEieLjs32NLy9cKGTq+N4Al\nUwXzXlOYs1iMrMduHU7N36315ETSr9oiVbdD9aWU+I0NzLJDZLY8x8zVxlkQ\nwKf5OVj3gse16tWcovacIAj9lTwsCwluyqqZZJGg/TKN/cn68qgk6oswGMM9\nYsUfhdLQN3RTGwiZ83BRiE9isVf/8JzcPd+w8ojY1wtOgV+QMAaWvVKFlk/w\nfIBuxybBaDYLHIJFpt7t+E5d2AceLaTgqdRck0rQQ1Y5AGcu0bZNaWjIqf2A\n/com1GgnsDMpBo2mmfxoFezoXSh3f3WliJkfa+BxS+XWTN6I+c7PeBFFLh7F\nwvvF\r\n=HGeQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3IxpTtTUEiMGJm++HbwCYvHYI5v78/vLfu4uMEVuyMAiBIgpjA7QIWVS7XVvA4UH4yBJmNnxzvO7JmggAx6o1vvQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.617.17991.0_1624657927284_0.8024091468529295"},"_hasShrinkwrap":false},"2.17.9--canary.576.17997.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.576.17997.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.576.17997.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"91b7694f22e2ce6739d21a196e482b2f648a6a40","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.576.17997.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eS9Y+/JaZ6Vd1K/MYB5UA1wclBTXOw5fjqSEbSQsT+8vnFEYXKHaccmnJMalINElTfv+ONepkUSnmDuk5DEXqA==","shasum":"e70897610615a9c4c11ccb4f975b968aad935fe6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.576.17997.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1v//CRA9TVsSAnZWagAA2SQP+wbg3U28Fo9P0xHCzwNX\nAGL3jXOn4UMNrEoAWmsxI2sKYplP6yS121HTr/RjVCBVOejmlfCxMmixLl2v\nh/FZD1R9Fms91WwCiqJVmGRRx+VjjDcmq+lxzMXsuGRsTcHT99wkSrfe154a\n1sks/QhYUH0VJfBHA428hkr/OW7/b5fuyXtg0H5J3PrydSo9i9NF9JEQHqx1\n+0R0L/ZsXDMWSm3W9Kar6QGg2B7sAZWgNTGa23SJn5vFydLmXNLKsZV9FXvk\nRZB/OnXdrl/SxltfjmYuktU1GanN3oqib7NSu/Eav+5iMYNgT9qxC9Xfccpo\ndxoy+2g1OdasWzgRvZbDkQuCGwIkLoJWeyNnlssbn9iGudeHA9oiPu6NMGaG\nLUQrfYMbWnSrbgF8AUZaPFQtvtvbxQfKgEXKUPD4UdwgOREtTT9/iwJQekp1\nmK6f9h3gSvNRyskFCn2QxiMDyGZ09ZjsT4M3u7qw2AwEyoeZRsLrZvvaN5n4\niGctuMR47aJKsPcfWOMikZu2xQnxim1spu898JfepfDD2p+eI+JCEw/ODQz9\nieb0F8l6cPw1bjLaQ9ut0wcIyx/6C21nYh/bfylWxG2yLo3O0vk7ura1wH9l\n463okLEvsxkl0qPHRil5nt74wjbk2Bd+ilCyTjtzkJdpVXFpiKqgOaR+oGXt\nkQLI\r\n=y750\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0qSJVy0YProzzgYmsXlaplec7tiAgngiVekJuecS3ZAiEAnZ5oTzbXT6qNDaPTuqjxLsm2qSsaprO+tNGP5CJOZ1c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.576.17997.0_1624702974724_0.5477043997897699"},"_hasShrinkwrap":false},"2.17.9--canary.587.18009.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.587.18009.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.587.18009.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4140318f9f2fd79334a2db643b61bea91cd08e76","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.587.18009.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TOb+xcPLtr/mTP9A3H+hsp7R0QFbWYTTIfkTAEiYeLFTrm2Q4scUWpfNgwGPP0wuAScTvNqAAwoI0EC9wM5Ypg==","shasum":"d885856c61530c0e12c4c9b5e277d9693b13248c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.587.18009.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2wlaCRA9TVsSAnZWagAAezIP/1NL44cbuYW335CaV+hp\n4vwPlbxGJapuPNpn9y8mIJd8a0WWxRzLOc5f6ks2ipdSARoL57lesOemGGjA\n73Wso3O8ep5cj9NKDy81EAdGNshs3GVgKeHxDBJv5dkTjQx/hMR4a9l5i+5j\nZs8nnIBh6UpzSvQtzDVplv/SqyrK18kSiYe7yQhzrW34AvooC4x9J9Iybf9h\ngIz6ZS71t6jRQIS+OEFY5sA3cud6pfybsrXrbv+EhBHultPseOiATdB09bSw\nbLTQxQSgTnWI15q+TzYR5fFA08dQ5HPL91OP87+eFjWCWAO1IuH9cgdHTygy\nieX0X6ZTPzkP1weivzbojHhkIDDdswacveBzgYLkxyloQ11D10vgZZ9WPrn+\nAgXTkUYNMTR7G8ElGhfPAHvrB3Ydb4KC7rzs2Ugu3ucTJNi9/wBmNJESl4Al\nKIEABiN2kFmpkzvg/LUhOabmg7506mggQN01+qtk1YUgn17ZeTdooqrtrJ7+\nHDOeeGVKYr5wnJlFalHcXBRkES5gtCfAkKpqkRaz29twPPHz1q3HNiaThlzI\nbZuyRJ/YkF9UQEdaa6CpCRlATZVccyzeyRPorMYylDDcv8vag+Z2+AJWyyf+\noub++DCzYt0hi78dN/hhgHxbE6I6lNOFPFVjpRXKJbnkBbhvkd4eItBnORtI\nmyoG\r\n=jKvt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7URplq99z2ScCwqvRvYv73nGUc+jdAa5dRYkUsLEFWAIhAI133wwV0o/90nXljvwThp2INn6B/cpE/Vxly1F5FExX"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.587.18009.0_1624967513624_0.6309892530356314"},"_hasShrinkwrap":false},"2.17.9--canary.505.18018.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.505.18018.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.505.18018.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"dedf0c7f69973c7e43540ffa160c2193e8049729","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.505.18018.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-24Bk/jC4uoAWG/Lm9WzPJ3hAhnMBiihe1Ku9gomTEwhmOeLL15d0DhkKMD/ujbD2QaYYZnelSk/pIreQbeiUtQ==","shasum":"147533f21b9b7745ed7f663dde489bbaa57a11d9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.505.18018.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg32qxCRA9TVsSAnZWagAAtjIP/0AYSdiq9FtMStMo/Zn7\nsNq8aVm6yC4TAs5wmR7lj//kQIuF9XspbileE5NkDqO9brgJX5q6T5oK7wSn\n3973Qx0KIJLhY+g8ogpuPFPFd5Gszdnyvicl7Mg59Am9eCSAON1MsGxFFC4s\nn2if+3C1+gMqU5VVqOrkO0/qng/1VBEqNcxlwCLtt4lZHHk7cjdfvOvAp76n\n2q1dKFCVLulv+jHvPyZHO+hAojcwMuKyEuASdhXvh+PtZOqtPmLXE61tjHhJ\nWzaSvFnebI2saXzF3VZRT+5uZAeFoMAALo0W7bFLiH+64WsDfavSD8V3V830\njFrt4E2WA1hPhnkEJC4p45rAolFdOQ/rRpXflF+H2z2uPao8wRiTI2x6lD1U\nNg5PxgZiN+gTuIJWTK1McbHevoX/EIbycxs9dQL1sddpOfMjqaDa9wZeM4/O\nz1oUfT+CmgY9G6aFjoFps3wEiS23Kubsc9lv/1wR/HSyJ2IhgmZShTwhZskp\nyeHVaAISh3OCrem/YJ/NpWOW3PJtnHN545tK8VWvETk2W+9F34jw+cVfBLZT\n+Plv9SY3pQdrPdE63xJA6bpoJ7W1unPuJuS4c0+p/bYuhvRbTbA9IbbR6h9t\nbxCHJLNkFVn2R/Pp8eGpRUhmID+SpDfWqbeaiEwPPCh3IIIcwiJc2N0MEol9\nV0Ff\r\n=K61c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuXa6LFnP8MHl8nDhnvZCzHJiNTZqXR7k7kriePRcbpAiB6abBG0XyIkE37qzAEJesIZXrp60JlF7YmJ+pR/lc2bg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.505.18018.0_1625254576810_0.33970831461341033"},"_hasShrinkwrap":false},"2.17.9--canary.604.18029.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.604.18029.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.604.18029.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6d830e4c78b24a9b90d8f0399b83fafaf2ef2f2a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.604.18029.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lz5LFbHpMC3nev8b2cxARUGmTxu9q4zef6YYU4Q8QGqz4reGgj3Wgu6mdGxM7FkLtEGboxsMjld4m8xxj9A9IA==","shasum":"8e2683eccaa9c5e0a5c08518c333d36fc70a936c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.604.18029.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5K1MCRA9TVsSAnZWagAASdoP/2/AN9NQWU4FmJ3B4P+O\n7D3cNn+YX68C3uR+GdFq3dP7bh5lMagzZWuaNHS0g3zeOPLo3FsZKqIPKPfr\ngBF0IGExC7zXiZUIhmVeifdm4rX0ZDzaiTMnidsad86K7Vk5RCDtRdwt/pJs\n9xWOs7VX3VQGmbNnIGmH/bllx0+eufmbW4N3k0Z/UquGfiXvqh08FZaa0/Ha\ngqdD6k4W8TvfMIKqBLZ5TeXzaVMSGhEwk7HGd33zxB0TmKumliTxUR2f6m2x\nKN2yXdE4NhNlegOjn8LBXUGKznAwPY+dEW+/Pa/ZMyUw1yphna0pjX9B3ELa\nq+FIXA4n5zvtteQeZHeVoBA3Yger9K20ZxjQc8flwIyTRWwpMafIbu5yEr+G\n35DOwNB1pB7d8Oz64gwnaXXH3dGMakHCiifP43XyoyewtjmIoiXRvajbUoU4\ngqDIXeZrvV/+dlVnZvAI5ZvRk5jSueUQEAxPsZioCkOfxi2LJN2yiQTW2HVh\nx+RAnJIy6O3KGxej2P6PLMrhv1cEX18rNqmkI3QFW7UwKomiyE8l+GsvK7nM\nrXvmmXW1xyimxMbAYqr1ZnkdUg0cQq9JzYFekjUma178gvgZu0bLNI6Y+xZn\n33arbuGvOXSEFA6nXVVUSTSamwob5s0tRitG/aCWOMWmWTOBPz2dSOqJXsDq\nEvHn\r\n=dwgO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA46hHJFn5jy+gFInT9wbrkGrscVtAb5yvvzHpBkFZIaAiAIXBzzU4ML6NoY16QyMYbo2X951ssQYcoVpWKXqJqoqg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.604.18029.0_1625599308518_0.7394480595610902"},"_hasShrinkwrap":false},"2.17.9--canary.562.18036.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.562.18036.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.562.18036.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.12","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"962d9caed80998faa1c118f2c7d80bf975089259","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.562.18036.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-84N4gwaaWHZrY79di+CYtvMFo8nblp8VkoIMd2l5R8X2hho0GRtD5/L41hd3OlwdMReqUkRdO0CVdWPNhDNHyw==","shasum":"0ffe28abefb727c6d863c3f12ae2b0f2a248bf36","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.562.18036.0.tgz","fileCount":25,"unpackedSize":89191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5NeHCRA9TVsSAnZWagAA7gsP/2Ou0Hfxkh8nJC/qVQ1g\njTqCqlDtaF67H7mbcJGnUfwIVrs1JljRSX03FovFl8reO+5wzGDljljFcjFY\nXe7HsKep1LoHSa2CWl2uztDiHszZVimTQgS9uqTvhbHWx+hz+mTmuMG3Unpf\n4h4m+ls6/weESzpeeERvzaanCwB8R2N/+79tJ9gYgs/xpkvF8QcIyC44lrBx\n5iAI+DHallPwNGodIbk0w050HJqz7bfE2TWp6nOf6MW9IkkL7k/+ogFoB7MZ\nPEcV9GbxsEaF1vZsq7ccXoVYHTq3Ylm4gKJNMXt2RHIQFjbt3b10oqn8YfXm\n1oK5Ag5H9f/sdMFYqnlCQMm2kR6JVQaq6KQ8tQ0gZbwQPr0z51jghodRRQQN\nyxxd87o+uy/ur4brVau9EvrHN6JyQsx3YUmI+ppLvSkacePXBzygasGmgBdW\nccUyaoGvtBT+ISzI5sVPPEoaVgmzMwT6zMZ9rOSngyVI+oI+IFGWwZaX76BI\nfRWIyOclh3b4YQDdaEHKgV/+3S0St1YfOrGBPAwNEOM4fZg489hY0kH6I3/3\nQAl/T7rbTDDyKDeqAvl56d66NF3ZSsa2w816cd17K4owLN/SJ0/7++bBYDXE\n3YOI0KXfPpI6VffI4NoQoXFr1cTnNo0mCfwyS+e5LJ+49yUNC5VpZlDp+kp+\nEQem\r\n=EZMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbdNENOcyn5xtY9JrGAWxqzfcpy6CaXReZVdOuchO7fAiEAgd9bAt5syqY01TikeCeLWwl2SMvF/xgvQ5v7BW0iry4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.562.18036.0_1625610118909_0.5543178792321739"},"_hasShrinkwrap":false},"2.17.9--canary.612.18042.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.612.18042.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.612.18042.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"15ae50d7235a18c7e790a780a530bd6c09c5263d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.612.18042.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-flpdJvdBzZm5HCZx7EwpqwyDM8UNhXJgba570pS+Pwd2q43HTyqKPo8CIMhCAFcYlD9/bq5xhz1TsAe1z0NHBA==","shasum":"b2816b383cd9dea31761201fc163acba91459c1c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.612.18042.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5eotCRA9TVsSAnZWagAAUGwP/j9zjHwe3HjJ0v7hIQsN\nNv7gqg+T/U+24ZOwbxHTVJssG0jPnT3Uh741nIcKR35aziD3I54qmMFq2Hor\nQodPmQH3gbdppoivWxDwq+sSEYnCf+ueo10r8ehfqdY39ICQx0AS8ZlL/1sI\nVV0IXMc5M9kDazchZIjV02IT2yGxuE0ynGs1fZtpU3PKiXOgDQ2B3A4KSDBr\nwEmSoFPisOSKMEikYTWymXl5rj5JxsqnUxZ+mu/BvpiVLw5khjYHD9kgROUP\nIcp0UoBeCvDQvbq6qE9pIc1IODRv+wNjKaPS/U/z0Mu43m3I9Q486V+POIf0\nNou6QynmvMcBZ3DhCe3yGYElU1IvFJj4/WSA/MKdaRS7JUQwFxCqNnUTmqvA\nnZZNB3zbA9MK+vpdslPT5cAinzegLyBWL6UkN7rqH9MrHpfyCKDBoh8W2bFJ\n7GheyyTUG3c2jOnmjpTVJhmY2Eya8+f3UxfVwr+Z0pjktvZgOSqnqWUUuEYh\ncN143peDSWgkc87j9ZkGUYYxLWHFXKxywihkQ2zONZjTnVq5c1+xhnrWnX8j\nHbbibNCQ3owuQZM1QNNaklbojI/xjVbzcCzhrzt8gsucFE/ekRQ3PmMhV2kk\nYCfZKTm2872iEC+vcwvY0zr53FJON+1TxjNTCLbUWQgWyUoyBdWNiUiob3p6\nIFY2\r\n=kftC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhmeMbTWIkt0vBtrd13C9lswSu71llo2IuSG9bXrgcbAiEA5VVPN+rF8Y4WJM7y+x0u2wb7SbvI5jijaYTD2dFuU+I="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.612.18042.0_1625680428659_0.7209450885900353"},"_hasShrinkwrap":false},"2.17.9--canary.578.18048.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.578.18048.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.578.18048.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"20fd10a9bf9b1c3269bf759311589ca33985bb23","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.578.18048.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nKieoW6N/EW53Zp2MZeH3qpLWKBTNGIDD0x9j9FeN5nBl1OkV7s70J4OXEtHsncbnDJDLsoaVYLNlKPwVe6dBg==","shasum":"3ff95050358e1e072db249b60747b659fa9c1508","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.578.18048.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5gQBCRA9TVsSAnZWagAAGO0P/12DAE4e8vfeCzMkuo6h\nIEnYLixXA+tV4tkLExqcppg19y+7Hzrlrpd+LQCyGWiB+b0Kqq20UDMgHDKx\nRxKPxGpufjDCehxUxqCTgBISXrov+rMCgpOfo4vWJl5oqLuYCqGIE7lod/9A\nebJ0xDNHc4WdThFzsHFjP3NWPg1ye72twAqhRIdq0Hd3AJEeUWuXRV8A6O4P\nqOx851HHns1mOgIQWbYRKD0TTxv6ld5G21f3WDQm2owSkDU4fOYWFZWOXo1r\ni+MP2bTbFs2MqepAJVUvRCtA6mv3ZNnrGUw2o6FX1iIESYDTZ3YoE8LUzsaH\nRiNJssucy/xXm68Kx0HoaDzRL4psoBDIV4X4gi1gYfJmMclSENmVj6ePcotu\ndHbI0zpdJ/DarNMJv0aAjiPVp+s5ybsr63b6aUrMKdPxBnEBVH0kLU2bq6l2\n7Xn75vsqBV5YRp1CjlDnMjmcj27rV0lsImAG0AO/qxZrwb5/oJPgjFQk47aS\nw2jEWOKVE8bSypjVoo6Bj5pfK04r21iWVVZVtvFnIVrg9avug057VtXOPdgZ\nj9gYdIWpjeq/8INpTyiOuNueVEB0mm1Tqq7U/fV2Y/WQ+P1/Vv2hfH6FhFGs\nHKmgFZgua3c2WhOzd/b30N/C4TGAWJ9bV9OUt6+vyCoNECtm1z4qD8qEVTTr\nkacf\r\n=9xIF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMGlgbhTEr970crnWKLr47JJ9WHEor4Kcd9n2GwXuCWAiEAsgyyIaJ953JxOJc4NmURAg0DIZcDikynqHYvenyFHhE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.578.18048.0_1625687041058_0.7086710161723528"},"_hasShrinkwrap":false},"2.17.9--canary.566.18059.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.566.18059.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.566.18059.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2158e1e216d5eb92e8646e2adf673d30462abf58","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.566.18059.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5MCLLh6a432cCsnuP9XQhhNEMnthpovp5dyMA/UT8+AeL9kfkJeUnQllxWsjUW2RwOy8EwM/fb85tFdh36+cxg==","shasum":"5e52010e5b6201930a346de3a2236ea97360fd7c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.566.18059.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7aR+CRA9TVsSAnZWagAA7ZcP/0N94X/t9ryEynWKi/Ak\ntbbhj0Gr9qWJqY/08rc2eGSSill1mcU+RMkH+FvleOHYEQbEBYk4hKEu4WWu\nm++SkUNvXiLiM42sQRJ6GlwkCSPMB27Bga4ucPelL04nwRpJ1EeUXKvli5UF\nZMrDNjsxL57qhd5ik0ns2/JsNX+AhSutUX5r26g2HhoA4dt3dvy5/NqCWucK\nLIHjZhs8nXrutI/B8Gi7bxYoTUHb4MUpejzIFi32zDQgZQUT4Z9wKa6MijHs\nhu62ORjc8NFP5nT5R9NlGGj+DeR9Oky1ObluGp7fLsAEYb/5t+PoFmWVi25d\nk38XtgCaZfzkMTrjb9AksM+wOzVMWfMG4BWLgfNoiaUuvYB+8VHhKC/qrvKv\nIm86gaDxYUUV9PRRYYQ1RWrbSLU4eOJmUtujYS7AJsILPEcIFg0Jnu+aKmgZ\nHO6Q1GS4ooqNtTz1kX1zMKLqXaAc18+J2g/vLCRfTvI6iYGU2uYBVbxGKmpq\nxzNXvDDrzjgdvsEw/V+zTbTsP4iJGWI8I8hd4lEZmuHJq/BLssju8SlMyl6n\nPFXuRO1Su6EJ3bc1TMyr1D6z3HFGyo34cycnQ1F3WwkUZSm4bq5liAg5q1LW\nrThNVzDGJdT59qFHO/CwVx2tRgHSvYQ4fwMRH8c1IVf8I8YwBg1Vp0Tve4bk\nv4vf\r\n=M2oW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZnd7nERpkhe6TkmA6JwPbZBKbOrDHFxdwJXwqbAYoUAIhANs1VodqF6ex8/EiYUXFZ+nXpcp2ynmgwAFduyJF25p4"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.566.18059.0_1626186877654_0.3324692514944252"},"_hasShrinkwrap":false},"2.17.9--canary.662.18065.0":{"name":"@design-systems/svg-icon-builder","version":"2.17.9--canary.662.18065.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.17.9--canary.662.18065.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9e782911ee3444430c05826710a3c4055c931587","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.17.9--canary.662.18065.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IVX3TuiLfIyMVeafwWRil4ggoJ35AFCVbp3kKfBBiHkTRgPMoeDn7tZkdP+X43mQhS7K86oo9D4wjKO5pH31aA==","shasum":"ddac614a9eee3f907920ae1d032ca5f100a36180","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.17.9--canary.662.18065.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7g2gCRA9TVsSAnZWagAA5+0P/0I7o3J1ogEO+VDStrhI\n10hb5EjWsFFjZrGFC4CD/NQ7b3Di37nq1Hkt5OeqKg/yB/qj2qexrquVkLV8\ngMJSUbJKuLwjA9PHiarXJclRqjoy0AdERUFhtFMUL5RW7P1xGDLVf+ZsF7hx\nr30owz+qMAPB0WN7TvLf2B8WEXjjAw/mK9Zsi68eX5bKPj8brLjdan7msqKz\nxezbiJt6UXtbcKNcnLKfhn4zbYws2fYSoF3osliA1dlkYI1RKKuyES7iRnld\nvesf2CRA969565ZjN7FtiFEKCWWkzGsY3giMWidLothWGo+wusDwT1Zv9I0b\nUmG09HNJnjekUHxKvSMOkrdzaSAIhFhIBbjtL1F0CQ4mIl36NeXBKO0wL5Q/\nSTfb8srWaVI10HjjxXoQ1VXjTZ7z0nRrwnXfD+rY63caQV8byHKhnayYFL7I\n4IbSDadBfG0mEgIFfb6+8CcHcnMSdGrEZCMXSd/a8RjizIs9w7diMNBJFjco\nPLfF0MLWj4wKIyIoaSmb2it+MFH87R02nbj9gEv0MYUzV92K11PxU39QxerA\n7s50hTZI3xebg90XfLvUcACcBFMbn/pspWtttFHYM31cI6ixvs2ozuN7JA8F\nCGI3zTSUaXPmyyyMeCDj0+zJIh0+XVFaxH6oZhhkz+Wv9DGY1DzKtJS7bNlL\nu/85\r\n=7S/K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2xOXtt/J3kA345QLbctIsaHshECrYMB15CKf/IZ/KxwIgVI3Fl4TNLS3UL8cTJ6fblNEzsRSoYC4X3p8SItUgH30="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.17.9--canary.662.18065.0_1626213791845_0.31937473532596883"},"_hasShrinkwrap":false},"2.18.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^2.18.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a03936cfc73d59c3b2b4ab5d81b2f6409f0fc103","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RhObilLiZuwbTFSbrPceXOGlJbVWa2RFHwBmds5mb6ivN0lIcy51rPiyX38XZTNWhCxU8qPQTlGEcgO7w1i2Aw==","shasum":"56148b0fabadc1854773cd5081d86c6166744871","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.0.tgz","fileCount":25,"unpackedSize":89151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hbLCRA9TVsSAnZWagAABiwP/jI7fwOSVai8mVBav24w\nmaxkTMvA0SsYFe2Ynm3N+5+4AfhlRIvwUCqlNn5dB7vdc06lLqp8CA2RxM7z\nsnwbdMyWsPPg5nmIqbItExNExI7XHuh4wsn2rmKMVpD1F00IdtNTDifugv7x\n9f3pQzZvysGHDHDNFX9o4pedOwk7OqeflMI1FZnGKcdCj/W16//8pEV8HK20\nYXA8ayVpv4UoBER07hZgi+zWXfx//+0My7F08lHVtcxMe0aR/cMhKupOiAtV\n4256hRDtdDVJhf4SoZXtyQYNDrk4zTVDtFON7JXwxJj+/PIkGDfDmKGCCCI7\n3nibKbMwZXAPO5hRYVHSALWo7uHws3f9+SSmwt1vBLThaJF0Jtn8KWOz5zJz\nrKHHSQAf68UmlnSnimkcgCfMmtFg5KsDiB6Frcgm7O4vnyb/cqdLT2h45aBr\nwSvhCX+UZKzhMH5JK03FLSAhdyuBDfm129rEKhfg1ri3veEzb1ZOCU7agCIT\nwoNnfCwg8RQuGe+RlRxWJBw8wJYXPy+AYQY9jd9BfFS6eei7+eoTNGSScOIH\nAkup+PUQ91vT9ux2WoWS7whvdD5ttEdpFE2LKd5MC5DOaH5rv7jIjQ1dh4rL\npybIcYD3Cv1npEdGNc1VcBUWubwG+MqeRlBmzDB7XSjcUXXxPSUNWp4PcsVS\nP1Id\r\n=eTJD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG22mKn7YVCY/t/mZuKlJNcDDltV9guws6qIYoL6a/jMAiEA6N9n8BTKOsUOhOZZByj/jMnTRNWGGQLIMZ1AF1ZpB34="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.0_1626216138863_0.613699963210167"},"_hasShrinkwrap":false},"2.18.1--canary.630.18080.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.630.18080.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.630.18080.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d600bf62e6961c4bb36f589ade67aa8a3688c163","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.630.18080.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s2V6+SVRHVsDe68pKGYC9Q4kU1oXORsogMJ52D9J0BmkBq+ZMIEYebM5UyJt+c1fVuSYzJQxML/OcBqBeJqMpg==","shasum":"2c3ba9f9abe8f48988fda921384f196dc5374f8b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.630.18080.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xYlCRA9TVsSAnZWagAAct0P/jn5gN9tg6Rkq/+RxQ//\npRwMxzU4PJimUK/A7kHL4DKx8OAwpCTMQpa8E4xsoOsOklpTYvaUDHOY8FgW\ngAFtowIYD9pDLClf5qQNWc+ULY/ELcuw31CutNmmZZ1TMVxYd2me6h89AoGR\nUn/P0NvN06eiSu7TWgYJd17NLXeipRpEHvyF3IFEPalJdBwi/+Q+YzZz/16E\n95SUuq9ZmeA3lIaYN5+BdWN7WhpOVuajjFjfkKYeRbSzCslnSikeId4gWcRl\nDbEt4vaOtozc4LSVqPWjVD178MNYaSoxXuA0v6a2FlWbkc4ipc6N1UVZl5tw\nCV5jePg9w5cKp3yNvV4RhwhKK4Xyi4GUoeonSuMNawCkE3uYgIImezleU8UG\nP4deWUjDEqtLDfx6vpb9ekdIT6LmpU3erOxTqAjL/sufCe8ZZbjBqHN71850\nflKYVX0KUudYJGQjfB5fNMVwkOwEaTMCIZt1dc5j3QLUw7vIBCWGXsSZqlyq\nSRCpnm+W0TrtTb6zJu3IpSDyKjS/1aE6IjgGDTuq9kCR33GnirhVlYgxJMnt\ncHA1/bv1cDIfBbAep4R7rVmXRbHj6QaR9WMgvm2vT+8XISOeEvGNPrH6wOnV\nfSSv/B6U3D1RvX8dTAJSuHDkaRljVXcGeAbHkeEnt8c4IH6Vv7RuP5YZk0aO\ni6/4\r\n=PHcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGU6+iOXdO0Err7qBzHOCSSnRrFXuHIRIUFOFNggyD/4AiEA+HwtEECmJICN2hB3FKLwIsldA82Aeuz65gaQ4rNirds="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.630.18080.0_1626281508869_0.79306122551525"},"_hasShrinkwrap":false},"2.18.1--canary.663.18090.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.663.18090.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.663.18090.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b3f37ea18cf102f62cadd050c53cf4af2a55387a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.663.18090.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-deMrr1kx8fTLLxUa2vY4ffSEAAO//KgchhvOhKJ09njAYpda1t8y0qr9Bxfo3qbWXrAKNZQmzPig2urL59X8ww==","shasum":"77fa90883a2d0f8c09e170e505f385d7a74858af","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.663.18090.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bvfCRA9TVsSAnZWagAAE60P/A5gTKD28JiE+FQ62peu\ngQpMLczlL96H0h6ap014Qp0pgBQnzk4/xkOmP3WnVH9T2P1p6o68pvFNgyZ7\neBSqpZLkPkwCXorcOf5j6ZHLY3MqNNQiAFu+9j8e88+HtJNnTgh3fUCI6vjs\n4aZcsVGE74y2xp7NtDgbCK7gaPBa0DH9qT/jAfu8AB9fe3fFj2TPMjfXfVJl\nbaq3Iet0iuiTh7DiYE1Og41xX6EnZ7Zd6P9fxLWjWns7P5ZlABOXzc4k+bVi\nmOlUqLRPTteLElctEcgUngZPENR4QjknWpkkSo2mh0i+DO1zCVj15Fnuh+Oi\nBe9a9XxbevQkx+nZ/utPcf31dv6bL9cLEXY4faWF795Z5lhLraPvMD5q+125\nXeOdSQg3sIBMdtN+IsaMa9bDFDIKoWVOL6LFC/UfbuvUgze8mmfN0kmZUTTQ\nqJuWhrrKFAzgikTSQo3O3LTfrcN5RXoAfa+fbjlvlhHA6S9w6NdIJgXK1lN4\na+e6wwwlLDyYPBL2tJmbRPxtzQ6nfCQ0ahvBXKoBf7t3PR7hHooNqnG4/9g/\nRodhKbKZQ1AtHu1ClPE6G6rYLa+oJ17CwTTunaWj6K/V5ZoSoNmpHP84Mywp\ncLLZ49X2PKzwnDZStzhJcyDBD04Mn30PP1/q/AWqnXrku9mLqZ9Us65Idetc\nt4Dr\r\n=Gt0U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwP1hZW/vOy2TAZj5nQ4SBvRtFADnweSN8C9zbHkPSfAIgZJbdI7HENYRc3RrZUHwEkK5UdMCKxUHe3E2Ld8evMIc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.663.18090.0_1626717151791_0.4517148971539868"},"_hasShrinkwrap":false},"2.18.1--canary.663.18096.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.663.18096.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.663.18096.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d6f07b0c620612368b7d8a1eb2f1a90a0a79f0ec","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.663.18096.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hzZ53CEAS07zOuVCPQWzjAMKaoobr73sAnuQNTzXiV/sCNU1N2RsDbAOJqgVSvw3uYdoMIo7OrKR3Y97b65BnQ==","shasum":"8e8bda65eda5d460ce149ea93b15b85d3fdf1be3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.663.18096.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cC9CRA9TVsSAnZWagAAUyMP/jaQ1MOJa+cox/6wb3B/\nhlCo0SxXcwn8uymJHIvK8+n+dBiH7kjApIjk6qs61q2EAU+NWqYwbZM7gIgw\naTk61/zj8Zc5J72rAXzNG77wsRoT4AHbT86Rv1IDDwxuTyu2WWhV8qfsT46S\nnshGnJeT2WWJAPHniR1hIU84gktzmBB3uD4xZJB6997I+oGhhwnu4DkcB0YY\nQJPkVMJ657NUe2yJfyyaky0qpS5m0JVExawBdSxbXAc2BjUGxZdXzGr7tr2x\nYEzdQ/xpDGQGNuCjRSNHSwffuCr7XpLZzsE4SSmdkW04QVQbj1c5CYrXXv+7\n0+Ba0+fj+qrMT7f/6cTcQ80X1Xk1vKO9mPPpuQUo3HxQAEiSbgs+sdccfDC3\n9hbcXyw/zqliXVIxiybnLnvq0EzvK2wha+vz9BuDorymLurn5YTslSFCYAKi\nLi7KhFiTvojioJ9QzE5thGmo5qXOEvhAljbeefG7EF5ReYsqhun7uyvaRd6W\nMK76d4OmHXMTSBHUuCLQYBzKFVhxxvw8WBxzf1wO5K23d+/j9Dc51d6sX0O6\nWEm2bSYj+TQ4rdf1dLbNiwdqizi6iblxo7leN7+JZusXlynCwnslCriQ4tFf\nn7YUkiWxAv6kO6OvvHVgF65J6sAAh5R4q6749vUVQwkQfGsu3UEMycfHNMQ9\nO+lk\r\n=Stbp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOd198kvPAUKdb/QFT4xnA+LkKCH18a7OND0Khf/sBiAiEAsERYneolsQU6sSv4HVZev9864nC/oCVJU8P7R3bLf8k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.663.18096.0_1626718397416_0.6477396505134927"},"_hasShrinkwrap":false},"2.18.1--canary.505.18106.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.505.18106.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.505.18106.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"78e16f1c8e7a26dfcafe9df8588acbcae3bf7609","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.505.18106.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/4.0.0/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SFOTFQbX7V6pP3//qHVp+RpxH2MLg2bgZogPhCz9zOU1D5iXTVeGLnyzTfqJWqEKGbdbHKdoncn3fnOmhW8QXw==","shasum":"9811dad3468dd52295d233ab7ed980ff673e3205","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.505.18106.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9qjWCRA9TVsSAnZWagAAAAQP/3IwD9T969YXURzhM+AP\nWMHoBT3a5IBUuMA74/nMHkx81TFteM4WD37VJwVjaT6o0CS7EtYCFQNAeoRV\ns5JRdPA6TcfZHYSaJyVDa1od1IZcTXterKYbBdowS1b8R0cBOhXCmAoRT4uL\nx5r1jDIo2k/Hpzvunp80Grc3DhE4ZN462GEgefRidBorvEZrSfiA7DkXuZuf\n0V0RR9b8BNLsdfj6eRoX8uwtHsfZWVRX6a4yvDq4lbIANz1GmdMxr1DA5Kmn\neHZZfrrGNe4kOq9Uc1xzIB2ea3Zwz5y8jJ2M7FWjKqPn/t7g7OEE+ZlaaZ7r\n5rqyL06CDxxhl7f/LQVPEu1A4yx5DuR9qcyeHqolAMPie+gOq7N2ksjs5oh7\nJemkmQr/2U5VGQCV8QU4GEwUN4jjlT6Pomv5MYmVDXRSgY+82U+dpTZ7l/E0\n+soTR/6Q1dYOiGx9Y4bPsbTObXnO65w99MunwasGe9UmozjLvuAsdMaL6F8C\nCi6lhZ7y6NgzdIWfH1a6bU6CyWWdHCwRm7J3hhmQXmvQYIHE6d5//AqqtOLC\nDVXdPJM4PGC0NL3KxxTT+IQKtNLhgvVD/olvFbgNeTj272o/LzQnFrk1+lnR\nNgcTq0CjXs+r8/FYkf3XdH7nLY9GtO4WQ9K9NkIKY02I6OtxgN8NODdyiCJS\nO+j2\r\n=Ov5t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+Bvs+dmPqNxlTLHUjijX/Za9IEFfEq3WO2Ld6J8MZtAiAqzBS8xrq5R3HHlwY53yLisX1s1mROhHrje3HddiQYwg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.505.18106.0_1626777814584_0.7337344672042443"},"_hasShrinkwrap":false},"2.18.1--canary.665.18125.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.665.18125.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.665.18125.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5049c1392f8f7ebaf73f4c47e00ca5f4d734ecb3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.665.18125.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-JaD3tWaRr2239uf3VVYbIASpzleg4gCnbO54rXbA3cNCoG8racqY+mUjPGeTzC8buv307t3XivJCELWRxTv8ZQ==","shasum":"e8b914b10f8cb35e8b6bea67b4685301b2bc04f6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.665.18125.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/vQkCRA9TVsSAnZWagAA6m0P/0TksaMZmCkod40HAGP4\ngObhkykRUdbg5bJVRJ4kBd1bGozMBewwb+lIbX9EE8ZtE7f4ZJV2CSIPDQc1\nwxE8bLwuUypKPgAyfu6sQ/9tytC/NVzU50xAUa7ngURCyTiwANDzXD+/TbTD\nnx+uLPSq909EC+LcaP6TUvhDs2kp9tu6kA1l343KlxYRN2/c7pbCXpQ5w08m\nRxYyeRCNSLEa6/1WmE9gQVwUVqKqoJDTfEsLtQcYaWKlDMXWitNjImIHyzEX\nrD+nT0LQ5oFColFv1u3OntbSU0Bnm0FTfpqnziGYu+KQBLcKBjm7iRZbph7w\nyufge8/3VfqMQvKdXWrvT8PC9Rm7ojDm6CqqCQer36IF8uXmHwnJXRRDqIZb\nLZ1gm3DVUpEtgyB6qPJwG0Qv83NKe2DLq7unoBYUGZ/Z4wriGqTfPnkNXEf0\nIwLXEpbVcR4omqRwQ57WudARqXmrA5xXTiS7W+qZx5tE+KiUIBb8kW6ShLxv\nA151LK5zZhAUAACXPtPgPSzx8FBhsyAWOYkpY7UElVf+a4Mh7C29l/JQwciI\n2yD1Yot6loeGFwy8qI6RythdwlcFpZgbXuYPSJpsg5oqa/zyfKZJ38h94VeG\nCkoS1r5oh8xfXpQS6STlXE6PE7r+59SoV63GubqzDgTYpFPYaxlmFD96v8xr\nkpeb\r\n=3wQj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaBzPunEwNTH2XY5tvOFF5gDIqW/Is5AR6GF/jygvsOAiANEEztjhGVdx5Mw0qgat5MpbO9+ejhqI1ilEOM/MPDLQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.665.18125.0_1627321379820_0.24585662094546334"},"_hasShrinkwrap":false},"2.18.1--canary.665.18131.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.665.18131.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.665.18131.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"94038c06b0dbc984d3e666f86fcb7a48103957e2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.665.18131.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-DQ13grGPQNJ0PTYoCiqLYz7yROZtukEtOst5f67agH1H0CrX5yg+aD+g3H/j7HN4zATNtX/EBybN415ZU+hlzg==","shasum":"607e1aa09479c602e0cfe9bd275e07170a6d0bff","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.665.18131.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/v4iCRA9TVsSAnZWagAAIuAP/in3uRYw3h5Dkr0KmUyS\niM6RIhYZQAx/ZvcV2CTMharUiCCHeeOdDVMdIuEOYfV4xcAJ0YbJeVWPinQ/\nXVQ8Q7Xzzp7c/hsRHZJIowYaNomnTqWw0es4FDPT4Oi2Xu/hqs82OMeoH5RJ\nPPIpjFKvkaFeffD0dz42YLMUA0qmFdlYNbl8HWRuwUBk9y4BRH+Js3w/B8+M\nG6AmdciMccseGFXqhGQnqEDNsReXdTVDWljXTNdAgOjOWd1O+qq5xHPiot0G\n3HMJ7pGSAK6TpdTyPaC7Ud40FVmLH9upRwPC6BlaXKmEOHg6dPW6KDXpdsEs\nZqfjXKRw8+TteeI02AgXD39D/HJIYKIoDqFNrL8L0x2ebMYuBAV9F0o6wQt8\nt/vTwWJGXygIXSoX+NRrBpoGPHyscv3RIOruxs67IzajnRSOkAtqO3sF2SaY\nK7mjO2fXRiuNL/mzJczXDi4pKLemyzSZdaxveXX23R3YWJg70ZnPhqnFVwoI\nrD6Hl9b1gDhZdh0aSbvM22VJuulHk5Y8mCaIIZ5zOJSrISUXFMliYJBLyhMz\noyHkuvHuzLn1HB+rUQjW9y3iHjvWQnp75MmO4oJDwrsG+2voR053oLAbI+Cs\nqek5SOotNF/++6mU/iS1sLW60dbRP3KCwpBlPqAFHbTLh4eP0rLvg+J/fsCq\nHGPS\r\n=38xX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFSwmy359+Ql+LzU0cQrSjhjdpfc9PZWoyKPU0stgag3AiBca3wzhjZckB+/Bo+NCR6vIc0DQten0/tCYCgsxq8AqA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.665.18131.0_1627323938343_0.9174173463877617"},"_hasShrinkwrap":false},"2.19.0--canary.665.18139.0":{"name":"@design-systems/svg-icon-builder","version":"2.19.0--canary.665.18139.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.19.0--canary.665.18139.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1f9f279dca5c2d116b4658c7715aea0fbf46e78f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.19.0--canary.665.18139.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-znvKJ4VWKDsKkdySNGhbFZ7muoXx6M5tdHpDlmGjXxF/pObbK6y9//N+WUPlEyIfDbtB7YOEcjPtNvj2jy9RsA==","shasum":"296415edfe4dde8b3dc392a8d0e53992025c5600","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.19.0--canary.665.18139.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJvNCRA9TVsSAnZWagAA2q4QAIUITIQOtokvMhtZxc7Q\noJWIxK03+xCwld10eFa0HYzwqz3uBthVKV1obvqbIZxT8wMBDQ3msgeD6mfs\n97Gzc2v2IW3l1BjYV8IG56tv3GDJHOIP8CeaROvjJDNUPXtqY5OeJudDN2Jw\nzw8nWsBQhT0HtFhx/cr55qRoT8Y5r1hDSvmVD/mTWGXrNFOkuCCGGR949Z0g\nclYT/1hShtvNWuir2XTgUZmcuyuWusjIInMilSYcKOgy5/AagML8HaQeQ8PI\n2Wga2C9odMiiu0WzBtaRr4Q14eZg1o+HiP6QWIb5OBLwMX3GrsSHa4lJGSiP\nRaOWNVieUIfs6Kzz7iWQhEJW8v7R3RraNwYsQGHlnf0rCFq7cCR3BtGTkXbC\n8kKlmq26E1JLMpIFagJDhKH0K054RzsMxQxVvsbG9baiHV9fZtNLqaEBKXV4\n02uAE6CgY/P2epD5p4vkNcYNDYB79FhkCvOQEtVZyoggZ2Q35NxW5Jnu3xvi\nkPIywRVcz8+alq6YiWGVRmtTnM38NBD6m3jz33bTMYEtiA2rJ3MgcG+V0qHB\niZJ2xsNqH7kBp2sK6XsfpEk8tdzC8kgxBphHsJ/+WLsNze0BbP1xACGE+gMK\nQwxAnYUMKSYy0Wk9pukHNHyIl/SLeVcVB/jziJwKS4akY+Vt44A36S0jtC4x\n/+cC\r\n=LCn2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVjYRWqmjPZ6ImXsXHmj2KfUw+3TZ9nFJgYpgFXiEqyAiEA+IunE+iL2t0GS9LCSjl0YUMGvMF/ljVSAMbvoMb215k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.19.0--canary.665.18139.0_1627429837781_0.6232200264413059"},"_hasShrinkwrap":false},"2.18.1--canary.604.18216.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.604.18216.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.604.18216.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9fc3aa2f87ee8613d26cf28f0dcd9573d918f0c0","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.604.18216.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-n2BM7HvGchiGoHmxBqh98o0csN94Mn6TnYa4IdlAR4zg/Ib9YYfACKRrh5fsD1Abx1oKXKjqXejioNYdK63nNQ==","shasum":"614f03c22bf6ebb6fea4bfa2e12f9abb7b70a67f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.604.18216.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgAeCRA9TVsSAnZWagAAjK8P/RzHKvpTD4A3W3c7fEdc\nWDIvZIDofj6CD1UzhJiQ6hL3+8yNXQnEmaynGAFeC74zo3zgqh4ERp2OXQxt\nTRrNjXBu8NOcBU2LZ6s5r3Hs9xvf5eo9IsyKYp7g3rlqa1HROL0xtmrmNloS\nVxTiJZJt+7BHj8JyC07uITx0s91B1vNK40igTd2aWkoBmXxlbg/iSC0faWBa\nKjpw63MnKa0aiQR/3k5As6kX4XdWIilGrgoyIUN5AVWclXgMWjLKHpVpVotW\nHklmXgfoZXwChxPxOPAcA5M3e8oGU/6A0eyrysNZp+swpRys+xky4Hxt9zAT\nL2UI9txpeQOTz9QD7Q+RzFEsIEMqXeE8u36P78f+fQgsQBKTvwUU4ap9IERG\nFah0PrgWgZjOKTs1P4cYzBy8ajpFQeZfITF/fjlLugYdW7hElHFm2xxrjHgu\nJlRTWRcFQKbTNd0zey8qktIGO5wutJ9RsxckmgwmyuedTUj9ma7iRyq1MC+H\nSMelVY/JLSqEvzG1zgGB3axRr3DAJulblMImdZ1PVHTXi4Q2DEGqvxQfAUu/\nAsd+uUJjA0TCW9yi8iZLc9n+vaMFa81mKYUK2P5s92d7o9uFJi3ZzTuTtuFi\n6GXTRWwLZHKsstPasT2xr3ZOF5n1F7IOR3rjlM3UNaeN51Uy/H9Co67CwcV2\nRhFO\r\n=GSxO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTNR2vVUwMCX63GWlepF7TipdA+BCOCZgJU/6eDZ7A3QIhAIOw2Otb2NNP9ir6ACmdmdw0B/pqzPHw6xSxMO0E3803"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.604.18216.0_1627521053943_0.36020240708886186"},"_hasShrinkwrap":false},"2.18.1--canary.612.18223.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.612.18223.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.612.18223.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e14bd27cfb8c4bf87347391c7b88b5afb54620d6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.612.18223.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-kxTNLXqvzyBKCqYe8T8qShxSnphBCk0lcuTWaTvvjr7rjfPxnru8lJuT9EGfErvowrx+sr0BgdEu+IgAl5G2lA==","shasum":"9cb4ed604ceff209a858f0451dc00463d5015bbb","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.612.18223.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgDVCRA9TVsSAnZWagAAFUYQAKIS3TgTFKrcKHlg6pHf\nZOt5nfluNkcB84xz0MgO3tK2EGlykP/gD+q8ltRg9xmIyZEami2hk2fdAGQM\n9EeGHtvUV2DLJlmCXihYi+tfcuQ/z2lY73ikgel0ahr+qlxqgCfJfFoExmvI\nSx+MsAMxcIBAbf1I3I5bYI/1B6CTfZ+HaqBI+ydIKPqxTCciDadAFzvK1sd3\nPCR8H/eMYubzpCe4TAGl1Hthn3WJKjQx2b4LAIxEmQRpH5OiXfAb9K6KWwhb\nHGPEkIe1ihhL0YVZJvrsz84xnanrwyPo7tjcGftlrDpakQrCNtP7wWrWsGf3\nPKX8E5wP5n+b9TaK5GzCLHjQbw9PXd3SCuuBPwCtkbnIiSuy225LvhTrsTc/\nQjEr7+cPM9wHY2gxl0XNkUYR3e4du89QhiEiSqfT+0p6Gb4iZXGsMhzlhjpQ\nTr4QB1/sHCakjy3qYCdgWevGiwCwBY9mmc09HOHDMq5eVSWxQeQtNwfA3ZFH\n96phQSRoyaXovId3v16+AR+asNi7TSZhO7UCN6UewveDlTEztcT9Tf5myOea\npMtTM81xbHLk7fkvQfvOZKzm2/ptR2lAf+A36qshvMYsMmP3/iHnEZsG4Jk9\ntAuIpE8xspk5prFJgum7/TeLCA9xB+VzUa9cab5NZlf/DG9kY0i75kfbGUns\nSn5G\r\n=HI6H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQtdP6wnYIdrXETDAdrC/t7kdj9HFdT/SAGw1mOPbeMAIhAM99JW3EE3LRa2tnA14Mu8REQZD8OYngKDGp0ch2b4Ky"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.612.18223.0_1627521237283_0.45957908248386126"},"_hasShrinkwrap":false},"2.18.1--canary.562.18227.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.562.18227.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.562.18227.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.12","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b27a8197e662f1378173a39af033d65b0642c72c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.562.18227.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Q+KQ0MvO48q4zBv8qj4MlmtkPHCTA0HZb7BLopBWjN2JZUQ2opkGsvHhqA4U6zbU7bI9+mvUjEqxItgLCegF8Q==","shasum":"30e31abf2df3306df290e33f3884ce87afad02d8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.562.18227.0.tgz","fileCount":25,"unpackedSize":89191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgERCRA9TVsSAnZWagAA4vUP+wVfYkkN3L/Zzbcv19Ii\nfOwi1YEL7Yi1TrMAaZcRSf9rQ5WuydJSCZKPG2PVn3OT6f98J3+cqfOeCgGT\nESJAhobgdHcX8us4H9rP4/arEM42Q74ZmNwSUoKFAnNH01Uz4vfgzLF5F4Nl\n2nFfe+HTgG72KTfvgKtnE27ASx/TmHvgr/FIyfBw6pvd6nPu8/+7qLy3jOQq\nN0+ReIpOfWqItOIlTyoWF2j4qsYCL2/fTa+Uqlwb+Ku1VH+gJXAsMF4u996o\nnHqam7hJurcu8UGLLMvXtr3c5D0FOurX4l+fn1ki0qJYQ2gKZ8u92ozoqRSm\nfFJiuKDwGzXjULCB3T96IeRWz1U6fi9U014TcjAOkRe3vPQLo9U/4u1BYP8X\nNnkQHD87J34/2f354ByDQnUq9O9Ar3WhY+dwRIsyIyCPYWKjM/dSP+XQxB04\n+8YJ5ckvSnZuufaKQbpj002m+qLGby3Ss+8JxKcTsvpSEbKUvEybuDMMKoqO\nKUvbX9xqDCSWZfNGuaEYRcoaocHZJXmbFthNj6xmsHUnNdOL+2HFAwbBFRN8\n/E9Eg1fyDnmLaMyH0JpsVwKeCtA8Ug6oe69ofrik4n6DrgJBnyapmlVW8azs\nUEBitebz2XongKUEYz7c45TZKQ67YjN108lt8l1ozkIrIihaKXMMu005Jnuf\nXmVJ\r\n=CZHX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBqT1IByThrdj1wRsuuu3S2Mbnkm3zetWkFeMK04rL9gIgfXfou2eB+emNTSNv+OcW62zbP3C9X3bNiuSEFqfqXFw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.562.18227.0_1627521297055_0.3380728969452085"},"_hasShrinkwrap":false},"2.18.1--canary.587.18228.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.587.18228.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.587.18228.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"91655b485f8c3c2e3c56ff8830b02d9eb6032c2d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.587.18228.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Wabeckp6muL1rq9drYkT4HWAHb/PwBtF2ayDSmanU1Xt+gKnxC6SHYaIvwUP0zcz7CRSa63jKc5pDeweGNHgeA==","shasum":"aa31fbd8858f4daae31a794c118e3cac9670e14e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.587.18228.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgE7CRA9TVsSAnZWagAAXKMP/1m5vq5y2yoMRQZJ2p2r\nGVs5fsQ3QdXq4wNYQQS+fOORd2jnBQkFx3yHZDFFl306ZBvF8EeTy5VcxCI4\ny2xP0PUWxGcfd0FoB3FL/v9V/aM6GzVTkl85wJzJvaRZKdnuTI0ghP2QEvmm\nymgbntKrZmcy3YDvAP2OBylN+UmIyDo9JndBoTTVz9BqnW4/ev0h8h3hiNlY\nSigXqFzCLeFmXXgOWnz/IvkEkAsgJkNni5ZSAdIOvSsK+UDj+wO3eYQX0bVc\nzwTLwtsNaHwvr3XLwrrj0hdpqfH18NzmZy2WZFmgramDxwkPfa/42JpmeTPY\nMoIrvDmtqmmpDUqbZVtJQoVq7JiyBeacx7V+nGOu0OorLf0V1CjJJHlH8FqT\nKOT7cf+NnrYvdUeVp2MQxHtj9wW6ExLCEbjsYj4y/nttROJ7HwKol06M6T2x\n6ZjeUbMtvHKkKiOHWYqzv049/Wj4KqpD1PW0l2TrNj4GUt7aeILZjHeEMG8y\ndlFL46pBr2mjf0IV22pE/X1QQCx9yAkPyo2UhGyd2qeHW8z0ApahVOc5AMAU\nAkti/9at0xzwKTvy2BHJGP3RDMDBxfC3jQXbpFu8x4MRpX5raTDLMDM3qmff\nEFyPwpDUNle+tTINRHL3mUk9iUBfcadBRFAPHYP2jLZtWlyUYQMVn8BRbNMn\nmKBl\r\n=w/ZX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1NqXqS9OGt/d5/0+Ptv5tJmJogHnsRiYW5V+R6YOM1QIhAKnPzp4FynUKh8GmIua1XyzICOQdYGAM3IBO7I9QSzJv"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.587.18228.0_1627521339140_0.9720842427991543"},"_hasShrinkwrap":false},"2.18.1--canary.616.18230.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.616.18230.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.616.18230.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f17f7f5712f6780b4e298b5d9e914f1e51ecb65f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.616.18230.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-ozk0lMUOTjTFwyDCpkHMwA9M9Yrm/OdDU9M4USJdCIQsf6jp6TjrELV3PIKaU2meNqvnlbpdan9tJ6XlrWTtFw==","shasum":"8dee0bd30229919dd7bd2d977bc2bf62223ce593","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.616.18230.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgFDCRA9TVsSAnZWagAA2bMP/2rL41dyy/wJzdPycxjn\nxsL+Aaanh67LwMSe6BS2dkmCSaahwQDs9umAt0TcBHKywTkamuhRz5I3iEg7\n1BEWw5pkVZYXKYATBHw+q7eTuDVkh54WrOEfavp3R2gkxDGvuaZ7Np2x8khi\nNO+pB/fU3s8uyUGLu9Ga7ju1aXpOtJsHJOHaaQuXtZaMwtUbMT+e4pY+CJQp\nrNmVgOuHfa7OZBQ59irW5pUtYIokerLDV8IiFKfcwO0ZbF00d+Pr0j4CMf1P\nhgdc2y2NaHn1PnMpcOwUnrHFs6jcETFGXXCwMsnZ2dClDh+6e/jL34abUF6+\nB0JPqHzHyJA9LEaEpLtVnOtyMAfaaHm8vqHa9se8EqypLGRCxvKxyau/thss\nLW+lR9eTUDJsx8mX01ZblQr/CYEXbsX6nAFW0My+DM9VDBw8JeWx5eUb3r2O\nfwV8isM11CoLHbV/Z/ExEb7vShv9Buuf2QFaapPqi1deXGxVR4vCmAxnJHmU\nFuRc5PIORYWgCtYR1SQHdQrmKMrIDQPCjSzmTZQus4aMstzsnwibfmPU1Sd2\naX56F3tDIR3APdaUSjvUFruoN/ErZQrpQX2ZHanS43eCC8ht7wN4g64lM/hp\nAw1T/rqQHwb2tAVOdsdMNIPcJB9+YPFouNTayAXW8cvM8ciV1wNJxJA0K08+\nxoSW\r\n=hwah\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvmrcrRT2hlrwBFHoL8b8aHxIsVp6wCFSXOKozjWuHSwIgEGDesSn6LYl1L51e/IUszKGGEtm8QVYQDyMNvxJzOfI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.616.18230.0_1627521347671_0.15450174808220973"},"_hasShrinkwrap":false},"2.18.1--canary.551.18231.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.551.18231.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.551.18231.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bca9e92298d3fa82bc111d95e365a9b2eace53b2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.551.18231.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-HZC+0DWdrJsx+aNgb7Iut5OCPswzbf+H83fN8zURolfXQjGvwl8c5ADI4S4+MF1qp5s2ZCqFwgtx3/Ut3kwNYg==","shasum":"9b9808313ae6b6cad3d12a77d9be01265e684c1b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.551.18231.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgF7CRA9TVsSAnZWagAAZ/sP/RoU9UR4YlRzrycN6C6H\nZuAAhusydMcnrl1xLRGy5SVLNIgzoHkgLp+zA8uVLbEBycEy4LXRF1RCrWiA\n8Rc8papExIumHjyuuejAzQ9ADyzySGC7TdRXQqu4PcHDcqxwUauY4wTEwlOL\nH4UNe0QRNHHOZk6y56UnKJtWpYYM+go8u/KAZGzz8coANQxOPEJnXxR0JvV0\nWfL/Z5IhTSmzOxpVpaNNYgHhdFbwxmdc3lRu+pNMJr1Vwt4t03QUzbVueZfE\noF45si0afPFHcg1hoimw4taOz2wJ/KkcRIqNj0JvGXjlAWKceZUOzCZUe/Wq\n/w2kd0++xn5dex4eh7UbNhRRhI7Wn0sI2vm0Kr68bRFYwXDXSMLr/EIMkfgI\nRGjHv1PN/o95roQGXJ6fx9uEu6UQ0QtaUm1S0B+eh6IPB46Ve32EcyhrKRAd\nCV518xhNU99SNebXX3sqAdSjpHRxNtCjSnCqU8+Ll8L6dxiLy4mEgjey4KA1\nPjH/MV8NHknrFacUYx7BwG0+4D+s60sZIwyRansW5NlmHcTZEYotWG9p/Bi7\np88ilw+hr58N4fWKLMLehyRkPvc1ZuhDQkEzcZbTHGpUc327xHPelqwuLyv+\nhudH8wCTGLruaUiYU6A0quogAyIJcRIVntIhFgMbw6QYyOL6S44YkMhfx2Gj\nmU47\r\n=h0Td\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETuZkZ9g3kCT3ObFzpoHClRFr6IxUR6ayb12OXuK7SbAiA0owAnmyerwrGHoo7VGXMeab7yX/BMo8MW+fg9hHODTA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.551.18231.0_1627521403404_0.5835858071489815"},"_hasShrinkwrap":false},"2.18.1--canary.578.18232.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.578.18232.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.578.18232.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"073930afb5a1af77dab9c5fc84b99d27f74a3502","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.578.18232.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-wQVk2vwHZLXacNvXHSt2zjZf6kNa37gz/GaualiAvBlgym70IKEJMkWUQBiDqz7hXEGHA+1TWsgbnWv7S4PHWw==","shasum":"b171c250916552fa417da7d14df466ecb29b20e6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.578.18232.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgGQCRA9TVsSAnZWagAAV3EQAIi8lpwe0iWjgcvNFipm\n5TmXZKvlVVcn7s8LQ/9V1JZGoahhBaFwq4JObVok130c7qs28H60Lu0sDozA\nWxswiYFXzNc8X4lVXZtQL1+IT6y57haK4Ea2yVPlBc1MLFTAXHB8xHlIU+bb\ndscP40htvnU8qU+vb8eBP3wjkSSy3XMuBP9c9mCS9LmmIobH6y3qady7vkh1\nO7xmd0+bLk0CbofgNoLhmjyJSNb0W6Epqj8kH3gNHSZWc1tDEY9K6IPPfL5a\nLQRhj9U+EoN0J0LFkKmQqWw57Z0jJnReaAuVM7FV/w6RmJ+9WTcNwVGVktAk\nod4XaS2+3gpmZ/a6hL5voV8ogoJImipfrCW+XQB/arS1AikJ41PON8fW0j0j\n2a8Z3ZxOOZOGOJezE9Q2wCNaTiq7kHqOX7OeOQ8YE6lU4lTwdDkqEFaT46zj\n52ynX7IzOKsO8lJ7T/c/uKbktsJ14Uf50McZaFQTtrc2VvYE4az+qO/OmemJ\nucXRy4r4IhD5t6+UAax1Ac4J0NYncLTlFr4vz/BIuQfvmdO4JJ5aMWNDv1Ot\n0XmSPpWLRwSnceZq926eIQrYSqCTIbocJGJdeZ6+EnjOEhKqSfdRWjByDkyq\ncKBFNupn1inomwzyiTavOQe2IKPnLEGlwBoAMGb0kuLzOnjItV97QR2NWC3O\nmDx2\r\n=30F6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwocwa2y5dPXRVhO9iM3hUAcIOruIkFGaFHf6Cv5sLmAiBOS3X/hjCQroVB7QlxLx7nruno+QdbJ5hciKAgtj2ixQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.578.18232.0_1627521424438_0.4649101314994146"},"_hasShrinkwrap":false},"2.18.1--canary.549.18233.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.549.18233.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.549.18233.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ceb58ab86db78ca3329e7d1119dd3c7854a77192","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.549.18233.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-XZaQYDp/FQn8zuLgN8I8bQWVIXYOxqWv6N2OW7C58otOttrjCJUJpM7YVtaO1tPwTgn6oqCXgu4tTB4OPMKZAw==","shasum":"4e1c2d6c86e2543e1c27d3ba537b7aa345c9f621","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.549.18233.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgGtCRA9TVsSAnZWagAAOqUQAI3wwcSsrukMadudjxJ7\ntKkMsa+hfwQ15GCO8AJRhg31q4DR7++mgU323CC9NysC4uwq9T1NShRoF80H\n53dSS2WUqeNooKzLVYSKJFohRGBvlyvj9BzroTDVWOinRbzwpaCioS5Fa4jM\nIKZ7NajdypSesmBN9LUl9J+hR+nPf3uUEDoDuHjCKv3sMeuKaAoui9ecA/0X\nLBUIOaYWbftwJZXel12Z35CiNdOx2+yikUh7n9xuu2/bF6enhVEQsT30IzWE\n3AMIfCYjem9LHK0vjwF00+AZb5/Ha4ngGIjc2DEqnzLipinxtSkJ6HyZSW3Y\nO6q8uPlN9E8dNyocR3Pem0kZ2venqUBGsel/YkaUSX0lHI+YaPXueL7S1vgT\nZ1eH06VrDyt02Bu0S33SHTRtPCX4eb3+Q/3tgT1mcfiCULiLp2OISWeVtOwP\n1zC578zX+RX3csY3lZ2PdDTr+OfYUjXgTKbyrnLea9TKle90nQuNRGcPWY5Z\nj16/Xl6HDNa5udE9JSed6nZLzEndkA5Yywg8Q+6xMiPE9G+lIgFvR+JPfjcU\nmhFmM56Gczil+Uf3SYMA9CgWH3xFRHxJfaRypoU6aRyd6xy6r3d7+EXucGJb\nGFNpKmWYZFsYiPmbZKSz9bEkl4LqIN2/t1Nf8rCqKKmYv7hO2Dqm3vFr88BJ\n4PF9\r\n=L+XB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1ZdB8JI2zCYeoDtJnIp8o7xkFpku7upagMswSmNK5nAiAXfyQbxTDJ+FIQjeWBf9usvm3NkXr5/dnuHwiYBImwKg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.549.18233.0_1627521453146_0.6873986836273824"},"_hasShrinkwrap":false},"2.18.1--canary.605.18234.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.605.18234.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.605.18234.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6a09ee1cc4790aedd4c9595d26b76971d58e692a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.605.18234.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-NVfJ61oHzxRVhmYvQbXyeq17CiqygMeALejPYKjOlKgYwSjzB4vE+xsMTddVlvozrEuNO2Gu+LFszhWc/J0upQ==","shasum":"e83b06f9f7d32e92d14e1b20b4c41ba98633108d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.605.18234.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgG/CRA9TVsSAnZWagAAs1kQAIT1uucWlLoqRLIrSQbc\n3z9npbEjzi6tpG96f3KFCxwKkpGyN00uLfVobpKSPcxCV9OEuN1Iw1J5QXTn\ngVpLjLflQ9RVDMcPKLY3e8FaAo6W5/9Ybvzbcr0Pekh+mxypHYJVKIcu5Fci\nDqNVLFxhR0eulhpaLuqiuw2e0KcBh2aAxJRrNQ+u/uiNnwQ3G6mp+hSFXR9J\nRq04kor7Cd7D/KTr8j1t3xdIRv8o/iVxhDSOLqNFATIoR5XK9KNVj1AvAHmi\n31n2vAPz7QN2fRidm15tMakY64rwEdi92oI+HGnW5FTIAYXyQFhzt8WZ4dO6\nKkwANzCwRfkViujD1eEBQYGVX271wgdMMQ1Lnm5cl6+aaQemDrOxHUGMO5nD\nQCqgH0YDI6WslakC+3qiek8HxkeGiM+Y3kQlvB9JeT4c5jyj6lHPvoi0dbM9\nOMtYJDjayQKYzZm4RP6510rC5sLlSCcLTFQO55+rgw9fOfBKkyRni8bUthFH\nFkR1393IHNwzc8fGyry49lQdaE9kbsN9EkrOtB3ytIk5VVMFJuTn6BZ0rzhC\nL+qT3aAjsX/gwQbnbrYyeFit3Dc+kjSSk8PtprQ7uMhnMtnCskSSnuk8onAq\nUWXi/dxsvERGDr1RDnrv9twiwfWXcBmgHul95JmYDIV1c2PEU0eEURbpwiFe\nKKEp\r\n=rHg3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdiH1wIT49RLgJDV4eOGGoj4SyyF/o1lZgUqnpr0akVAiEAigJJv2s7HDG59lSsUZ/0B2Ea7On8iYQ+E6ORKlrDJBo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.605.18234.0_1627521471495_0.42080458420840516"},"_hasShrinkwrap":false},"2.18.1--canary.617.18235.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.617.18235.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.617.18235.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8f27bd926e6b6f210b48624c4e04dfe7bfa3ebfc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.617.18235.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-FmkyxuLVWLDgyPRagOW9EKTj1VOtxbkyOsUHHn24X/qIlkA9cNumv0bsceEC94TEhvaxVDVyMI/Gr56x7JaE8w==","shasum":"0e6612605dc2913b9be57aafccc7d605b28dd51c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.617.18235.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgHuCRA9TVsSAnZWagAAY94P/3MPwUeP1hPtX0oPw2mH\nA0gcO3CuuZFsqGRDDcpAMHI678Ih5+ojsh0OHExlo+1NILmSr36/ql2c1o3N\nBPrK2cys1Sp6oBj7NfkLWu703orsndzs3dvsn50mObvzFeD3Ks68SRK1h43O\nD4IW8ylrHGp4FRNA9zmxJprpsZsh+Cuzw0zRMKRaqZeyLvc7mNDDFJq8xRI8\nSZkqjmO8D4h0JmemGO0zooCIAV2gTs+5Bkpw3HKJowjNSsN6Zmj3al1RCz5B\nmaJtMguP2T9LjGwWczvYMDxJL8fzyIhu4IrJyVcsF95AjjdrMc73F+HPpRwp\nUXMfkwglGASaJr+YKFz82vnga6d7hvlSjEZXst7Yjihezd+WPPgEjnqRTeKM\nwrNEYEyyfroqLD+XgGq76cPhtKeYzpdV1FlHgF3LQxqdDOwW8FgsAi0a32f8\nQoJqHCpbghmxrA/uzO1UMQJx1CIBty4q8StB+j3sM+zKyqVV8Q0O9mBR4AM7\nyWeGGg+myKRjYaZoV8e7l+HiZI4T2f+7vRLqOs9NXYCavDU5AqK3pjcgJKD4\nj//vwO7XOY0ZQjrS/J/jItaruww5dFA7yxPLDjlWw18yyzo1fDMEct1gZwyH\n9ylcDApg4xvGtZoZ5/eKTG279QMhqqaHMpxczdJweGn/rdPKj60Ic2SVNuf1\nxBj8\r\n=/Izm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4jPqYTFG00GPWQyYDUDk/dWmTe6O3YkN84jcryz3rjAiEAwPhbM4ujKGVdnzLdJbFYtsgTnd7ieeqcP1YoTq0IMTg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.617.18235.0_1627521518110_0.7478619458323561"},"_hasShrinkwrap":false},"2.18.1--canary.559.18237.0":{"name":"@design-systems/svg-icon-builder","version":"2.18.1--canary.559.18237.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"2.18.1--canary.559.18237.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b6d799103036d8b402e3f9c6fa4f9421da00cc1b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@2.18.1--canary.559.18237.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-xzlCFIEV1FfVH2v2Jp0Vb7HST2j5QFXocCye51KxE+ukLOLi8dJvO/vad7ZF1hueMtHHdQPLn8bO3W+ANJUJDg==","shasum":"b47d7235ee2c94311ced6a53cb22733f032f8e7a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-2.18.1--canary.559.18237.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAgITCRA9TVsSAnZWagAAm+8QAJNc3GG9En7L4oTtSWSJ\nWppSVg8wR4X+In7XK6/SU6AtCHLsAjp6xaycHSxYvnUmj8TSaA8oYoQwODH/\n6FEwTXfQtMatLl4tpYtwIZASQdGcp6URUCuM+JBbI8dhVU3KSH3AA/vvVwU6\nJ2WAmxrvtyuLIX7NgTiX1NUp/8cLp1tfcddn6bQP1ZYU9YUbdrx+I8rYxm20\nkWI6yZZbnKxonkYMRUJ0izhK+F9Ut+fvXB/+Jc50yjCcIQwlZHedRGsnOfN6\njMrRXTWdtQmR8YU71qyul1JHxxDQUpj7eqK4X4Zo8ZsdtiZ3CggCotGiV/ZT\n5Xji32NRhEkM/+Mss8VBpoy8/Ewu45Q6+67/VvCb6LSV3RC4ZDmeqU8WYIch\njimchI1WL+5z2DMMGxlnnq8l2C77Ub4d0yw7uPqttBZNB4o3TuQTneMi3cU5\nMI6+d3FamW6fmQ/5JVJdfMd9CwKtqMQXqAJBc2Qibu8eJspUKhZfUc9VVxY5\nyLZXtL06AH2dBwhNdc8PWOvFEfUO66zfKdzAsQgzLGYbKfmoWZxtQtCWlvOR\n9UJmO8Gzdwdt+7eYE3IbdHdGeU58QQmUvqSUXA6Odst3fOVto+OH32/U9B8E\n1R+G+aSlfClRhP5ouDpYhKABTlnFERhyCbrV+b789p7FNG6AEjdP6IznIYhB\ncbnq\r\n=f7Py\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvYeJUG4wfkKN3JdZALTX4O8D/E7PTfSVNckhiskeHkAIgKqd1FkdRHAqneUSpljAk1RLZEa2v5hRdKdZLAKz7cLw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_2.18.1--canary.559.18237.0_1627521555786_0.21293033995018296"},"_hasShrinkwrap":false},"4.12.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^4.12.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b7486531cd89f431909bb9435ad3ac2786f9f27e","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-tDHkQzQozk1QS7iJQT23DTsFgOr6ie2qPgZLHdmpEVOhADcIlCUGgSYEVqB6F9JV8dlIoeJHYq/2DuVEmmt5BA==","shasum":"51cdf072600c545a447fec2aa641d312c8e49d47","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.0.tgz","fileCount":25,"unpackedSize":89151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAlCjCRA9TVsSAnZWagAAdfwP/Arn6otU3udbeBJN96ip\nG/B+QnEno0KFx9ZUouXhS8Tu84Qp2MW/IEysYyZvt+JqzAq1cL69qKzIlnT/\neVijjP7PWonCY1/5NOn17kK++8RW9Vp8gyoOJC9u8IBRZUs6zLi3oXJfNMKJ\n2Q/V2/pugGHaLeyxnHPA0WgxCwNK0PEDK2wYNci8zkIWl5k5ZxlhwKTkonnt\n5cDNb9EYWZW8sCEcjc6+o796LdIjBU386Tb/hIKvpKt3oLmthf3w4nlfhVp2\n4awd+oViqzZXKXO0syc1eMgLYzfers0s/L6v6Zt66JwpzHdr5p/JW8x1I6LV\nnC6XrncZsMV5z8o0WJyLTW3v2OCElPhTVMOq6S9Ox/tmTYcNfyZrOQTKTj+w\n2tcflVIvFWY62wvqHyrZ5zo/aTLbHuq8+qFlOU3CyUR7yJikASGJWw9q8GkK\nynzzkDSt0Xq+4t10zayQDyWm14ZMP1Y3yHiJZQ0w+LhWNRmX5WhGqapY3ESu\n9QrQaguu8EztvodEGnhJ9Q6pZLtlRjF6N0bSxCeIcK4TGccqB57fZxRRZEJZ\nTyMpKMDWUR876Alktr09lVxqqChqDlSbfy0S1xoe7oir3fvou8SstfUth7nm\n+fBEi0il8/DEbBj1ZMUNEv1iUWN5Uo+cpBmeB7tly0YTfR1Iqi3w5CXuQdTC\n8lVy\r\n=on9M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4e+V8oQWe1BMOqiDx2aizxQf34dj3lw3Nx6kyL9rrlAiEA0oToIUZtkJRtmGS+SU7jYZhdzTCZklOl3bpL3tOTcwI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.0_1627541667059_0.6464592175511608"},"_hasShrinkwrap":false},"4.12.1--canary.616.18256.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.616.18256.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.616.18256.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1ea61697dad0caf33cf12f991f72237841e7c741","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.616.18256.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-g90Dsywom1aynQs9MPAlQ6rRx/5uJWiRq+BgYIKTRPjx21mGp5RFA7s9RZykSy3bfx1DHCpIEmWHbxjO6LsvUw==","shasum":"ba220dd0c587e1fc609dc0a1bbe2c310dcf45411","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.616.18256.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAoq9CRA9TVsSAnZWagAAP9IP/AoQyIssOzKUXwob0HRc\nT0R67MCqglxxKSZJtmdIxvtRJ9DAJvDkRDQ2Dh6ILb6NRiHYPm8l1gORf1LB\nLNCS2afTx4A+WPDWfKlQTz+0RjZKeKwwArkpGDrkquiejq/CdChPNvbmoXl7\nhZqIgZeFe+rsnD2+c5GKVqGhp/qWsCWFTavgL09fPVul6hmEe/vm4ptYRHDV\noip4dZL7f/ldkFEltCygfjElu9tRyEB45T4v6rOP9hV42VMfAnS2Rkt46oHM\njMt62BQMwgljUNTYISEnSKG6bE3tdDNJWa2zF8Cw1tVsxWMN0HLv5u+pw9I3\n7emQ058S8g+SNG5kRL7N52eT0y4pKeA9zos/kf30/NlHc2S1O/W5TdkYEcqF\nTeu0Of/3NWqWua/NKobuOdbwCJCmsyvGG2usZQmdLwiqG0Y82E26xGbOMFeE\nOY3Tke6z3J1ETTCefWPVm2zfh0Ybm02uBc7EPoxjB7UTOW7By2nf8sYPTojO\nzJ1IlidpOrC8YRQwp1INk1bVupkZpcDrlM0rlCARZLUdzwKfMf2xLlTrt+tf\ndrG6L7fonG25vAFL6Zl10Go3cHg1bbnXjPeBLyVBF9+PJAsBAuWHP17jPtyK\npbke37GJzATiKjC1Oq4CV506NCMdoNTl5lNoTrbHmi6tWDD0P1ed3y2eI/u0\nulAL\r\n=qhRz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCzceUpGA2T3qr1GVEb/VLVaw1sN0V2hr1iqxhs3oDtQIhAKH/i0PWO6XsdCNpF90poHJcj67AW6q9Z6ecN/5IEPKt"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.616.18256.0_1627556541016_0.40290437391449796"},"_hasShrinkwrap":false},"4.12.1--canary.587.18262.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.587.18262.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.587.18262.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b52f3d27be37acd97cbdd7a4b282d1ac95dede3a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.587.18262.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-IANir0eAkf0jGdFIu8P+i6TCGUpUP1QOBPlCLOzHtFGWNqSxwg/VH98Orp8tJ7hDLd4mM2sO+ppZH+3AK6xiMA==","shasum":"5c282ba2564d27d8316e9dbca4a4149d4a5907f5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.587.18262.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA35DCRA9TVsSAnZWagAAsk4P+wWVJf280nFdfupZQzQn\nZ3pMTNNYtQlrmXv5qw2T6m2GgyIwRe4kn2RSbLTe1QxOtDkBMnz01eUpnZdQ\nA55vBd7bCDVz+gpr9H9o8mCYhs3qd5YVi1HnsIKJr7CG9D50d3fpCsPIxOp9\n93IAmx98KYw+O5FRYFK2PlrmlM2CT9fAHCiQtUAX30drlvQ5diFWQHvcAXE8\njwRhL3SxsQrpXDIX26KS7EaLh7Lasq1ARF03XDgJhExVdtzEtxZlDKbcwOxP\nHoEIjmH+DguXM2E6yBAsctNyZsWNEskspg518++QuLNEDS+HYv4I/dmmbLPG\nxutfQgSqrEqtyNaRUU+E1VypgrWoXNlLq7OINvd1IhwHz66Gis9no7nTIz6t\nKnpdPQ5lMMDWkeXqL4E9u1A0cUAozDr2Cp402tMqvFBP5b7IhFEcCpOz0AjQ\nEUqwy3VfXOdqb8m+hVodNDH9HW6YRl0acSVMi+SZLg9Rn+/H5bzI8WN/i5Ml\ns5bmgmM12pd9lKj2BWV5IyOeICNm1wPlHCkE+Z01umhbAIqUqr9KdaPTmZo/\nhK96mWNsopt4fS1LF1oesIgjqgeA2LBMeySWp4jsf2Jl+xMjKkjLFsK+PEWz\naroBuop1T0nzHrb/Gg+uYuv9CQtlf568Ly0DyRkdzq0tBgPVkVegKe+jRH0R\nUDCV\r\n=Skji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1SAKHCDNPByYQRL39JiULy8SLMFynl29I8j9UzxgOlQIhAPbwxSBxnLi5zbdW4Sgnc9Ag/xEnrZUe0mp2ZUPgkxBp"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.587.18262.0_1627618883089_0.9965967003931286"},"_hasShrinkwrap":false},"4.12.1--canary.616.18272.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.616.18272.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.616.18272.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"44f8b71fbcef5b1c2133100d0e7a88fd7c9f5d58","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.616.18272.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-MmAiBsVrnYBjimMmwy9gN1u7SzFG2BA54Qctl53RzSKfvcuTEtcnsascnfOHw9WJITNzRlYpa3BE9qRm9wka6g==","shasum":"8f72876e200b9cb5816d8c13ef818707bf50d11d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.616.18272.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC+JXCRA9TVsSAnZWagAAUvMP/1KSkfSj6QynShvr2qio\nQvOQEDw5GlnfFmRIPDSJMWMAP1e8kRr2NSbyDYX5dcOINc8Mx2VzXbdGQUCu\nMqbDxQwJVgJhKia+3n+EGzJ/b3Ck7O1yeVICGez7W8aV9wI1XaMw0u+Tfca0\ngnRDPoPQ+f7XbzvLMhX24t+ytOOwWskQOaAAxsPrNA7LdP70fgrfGyg10x8D\nBctcXYtm8+YIcjNitafGxqvp4exPm1HwU77nswtHR/HrgCtMpwvNQGCL1SZY\n63HwOoisQqp/mTTXHWBekGMAxkwvoALK3HkP+/tX8iFQzYONshqURSgNaoGo\nwaL0zCsXLZGXo6qRv6KvY20wbwl+0+BfYqMjNjCN/ZkbG0GiL1TpWlgn/8mH\nsgCAsdiUIVYn3IYvWU6bonhZxJtGvV+j0xxK1DRMivTbc3sfeSexEnTjkc7V\nWBzAkXmSBw35NDLl16k5BcbumGeiI/fCMb9yktuDxePC74lRaF3vbwfs+KLu\nO7GOQxVSAJDOLWgOPXg4NlFoz1XGsutMn8KLPWrmy1G5BJjKnlAe2uel5o3t\nvO1JxPGYvfaMP7Je4aiRUn0OJILoDslGwgpBgByxHAcDqP1RySk/0BpK4PX/\n3TTnveK8l1expsLQG4qdnmopz6TgbYXKVP/aW7qLKI9yIK9Wa/cdFcLXgJof\nxLao\r\n=UPMG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQSjU5I8zI2IoglK9HEXGdyFkBR3MDZz7Pdv24/k/3RgIgGoaCxTYWHSO6vxVY+bp+FyCA6KJIpWa8V2PlLLNFRCA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.616.18272.0_1628168790825_0.9332470309717267"},"_hasShrinkwrap":false},"4.12.1--canary.587.18280.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.587.18280.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.587.18280.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e6fe76a5c514672b99f97426ad886a2d7fb2e5dc","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.587.18280.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-gjM8EJbDLFElGm3o4MF6S0+tO/6W243/e0gzqMnbUIRRLT/VIQnjnEJrA+fyG0thnBEvRYasVV77FxrdnyyHHA==","shasum":"623830e49a0d9ac37a508f4e0e9adadf8d725994","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.587.18280.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhECUECRA9TVsSAnZWagAAqDoP/i+VrTowEKAqZBNZqPxe\nTl8povr3dcQiluRe4OMdxlUgh3idPTSG1DWOX6qt87lidSw5teAHEqGkg8hy\nF8HB11zX1RqmhbIYHBA7HQ7f4LBTiXqoDou3yCz9Z2XsvGVfUubmVY8p4sjc\nbZpEfOz+vtybM6PE3ET+sDUso4lJve3ptm5k6mAzqk2BgFTZLB+MAoWahCE6\nlX1b9RnQe0bDwZ3D6UzeyK7DWAP2uaBvoGkubijDFgmGTxS3+URzVClgpGTu\nHnKXKDYMGJkl8N/kxaCV0V+qsvh9NVmMA2WhLKr3GQ0FYOCJdwUpD42hbYXJ\n5KnvmsLd4dYkC8R1ZjW9ROblxpQQRrx4LLm1hSlJt3N9rvChwLIogLNbMNyD\nIdtrvHJXubV2eZUWd4MDuNZtggGyUZ1SaD12l2l4AVkwOUVJd7lV9nrqDPid\niXMkFrD4unR9KndXk0xMmP0UXTENEJTSI7nm1V+jASj6FkDaS5kOza7Olzms\nlH0xiJ03x1Y++u3sEjV0YIp2HCFjKnPG/N91dHlLtrsR97ohTk7ucGnHhX//\nxUpMRbZl4gjhkK2JZOMU8fXoDXB/NyIWlUAFvdVambJz3JBND8o8rEN9j67F\naJBj2OR7yajf5F5NeL3tf4CN9PNowPP9vI8hDrl3x1lSJzE7Vfz2FBwsgiGL\nljAe\r\n=Ltlu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHxmwWjeU/xzpkh9hl4+vQKmZ5RvotZuc+wmt1EluOuAiEAkAJp7otxeNL8p7aY/g/wQFKwyX8waZgv/tVo/jz3kls="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.587.18280.0_1628448004722_0.9129421258233157"},"_hasShrinkwrap":false},"4.12.1--canary.551.18294.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.551.18294.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.551.18294.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3da9fb86bc17146e1b87913ed6124687c886b861","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.551.18294.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-1DL9rrHDiOI58SrXKYu/TCzQ7C0VpE8NTZD0YXtS88nN947SAAfhcy4bHpHeMTdMl5JAz4T4etWA3FXbUDSUjQ==","shasum":"389ed07668b0098bb4ee91f2bec5309bc78cd23a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.551.18294.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFGiZCRA9TVsSAnZWagAAMp0P+gJPLeo6ucnsdqlHxKn9\n5D8/vqVSvMendUjLJE3/enX7s0h0R2FPCPA/BfPeu3YVgOB3eLcNrJKFu2FE\n7LR6w/y6oUY6lkL9pkO47Tced+wPNWbiqAtLsmxIKK1a8xT0m4PKjVWoqpFV\nd/NTSKvjyQ730x4uUYeLC4bIKcsJMkc/JBmCCEZWPJRacRXgE2kIA1k2vmVy\nZBEg9QWrblWdCk0uwncITBk5wqcHHPwLeEfWNsarP+gW0Ky4VWTqXC5Ovm7M\n6GKF+cT3C3GRnqXlHVQLjRofPVY64DeDKlZ1Ci7ySHolxZdVP58/0ULWf319\nWCNQ79ERrIlPVJY6aaiU3GW6iHpjrSQ0VNkyxoc24BpvSY5l+pDGhtFz9uhz\nuKaq2p4pTxMP+c4KV0ysBKugiT+ZTSgGbSU3+PaXYK/L1OJvTDcys0IsMM5E\nILLzzyV/wu7oc8SxtS6DXxegSJXQ5Bc07PGg55Y/Wf/JIHebyGvaWxH29O8Q\ndh95NmfcYcL88Qr+zlgsXdEqlZxB7nPvu5TaN1aSQavVDbwHfR5/fIQleGsG\n47zHs0QGgJo1D9Lq/ME0udXFMcrva+aSEvrMfPgCZJRSxNwHdCqUh4aKWlHw\npdCSLDJif6vSAbIs1vXv8GredAQPjPwDGfJICfKDVli6yf2ViuwbRuyO7R4q\nCmZM\r\n=ryci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4DVPwB5Wsc8sG9inhg7yPVJMXJB8aXA9FXvL3q80UlwIhAIEgkRsptxQGF/cfr2GTDw5UxBt5Y63N2b7yNXs/fENI"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.551.18294.0_1628727449610_0.2470911905284563"},"_hasShrinkwrap":false},"4.12.1--canary.666.18307.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.666.18307.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.666.18307.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fa5a010bbc6253e6f35ea4c2addf4cf15037952f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.666.18307.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-0R34AhnufD3LCnIxBttP9KYOidDrnxNjzqIkNMNyj76+ESJpT7ZBdzxKM/phpRd9QQ3YRM2KzLTAK/uu+UaCXg==","shasum":"1bdad7638426b09c440453cd028a005f11d6cbab","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.666.18307.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFkBnCRA9TVsSAnZWagAAeRIP/2oDYjg+KC8goxCL31dD\nQ86moyyOXwXNNNsds0qgNG9m4l+a4SD/yyO/JHskmJdPRPNwfvnjgbonE3Kk\nyH+seNSd2wKfRFLc7UqAlp9j4FMOdhJdpzUyQgey0B4ZiOn2Okql7zcz4T+x\n5Dq9O23Vnm6ODnDhSYFS17dfddwZtgfC9GBHBkOZkGu2BwuP0mgtvklx5m9e\nDI294Hr8hhrjAaJ7GzPZdpTxI2tWlM1pNYY36uCqunmih4hjxpCt+ZJTHNPd\nlxA19cw/cLam6WUdKed6CCCL+dnfZh8Jl615iF/IAMzDhWms0DzrF2ydacfU\nJblnumRQFVS9IMf7UOjDZv8pNzQeX+RpVzT7qTB1Iefnf01iJcfAFiPuDvqQ\neuCLURGsWllTAbkDMyAXictFQNamA4Kz2f4wJ3zhGry1kRS2gf9s7X1Id65H\n12ZHLSufyHsjWmOs5oSlzDtUtvXJomZhoeGaL4wq0bBnlPQi12d243OYaeaS\nFUTYQYqJ+ppmQe3gmKTMPL/j9mO1gR0u+6hk/onfNIrJJFPcDd7r8POdBvG5\nrWZkSMLNMJbxHeuixgHoqXpZHzxlM4zQm0W9k4NdmwXVjj4G8R6mYfBzFkoU\nWeO5vOyz8DxycRFOtrMNqDibtiuzJ+mBrl3nr6uMJZeiruyXzQzM+EsdjVhi\ndKR+\r\n=dpnx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHO/jkKuo6a4fHIXe7DqQO9tNlqbXfQ6wTkGV/vyRCEjAiEA5oJ2LzBT679pJu81X167v5NuGvI/hZ+HA6UTPEhcSlw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.666.18307.0_1628848231511_0.3658342682882223"},"_hasShrinkwrap":false},"4.12.1--canary.666.18313.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.666.18313.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.666.18313.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c7688a973d7f0e72b8cf2614b8902ff066b03ef2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.666.18313.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-AuUe/GbSYVXxIqgmR+lTs8KM4M57NostOuXlt0GDC5DksUtzkKrKbH+qwklhveaE+8kMNFl5EPUOQpS1WT4ElQ==","shasum":"49205744e37f87f5b96bb54ccedda0e10f4b3cec","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.666.18313.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFlAHCRA9TVsSAnZWagAA45AP/1mPJ2LMd5lztWDnel/C\nLv+oHIDiXKqqBeAvQ59yifzHFnHBBI3hhuj7Ts8oGFwz4C93B6zRTYqFkPQV\n0IvMhWGe1lW4HvBwil+CpTkjeMWE8HODeOnyqCToynIu/xjfm0PUwlbYKXWY\nVh3btqFlxcMlFOAIhTEWROOLU2kE8uCKkfCy0lSbKDq1rz/hU/C0avtKzkQg\no2fXHEXwijee6K9vii3ArbTh1hclDyAYwB7y0FzBAX9U/PLYYzwHlLfKFtsL\nd9DFCE12tFTCpBXmxVyfLYwbfKu3hsDkfdrjg0SoWz6C7gQFPOnMCSuOwxV1\ntbesJCHb4TXMbL6boIUBek0OI4hmlW+L90pLQGADuWt4FRfNwXi+lT1ypH96\nn3jwzN/NqLEEdPc2khus/kP1xBWzCUR+bvzEzY36rMzl5Rs4aBOvJodR2cdM\np62tN6L0ggSo3QkcRZsqscR1kkv8evpUVuj6xFT4YajyNWo8NM3ZPXb6QliG\nt+UBfHdMvrxYcDM3j3iPXmjYcQiw/ma71o76YT3YrJTyUCj9RJi3RTjHNvT1\n15Q8m9uGLhYDIsEyE0JASfjZ7gVqOUH6BFPi9zzvRw03OVqKYJOPkXUX4wKJ\nGsSGl2ttakbSRnKvLfucuS7mH5BVyGegZAFHkOXu/XShTSvcUf/Nzd/T5Blr\nsJGb\r\n=HOOs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtfhOT02lP7FpxLQP08ZkAufaImpi2wzYOGXuKjOJAWAiEAoqgmpH5QBG3Bi26Sxf2RBVzZOMzbzkqyiNReWpMQN+s="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.666.18313.0_1628852231263_0.30155811407447874"},"_hasShrinkwrap":false},"4.12.1--canary.667.18319.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.667.18319.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.667.18319.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"506f827986665ffd21f7c2ed006c8745825eb8d2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.667.18319.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-14Jed6P0SxkcxCVL9aVFAXRKHfaAEjqDvh8vktF6Hrb4XLMYW3DtR7gf9XlTRxvV9wA8zzQv/f9rN+gcuKtaaA==","shasum":"cb1b41c78675d80c63b6807fb9046968b0dcc29e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.667.18319.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGNCFCRA9TVsSAnZWagAAcX4P/0gudTaMiN9bLLSJgdVv\nDzBDXAHhGg4/IZHJGyfFsiaEWC+Ej3pSXOFKvxwj/THKZjJk6/y+iGfLV+7T\nV1gnKQkM4YgfmexXifTtMw1cum8NtxOXpmKUjyXMxs7Wdqs97rWe8hNL2/MG\nDCkaPEhSxE80m4hRlavqf9V1zMhLFnOza9Ebu8zXWK9IDSs75ogn5ipFUqAK\nBBATnfhN4AMj9nuitwG7VSaaNtRMVDBTk+7dGcJQISQs0sbPKi0BSrNK7msv\nEQiR+aBEdLllFd8VqIevfgcuIy1OcO3AhCy9nyqFksD2oVToqaWej76r2tjk\nBM3OvRdGAe5ANhGzFonqVcoPfKeNr82GRNA5sRXnw/8MjABiUN7cTBNY8CrF\nW/JZjn5308oFD1U436GQiEFt2bkj4SbQLwvfrc8RA9psXCd/C++KgtFD+cgc\nJSN8un8QlQHwAkXE8ddM0zcL5KRIi+bhVGOblz+EhLRxQRVMCfJSKLkBiO/T\nN2CwnnUtFotUAeykhp/0/G3xijv45yLP8OzAZTWuF6Jv6xyia3eczcqLkZOo\npjAem/80j1qPEl0wKhL1P9N96bwtuyBGZXJaZYaQYaCJ4B30mT9iHZ9hFvZS\nJpyQLg13uPG+wXfzU7PZxCTlaGfBZTa3MkLhsLhFjZ7b2ehRXaRG8pz4Btdv\nmeZO\r\n=rT4f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC787BUXNzOpLATvVHjwnJrAL1CW5yJ5VXKwOwzfat78QIgCebcOrWcjZiCv7KdgnG3FtmITCstfkNioHhCN/8bOg8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.667.18319.0_1629016197264_0.016673791765591917"},"_hasShrinkwrap":false},"4.12.1--canary.559.18325.0":{"name":"@design-systems/svg-icon-builder","version":"4.12.1--canary.559.18325.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.12.1--canary.559.18325.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c1fa3968b70097eb9760b696f3b660b565b525ca","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.12.1--canary.559.18325.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-6O1uafgLbT28PdrlY9MGIRSVj26KRFEkFBFYCBvfxnCArzrUyk5/VlSzO505RbgDmeJWMAjNkNl3qp43PGZ6vA==","shasum":"945f47406a974b99e382dabe67435c0b94a311cc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.12.1--canary.559.18325.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGX+ECRA9TVsSAnZWagAAhk8QAJBaVZrU8duY0+2j9nbf\nIIEM8UZMBehmxJDN0MVH5pCSczbMKP1w/U0dYzS9aj8q5KnDB85W8VYMxOQ7\nUk/DAfqMuUMGVW7OtDPiHrnjIMYT+QMru+rWEZCTq8CW6LWgL+lSIm8YI9Vu\nD8j0MpGBpUucosmUdRr4aHttNLdacUEPsbrOgCKPR7LZI9KyZY3C77lHGo0k\nOTpa580ITjRJwC/HiUnv/KBM7kifd6lNnUpqgbB7nddi/yAq+jCkQxb8ZXrZ\nKQq1e1cPiYcjIZ0SaAFOsbHhX+cKVMDqTdUlAprQzmPSfE4EEEPmZdyWCLGr\nC+4DcX7dca73d65s1XxwEW4afKJgiPoarRTlER5073/NPxe8izXhGs05TIzn\nMjewSGEldI4w03bXSry0d4YK9VOyxh5onZW1AGStc3hoAThs9nBWFvr12bMQ\nZEl6TTNSHHt58JTuxsfPbh2AJSiay6Sn4NB+yHBsGjtobkpA6JQ/5JSEH78N\nLqK6IYZThcWa/xibJ+9AjVIn9BYCmZw+XDBxxEPr1MTAOWWW8REC+NjKpL5u\nFo8QfEW6N+Nii+Z654Gbfl2vP0Eiv7xpkT0GRUqsXJQebPj47HbEWS7AZD/n\niutzWJBLHEuK1T+LBNUAIQqBCfr+fZ0cw7/sCInstpAudMRdBqo/BvARMNSo\nflxE\r\n=yaJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGy+dhSj1gEwTPcjxETnec2W/WGKC1EJJkLuoVod8VFAIgAb5lQKvtnUtmFgPmaF9vl4O0KYsFAc6X3/7IBGG/28I="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.12.1--canary.559.18325.0_1629060995988_0.7444617492130607"},"_hasShrinkwrap":false},"4.13.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^4.13.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2fb930ca24a9f138ff9345c8e12eb510f4620da6","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-oHz1+ugX/bhJdeI3zcPjtDFVT4Qtp1rXE20mGP3tvnnKxKIF0kKu5EfueOJNOSdqfXOeOHuQtF6wGuRuHjfGuw==","shasum":"d9f1a9e01f3cd428e5390935a45786b4251cb7e6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.0.tgz","fileCount":25,"unpackedSize":89151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp+BCRA9TVsSAnZWagAAnCwQAJ0jQlxCHM0hDSEtJJnu\nQWyffvBUZkpoSVvctr81wkbk7ZwfQiTpg9bV5PNJ+tNf3Z7nIHYafoS3nVrz\nn/VCcUzxHFkCX4HiRqRqrMdlcsV/VQBz+gszpngF/quf6UHuSbYMbUHO2X1N\nGAYGpqaiDMBo88OM/XHxc9LHjUj/vNLy1HIWWAfLZ4k1cs//8CBRsZHu34DL\nfbj76zGfeDQDYSpbIh1B0d9VuloRZPVUkolTbo6KilnJVHKAHieFZqcqRdsq\nlH+2QWKDI1SELPuFKXNsXWesEaKMjFTqbo0T2hM5o2YYSra4UIzEdr+Fganh\nZK57sWceuH8BjsZ+DDKHNeSh1kjPhcnMQui19RX2jz8beAyf3uiX3jekJrJM\n9hq0/rwrrzqhRQmjjY2PAENLsGghS0NSljRHHswCt3nv7j9YjdIFQIVWV43D\nfnLsM1wDrOfv/9OLSWujG5Vgazvni+d9jBIpWSuJ8pvHeIcfy0BNal0AQjsd\nhXo4NwJpii10qcvRMfhaLFzChwCi0O1ipJx5aUpdreqn0/F82ssPdK0Nhqd/\nlRCJOmz/A0siwNa25JTGTxj/6QNXTb0LvKFwhB5xqx7EqrEHH7kWXmqnJWzX\nWzsLxtEAoh5B6AoBWE5wH3VflvAmN/P2r5Y70T6Jx24BFigGY/qEcV8gxekd\nSv/K\r\n=2jaD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWZ4y+CL5KCLU9k08o1U1+AO0TEuuLiu8CHCSkAXrhtAiEAkLXKNEYSAD5XHe+j8pwrtYAYFtrw9a1tDp61a71egZI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.0_1629134721019_0.9224030787278195"},"_hasShrinkwrap":false},"4.13.1--canary.587.18341.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18341.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18341.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7ccab5d6d6af0317d5a5f4c56cfac7c7585aefeb","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18341.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Qnuq+Hzb2EJOu3wxiLqLTihyls2WKbOpj1kBYiIMIOOIXX+ypZxr2PoxgTa6UvfIL7Jx73A/Zf4mVobKL2LiyQ==","shasum":"1569d40d146076c5a006231e09dfcaf2511732e3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18341.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG787CRA9TVsSAnZWagAAc10P/RJnVe+wAddpOTS7hm6W\nlWJgrbvcoPD0s+/el2ks/V1W1kuARfrd6BNyr+Gm/lV5gnsjrecj3ZsgEm//\n8GBpBJ/TtYFtYaBbh3L2h8WTWSYB652BPuT1oMbC31FDBz4yGL3//VilMLJc\nRnaojUWnjAF0yZLNtetPxgUrO7z/1JcIp07yR0nRs6TAtTaQFNq9hqE6lbOU\nU9UO2awbPeatvuO3Lw90jK4XF7VM4ANh9hpzp8+VP0xjbPPrLH87x/OjVXYz\n6vMstj9J9zijehaYuQkIPqHmhvn0QcCbgsgmZo8Pj7IoeSurAkNwBcP9XWDR\n3TekTZ0Inii4Kh6eWIhYXLgGYO8wqMWyRKVd2NNF0k8Pja42PulYuJp6/vYy\nguik63P66VKAs7UgIcJEthvV7SrhV4n2YYbi6QOALpc4LZanHW+5iTUgGHxg\ncoRjhtmrBrPiScleaDQ+RcdSAXc2Ds8zx4W8O1/cAoyyGXhKn5zO3fHXRYDU\neUgy9KTUbnWK+CGMiSzuVIRiUcgTHAF9Yti2sctI/2z0ndPdAdwI3Ev3h5LO\n94cEEA0abEvB9LDgqtND2RxPoH1CB66CwqYDnr2WzY2g+FNQ5GhxoQkx5Wrh\nd6s65Y/wYwE3gHR4MU7VfIeQzxv4sTMn3fUH6IhjEjoY+U+v23SuFZuFFGwj\nm3Xl\r\n=OpTH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEcDm0qGXvykinrbJa9bSoEa//NMppmVLc6n9gAagKF1AiEAiVQJm6VnUSq9hoar8ePjOOks2gVtarvIoAB/K6zXPFE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18341.0_1629208379357_0.9255311866610638"},"_hasShrinkwrap":false},"4.13.1--canary.587.18355.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18355.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18355.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d2899585af82250d0e9e15fcdfd312e21dd8e048","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18355.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-ICFf9fp+k1Ai02IfZvpj1f5dNn1zNrZQViVqD2QZ1XQHWlyir9XQkSY9RAaUS/NeTKgCONeUaUQIIuJ1VejFdQ==","shasum":"6e3e48cf5f98d96d15a8a90cebfe270d99c99692","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18355.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXAyCRA9TVsSAnZWagAAe7EQAIU1hP90bneQx0vpzcbL\nLHJePLuQC6L6g+8fjysUFI0GfmWbWPC+LRKFU9UU8+kNKDp35vE/xjri0kh8\nMXCIhxr71/WWYyO/3t9VWow2Srl7270wY53k/FCkcKR+hROcfXks+aajUmoQ\nHvffN0yAY+op5nICtFuwfdZsfQVCuKmqh+RfNOJgXTeYe8UWeEhDoka9CPWj\nFwFST/iClLXoIwwYZ2K00AiO+x0TNH2ijplRArnyQNy+D/5audSdp7r1QTDy\ndBEg+KH+PWAYLI1141kDoq75meX1l3+PO1bLX34+i0oNoOnsXLmGhJuJ8LIX\nVo+eMvr9VIn6mZlxgJyNJmo1U5msNyl1AiBNu1ZIAjnLNMOqqs1f7hKQK16T\nRnbb/n+59myAvedyZKt6/YWvcWutX85+DE2gu8vqFKX4ZaURbMar+UYG8w4d\nkHMXbDLJOIuIvwi/u5MrrjHzVluNuE/s+YXQNt05W+O2ndgmteYwFBhMejOB\nZpSvo4tohheUFQaYUHJ978ZRySVt/ezB//8HZYRq7qK3lFf7DMPnV+JmD+Wq\n6e+1li7p66WFhFvOb6XF7QCjyjsJx05sl+dnBM0OQIKzcVff/0k1zlnKT7JW\nzAd41T7Zn5UI7Smxnu6ihPFH5p0HTLSlZxAOUNxQhoj9tcErul3SQ9JMVmXD\noeIK\r\n=N5jx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBK1UedWXDC2o2oB2iiIsdWQ8H6bw6F/SNoB+2O2h8dgAiAmttNds1kUSQea3P0gBiglKqo9auVBc5x4yDRTRYYKtA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18355.0_1629843506797_0.24412261427190152"},"_hasShrinkwrap":false},"4.13.1--canary.587.18374.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18374.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18374.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"944491ce30f3210b236a11ebae4fbe7236bb0ee0","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18374.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-twZvnA6pUaLui5UmM63e0jNE0pN690HdDftuGUhpaMISVpNDQ1LxB4Zgvj3ZZxAkKVZmbcudWFmuMCKAy+DNmg==","shasum":"88949f3a76c00f10ef43654963edcd560dae9faf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18374.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhK68gCRA9TVsSAnZWagAAUoEP+wV2IjJXgYWrnS/1A1PZ\nsugzliHfLg3dvHIDQfp5ayONffq0c59hYJXKmRXCdkhR1WOLiQx0eMTsUWzd\nOg+sgSOec38mf8hFuy3YXR9LZ0ZhBdR9BIsxcJgS28MsXXhUq/bG3m8Rxd3N\nSs2X2kIuAFfuBJuThBn9Q4hGroZ8qymGo4yj0uZiMq4+6eRSO/URUyI7NFA7\nHPDboSUBtfJpUQH5fuO4vtV2lYcdlL/70o6zBhSc10MzdnpaqiU4vMSYxlg1\nNG4HxkqLprw+bEB2taCUrdH2aDdzn8nuo2bQCuvwm07/Clsp9W58Yq0Joqu7\nmjtdUVlMLzWVUasUmHc9T4H9mTg0ZHxNASBBJ432xUTEBVPoQVb8ME3oJdhd\ngT0ueZQijA0cP6RZDBgtT0gb9WybqNNuxjMTnkZVWuu306c6O7RRghxhdOTY\nCC3iycqxWSSo7ZcP5BiV3dXvnRHAjzh2PIVTRjZyNySZgPFsG+3w5yiLXDRY\nUqmJub1BJBDMc/COfRi1LLZIi6GNNiVFUGTONvTB8+hmHzaloNUTAxb5kvX5\nw/ntWbvVx9SEZVP0zZ1JuugmCxqVsYS4wp6qbtktIHMlFlwWxmkefkltOBv/\npL52lTJZJGZGjrrhiw3lXbLSTEwWTQDDhIpkB3DOmVd80qbSi+ZJiEOpRMho\nyGDr\r\n=ehWI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIER9vEf/u0tjkr15d3ZLKDD1wRwU9XCF4HD07MQRgIwIhANEaJY8hQLpgXGPo0vdFfPJN5o+iVRwa5CozvlmcSsa/"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18374.0_1630252832411_0.9367002724078815"},"_hasShrinkwrap":false},"4.13.1--canary.587.18391.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18391.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18391.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9a0e5c261b813a330cc7acd06b223d50219517d8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18391.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-CG+MGncmZF9ivisPvlmbisjb+bRpOKnLbVUxOsy1c0bxATlG7eyJP3Tb8KixTG3OU93ejvckmBHHawsxxEI2Dg==","shasum":"503f4fbbd7b5e7f042cb34d49b5f6f255894159f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18391.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL8YbCRA9TVsSAnZWagAAFO4P/0jTjxmpPueJXyUJy2Cg\nkE4uJf465jiXnfV72zIJjD0Q8TGAyf//ssH0oz4puBC6hc1XA+HAIA/0ZGVq\nx35jlvVbEspQkEv4dotiMGWT0NJabNkiz1MbVvu2iRfYR7YjoDc5doh0RUQl\nQ3oM6mXjuAymaAUJcvzCBRAfz0gUyF6XtQ1EkLOCODpSe21xHO4ErvJWjOWY\nsfIqyUpHb7nAMFWs1s+PG5dLgZ+E+LzDXK5VTHCfDFnn13+Tf8RVoHnWuaFt\nB2gOCw0hXRoObiHkmEpVRcHobUxuiYUtyyWgGfl6RxY/OjvuNUg+urkEdAcN\nEdw/agGIQ06zfRvCVVL7eiMvIC4EBls+8jeTAB9gW9KiDpJzDISI5Uk/oWzE\nP4pMxHmbJZWLyy7biiloiiOzGwkA1/wJpfcZL+30VUUHOBMrxBqOzzkIQWI0\nl7O0MbK3dcfZfuh4rfDqQ5Utno3K5YK34RwUiH1xZzlMtNFL4QDBwUsvZlkS\nNrI+Bj5mXcEm42D+qUo++DwDTXpZ68ZGduW620cIB4hQ7RXPKSwegBtFr/PW\nG5f9cFvoXCXzZavxefG7b6ryPn7k4RNAIJ12762NtVplj179VY8fve0XCP5V\nD4TMIezos7s1E0g9dU4NQFrBYP/31j07GkbKTiJuh863g36lbXMg1PDxErDB\nQ9i2\r\n=iIRl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgnhYMwHu0SanEQbzWiIomvxNby3gq4K1KA/jjgRIFuAIhAO3V6ni97EXcnirKT4+dnkIaHgDCdBaAsZWRXEq97oS5"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18391.0_1630520859071_0.951662221713677"},"_hasShrinkwrap":false},"4.13.1--canary.587.18397.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18397.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18397.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"feb0716fc71e9a7e4668502221a5272967e8aa3e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18397.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-ikZKIYdZLq3DwRvqop9fOXofV5l5AXwk4NOHo4fQ4Ot+qxryihoqDeUycphCBTafSgVAr46ScnRKvceVjg7ePw==","shasum":"d6e92c939f87ffec4a90628a5ecb7687256ff12f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18397.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/VPCRA9TVsSAnZWagAAp0QQAJeEQbASXNBarzsW06ZT\noVGGyuZOYuphqWrntOqDRrbFardIDttEWWspNSnCrmLZ0+7kE2hyJUwAl6kp\noDCptVUkwZB7OTlXJoC1Vl6Dxns99j5OL5jEkhKsfqKEs8zVJDTVIIzYLOSp\nGzr3hrc6GMORmP/BQDpUUjA3GORzncvKf/KMCtbIxJ4ec5jWpP1Bz0bQwmCF\nIj5AtIItajn4iop85nsUApwkK7N2n6C/XckH/u43WmBNNv24VpZ+LmdXDit2\n2gJkbYjnAakmfrYrezC6NIbpu+X0piFvsUG2P+gZLbeoE2wUvKAJatHanore\neLjVmkdU574zQAkGMzohguPF5HySxHE4fO+o2P6BjL4zQDNdaBWJ7E6o472b\n8LVg16jC1LHM1f8Z9YEF2AoBsLPJJuQdO1u9i0Jl+s8dXbOZ/kqnK991BcOo\nlrIZeAOursgd8rypH/+ZCq/GqajR6LsRLj61rWYxZXy6sJx6y/LjlQtI8F7Z\ne3OT8yoXqLoUdbooMWRfQ8FllC8qJ1AKpugSjyF7EIAVtQDt42bgjiaxRfGT\niwIfKnBj7UmbTE8OmSJ5Ar079foqfXEnfYkjcmVFxCYgsA4YNGM5mxI5yxPm\ngRHP7k3ROGpmH+aFcDJURP87HRWk3jJQJgEc8BWNZUgl6bdxNli6nCWmpg3c\nvwcW\r\n=h8xv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICaL2GQdhpFTMo+SCfn8brhBJoSgkg7ezeHHjCK+WE1kAiEAvvplg7/APyJQAwy49qWmzZqxMFYmeAegOIopGr8yzuw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18397.0_1630532943584_0.5746192291736947"},"_hasShrinkwrap":false},"4.13.1--canary.587.18403.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18403.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18403.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"8d39bd266ebad8f83d22a005dd7cf330f247f06f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18403.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-QnzoWU2GARIO+Wf59MI/fsfFsHsfKM5MIZhgQboulTvOPsgenv2xCvo3LbBLLnOL+nwYcrp4oEreL/NqXIBvCQ==","shasum":"d29d0357a8f5b3886e2997ddc72c904fb1c38e87","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18403.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMRH8CRA9TVsSAnZWagAAEtQP+wZOGys/2Upf9jV7es7X\nch/ffZEMm9ZqzpTFXu4kfNPEwLdI81V/mwrXWvE8UjIs1qGtztHCp0ztI9Xy\nCSyieY3BSBYa7FxfTK2oRYrHoTfD9j1zabmQp2PGUjwS2nXw84bVuMpDdB7Z\n8/Gd8tnUdZNR1HpkGendckbBHnZx7uUSnV/PalEyIZtCErxYbcPjk1btc3wj\ngk5+g84feN9/8utWvJ4onORXOkrTnH7U8rO/1mYXUY7mPDdSLJpp9wQ7ivr0\nmgAhYOC/XeBEtB5gVAQdKnC38KjCkIF3ehKI3yIrTuyF/no5nax0iErA3nfg\nIw3+GGmbil+SGdXl36my4DcxBPmXH2OFPilYznVdQ+JMdhIAJwB6UnhHDF6r\nVoYT/eixP0Qg7g/1WGZM5mm+ds2Tt4+JZKeqGsxV3lS7OGo2zFpJzT9Qh1cQ\nNUtcfX0j8IXIMDfO+VLNcwYAT1pS0mvqLOdmOkyeBg/e43/61EcuJObGbM5y\nEwhUHyZXnsBrMYPGYDEMp54LDxegd/BMsw+kyzpujo6SuiXMUAEP/MJ93Aq+\nN/a1lrslnqZg/uqdLALIIlo738QsbrjNaLx2gu8OaFPShy8/t9p6T3ekqRvC\n+/XKf2uAk7pZfNrStyyBDH/uRAfa9fZtmbzD28scAn+MfdPTJxcar2caDn4S\nIcYJ\r\n=aS4b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDoFFvS8Wp2wDiEg4F612mWbT7uDaWqwNN/dzSvZbVmXAiEAg1iFJkwm73SW2CN/6Gf+kUlmbnuoBiB9bfR+Fku822Y="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18403.0_1630605820616_0.8656895333655996"},"_hasShrinkwrap":false},"4.13.1--canary.630.18411.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.630.18411.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.630.18411.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5fbc3e0722bf2d9874ea5450990135275cc6c8f1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.630.18411.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-iSlLzPKGJsfnXFSfbeWZP6whcTIVjC9jlkd1ewC6hQhQmI7P6nY2NHjMF1zuHAlHvQnhDXXFYHb0p22DnPyF+A==","shasum":"b61e826595f39344d7a76f613e4454147cf631a1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.630.18411.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhNnLjCRA9TVsSAnZWagAAie4P/0KvYMNki5PRACNfOSQ3\n74zz64sW/aakuy6T+qqe9jvY7xRhwcB9Ps/1stE4RuEd2k5wQZLBuswEJ3dn\n2gorzn3HfWDT0NdmuRiaxn+Z01J9cLGLfn88ksSRTw2aUU8Du4muuVFNA4Io\n22sQ01DwZA3p5sGTqqy75A8LMIGQLTanAIW1/4Ftjd7/QMewUD75AausklHQ\n8/e5YHkkknq+UXncJpKie/pDF88D04fI8F9RbAp15pg28gf7UVtIb+Q/Qv+e\neCQe9LBj9Y3rTbxk5mjBZ7fDncu5iJAspamh5QaDR5FzA2ei5oKhd7q+jG+o\n7Q94WTpfY0I+RvzwNfM7mX1coERhWdZtp18cYszvEfnCVCfcpvQP7F8hbZC7\naT8SfJQm8WQlxt5IFE58aJq9YzmeHCMolnNPmSlIRqkYeSKiFAv+aNnypn4R\nRLetBprxiSMEQhkCqErEtDtuiLDm266dHVzz9xlm/vHNYipSPxlfQpH213H8\n+LB3MBRjiwXviqAL6bnyvGg9UGBDPDkqCUUCfdJwnbhDdgJssfXty8hDR0cH\n1WQuM7Cxdr49n1XtJwHCvKKKAdXbr2e6MJmUsc4tGc6O6QKsc1fPKDzVpJU/\nhldFq8gQEqy+HjUyxWWSJz3R1cN6/dQhdfvWGCVJwDEDWNGcfJI53sh2vZ4d\n4Uh0\r\n=v+5q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfSDhhDBGyuL0P+XZGn9cR79TuQo/1Hq6g2S6dieCDiAiA+PDejnhTn7I0VYYg6qgkjWf+Y1kS39seJVviugBVBXA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.630.18411.0_1630958307501_0.6025202919021297"},"_hasShrinkwrap":false},"4.13.1--canary.630.18417.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.630.18417.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.630.18417.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"597fc8a4bec0534d2935eb5b55ea28686511c53e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.630.18417.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-zz3xm511C5fv64T5vfEjbVmTXuQasUIVQgYAyhR+zFJMGbqmgNMbYxo6pLZaw5AoXE7mO3Dh2ukbMnHXW2pDyw==","shasum":"d6c7f4e4ba8bcbb22b96fd60e97393efc45bf706","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.630.18417.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN0McCRA9TVsSAnZWagAAzugP/07ivKL6SRP6Qcjc/oi+\nq6fqUkFAt5Hs5i95K68B71s/oAe/3KrXhQVyFRd9Hptm5sbYMwMqYFu/EJ/D\ndnRzeMJZEqR9cx1QXobD8Q6OLeTSwfFmjkQ8rHHxkc3OnuljktswmYAJ9CsS\nKw89KbTH0DV7KyQU/+aKLE78kxWqRJZDk6VI4a3jUyT+q9SX1dBH+XdirLTi\nTnxhLrRU1QcxOwgm086Vod4u3U4d+xpS2AFA4bgNzUNNAweizLCJKiergyOH\niVJuMhwGDPuf+tKy/OKXVXk3ROxey5dQ3Bqy3LfGO74KyT4Blpbzfdbxj3i1\n6OM927MgoLME1Y60403/fXvz074U4NQNWlO/fQYErKtVE765z1wWnaKb/RxA\nSSbT2MT4TePN/2SDGmtCCojELDkZGMcdw11sVDG648As98ieWHK84judlF0n\n0db5d+3D29C76byJQv3VzMw79ofhGScHB4aQLnjJQy1Yn6mqngEaqBAB2oGZ\n4dTArUpTyS+VzFAM+ZWLRBjSfGDAHGsBjO8Xdh5bFzWAq5ZlF+735vtOvUGe\n2/hCWH3p1Mv3WJ8xE3/KvlGPJU3tiRjWoMUn/MFZE0bf/bePAiLyfKOzXYh7\n5Dq6tG5cwRvMYIeYwv+sBtvL+u+/SougAedybBTcThmY00EjP4dgom5B0kzN\n0XUt\r\n=vBKC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLEOuka/xvH7lb7bylEKpiLZQf+Q1CnQdGMr8U4e0YTAIhAN7Zo437kHtwawS7qBLPBkRh4EomVpJLWtANVTDth+Fm"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.630.18417.0_1631011612821_0.6090806482802942"},"_hasShrinkwrap":false},"4.13.1--canary.587.18427.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18427.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18427.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"36e7eaaeb6b3337e49c55377c869857aa25384f4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18427.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-NRfpdnBLbs468GKGyNMo9DOvNuUZXahEAzMQnUV6VhTkaAD6nw5juanIUGLtsWcFxepGCMMrYIeHV/PyKbrBzg==","shasum":"610a4629d8655e06ace4a810cf3f85578d958233","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18427.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOdLjCRA9TVsSAnZWagAAM0EP/0DXoluZdZBW6/DN0Rx4\nPDA1+UxUgkNjgrYTl9oLdoz0yhnnao2fh/9TENBPHsD2Bhc0uWpUAozIF+1O\n9sW/KnlSdohpIyDi8NwcXaj/0HG9kxLxM2SkMdHPBOtuVQjvwAg0iwna5J8F\nAifSU1i+uj9T1lKXtpUI7saw5jlfGEisb+79a1tLU9HGAohi6D9kmpdkUJWR\nF8iH7A6S+tJzhpzHj/fPmUXYkKDv7y6Xf9qYjhMf31+pfFgOxYxWCNxYUpAH\npvqxysyUMGsaKPO5jpn/94Q28cbVkuq2v+uCpRsb5qomvhGWn8osrFOrNTQc\nEfprh25SkLilucCzTf7hO0Lqto8tN1kP5AicNPDhR3sFF+LMX64NcoFv8U1c\n1fZfTzz2DcqyWpOcrSbPBHYDRMzSp/pTbETmuBrxESbeoAeCJI07eYGNtuV+\nKN1KDFvHFc9t4KpK9u8PNQc2gwxWVqM57ThP+QIhX6bLPSFXEZKFV4KjiCII\njRFnqbeN6WqAZM30Pz+TYAuuitzrOZT9q03iwN9c52Im3HMHhM3Q+GI3eO1I\nB3Ojyh9A5kRArTGKtIOEp4xY4HGgtlkCwdY6M5FIQpX93udV2Ie1KMs+F2Qs\nOehMgJ+KW2fUTmb/MWUvbmhB8WHApqfQHpqRZE8DvOOOCHl4grnttLRKCjVW\nNp6D\r\n=3Ax7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLFjzwUUTOfXhP8HvWiO+X55I4kjyBfWmxzCgVEk/3AAiAR24IV+FISQDdDX0XQnm9oxYEtBHjNag8+Bqbk3h/vBw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18427.0_1631179491427_0.40880119024624606"},"_hasShrinkwrap":false},"4.13.1--canary.576.18433.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.576.18433.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.576.18433.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"fac164d870844c38206e4af5f53ba93f1993f35b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.576.18433.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-2s/yG5s0k9iSHJISXYFVpWmdj5Uw+Lf4JZvkdiMqOTCRlrzJQG73YCxjBtQTunuCAh5wcnrqBxrzn3j2uA3JjA==","shasum":"281524a249bbec2931c53b9a82cc52e2e51f4386","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.576.18433.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOeR4CRA9TVsSAnZWagAAniIP/jBB/xe/aGRZhlWLEpCl\nLFGdGJgxQH/sWPQVSH803xuKdgFwUaxnQfz23ZOUdFf77MXPx3rQo1mA6xte\nKYVeytfHh71n7u1fHlp24WfY4ImT24vjMxHUahh9qhK2uaYaDt/ar0NeqODR\nsMSggdqD4SJ439LGkvvCSfm5kh4s9VcgriqMXeM/r67zJnXelk7W94KTNycd\nv+Vyi8KvXHh3YFVuoXzYmtNUYZ96SPtqSLuC2Icm+BHsTwhTMqzixVY36CQL\nWrPvnGqeiaiAboUQVV+ICItpP1ydRWCZMteiuCL5Q3oRIToNfHXZ4JiauoeF\n2Zyo5wqCBHaoN7PFaZYq1rqOQEc96oSQt9fUtutQAmYarlsw3VCZHTMThmMA\nNuZ2hYjgglQqrcCC9DpI6FSCq+z7J6Fo/41JVCBDzxrJMrb9eYJnJgW/lr3P\nOpIDFZylCTTMBmb6/NkjBcMhpeiumiqyDv+gTuJxROzNL+TROaF+U1I1celZ\na/a1k77M5Ke7HTW973HTmyG3coH1mHDZh7ajq3HOMuTJj7O52z5RzKAzgP5s\n0TM+Rpwk6cCksiJbNZvZdyRbtiLhSDdjaJS+NHqktYPs9m1MK2Go78jZFObQ\nQjO5F8OYoitFEw0/9pQC3nELtdZvEsJ9B+/B9elBxypnJlwP2vX1Lf6VUEzb\n9SlJ\r\n=4eQf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvRUrOb2ef7EGKK/hEx/TaTUQ1c33Te3pbdvE6jDm1SQIgM90AjyuvGXQg+z6yKs5dtWc/qdg3vJS272IlzDhIPYo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.576.18433.0_1631183991684_0.25783676193448657"},"_hasShrinkwrap":false},"4.13.1--canary.630.18456.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.630.18456.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.630.18456.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e66c2f5fe5b099e2d2601d661cde5e8ecde1aeab","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.630.18456.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-XkrxGPltXjMD+yclps8S5nAf7vz4LpDXgb2Fe+oZSilytOqQxgp16Gm5eys3nD2VXxS8bPtBq2yuxKNY/T1asA==","shasum":"af01afa318319155216615fab774581054db99de","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.630.18456.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP7lvCRA9TVsSAnZWagAA4egP/0Mf5mAhRlX+oCljQnQA\ntTpd9s4UmHyX2a6gmg50gp/z/4H9d3SqT+uGRuCScQLEVbu2M59IIQ5oC7Ry\nYWrpaJAW7OxBvz2bcHtfm64UEbHG9DHB2R3xHV/9GvAumaXQbSJyUUWjbC0z\nsBKiL5q+j+c7WnpS7XYoxpNxsaeFf4d23OkaY2VJDsXd/fveEcdnAuWgEQM8\nSF+jK/RozHnxsryTGvnN8ggJ+MoEcnMzIGqAFmwrCWpP2w+99yLHJ9MG2YsY\nI3IOhCCvdBVHWWtAMURZ4ZPVDq5LpocwIHUMlGJpyvWxLjp16J/dAvfuZCS7\nNz+KKtsVBhatRgEUPbDDJ8aRu4PinuX2hr3oVdZElpyjRquG8R61vor9DUXG\nc8aPB1bSV8hFD6NLQCIsIAryMfL5Xm5o7C+a4vOwhA2JDAn2HNyuSLnOX+S9\nniMpqR6Hp+h8VftBpA8cpbaP8tFQcJ+9XwoSiY9ugoW00b0o7f5Dpd36vayP\nzplaDOvY6c6xXWOfZl3bsDR9dcJG+h4+CGXeIZIHvCYTv02SgpNFna6f+tvm\nyrmIget+5VsdcgePNdrv+I4UiP3FIcW+GMKy7sYq0kQuW5wNTfo+Qrfm14Vi\naU9j66J+xo6FLgKE08ufY9jcwdZAg8nvS+DtEEjhF680n5wna1qYFUk9ES8B\neHTb\r\n=P+aQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeZ5MiuQj1vIl6zAoGgxkdYkTCfmIWaHzFWh+7hxiosQIgEJfEgFSb+gyuHyVkDpwAO1Y3ncUNTntmZTEVWa0LoB8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.630.18456.0_1631566190914_0.8050959313314632"},"_hasShrinkwrap":false},"4.13.1--canary.630.18466.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.630.18466.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.630.18466.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0292eef0c73f2241fd97cd101e7a636a39f88f07","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.630.18466.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-um9TozBTkLF0cSV0f9YfRlbDVlhhc/x55vW/40yI4278T0laAK8Lb727MgqJYvuYJorw1pGTvI3bTcs1LyzlSQ==","shasum":"9e2350c36a22eeaaca701f23bbd57e4ab3c2c1d2","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.630.18466.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkpPCRA9TVsSAnZWagAAtNAP/3SPgbZEucsW0P9DnmA+\nBhZfSu+uAWzjGRB794dxs8eLty4tXChBOyB6EQ/GDduAT3nsTeJ4qOjs8dLC\n70tPgiEfZ33qFokRy8yt/sAK5bNxsD9UovZkyw94VBUZIZZzNdZsNSzgRfvW\nevJfeJIfXrElD4Qr+2vgoOzHmYVe1L/a0n3QwWjlHB1IaO7bQPviP0jYNG57\nagOnOJr8J+o1Sx8+16bZ976X8vqnp2EAJe2Tuwy++FrHvRVSHbWYags9toG8\nfu36lgfQxcFpdZ0uxxy50F7SeedEJ9uZ/lZf1PD/jWBhgjzHm+tUo6HtI48M\nufhKZxabJ0EohwA3F5mlCuQlyw06YSVT7qZszsdXhodvzmrr3RT3NK7U1wVj\nT+PYhIJlWkYPHec01qxYonBGWbCvtM8V1iq/tD01sJuzhyIFXCtUJhGNQwNS\n/1cxl8gIMKMx7iDl8LDgE4IfdxuAOuQ4p6yb4EuaGRWX/q5pBxuX9I42CLkd\nBOZKkKaZXmJJBmnRLK/hk1AnMM4oVeR/qvwExmuye5oK/W+dDa32uuKehTIR\nvJLwr5bTp0VgXOOamUOefMr6OPYPzvzzbDGZzCFKiKxuruly6x7Tmb66ZQoB\nGf+BAzCotD6H4todtuKn61IHQkYhiRP261Am++yVCoFi2UWaecfQmzazyfjJ\nXdcw\r\n=Ib5Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTbPdrdoTEza9SYv/WgvyYkoiPgKW2c/EWw/Httfo0OAIgVCjIci3UNtGyh80sFsxhOmzwCzraeVDP0djYg6oENoE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.630.18466.0_1631734351527_0.45439179382857264"},"_hasShrinkwrap":false},"4.13.1--canary.576.18478.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.576.18478.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.576.18478.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a807f4c879999c732160d2c8a4fdb946997d2c2d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.576.18478.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-0ThkR2Viu597Dp13PNNCSm9nwg0JDzsxVlC8LLauH0jhLuUmCX5xavzSXRfUFE/I1Khk/LsB5R15lSIBUAlDXQ==","shasum":"8a52f402feaccf0c56f45ed774adf2127c1856c6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.576.18478.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQwNzCRA9TVsSAnZWagAAMywP/0VdaiklfL4U6Y/mUxst\nIwCf8sJENtBKxtS51n3+ymkJ7EaB5alUzipnIN/NOCl1OdOfIQZVLV5ooDLP\nLyL2uLqHuXmBlJteHMOr+SRjTbvSP27bfIe5FAaCgINI/yZN5Prj+tNW+D6b\nCvf1opJaNGXIiAXFTGsAQj/rPe65yKBxfeumx0fOgq3WmDMx8qFUaMFql5tt\nto3UHA3hgWIEJObD85WxnRBAzvkKqxmtj61xfdGrtFPGSK28c+ad1NdEn4fT\nRftAVTHo9yTtE2yaBzLTW5rus/btI9o4YBSg7gZkk+D0/CEdjrlcBYqu8Oc7\njVjVY87rGuLpbd5ACGLL40UiawumlL5Eoys48lULsUmDdiBXqPfZpz1azf0y\nGTuTUDnwhnZGu4b4UdVrcAZ5Dr9jT/ZxsyrKT/Eo/IOkhW/3srlpy3SNOBHd\nifv7QN2Vbbbsh5R2albrlha81RM8BpW+09SUUk+C8aAsCGRMtfPyMrhhOYEL\nHbWLtYrTOh72CjZnuabu1KJ8UmKJ97UXg2pGldaQrAT/gcgFvSyl6jnPaYIi\nRqgCFyuytksMKJwXzG5kedPM52CLOLGDvJGMfr0uZeM/UdmUWkrifpU+Fjp/\nbQ2YGmNSaMTKg0OvUdWYUQ/KD8M9MxlteVxu03niHbfOVQ5tgvNMkAkcJZCY\nhs3d\r\n=yiC+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcvUuWN2a1GkEWohHeQHBqtNvOYmHQMy+DcnD2HdYHBwIgLEkpdQPCGeLHhnqg//lz9TqhLtdfD1+vWaV5Taz1nTo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.576.18478.0_1631781747709_0.912354438844333"},"_hasShrinkwrap":false},"4.13.1--canary.587.18488.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.587.18488.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.587.18488.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"29ce94b5857f78fbe166472d66a3c6187a28ab32","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.587.18488.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-hS91X0jLp1qtoJf57rTgD28M8eHdnc+YmcHgbFz1vdWV+JvdNfKwMJ3i7WF5qj8leEWaag1WlBO0UWIXQkVOAw==","shasum":"73d883e8b6faf76830c3b9e5e77ac688b11c0be1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.587.18488.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEuIR0EMVfJnVcMYln8auD7/3NN8CFSTNnzJMxrSJEtEAiBFUDmfDolZmbkoe8XelUtiZtXtqw80O/r88IpK/wU/NQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.587.18488.0_1632082391426_0.349489409021283"},"_hasShrinkwrap":false},"4.13.1--canary.669.18500.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.669.18500.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.669.18500.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"849d877a5f2e7f0f29f69442d88bbc532c3c73c9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.669.18500.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-uehufQAwYEBjem02XeUg4FXOdITdXZtUKBi1wym93gMf5MgO1NqdqrH1IrF3K0quzdISha2v5XL9cW5teBkZMQ==","shasum":"b295d68ba9516243ccbcff8e9d9bfbc9e720ba8e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.669.18500.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+OwJQ5LTYgWy2t+2JqQrLRrtmd9LUh6a4TugcVHtaxAiBijaEBc8dOSELAxOop9ZOOLDeAWloLHYUfzQZvknHNgA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.669.18500.0_1632194378248_0.319838237346483"},"_hasShrinkwrap":false},"4.13.1--canary.565.18566.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.565.18566.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.565.18566.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cd9f7b4810674d8acddd0c695ee2c75659982412","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.565.18566.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-eO7V0mtTid9DYLHhiyzM6VUti/qBDal14/klEaQ2MF0mja+w1qzY77zihnV5qkaVxiuWKe0hoq1Qe+27fDdgCQ==","shasum":"418fa2b93548627b14ebfc782816d205edb44159","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.565.18566.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWI7lopHuNc0nGXeklp2jqKFPtR8lANBJRE7yif1Fh6AiBSlgHE+HbyEqTpiC492w1x2++97DMeh2CUu2wwkL+OzA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.565.18566.0_1632258837286_0.682374064138672"},"_hasShrinkwrap":false},"4.13.1--canary.578.18567.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.578.18567.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.578.18567.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ea4a8a43e9b6915dd0cccdb00b6ac56be52efcb9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.578.18567.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-NP/yBiRK1nSBaLngDp1R4PsDa48IlfiPn5lwO2Mjmuks+tUPcKEobNc8+1v5geWOFC85nBZwcCJ8N56RPRRzUw==","shasum":"f078738b45088c0fe5cee0e551bf5bbe0a1e4f72","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.578.18567.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyTsICOfiXKPfXsIyVJKIm4bS3IfPAg3w3Ft0XDlBxFgIhAMEejq8V0Y3gUgBggehysut8CVMRcmMDH5NmSc/87Hf0"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.578.18567.0_1632258887372_0.3481738058129249"},"_hasShrinkwrap":false},"4.13.1--canary.616.18569.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.616.18569.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.616.18569.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"48cab9d0e9a062250c769498e4a693eaa48e4054","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.616.18569.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-9Dhy6UCxB0JicwkuNIoGjp3qKnw/XcP5/SdJVsh8MF/Us74zcmUy40CoOc1iWx+4zQ5dYTtOp3kjpkRbxNKxdg==","shasum":"3caf4b67d6578dbdfd6c86e448b41def70d3fdce","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.616.18569.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbSOwHpCQvU8CZ+NSqLsT8afq1d+YCzC1NhLS7BmbZhwIhAKmzbpw8VpUOv/kp3+ocodcM0GpxHumC37BVeoroC2Sl"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.616.18569.0_1632258982394_0.5755029951468775"},"_hasShrinkwrap":false},"4.13.1--canary.551.18570.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.551.18570.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.551.18570.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9a3f36b4a884a201d50414eb8dcaa8c35deff65b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.551.18570.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-bz2JdGi3cuUZic8j5wZ56Jsi/mSXHLAJtOINuYSSkHEtQ3j27gE2qpS9Y6+nXGCpX5g1KiWkJOwYemuYbRX64Q==","shasum":"b5fd14048f88e5f42b5c9e81d7b6b4cafd79ef28","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.551.18570.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAirYDJ1NxnSYRot5N4KNvHV9qAdtKlLw9cHRWvoz92yAiEA7EkPLAcUORGiD/5zR99FL9tgeJXYIp54Otkfm8WSleM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.551.18570.0_1632259039884_0.17301749010547574"},"_hasShrinkwrap":false},"4.13.1--canary.559.18573.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.559.18573.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.559.18573.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"dd6d5f09aac99bfced27705a9e206a9989f47e52","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.559.18573.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-0O88WVK8x0uB7BQK79tq4t+lREFVk/IcS3naB08ciiFGozDRuXqJ2FlBgU3qGPIjAIyMhi92wSExhF1Xkm6QNA==","shasum":"585a87a58e142b15b87466a8f93b7c92acea3a10","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.559.18573.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMCxknzJzq9zTFpDa7eaNZEJb6RLEbfiR8e/VFDyDCEgIhANNzawrgdu8SrHnHIpqdkw0ESaVJD/nZJSmW7TeFXwbX"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.559.18573.0_1632259216046_0.21522572418660535"},"_hasShrinkwrap":false},"4.13.1--canary.562.18568.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.562.18568.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.562.18568.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.13","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"888a8fbbf084e76de6d7555bce0403ca554451f1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.562.18568.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-2PdJelJsWrjudSUSvjbWakakdsUmlGrAC3En4+E8ugAABkei056piIUqASomQXwlvG2QuAMBWW5jtIcaZDksxg==","shasum":"298d77075b88af42709f57c79d26a56cbb43c195","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.562.18568.0.tgz","fileCount":25,"unpackedSize":89191,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwf8GSLX6uoTjHnB1u8oLp5IOqXnAAd1AGv3lxLBMvqAiAsYr80B3dnxifW1gMiJ2V5CpyYvFtTP+UxMnu4oFNiDA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.562.18568.0_1632259234258_0.8200497860741847"},"_hasShrinkwrap":false},"4.13.1":{"name":"@design-systems/svg-icon-builder","version":"4.13.1","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^4.13.1","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"27169ab7ee627848824882dbba0c13eb1e287c1d","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-runZBL1FRXxM96OvxT1lT1xmX2EKX/Pav/k70XgL60mFFOGLM5NYqDCBcdZBWCVEZq7iBo6xqjLUWnnRLVOBTA==","shasum":"29b831003ce21ab606ac3d41db3a452d3e73f86e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1.tgz","fileCount":25,"unpackedSize":89151,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOEkZHg43/5gU6mtO9jBDKxoD9ch/JJpTFYyyN7oLo3AiEAz2IQv/8XzTYRSXPLeqa6qKZ91p53ogokV/LPbFwJYKo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1_1632259505406_0.8539918699468665"},"_hasShrinkwrap":false},"4.13.1--canary.630.18574.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.630.18574.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.630.18574.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"dda45939be21497bcf4366fc97cb15dc9d27c9d8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.630.18574.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-rWNHTuRoLlToBRhTopa2ssNf7AWkCfvuiGUULs+ErszEk+ALoiWwIDJfVEm66/OfKVyyXw5ORlSL9HamczqObQ==","shasum":"19e6bee5f096df3a94ed133a8d20b1d8eb1e53ab","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.630.18574.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJIT8c1tBGdG/1vn90T0U0JCzapSkAlQKWaWAvo+NptAiEAtGXd+f8eBFDvvyS6KiDISiLpKvewmLVeHDiGqE307a0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.630.18574.0_1632259517366_0.5519745180952038"},"_hasShrinkwrap":false},"4.13.1--canary.549.18575.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.1--canary.549.18575.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.1--canary.549.18575.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f0074fa9c89844a275ea44733c1592824bd7bd1c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.1--canary.549.18575.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-w3RJA2j2BpRXPKeRzR8zKZqH1Zx1tHhvleU0/RoswMPQseK9/ynVC92w7Y5ZZsZJcO5LLNf2P3/4jj6wx5wE1g==","shasum":"b27ef1c0b8e3faa2d19c7c11bf0a90c62caa32d4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.1--canary.549.18575.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN/JShN2VcYp2XUWVVZjrWtYPcV+ePUEFRWZrUejIEnAIhAOh0ULMG5WrFFQNohxfwF9Tx5hI5xdPgSXMmTw2IlfaJ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.1--canary.549.18575.0_1632259530307_0.3470146122388871"},"_hasShrinkwrap":false},"4.13.2--canary.549.18585.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.549.18585.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.549.18585.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"2bd49719b683c36bba419d8b2b93dc2a01637fff","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.549.18585.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-bck/T0hCPrMJhrrsh/eetP4Sl5Zjnw8aMTmHVmzpSTq4qf0zvuMF998ueT5CaAa468AohlC4OSncZyMwmwxoIQ==","shasum":"61afc5ffe8d5f0388b7268f44acc59ea8b049223","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.549.18585.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhrpwarNAOhiwTnfuC37ci7HuvsBqGLOuSZoephKY3oAiAotTrOCyJHW8yXVQo9A2DFkHU4r6ISaeYB16+oqi46Lw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.549.18585.0_1632261549548_0.9477086031998845"},"_hasShrinkwrap":false},"4.13.2--canary.616.18591.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.616.18591.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.616.18591.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"eb866b233b17a53bafc1fdf66d02ed82eae6e55e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.616.18591.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-dExa2KrgvOdAnViuKptuWrztPDm9Q0KSHS9sE0uwB0NYfmrV8ajN6GkfuV0V8W6sWuQnCKEfC+VdLsXv4ofgZQ==","shasum":"4807e896d1e4fcd0797814deb8e1dd1c0b91e227","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.616.18591.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB791HOBiOtqy6fxxKn9SVJw2ypiWYtDH61EWeeh2aq5AiEAgX21BGR/0Rjh7Pmjw2JhUh1/7WJsd2Wh5yrXBE45NiE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.616.18591.0_1632577635778_0.5998746396306931"},"_hasShrinkwrap":false},"4.13.2--canary.587.18597.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.587.18597.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.587.18597.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"51458f293d451a1216c632cad634c4ac741b4216","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.587.18597.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-dTf6H08jpNToLYjEYFvc1AUS4w/65sTWapwmj9AM+c9VERWNkRzzjBJa8/ZJCOiF0b6FrKRzzezGjqKMOlXTkQ==","shasum":"833292fbe652ce2921b7595fc1abf37938375507","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.587.18597.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9VfsFd1Qe4AXOcbRe++77z8jnIDUA02SZVrSq65pLNAiEAmNhRAl4CHs9tIYh7tgaqGzcL05s5HYiDB1JNukBvHsQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.587.18597.0_1632709260918_0.443886247610483"},"_hasShrinkwrap":false},"4.13.2--canary.630.18610.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.630.18610.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.630.18610.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"db4cea0caf1c13bd18b220c70a688931d2d20e76","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.630.18610.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-5rG8Ms9PkfU4kHbtTbyTmcnGqJrxTxYtEeaqNWfQ35+Q0I5yzKn/1+VjvDEvXHO5UjJzT743qubpiBerCi3wUQ==","shasum":"ad8d2b66049d56d6e61a2747902916b6693ffc4d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.630.18610.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOHfZJzoOAH/nLU2ONk7dlhtL+rydAO9hyFSt7xbYfygIgDN/PiymXM4PVAWJOggP78jwER7JnspFE31xRBsnz6NM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.630.18610.0_1632818629739_0.12906837811543936"},"_hasShrinkwrap":false},"4.13.2--canary.616.18622.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.616.18622.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.616.18622.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c967fdc3bd1c910c4f422255000a445385e1b179","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.616.18622.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-gdyq6GwZdpXXRQJiFGPYKC1ZsncQfdJgATTJmRIrvyLw4NREZb7QqxLdW9MzmYinNuLxiG7UjUzBNlLnuxEW2Q==","shasum":"5b584df22cf24c485361a76acb3ed083ac6218f0","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.616.18622.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMOR7Qh4aMpPjUoZ+DMNvJJDYA/MiUSJKK4SkkPyEEQwIhAPfGRQpMie4LPR5Qsu8bSOmmDT2HK50janDtlRvlx3ix"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.616.18622.0_1633009340495_0.3469461520481685"},"_hasShrinkwrap":false},"4.13.2--canary.587.18647.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.587.18647.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.587.18647.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"54bf4288f4352d9d6db13da9af2588b9228c0034","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.587.18647.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-KI2fAXNzxuwq07hk1vyLigGsDErgvp64qpMAU5jaZSsA2dUH8GJxOYWGMtYPoYVt8hZ+d4jalmMhkFx4NwG+BQ==","shasum":"6cf4cf6b734f436c5ccc2a4ae57b447ffa47b7ba","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.587.18647.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWhsups9mA39JtZI2NjhaqUhmoZas40DW5lffSnGX/AAiEA7RRImjdOi1CQDn01TTdPYY/SC00BSCL46uhRq05DWrI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.587.18647.0_1633465582401_0.17333541957884613"},"_hasShrinkwrap":false},"4.13.2--canary.630.18653.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.630.18653.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.630.18653.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b7376343da7520b36aac065c57a0dfc215806c33","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.630.18653.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-TG3vJPeQ/TtpoOcwOOcZKNpJRBryh0x4MpT//ltCcTx2fUxfeDoe3w4TfwnMnUlYk+HrZs4gOV/HYsBcm+XZpg==","shasum":"d90ef2a9ec893e7b700db5258ae994952428993a","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.630.18653.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjdQAMmXZA5aAKynno2g+ne5WWu0lrpTUNh+D87s4t0AiBHqVP0u00ozK53Rx0X4TpS/SdHeUMLgZ50/k5gyt6zzQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.630.18653.0_1633480949327_0.9862081589832046"},"_hasShrinkwrap":false},"4.13.2--canary.559.18659.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.559.18659.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.559.18659.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"abe9e1151303614f464ef8056dcd77fcfec3d91e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.559.18659.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-U64BT/1FeoP8oWYqQRv/THvNWbxwkWYC9THK76BoElHnA9yHi7fnZfFo6luB/ToQSRWLbuuyc7xqXuau8uv4dA==","shasum":"9a6f90e0e8e7a504029cf413a6eac9e88887e8b3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.559.18659.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCATQc+ae4g0pXUZbYW/dAcmBnMRepG+Jzoo9ao4K5PQAIhANysQElh6HAIKbZjomaVc5vt7IPWHZw90fgyQ331Q6WN"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.559.18659.0_1633562083248_0.5854500831107565"},"_hasShrinkwrap":false},"4.13.2--canary.587.18701.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.587.18701.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.587.18701.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"734b9398b70c3de3519d61b2ecd6e2bc57d79e26","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.587.18701.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-4cVrguXlIt9E8tjJWEeGKZ+XYwx8h59D2uJbQDh9K2cuCHH43lmUdU9Zm4luNIV+sMSCDw23IzAmZpytsL33dw==","shasum":"6c44b5539273a2931d2b558f192604e561075cbc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.587.18701.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu86PqcQZwhGEYWu5toqGIM1XmvPV7Vw0LBkfQrokuQQIgSSj8GUy4VWH2OJWio9uFCGlmxy39hearl+vQzfyBXCo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.587.18701.0_1634070030723_0.05394711569046673"},"_hasShrinkwrap":false},"4.13.2--canary.559.18731.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.559.18731.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.559.18731.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"51a3fbfe8206e2f138f3dacc6f70355576133ff8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.559.18731.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-3gbsSxfav1GV3QTphJWbrxz1BwDy4sx5/hgTfjRAxAGlHXpolg/xUrdmGpDrJ/EGrzWDjXoqWZKy5X0uwxsR4w==","shasum":"e69ca28506fd304bc06502d3b18079c041820760","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.559.18731.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoArCFgaFQ6z+rGIVMtioTURgWaOwHZBBuIh4yaHIRVAiAByvPm8/x+2gaHos4IULZUxD9UOSHF7rBcH7xQvtUk+g=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.559.18731.0_1634612390448_0.4587430869646052"},"_hasShrinkwrap":false},"4.13.2--canary.604.18739.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.604.18739.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.604.18739.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9f132c4ff1cae0c1b4dba776a50cbff3c706bb02","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.604.18739.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-1I8Q5tPaYUarc7q5LNogTBvnGSmTQAqllO+hCl0Gol7pHoVisMPQKcUBZbfq4kfxNGpbpfl5NbUbb2SAvklxtw==","shasum":"b735d47b48bde30080f8c7e12435d663a49b5fe3","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.604.18739.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzcH/i3HYK5N+47ldZwa5hQE9yhfPzX49miyttTomgZAiBxUBhbi9aqAN6+ZX7oUEfjtZtml5VbJsbog1p0j++wQg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.604.18739.0_1634814730704_0.413890683284855"},"_hasShrinkwrap":false},"4.13.2--canary.616.18751.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.616.18751.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.616.18751.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c967fdc3bd1c910c4f422255000a445385e1b179","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.616.18751.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-ngE68UiVQIYPu0oXIykaeeIACwn9nrz7+jHxUqIHp95aK8jMrBS+YtmR3RIYLrT8tGTCD0yE8mncUoa2kC/sOw==","shasum":"e30222c4a66c6b9ee9a354feb8fe631cf4f2602c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.616.18751.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGk/zHLTgiEgz9uVfkuVQhRoLdSP4PaT5G5ZuMn14WIyAiB9aKToD8T2Jgs08CP/isrv3bis/wvuG6I5ai+JW5uiyA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.616.18751.0_1634909052650_0.49161080929311396"},"_hasShrinkwrap":false},"4.13.2--canary.616.18757.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.616.18757.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.616.18757.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"82b44659443cb97e6ff06511a8a840be1e4285a2","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.616.18757.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-KGn7wDuj+aUn6H/o4n9h26PROiB1iu/rTO8YeQiY5FM2L9hBj7NEQlJ/sK/tFqNJx1TQdKpWVdOKQ88OmtBfjw==","shasum":"c8d42a3600930de7918a7c37f25c128e68432765","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.616.18757.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDlVhQ/VCmCYwvBB4DUdQUV/sKTgRLL/WL74za2bFdVAIhAICCqPhOqiNoys7sTvxO9w5BrHfK0ZUt6VxkqSeL1lDA"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.616.18757.0_1634912978223_0.8957981765607523"},"_hasShrinkwrap":false},"4.13.2--canary.587.18769.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.587.18769.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.587.18769.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ba738044f05cc36acac9ba91f51633b2038d0ac8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.587.18769.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-S4VrXtjFxLNGw1IkcAElUDaO4+k9Z4BaFuiQwgPklSDU0AQgLmz1LtbeWAs+yXJ2OfOYiASc+f8Gq3QIC+i7bA==","shasum":"4c1255911a7d5afb41624f642a99090489246a20","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.587.18769.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjruKDM+bz5JfKynlRYhCA+AULe3p8VOqGrXT+UH+XQQIgOtxuucSBpsVVqZAIfXx5JuRKc5yszVjq9uC9kICjo5k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.587.18769.0_1635154887572_0.8455384244133866"},"_hasShrinkwrap":false},"4.13.2--canary.587.18800.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.587.18800.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.587.18800.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f44012350b80d327752da8a8d158cfde39392198","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.587.18800.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-pvN1w1WnSR6LZUaXGKKnt2FIA7tr4F4H9lDS0GjRJkPhQJSkpddmQ+PT7pimcq1KtQCZ3Oc7Ck5Zux8eysh8OA==","shasum":"a112d53a8532585ca0b98da20959facfc86a83c5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.587.18800.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCP8I/uudtQ6fiRX40muELMVFFER6d0Ogs3yFTrllIPwIhAL5yjn9/t1mdherLzYE9+pC4HwH8JlJIeXWzif5ot9ZX"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.587.18800.0_1635891911233_0.07572191990561783"},"_hasShrinkwrap":false},"4.14.0--canary.667.18836.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.0--canary.667.18836.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.0--canary.667.18836.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6d72bcbf2c8b622438b3dfa8544312ae346159e6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.0--canary.667.18836.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-8abhzQQuD/2gzNJBh+JE4yfLUJLXO95QrAz/5RraDQtN/eEzt77/JDtOCp1s/OrjnCGXD4rqe67EZ4ODe8U78g==","shasum":"5320d188f1244674d119901a023d45b75cd85b29","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.0--canary.667.18836.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwXMmCRA9TVsSAnZWagAA3dgP/jjbJ2b6mXMbYH+MuDnr\n4qjAx1lmq8lzTpZ8NgMDHgOh7IgzCTY9GUxVXKXAOCprZiKifVGKBB8Eb5oI\n9FyAE/G0p5/wYB/IWoQ4WHKR2eW5yCroiq71ylph9wzX7zMJcStQwG1vwgQ8\n5RgvJgtP6oaqZ2HwT5Sx8h03lU1H2RjyxNQgBcwpgwWCmb5TMMyLGaHBafGx\nbQe+GJ7EoDsrl/20TuXE/6bSZmJDlOvEzTucR40kYPWWe2OlkCXUmg58yX3L\nuDaH75NdOOu7F6uoPkgSH3/hFFXpCkV2EYh5F8QZM7mrXEuIaiV3gY2zN7up\nBFMzGE+uZ52o/yIbFB2eBQ0R7Vmm4DOJITC90WcY/QkipNl6AuX+E2aIL/D8\nMq850/ciHMiSZFXYSFQDCTZnHNPWVQ0Lkt5tgoq88OyuLXSVQ59rSAv4TIij\nF/e57i4TQKrnEavCTSnrtM7swAZgk7rJ89B51Uv3NQWGkYw0H6gwdCvahhna\nub5BZBlYYojaueHW0FOjd/miw4B5M3D53bwQAogOfLqiaNauafaGNoNzr1ZD\nWo7eyAMX/ay91BOKFRjld1oMfIMxfcR+y2flHofzVqrzchnhSoh2xl4OSAZq\nHSKZrHrSxpGdnL0wj3kgysnmA7lYLi1s7tgck0I242db3BpcGOTwT/mUR7RC\nFg2i\r\n=t0jD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAh/8xPW/sQlbGEQnP4O8JF8LoBPFw20Ji8PAxNm4DSyAiEA/ecl8oIXlkpmOZQ2qYHTFUc4cw9U5s8XUoiR18bF0fs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.0--canary.667.18836.0_1640067878047_0.2584221454947877"},"_hasShrinkwrap":false},"4.13.2--canary.671.18842.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.671.18842.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.671.18842.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a346d2cef8ce957424ad15efa20a219d6dd277e9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.671.18842.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-CkFY/4nvolJmaVbIluTp3yYu1ihmtawveYzUUeY0V74UqWNh0HKdiaw5rFl9IkYXR2R4nHGDoC+sQdH7PJQrSw==","shasum":"4a7ffdb1ffd8c5e279976c03b6e003c6a123e1bd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.671.18842.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4kiFCRA9TVsSAnZWagAABQoP/1lor0MitOtgTdFo71no\nmRnmgEmN3btBAcD19lWAWeSWOOciGBqFn3306cJdp3Q7MVBXWUJs+67eaR1X\nAyif1fRK3H/DlFCZDoquuug5qMzxHt+oVZH8dR69WbFKLl6Pp2KVj3nLWKC3\nX7NvdHs6ellIw9zPF6GVvImAuBS6udySP9gPxDHMwZipYDiSg/thO5DrTaJm\n4ogH3wVtnfzf9OW8xKGQWMhNUpP8AV07/xNqv1nbUeYAn0bD1mh9TZwnZyYS\ntVaEvkX++yT7/ujHZjM/6Z+Txm9oyIxLJTWVvaUXAz9XzUt1hj3czgFJidSo\n4Os+E0WotYnTfr2NoKXSvaBU8nR6btSfpxJBfIHimpcKRkOiJ+wocNg3QXMa\nHq724VtIrhzPYp517m6rAe5QpZUMsqsFJ+wk1rTcM5eFQqs4a1j58kD5pctl\nKRGHbNfbvzs16Qwa20WMskQHuNRsAFMgtW+84b1tLzLR5vtLGDUv8v0iUh+o\n1ONlsQv/ZIEhgxXiPB7JCZVv/eDuWwnZEVWMTxdgMtlP1cvX2rFPMOAT218r\nJXKBSNOY4BUcDA/+rE/lrKSMFT+gw+6T9RNNDwgZkJDzRTgJYsm7o+nBEm6f\nGb7EO/xuHAipp/rkqsupIrSfLvQpnWFO8faNm+zCu+06ABVHq0kbAjcAsO7+\nkmZ2\r\n=DYCT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqkkXFo9BqSyVK8rUNbXrax4TzoaNGSQ6IRmFw/mrXmwIhAJ0AKTlSucPmJnFXVjZ4zjcsKl6XRJVzqVI4s4AbJ1Xy"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.671.18842.0_1642219652819_0.6399312415590708"},"_hasShrinkwrap":false},"4.13.2--canary.672.18848.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.672.18848.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.672.18848.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"67e86648b360296640e52c56910137b9f4e2980e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.672.18848.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-KcQgSfxWmXbfi2/UqZhuNpD/6GRxpb8NET4jfrM8vTUmbCg3c031cz9MDL68dHo4l7XPjhjNh8Tiwp/ZBL4jPA==","shasum":"2286a4419eda308732b28f7de7ff4fe929075aec","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.672.18848.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4npHCRA9TVsSAnZWagAAguoP/AwTXx61583aaChQXCn/\nh2ohabVfmevJnUvMDG7SRhQyY+2SVfuLPFk0HQhB1s0d9TWP67TxYiqiemhO\nv/sLbMZofiAhPV0yfd+7W5UXECdrDKVDbXSPw5mNLNhDl/VhaprqIo7oSeku\nlBf7rbPRCvAvaZCPKXmfGuz5R4m0DIP/iC/4/recfbSb+pKyMTwFdOcVbbcI\n6KB0kzVlVpKEw4m59Y1sSd11Dqo+IQH3N/pUzoswbYbJf6Hi3IzQbP/qZype\nrUaIlTh399G1FvdEaBA35kxrJ0hE7qqYV/upzY6bjkISVzgnkBXJiITA02/M\n3gqI1rloWZhwk4Vb1DEiKMBC8gyV85e0zGnfqWCLWC1i9Sh+5Mt24WsCnzgk\n2vzlklw59i6ow199jQp4c9TOzDK7ePJnk4ZyNbpRAVwDYHfgWFcZnAcEmSrN\nlEYvYHYP5ouMGBip6gxwEwLZAYsP1+pesf37WBhHZMkgW+BM+xoYJrSw0YqW\nAzyDAy/maHBxym/rVXGB5z4f2ipPteIlQczU9Su9KQM7h4yhXMEmDtmYCnns\nQxC3Q6ntqbEZt0v0JHai5RzEoxLIUqkgPtlQkp25Ar+JE65ModzBFch0PXC6\ntsWdh2maMZAQAFcVwf133hA9HdBrPUqFAjX9XBowZewRhThNyml4+J+eJHfn\n43UN\r\n=R7jp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFWOVKNDBu7Wi6BxNJxliKGGoa498uiq2Fws/DD5LIZAAiEA8ZLCi/2uIehbRYNmpMtgDjB77vGgkqfnwyLU8Wlr8zs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.672.18848.0_1642232391665_0.44779497471727114"},"_hasShrinkwrap":false},"4.13.2--canary.673.18854.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.673.18854.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.673.18854.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"58d2e4555b1922e3113d44055fde8e11d9562640","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.673.18854.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Jnrxc495v1AjlDQTMPPe3X1b5VVm6t3KgUmGGIJhspOXznJ2oM/vZLPsdnSep29xLeLk/ib6fTU1LYHB6a8MPw==","shasum":"0f3e931ed43b05602374c5bfd00e434528e417fc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.673.18854.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh44LzCRA9TVsSAnZWagAAQ8cP/RQTSoT58iGmk2A0pMfL\nff8a9+sEDt+j5NU8OyiEMcPjNRYs1Nq9abAx8tHeNgBYkqimqpKAJwVugkKm\n0oChWzcyOzs4da8+/TygGeOmmcX6ITv+87sgcdlYg/eNR1ZvJpzCF7gjYVBs\nzlQhrceODzQlJHKX5A9xS0s1i/2dqE4bZcjUU1DMWPPFcMEs+zDkTLEEmrhc\niDIeXnBb22/yHu/Cgw/S9JiQZe13F+ss+Ih/x9vSzYLJUPFIMbJsxD7IR8QM\n8g+NqxisQzwuBuzFlBABorlSIkZgRU5W8NLzwkaBSLfC75b/w49XbVQB8nz+\ncBgcsgVAsOPlLwrXX4zoYpSC3pxBDBiKDAIoeOqkXDv+hKqtGw2c7u9pvUgS\nCJppSSwLkXi0ZkUR7Mzp5Ec9ZqH6fog0giOxI3HQiSbBh4e1rLDNtXujI7Bb\nxf91A+u4nrIVszTczbeVEfMgFwkuY+m+WZcykwDGDQvAAwjz4iFQ6E0UaxM/\na3xagiYb/MR4aY847+fQt56lOHU4Rk8qDPVWu/OJ98tftp7ys9O625ErnO8S\nNnEwMH3zg7dy7NYMHPQl2qkg0OzAwR5RJ9WwSOMwzVEKLfpqLStWnZeqcVj4\nSG+tUuTCfMqBx8U4DcN3wMqtiS3i+gj3x20oazFTPOCNs87m2DVf4nv74plr\nI6/C\r\n=h+gu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESYQKpUmu5UPAw6CB6vqpZ5+J7LLH0rtzon+3Sf5XmUAiAUmVlKvIe6Wq6SLz24f6L5uCPuONdnUnCVbMLZQsZIOQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.673.18854.0_1642300147032_0.9071259823495228"},"_hasShrinkwrap":false},"4.13.2--canary.674.18860.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.674.18860.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.674.18860.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4b7f3430fa40b13e8c0269fb255efe27525a83d3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.674.18860.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-0n4k/oLpmn2wvMHo+rETYx7X4/hwu7lxZYRu6abIun3lXopjmeLIbWtxMek2zTnoYH6uWx2JGjntcxw09CGYpw==","shasum":"4a87c23794f65195a33a9f082cf47f47a1163cb5","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.674.18860.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9AyBCRA9TVsSAnZWagAAQyAQAJJAEDQaYK2PgbAn8Yfq\nkU6tOhqa9d6D1BuS2/8O26IS3pE+zRgQtAhmWJ2dg8TU42k9M2QIbYV15n1t\nBz5ivSWo/lRQ3zOjcRUXkZSlqfcnIFWpphoTMDx01WkgW/S7AKZs7trcJBi3\nWtQt4Ae+Gt8yJU73aaJUGmGbW1HRaAsDNuwtkqYyHvp7dCPOpxIz0C9JV8OF\nMX1VVdPt/98tBLBHsBME6y5TkEuKVv/EP56zbj9NrMTwSL/hREkhsrOeM86O\n/pEJH1W033TiyQlyo+3R7+zMtgceQMPHbJ3M6WlJuBGqVo1cFAQ7NNf0rnAX\n2yPVe+d1WQdSSB6yAHB6oBXHgVNgf05IVkGtrir5igCM189J2JIfu10eMIxJ\nNihorrn07Y+ZQsSpHtI4CkWJ+W9mScdeyu0I65F7GF+8zgOkmzrGjHUnG5Wm\nnl5RsNSEgobo3DhilRnk2tVFFFmXLds4u/50dQS25ZLwb/4mlIiy/ikhrQGH\nazrw3T6EYAa1mb8KNCKp5hFWsYHbxJraS5C+V5dX14zRU6bIOY9jwMDOHNlU\nhbA7AuUwlJtRvNEhf7se8xsCJaYkfP37abpLHIoisENuXo3MrkOcH+T5ehG7\nLqgmTn96BcMTkI/b9awmGwJHvwfD4p0oqUPJxwTRe+2y4OMmhb1glldNEceZ\nNsyh\r\n=4KeU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaKTEP8vrBvLojV4VzE1u2e08/fXszji2EDL5sgYfhwAiBfFitNkQzxbAY9w3Bz7NOAoIrUhMqjs3ksDtKFNAHvEg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.674.18860.0_1643383937312_0.8362412463511724"},"_hasShrinkwrap":false},"4.13.2--canary.675.18866.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.675.18866.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.675.18866.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c37cc63518fca9e39620cba1e60cc998c8d0ff9e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.675.18866.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-I/A3HgxuE6480L73GEOlmDewobGse1GQ6VQmpuhg4mFUW7kqaPOxlt0kdti6IVkP9I8pWJ2i9KKjNG9NJmhdsA==","shasum":"693b8f5ab27bc053736046fa3315ea738aef7001","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.675.18866.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXK2CRA9TVsSAnZWagAAkP4P/iSEU/S4asWmWupO3A49\nsw+MO/XuZO+XBLRGgQKFZKEONXOzpvnkgRAj2DUiTBWYymgYDVzhMTuEFTNf\nLX+XUiO1xii95Gd+ExtkmkQqCKArCnQmnl+VY3ZoBM9TKZyVKnNQl+kS3Y9u\niW5QVDIF6q9K6ka14detGfFq4lag6Zw5/qxQ/Qt2xPI4yYtg4zuuB89Unjgg\nkaDaUgPTp1XHpA+242v2R83bOTmXGhFaBZUWIE/oat43o3z4rqyTKfI6Pw9x\nh6Ybkggja8pS2OL3V68jBBweIk3s0vKQOhuMWD1+eS6U0uxywdhb6LRjiSYi\nyT2FaO15oCfks6VpAV7SNJl819BcaQxznVNWfzuNh3RyBZkODjsXVAyS+p+t\nbsy5TvA712h/byvKVvwQwi92MFdSzj4Fe7p5k5h42ycSAcvQsgBr0JINe/1z\n92SLMoL1izR5xo6DUibXpraBhPgOhkau0kWMLsQYHPKbf2AJM+zpDq/JmmSC\neOaw8gDR83b3GH3zJrm4D76wPOdE63fg8IBXXTGZDIpxZWBFWpsOaVS9C9ps\nQAiAaEKMVOsju9gOkvQq5cdyMEQHfLGnqHFhdjnC28qUeI9h2iZNVQCQHLEZ\nbyPrXXyPlMnCGnixJWC+CsODM4ieahxRTS0oSrLr6bZPbJk/DoGy+TMlsTCb\nZjHm\r\n=6DLD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAALqk5yDkR8Kzm3B8iSBp2t8aBweSURHp6KgmhzptTwIgWjo9Dq9lyI6dFkmzgUwFVHpKqEbhMj5lUXtJybBP6XY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.675.18866.0_1644524214530_0.3390081895207766"},"_hasShrinkwrap":false},"4.13.2--canary.676.18872.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.676.18872.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.676.18872.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"58d2e4555b1922e3113d44055fde8e11d9562640","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.676.18872.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-3DkLx7NwO49cGWW0ZTGWTmG2bG4CXmnjk6NOXRECevpCJChnxaSIACpmqLUNcJpzeSc/okiYTbEvQW4LdhQ64w==","shasum":"ea2839db124cbc5138577fd781caac021c078c40","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.676.18872.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiB9ZMCRA9TVsSAnZWagAAaPEP/0aqTtLfvO8WJphdYdN3\nSbJI5Z26/lGZN5Ex0DZKZoT46uHbmuN/O9jiIuCcdOIifGgHWcnrqI8lVUrb\nxhNppyZqjvoyguTxq08MH655OkaXk5Wwoomg1m/yGNI1f0AxR1FsnfeVyLb4\nKs/4BCjtOpAq+QRtFBwwwS7d15AAUrvhIWlFx27SJFNbx1FQ+DAXWi1qKHjR\nrj04Q6JvWkQf7W4bQ8Ae/+2/7BW7uqmeZ86U3bxf1V5SiTgaN9E9XEhqVYuk\neob1q5a8ypSS6UA4YU1n+59yLOrlJpR/Mrt22yb29pGUSjjyTdYtlqTFY1OL\nSJ6lYy4EWOLX91CbxHvUcPpaG+9Yi/WiDuGxg/5czWd6wy4nyopu4hSreZq+\ndjFLTmLLf1xDIDRQ97C+Zn4u1Gc0JBky+MXCUCnyU0vzk9ua01f0AKlQ2pX+\nHPyL9W0CLPJ9pyIOph6+zusJ9GtKW515Rb5e7xB1iYRoFov/DAuAJiTHf5OR\nZLVjMAb3BEgRYT9ZxqZMV+CUrTHvmyJX0vnoIlY8zFioyfKGyISGYyrgeK5L\n8kIaiUyRJ/Qxs/AZr0fBEHkZY5D3mhzr6Y9qSpzHT8pSH15H6kzAdl67kJsg\ncjBo89ihK/xO7cQdnZUy6ciJSSyDD3NxwjRqEGRDkJrKy7+gU5bQFllZPHbY\nSIso\r\n=KP0p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHa5UOOGGyw+m9x8SHh1A//JNciBCCYqw5lljJp8la4AIgAxYb/GGxdr5Wi2MVnqRBcoQSTUeFAtqZcePFrIbe9TA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.676.18872.0_1644680779929_0.4859013248933677"},"_hasShrinkwrap":false},"4.13.2--canary.677.18878.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.677.18878.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.677.18878.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"978ff36813a131d4c590b6f3ebc0a25a8806fc3c","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.677.18878.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Q8AXh1O92Xi/Eme5yMeIBIG1KqRi3EnG7wsoYdyxhVZQcV5DlO4RnS43VqqTIvomBR9mRDnCJZp912OnIRJx0A==","shasum":"b03ca5145bffa020b41f38d1d425bb02ee6d5956","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.677.18878.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCyglCRA9TVsSAnZWagAAMqAP/1Gt3QB3MJdjca+IUVjD\ny73NyUvzCjfaHtMQYmRnQT8PY1C+19E2vVW1H064KL6lckQS2F538fDrQY2t\n3qGqTMASUQGlgUWwoFe18bwlMmh70HiIe3sBDbH+K1gGFfnPzOD47gGpfc/H\n72GzM+LIHfL4TsPrBz/7KaHsxeTKZxo5HBa0pdvnpkEzvcn9cFmQAldN6RfF\nRaqMP9+ouErjT2Byx6uIphhAVJDJw0vLnv3CiANZAZCgQtGjP5HTxiH+eBaz\nMuzGResgsLqg2D6AVnshtlBYg8/TvVz9yEl8rEnaVF8O966UdBqRV6RNWbma\n6xITfA/SThCw6koTMex1610bhvkm8Q9vUVMFDD5Xgr/DNc5OsKXaQFRUbt7v\nBrZDrKgxUrg3XojKVSA77HpW3JSPbNQvw47ZHg06AHb3nQ+XTKqA9prOPuc5\np/NaAU4QrdR2FYTWjo1Zt+UbS5s6ULWv2Osnhs+4xUVZ5K4HpQprOJo6LKLH\nXXuMTVBr0XLTHQKzznMuoSBThRNf9CIA/42blTkjrdgwM9Kf5XynIaMCmXs4\naz8hT15hqirU5I2zNUpX6hcQdaAraYljdu8NQMLF3wQ7/TR7zeCjlVNoqJSU\n6R7JEQkZm3w8/r2ivlSIEek1RoOZmNCrnFVqR59QCjrQjeH8/WXEYV8D0zlS\noBj0\r\n=C2p9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAZkODJ9CeGtBM+FiSdXT2vo4oBfvb+bFmPn15MD/92AIhAMM2gohaqNqe5nicmQl5ttL1Uq0aDHLkXe8lx6z87JEW"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.677.18878.0_1644898341647_0.4098632010304335"},"_hasShrinkwrap":false},"4.13.2--canary.678.18884.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.678.18884.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.678.18884.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d6aa61f68dcc8a34fafdd92de3304c3136b0f839","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.678.18884.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-MmVRwAbpj/rftf/ZAGLzwnH+e425kaIxwL/cmr54oMr0SUkLUvZkCVmUdiaDDgDweHkgK3xjv12oSOMIQ6PXOg==","shasum":"7ed3c9da73474c4a38dcb2aa1f8a379bf768cbc1","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.678.18884.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGaIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKqw/+P1vrzDh6ANJgbd2aVHnZwQRfO5AHl7KTqOmLlflIPaxMbcfK\r\nNM96FFREvM4jy3XW6P7PT10+gl/p6ydsM0E3cJ0y/XkoGLtZ46meGGO/1Th+\r\nn0jzt4XGR4H1Xtbc9N9LHW+lvXxhLQ2+5MPuSY9316E4WPWda7yNCVKKkEBB\r\nvVPQLu9y8FMtX15W9QHKdKi3DKwzQ6qlQGK/sfWGUs71XqeujPOzMAOVVffa\r\nXyswzu8/ZpT6Ais9x77kQvNOQLjh6d5wFlFCQ9ZJxKxMzSnCmiI9f7j7Cymb\r\nQsSVi8gBUpXs4O1VDRgkcdag69celp4Mzey2niGyyBFW4CdcbH4zVuXIqAZB\r\nlUiXY8dJSg3MNQN8+4hMtQ3LIJzTUVAkermVbyDVj41ut20zXsORboMtUwzZ\r\nUJT16cItgXtbBjImU8IwP5AP+ARbbxOF/uritIqASz8ogKpiseiU2Ht0jK6h\r\n/SCQUI1Lj849VSrbonDsGoynEQkiixtpiS9u//cg34vTDnabhn0FsUf0TKjB\r\n2BRzIwrMjTjto4j/UyiYuP1ly7UHvhaQ71oKrbE53WWPiSXYHjZ4cNjT3c7j\r\n2uiDOZGP+7FlyprQL4AECFsC8WUI7rT0nvokJl9MrEcfMG5aXUWgJJWWLRBz\r\nsYhqzbmFFxgtba+mSiUTpju0nMdUJS+eXZM=\r\n=6PGg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEK5OqG6gFjXBAUCzzQ34H9Tl9GCF/qgO4K3/OXehhAcAiEA+Blgnm2JsfGiOoIP0HmZtVlWXCsG3W1cRuJwWLoD3XY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.678.18884.0_1645847049976_0.34803261885054315"},"_hasShrinkwrap":false},"4.13.2--canary.679.18890.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.679.18890.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.679.18890.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c662ecd4579274bf93aecedb9a3e50ec81b3d0c3","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.679.18890.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-q4+OMX2qBaEt7EzgOohykKPnlEHIMx6fur5Exl7qN2D5fARAiu+dXcbFVbvOxTule+Z6fpqMCYzoX1c1i6xpNQ==","shasum":"624259e793db0e0f115dc6ccb65e26b9894294cd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.679.18890.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIVJXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeZA//cEBxsRhicEn0CdyNO62GhFO6st6ty8oR7Dty/ymhWwVDBmcV\r\nfzZvZodcsORo4WlnVmDY5bS4sWdMBgZY5TDVZ2vCjLtdb5oQsLYTA1GGy7+7\r\nmMG/OftGVcABlpqL37k3ey7I+fNFPDpl2kaaCwjPfCyI6dxSFXikNIqbRNDE\r\n5u1QXF86HhZIy6StuWWDoRX+Nj2l4Y1vkzi0jZWzrrRjmJ+DZI1f5/R+9yRe\r\nVzuqZFodZ2m0VgCBD15L+2jAnBPM+4E8cmDIjimLEG2V4BGZvrBwGfbmCjEL\r\ndHqceJr+nuAm34mLnlToNEsKMDjYcU052sqMRKU5sIFMfeEqhYRpl4sxG15f\r\n8JDIgqZaH6/1CMECwkYM4LpjTMpV668KgxOno+F1mGPlhd70O8ZA2atFfy3k\r\ngFrGEWcpMhtrPKdcqeAnvM8iFIqyIKUmeeQNxfX+vsLEnxPZJCRYgkD8J9vB\r\nZ8AZCtRS8C8ymGSK1w+dXIof5oJ1/s95+JHRfIYL1PrB7e3LEyc7V/BIMBoo\r\nlCn/ssDXW0GAR1vLi88Z+mXDJpMB++r8I9jui0N4p1tCR5I/gR6lydbyxgvO\r\nQcJyVKLxdpT9dGUDlayKtg9d6uZVnCus5CLQnR5ZMoQZMf0DOriYNBtvEzse\r\nUOOAA5Tv7WdWcoKEzpWgKgVcZ2nLSGkHzxc=\r\n=rfV2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/7UtSeV/EZUjnupb/9PqkLhf2jOejciVTbgzhjaTcRAIhAO4ekdGpZrA11TGaZBJ9kAlXXUhHBxODt+6axrUJ8bLC"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.679.18890.0_1646350935412_0.34033959155124993"},"_hasShrinkwrap":false},"4.13.2--canary.612.18933.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.612.18933.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.612.18933.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4ee82cb243217d1f4d92efcfabe259152d1f2dd8","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.612.18933.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-6wNRjAri4iHRIuulWAuQIWnf5WvUW6R7Udn1ydR+TNhCKi64k+WiB+D1jmUIhZmZrZeAqrt7wb1jGeEtZcWcZQ==","shasum":"a9ef4e7f9be4de9235e8c4b9da17f0f91bf8d667","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.612.18933.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJjzVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovNg//ZSza6Rd9zncvs4jU604W6sw6GrhpZm9jLs4Pl4b8S4QqoMc0\r\nZWbzz5Abv0kAH17FlH9mEl5E7Flk+HwZtt56Y+RufCe8Lkhi6VQqjzndV/Sr\r\ncnWYBk2RX/r5K2G+au655VKENEnobaPz8zwcR/NDFLmIIkbM7sCNiIBEDXq4\r\nlhwDsSVlDL0zRM+bev4j/6MRHG2SJF5IePUS6s6byJJh2/zxdaZXtXW8OCUd\r\nNzFVCl6+i7xQyYKIuDZixCYz4MhvXMxqk8R7cTxLprMDGgzWQpp7u3lDoVcw\r\nPmnGddEZ2fNZD8anRhAxcOchRDIKm1mgVozKHm4nYkh0AafBtvKq0tshv/2T\r\nPRXY4EWW1Gbk31AyZuxJwTifQlKiD4vc7tzq0M8aLrErCEGJlixWmU+CaVYC\r\nRcnyTsm0dcNxPU2LrgDvpUApGzPS5UK+zrYrKfGNUziXxvD780SDISl5MRfU\r\nXkx/AOpVjGpoTVSGXBILoouEddYYAGZ9un1dfq8IHy6d7ne/4AB0H4qJrzwe\r\n1TdNguYlwkoiuLKllN4lAoH3E3S3Ua5sbzl62a8B8MGm8kpJak70V91+2CsO\r\noMz42doJPlXWd4k5SY2uUl2j0bMwoiAYcrk5hYxUhDACeIvmPTSaD5qtRMno\r\nkam1SRpq9LluAPCVXM7vglkGoAa/rm0HA/4=\r\n=ENiC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrjPxkBzzIYv2XGAquu2vBbp2Wqtl/n63KLAA9D7ynlAIgMYpXsuZsko3h+0d/3JhztKE0UWnAgDcBkFPAc466UTI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.612.18933.0_1646673108892_0.6265401423104227"},"_hasShrinkwrap":false},"4.13.2--canary.565.18928.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.565.18928.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.565.18928.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"916f8ee55ca0cefae99481f8e36d5260c7235e94","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.565.18928.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Ew4uxbniLDFb84BQUtY4VO4d+Uc5XC7UgjPhcKmiRUU4jXbz97qUg9C7rJ8Vhvws9pawkhYe8yq9qQBoaDg2UA==","shasum":"7104071c452dc48038f69349c855e579e89eeed7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.565.18928.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJjziACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFKxAAo/EH5eF0gvyJ+n2xKsw0TMWpX1DGB0ZuqpNXk3Nnyk9wJJGs\r\nwzxG7iXRmx+gll8SgZw6B521j2bqBJlSTKwsF13IHONtihPNqZ/0Ij1pmSjz\r\nA35N6IFBi/R8XfTCvf2J+NN8mPJNNrd6hYUULWmKBdYhyjhNjI6Vv8lUnpU9\r\nMdBFbYbSQuaSVZhpx/leGNeDID75Wm1COOrgosBpFR/CTWI5NNwuCMB57uAK\r\nLLrkKoVtOCuDPaBmX/+X0mI9MZcmgIyII+lFxjmU44eoWG5pPQYaUdkDFuTF\r\nVUAGMT5FWAaCSxczizCrFpV6wOggOYjZ6zUw1hPqUE4C3fn4ONJex3ef4rum\r\nFabER4bCSjyhpZJBoZTlpIgAGfplXDIi3MrYsv9Skued5aebNY+ARii8G41+\r\nGQ9fX3MhFo4tz3qCu7b9Fw4nzikdhELW6QMfOR5R1rHDKrwggXWvJTQWcX25\r\nSmYQBlNMWWPLeaH4FqFC8iYfccZdl2sGR528GrtfGNtKeKcSgCFLqEEXJvQ5\r\nRvMUbJRykp2K4qQ7ML4A/wSQIhou/SXTYCl8qFKN27kcAdH2A6fW2zt+mfxL\r\nkGeq0Yj6XBiJkULbp7sc8p5VqUJHfWEr0zKpeV87W1xvcFkpubz+NQOfGO4w\r\nwPWWbgdGEN5nYCMRm3DV5pkD04yZmmAlId8=\r\n=sWcD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE/r+igIJCfwcuk0/rHCT+pbTz5rrPw6oYOOvePsq0SAIhAPYa30+DIC0zJSnQ+RXi32RMuhWFVzo9czg8uuXNI0R6"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.565.18928.0_1646673122261_0.5583565478729096"},"_hasShrinkwrap":false},"4.13.2--canary.587.18941.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.587.18941.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.587.18941.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"120f5835970eac5f57b6af7f2b365595365ec7cf","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.587.18941.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-cXQYmTZLtIR6sv/JUTY0ReWs5ekG7+ROVkoyqO1AJy8Exrg0FjVojG9/LZc9dWAphhuytWQYiWJxmZx18UIxog==","shasum":"ecb7170d051d873bf04a72e5be5023455a0d63ae","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.587.18941.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJj0RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/zQ/+OcUNbQ7iwS5+HPskFzLLwS0r/CMRdCN9zTFJXbPwqLPghXKX\r\nEZY5s0U4jYpYDHr3hfAnCc7YMVnCmtpLrvFhHRGCqRckpyLWuLbC5aSrqqYJ\r\nSIuF7qernTSgbljRuKVKYYH/xW5AgN0VU7+FEdjpUzV/KZyM3Yx4fSetPV3x\r\nWtk9bqAAXwj+6onrdq999irwrcMiNUngQ9GiF/Qu0HB5Jso+wlZvB7GVqSoX\r\nCzKVcb9gnjXlb2xpWffNEo90aLPNyD8VFgItmKR2IufDpDWyH4oO1qLOuhHl\r\nfdIIcZjrpIlIYlnIKAKSFX59VUOK0+fx/EvkqHbu5w45eqcxu25l2+qCiqCe\r\n5Ki29MbF+no0clDMA4OTIjAF5f9WnTIKha3lgNRVF9dgAELj4TjBViHH8G4x\r\nWKj9cMhuSIswiR/Qmr1oAQ/H9/XXha7Sr+oReq8Jz49ekJ2EXrmtMsuA7MKs\r\nhiG6QjpTqFfAQ851cgsYhNA/8VmuAKpIKlbca04tIkfz89eYiCl0s4BIx0nd\r\nR7GT2IYHgKgJcgAX6GpiO6Ed8k1nfTZqGFemqP7LFLEfZeii5Kiw1uR2bOHi\r\nFlliy+h3UxxsXfcX1Ef2aaRIALCujzh18BuD44XkrIfa18iilo09X6U7vX6T\r\nr8drynQnpvz6NwK/WWJmBzDCfXIYrDmheNo=\r\n=bETd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqo5B0ohOB6UmWsLLWs2WEEinv4GZgggh5tWV+/zeEOwIgIkz/QrLT/y9OvDdXVx8PpKQYaOcZxPq/5wITHe4rNkk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.587.18941.0_1646673169000_0.5862051614768429"},"_hasShrinkwrap":false},"4.13.2--canary.530.18942.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.530.18942.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.530.18942.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"cc6c73e3245560a70cfa68f5f755f2d81702a842","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.530.18942.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-apUsftjUVBo8CUa/JxL50Kd2TF0onPfl96KB7LoQ6MERvfyg/fPnPidLPWAEZvJeAXeVNkgzpaA6GjZfgWcs3Q==","shasum":"0bba1dd017e7c0d33466be5f1823c70d1b4c062d","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.530.18942.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJj0kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozyRAAoKomeisneunIcGcc0/p8gdlgIl+4BWn1SVqtaDI6GI0qM/U5\r\njORVOhr2XBItchF0tBLic65IkTS8lQEmjUuAjqhiaie30mvq5f2BYZZ3R5RX\r\nRPNLR19DJLNvRuL6mKt0PdoiGxHtnrxS3pleR/4x2fPRozmsXUy4xN6gTPDm\r\nZ2rDKNDh3QlZ8Yoy+F9M/t/8TGnGkblOEwy2Pb4yxmbwVqZysD45pWs8Ol6r\r\nQeqbsM98cTAOq7yTLbpbiLo8G8Yp/xv1cM1tkKvGvYCxziGAq2OLbl+Bxw/u\r\nH+ZUgzBpwFxfS9l7SB1HvrADJh7d3fVSr/vQOxKqMhkyBxmBgtYApP+49NDP\r\nD+YHs7lAI0YYgNeZOONqx5riYeaeH9+Oe8Qo5EpmK9W9wgOjIlWWZtQtkQp0\r\nf71lobDMf+JCnkiADt2AmzLlJ3Fz9E00b8Ln+WhmYETIteI6UgD5fx0Btj6I\r\nzd6oMC46WsI46LenjNvzzOYj/FLv1hf+GgGQ2WrpLaJjR2mM5HA5uhwiJ46A\r\njKJ/6s1F5EvwP8NdYfeHCn9FCp0Gq8DBGKKRnRmitYAkzyqG7ky0XOfE23VV\r\nVD1WQ/CEr4K8lLxxn08bIc5lx42YlcOpy3fdgAFE8TUzBLXZ8sJHR+bPPIrm\r\n1WVu3rMryT2zIYhRfIw4VRPfD5T2X+8UUjw=\r\n=rjLC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjj4jsfcW/Oo1iDK5KGfcloQM4pv1RQuU2ygtEYKZeSAIhAOxY9j+CKfUkJUkwXbM4soLZdEXfzgnQgtzc1JGpjKEf"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.530.18942.0_1646673188047_0.22912786237839766"},"_hasShrinkwrap":false},"4.13.2--canary.578.18949.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.578.18949.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.578.18949.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"abeed3726914d6c8cad264959ca757750a16723d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.578.18949.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-e6CRrLVsIAWbko72wLkU15uUSwb1S0Ufj4Z23ZjVeumLh97d0PU/rKkxHOReJ22pNXCHdXNeRa3F2KWcX0FZFw==","shasum":"9e045d75dbaf63e9e77b4415b1054207ab9db62c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.578.18949.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJj1SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp1xAAgbB6fK/WySm84tXrmuxTdOTAK6EZeGJbyAvMnvo2GIkjuPwA\r\ntRtj7oQxDiOuqGF6UI/LtU1lWGsDNQRn3oTZOWqVj/jrsGLKXw8R5KRVvBpM\r\nnYVPBGjBBzTG/kJ9+KNaryRwB8YaEDeVIVLYSUGvOOFD/JrOFACgxMJ8UCV3\r\nAyNxkVhzeb9SGs232Kr5SCn/plMQ9ZH4ICftLZuYR0av2Zt5mLpre9I9c8xl\r\nO6cOqdyZAE1pTVH1wulJ5pOLUGPiZChNg59Rl/uEXFdaWQVsaKJYA6dRHkBD\r\nSX17FMmf9I2STBLb1NgTZXvSyMxV1XF/X6ESKTHsXBl1U1AaFOqCZ/VFy9aP\r\n7CwjFctCDkzzwLS8Cm3HBbrDbpk6YuPTBYnrHN9wIYcmuebcdxL0mEz/3paT\r\nqkQO8ZQbyqvffBMb3TUx08RFT57AYpYVLxvPV/tUhDiSh0szQtofxGFMIQ9W\r\nVnBaarApW5Nn2M7F43GFxl2w4aXNxJQh9qKTUlg6m1MZrDDZP/TiHT9JNcEl\r\n7bEBo7IwbmwOR0CAfRmFoxsvKgTYB5xkbuxLnZ2YKAbja9OVnGngRxnocvZ/\r\nO63im013cKNQv8UGW7mlhn+PHUECLZYqEHS+XhhauC8Dh/DmCxeXlZLmcokO\r\nq0MJNbmgIrcpSAKAk3Iy0MhI30WWRKEzjHU=\r\n=ze6O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChSnb9JOmr5d4cIeKTxltmnPfBZlMxNJMOdlop+w1prQIhAKdb16v8i0P+sccVYUj4wbtJ6Z18qUpIDjlH0bTjJo0+"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.578.18949.0_1646673234576_0.6345975539647997"},"_hasShrinkwrap":false},"4.13.2--canary.616.18953.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.616.18953.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.616.18953.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"79cc6fec6b7c448f729b0588681ddba05a149ba4","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.616.18953.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-HzT03tAW5d3qFaZqL/637fcP7KiqzXCsyb9rut7G5XimKZRl4zqVFJ/P3oKajGo1R8Vkfu/jHry3Fo9jQR0FpA==","shasum":"43b323ad79f38cfb6b2c50f114ea8608519452db","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.616.18953.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJj1sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0aA/8CM0TvjHDecjfn1/ZwBU8fL45ysQobKWvLxA44+4t8ecsHREu\r\nSjhJixe+NRxQm+5wHGCRq75e1RFpozH1oc3UGw0GzpRJB7xCVImwdeUe+2GD\r\nfB92gFnRqH1AaUVN9FvVZFAU4T0rqVCbvYl9SC+kgGmDlZqznfn4yJ8GasdS\r\nQ8ZEXXCteFA65r1DJcXoc68PmAmp/peQe6CfKVKl5IiQy0BBELKPr6oHBNuV\r\nNFb7ch2ETythtENSliYVRXeDywJuI/BNX0gbjQ2Q8CWsj+GpRYpVne3AfbXS\r\nQcfNNtIFf/Kokgc1LaK0d8H7f6JpTPaJ8MB3JKshv1DAruxF7g5Ax/AYnMIL\r\nyIkKEGhzjg1WNtSnIyCyC6bZ2wh3xBm1uRlKkjLlJDk2jwPyZvkE5I9Kyjod\r\ni8Z83YQOyDYaVJYNciu2Xex4wR8HktVWeyWoMF3k/CSbAKhkNMB9wcMTDNFy\r\nv+thfUOaO2pm5M1PwoY4Ff/4NBMUYF8v2f8x7j6X+AoNO//vCgp7Xq2pWmgO\r\nVPegU2F7jnKcTiHLBFXVlH3MF/Y4eRYLWKzfIN95eZKRohXPO1lE0F6HZofK\r\n36NbTL2x/+B7Pw8+YSBgGo9qFTxvYu7hfY7WQzKeMsBQfPmmW8wl6a5YEIw1\r\ntNCLFuO692pSU844Xc1fxTO1kB7zvc0WTI8=\r\n=xaw4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZl4HViVQ3argXUF2eKAVGp9wR3Ytom4NGjALDKw58KAiEAp7JK8sunHSmyVnZoYyzw6NIt7bCuBzukJ3qo3QyPYns="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.616.18953.0_1646673260379_0.9296677706365217"},"_hasShrinkwrap":false},"4.13.2--canary.630.18954.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.630.18954.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.630.18954.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"4c20768384eb621180c2ffc1843914204788e173","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.630.18954.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-nmbJrhN56z4wOreR63ivJZCjZDdA+fQEvdlUrzAbJl6uWql9kxgnxLcTycZs2PTwiNeN5UuERzZURJBxNjkpJQ==","shasum":"804074a6062d9ae4d8cbb74a5177d4f341ba98e2","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.630.18954.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJj2ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFKg/9HCjb4qjFEzWl9nwgEmfLVi2s4RQES5gwdYLotLUV31myBaga\r\nCZSesuSGzfIIm+sfrVPHDD9m0UzPNIg4QTYpJrg/S4v2frvDTUPCZMK7JYBC\r\nETcbD08olQzGTM6Kzi7G1x2URDB98utD9unpBavmbZr17gE5EAKlYs0Sv1lI\r\nIfZ2hCoQvtw+iT1Gb6nmQi6k5lxy4LZwhgaCTJMmHqOkMi1UOTO+ZWs7UD0U\r\nz+7R8LN3oxDhZiy+7Z2eTjX4ac8dxI2DBiAg6qVHOXzoxDBnCJrOMd/Blcro\r\nQogrdoGbCcrL18Us0+UoDQiL5DWbU67pii/eYdkwBlOMED17i8zJr0IoVeme\r\n9KpSSTIeP2MiSobXHlVGOxvm6+xiVxBUI32eMf6kywm8AwKybzSL6bjooHs+\r\n3fyaDAw+MFEZQcjPF1KHVoveh67zt8e/qup1xEJIxu5X7iuR2xLoxFkXn18v\r\nc9OH6yZ3rbfcv6F4cfLoyTeKXvIv2ebXTyU8OBoMOBHs1XC8O/wdPlX2w7cw\r\nlWEXDTGVdTNZ6ql3xlDmrMdXxx0xgRGhfqo2YPEfSf0gTCFBMunNyx+DtuCA\r\nHbdd6b1ZVik0xtfjVKIVj4iTn6q4VgB4Mlkdw2vZHwJ05HkhlJYCWn2EzCSL\r\nDsfdv9K9OTKuKkgdsoILZm1pydWkbO77FKs=\r\n=1p84\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzgck+ldoNkMKzOfXBwHVnnUuQEzf4/m6dTcd8TVIuKgIgBOY+wLYrcK64xd/tzRllRn++2Wyp6jCB6BrJIZXk8FA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.630.18954.0_1646673305400_0.640059438258682"},"_hasShrinkwrap":false},"4.13.2--canary.559.18956.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.559.18956.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.559.18956.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"5b5f4007d63e15443a9695e7a8c39105fef4bd8a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.559.18956.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-XjYH+MqWH/7cOYFvdfn8qndY7q4PJqiKLcPZcNbHqfYcSXBT09ABeKBb9wQWH9ugom1YjjaOKRB/4to4DntCDQ==","shasum":"ad5216d3bd6e386a92f5d6ab41994f71d55c267f","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.559.18956.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJj23ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwpRAAjlRU5vJl2auZFJPSzfmygFbnMG3M+2pucCSHulOTI7SmXxoi\r\nCLVt2Gka9oknKBjIDCWxahGcYZmXph71gIB5c1r9l704Ljz59PTdd0A1qhub\r\n/bjaeQ8zXGhipxyZ3Omh8TX5H5WOluXxOEip2RelQSv42I27adwBNK+OZSaX\r\nEQw6UaF4zIyKvLKOX8dd1PET/uUPyZAzJ3loMZQHGNUiOmACXh1R22AGjonM\r\nqvNQyQfG8VKjlWJIM7K9tFTBQkJxBXus/3QBnC+l6L03u9ORl2R/6c+gawA8\r\nhykZ5sfpnTF4P51hDU4S8+P1y8NOLaJmUWlvPxwoD7WUd/KK1po3zpH/ig7T\r\nbfyNWOBr6rqlrUh2nCvigKau2drDVKCoT+y7oE1brJW3g1AVQCLPBvUwQ8qL\r\nmmQFtWQe9pKgHRwYUwHAfaaMuxS2qR46LqlRSuwuM7V6wT/XzxVyT9ui/3Xo\r\nDvC2NQXAI+/7PDShoTSOZn+zo/kIoKUjSgcEoqU2L03wS8j6J+FHo5fv8ArF\r\nXcgzYNhEnhvOehozeGnl+1oj7xxf1dZq8dBuO7USMN4bQhPusaQD9ijQBCsH\r\nK7RYjrzgW7pyFNIhfh8iOgvXe8dZwOJuV6Ek83UPMwRbwvEhQcVbXCMOEqtP\r\nTdfjkkNSt5JY2SJEjGlELIgbWdE71KREJco=\r\n=M17I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDol6D/4+oXZBhQdYRGPEpYRwIStnfmKMJVTfukJKkXrQIgRDDW+c48kWxTpc45Tk/wUBw1N+vk3p2qnOJB8wKJ6bk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.559.18956.0_1646673335602_0.969741880953578"},"_hasShrinkwrap":false},"4.13.2--canary.680.18965.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.680.18965.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.680.18965.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"d74c7efcd96d7521783f7338b9697679d5048cc6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.680.18965.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-cMX61nGd+g9+gUadKMPWlZVbJGeWQ9kfGqgCu1v2TRtMG8ewuvqkFCboy4LrFy7IP9rQV4jth6TCYyxHAY6p4Q==","shasum":"94272a247374aaa38cca108de5b1036648c7323c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.680.18965.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+u5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohyA/9EgQnJwsXxjKhJhM3gha1YtfRhKH5E0XsACNYndSHBMWoCFy7\r\neB+aZZCc+rm4W4BoB3WLJj4buY3X09c2IFNCxiW804gE39glAwsbDxSE6m27\r\n3AxNyNib41efi886LzNI0onXzT5wNzBWDYHqBrdIBSyEW9pBVrhssHk4Hha2\r\n1X5boRYQDx3Wg8vgwlQrIF98XISrerA7fdGjBbM0U+Fv8hdb8qQitHsa55fS\r\nsO6Fek6BvDlXVTiyokYP7AltdoP9LOExOGms3hx8bBYUC9YGz3cVQeD6w4MD\r\n3YGldlOz5OvpCHFgunUYDbN7ZjNsfoC6+xbZbh16i8zDDB5+8OF7bPKQoLT6\r\npcJBFDSzWs+dhxxzBDRNo+lhLEKUhVRiWPlipDFZa1w9LiVycwfFM2iJozEc\r\nO7510pN9zvKiIElrenGdVy3IGrSD/2LiXm5qtgDvghkQXbxl5GkOl8AVTfEJ\r\nyJlghV8ewEbbkLG6tSZPT0MhNcrlhahibuWiMrEZ7p7Xgt4rBbrmvZ+wPw4R\r\npC2gxu+Z3QN/WT9aZvNMfinHSwEyc2txxi/qqbHg8vSKY3oqnNfhaUKMoDQD\r\njwhxfrI+SqEIsyB+ih8rFyFELQt89MsxoddXQ/mQI97Atcuw1TcfeVvpVNQv\r\nHxj/0taVB8EmSBjGIHivrja2PY2+uqivJUE=\r\n=HNBL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbER34vxQU8Uzs3lL8weohXvyoXxgFyU97ZVGwS6LEYAiEAhC3sfRJgLTLHthRSbKcT7h/n1yEbZ1KGH12J1iC3jNM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.680.18965.0_1646783417794_0.1845170184750633"},"_hasShrinkwrap":false},"4.13.2--canary.681.18971.0":{"name":"@design-systems/svg-icon-builder","version":"4.13.2--canary.681.18971.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.13.2--canary.681.18971.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"29baa3cc7f60e5646669df366ead617c0410a2ce","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.13.2--canary.681.18971.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-LqyxcIjG0KKaf+DuUWNX3iFH8/nBp8szXro1zYjmYMshTeTMseljMjEqflsA6NoAxCG1Brw0nJ0HJPi1LPslLw==","shasum":"d159a45d809a01d940a13d58974b2b1694d732f8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.13.2--canary.681.18971.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMh38ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxPA/+Jl2oFsj0n6DVbCWnI2FX6XhUBdKe6UU1MXXXLCkk96P6aSpC\r\nUrh551mjmy7Lu9uuq7RxB6CNAi0eT/UsQ3+Fqmx14fBw6ehDn5sOQvfsyk2h\r\nnBh7YPqHx2Fkt0B+tGoDfr7JgIU81a6hgkPz06W1QQ4vubBIqELM0KsycNaL\r\ndKvTbYvQS5UT8I9pkKsdJJcwdvq/gYb/yKh1yXfxgHe8mU1j4vyDIUhbdFi/\r\nvfwTKYIqGfTB7hV2o+epxmZAmRgCIf1yip/QUDFIg8/Zzwn+2lbp7V6BamEF\r\nT9cHjDjEI9S6mJd8IQThq9ycZbF2IdQvQtV+lUFOPN1U37Y8ngQGwF2sDUcV\r\nihN9GOVUvtvX/xouihv4qsFwmyIW5J3oMW60T/EfcQgn3vwnayGDOJkMZA6c\r\nRvBNc5pxvnaiAdUHfW//i0pcuxayRcfXezCVo+j7FMl3YQ1RvqvIiKUP416B\r\nYKWC7oKdSz1t+ahJKpt1Y2RLkT/b/qC7H49jYu6m3Z0pi7j+vJxn/yBK98rQ\r\ndXHeinXCapyh+xPZ8EFckd1q5zD7DJbnNEmtuxzKDwgJJXISfKKdq5Vd/JlL\r\n7wQFw8VYSXqM7bBs9qk/IVAadvkoIpzKxnvd9mF0otOsD/be2FByAtvyf/W/\r\nc6hk1GcWZnEUsEhY5vN/z1C5QT1o8qdvPNo=\r\n=QOL+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCznL5LVAnxI3JijFb9GDwukxm6WEmbz/Z3S4LIBrosXQIhAPXe85yPph9ZEV49LhaV4Z0mbQA+BfY8ijzGp7QJmqrg"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.13.2--canary.681.18971.0_1647451643875_0.7485277493574258"},"_hasShrinkwrap":false},"4.14.0--canary.681.18977.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.0--canary.681.18977.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.0--canary.681.18977.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"29baa3cc7f60e5646669df366ead617c0410a2ce","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.0--canary.681.18977.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-OQicPXygQUYk2bBKrv5ubbV6j18ZH0tMKDnNdqyqtQ+gFAJoOdvlQaT/xRv8yYdXuJfE2tu3oDn3nookt9Nnyw==","shasum":"2bb074aa95f56e4eea9e1e318c6e746aef9acc97","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.0--canary.681.18977.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMig9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLrw/6Aux5bfYX7U8OnQcugWi240ykIBoTJjGiJbSt77Ig8CX60/8V\r\nnjdKAslYMXTPi4H4Sw6x8Pg3aOq0y2fFUh4guP7S9VwCV5D5fmpfIz5EtU1m\r\nby7TgXYL+5S/x72qFX0W3dn/f9bNr9Jn4Wmcr2znTP8DZ81o0kh8cz/1b/jj\r\nf1ei1Wj60AhdHKhZkE7qdnyusBBlyKh8rXi/uIa1ZMC5gST9v4mIcyZMKraI\r\nJ8LiHJQGfYos8BcFI+mnZSczUkdnRavehP3qAO6moI9B+b1XRu3guZ9R4SLy\r\nvlOtgn9lWPVTPXsMzp7SPDxE535f+VLPz57D9rbXUhBQyCr3wE2Jh8rqNM/O\r\nyoMvfdQkjJtdLIZAnJUHmwsspm6ZpJs9/kAcSKo9XVe7431i0TzEh6Xat91D\r\nUj22VzeMIOobZjdfPz3HvDsAKpy1qmq+vauhBeNAzUaVdzZv6WEVEYX/knzI\r\nufFiktQsfeeD+iJNKed70ESL7ZwE0NNLEc3kpu4TjLjDZ0Vgmc0lPsRUZCrJ\r\nuSkjbNXHKFlS/Bg61REXSYA/3/tS2irnZZmRIMw4nxD8S2QeDcIpUqMZrsA3\r\nBTG5oIH6r9uo058IvizxtNvcpg+UB0FHxMGyxvr3akf2Bt9tE/0g+p3WLlw9\r\nBRCNfloKtOyOeZCeTwZRE6xmz38ILkU9eyw=\r\n=3qi9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/U+yhSB7W+66M5JjzUJOdAyNXX8Dkd89/A8UL5TviCAIgCovr5V3JjGfX59BOlPFuqpH1C4Vg5uqL4z+wwxXtXYU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.0--canary.681.18977.0_1647454269718_0.7807730469210417"},"_hasShrinkwrap":false},"4.14.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"^4.14.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"62b50d1dd6773621d3561dbab1f1ebf26d3710e8","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-BC9sHHLN8C+Z23vHmPbJfCRgWgTJasUBw0c7928EUn7hPPqXVb9/GGZIxZgOlOkXKXfAobBpyZxamh0MfuLCGw==","shasum":"7f3f3379b3ec82352d72b84865305ebb3310a913","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.0.tgz","fileCount":25,"unpackedSize":89151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM448ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoM8Q//ZN+CzuCNq0ojOWnnEF5oI4WVvey6lCVuqt/AeCg84KupgevO\r\nccL9U+ZGd1GB+ylWU7cLvuiQ6vQhzNHFmUSvotTFReevM7FlisBCqlESuMOd\r\nsGWBrPOPBaYpA/HALr9I2IuLcmQHwKeLEcx0F2oeqj4CxzkZ35qwN4i3jReg\r\noO8NKPZnKg8lY6dgpMrqs+S3Ra9i6Sz+GDVmOtcGDfGbgnjNihduLLNthUas\r\nhlPmk1lOWmv/wF3qudUyI7WjUyRCPW+3SUEl1V0SGrCRIfYhk98teC/MLHOv\r\nTQTI9CB2Kq294AzevcIpGpq94xmH9WfXAsdhtGAtBE4B/b9shYM2udFIPKvd\r\n58K4OwYtpKo5tqd2zaybaDgowVDRWmRTIeqIi84+86mJsoxQ/6z2VXYXC79C\r\ns4zvBzhNqgyiH9xxBAGJ9lMhvXVZcp68Y3E7wN+FTlQ0xKfN7aMjsAMQ1gP4\r\nJO5ThkXw3+H/zls2Ys7voMgMYcML1XPro3a2SPelkbHM27XqxY3Rh/B0pZkl\r\nz7c8OkqmD1Qx7KyOKIfzvY2zDgXYI4EOW/MqZG+Xx8lTjkuXiC1BB+vBm6hw\r\ni8XJkzv7D3ZuAU8Ra2ycIbCCpMSXTXo4ctvClZ3OhfkM/04kFjogxcnX2BgN\r\n0Kcgx5JJEcRtmycKaSgtL7ddDwku79fNmVA=\r\n=yPBT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIFB03v+RCw3xIhoU74IXBNXEfufis47Zo+rAkkbKI1nRAh84mxe++lfp0LC6YA3xCACNYZLC9aFRy4Oz0I1dD4oa"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.0_1647545915896_0.4507597326194539"},"_hasShrinkwrap":false},"4.14.1--canary.685.19015.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.685.19015.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.685.19015.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9c9821d7381e97ea03acc9d49e9443be9b2e2d3f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.685.19015.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-aXi7sscFxIrVaYKDWGb7DpzxKA6YLke4yTREFUWBt/pjxWKnopfg+RoIlEeneQ0GGKmrJuWRZtVW2xGfF6L0XQ==","shasum":"3467523a75ca546ab7a161eea4b6a4fe2b5bf831","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.685.19015.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM5EzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA1Q//YmDxceC4XKwNW4f5sx/TrFlXhu+AgykaG+1fK2n3fZi0OaXW\r\nr3i9IGI5bAfnkX2y/pBtAU2rMPXGRBMIeH83o/XmDgXsfbd+0/OATSTPSvFJ\r\nFgzT6QzpBpy4wlseV1UB9Mq1E98dmst0p4CowaVvVzx1BaS3srlHfonWcvcb\r\n/uJjPgPEPkDa8FoGp/viEm6KKJQUX1fxpiSD+lO4eo9iIWYxbarCTOmlTt0a\r\nj9UvIGZ3P6q+Hc020Se3chRWzajacO15KQq159F4oGdzEhCtuM35vK2pLyP3\r\nCWldwxXJMHzNOdcNGvOSPpZOFGNkmQtPXYuK5/KLRynNhRcKKJ8WSA4sUUG+\r\nHrTyg4WAQEi27QMQ3h2un87qYcldSiR9aZCRxMeNY2DhwrEDD3ElyaesCCuP\r\nHjP2lAcFlkx/pn9m9Ul9qqsHNTKHD6MacxRkkGK9s/sVp2M3G73X2v5RHUb6\r\nC04NmLDHvqwr99yG+rJ+YBEgE+JJxjIyFgsqiWt5ME0iv2O/RXTw7bN1cQRB\r\nTpYp1POFGDiZi/4iMIu+ZI28ESrGIl8WcXzjfHRADVTtT7WoFSuCWsXyTpfq\r\nbSwtM7KjhF/Wq0IB0ynHY9NAIaqk849qSokMhqdZh2qyBj2009YI3BOcm+U1\r\nixd1chW00+M1I2hGfuA9lL5wRiGvAjEUYTs=\r\n=C5Xx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDqTHt+MIUOh1FntXudNc7FkfoskrMsWxcd9nfDRN+rAiEAw3cvLat1Wb7tEXvyqZbuMNutyvObe8q6OV4jekzwHyY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.685.19015.0_1647546674777_0.6416624608387396"},"_hasShrinkwrap":false},"4.14.1--canary.683.19019.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.683.19019.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.683.19019.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ca43e483415f942721a2c22ac86c8b32f7905daf","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.683.19019.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-5GZIX+ucH1RLBw3d6X/Bn6BweAWrW1QtzVJNMdCXfA8lYF18CTse0WMNp9jPHP+LZJAEk0KBUSDDNhQ3J3Hjaw==","shasum":"1328fccf32cbe93867a4adaaf75e6ecd7e8850bc","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.683.19019.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM5FJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlZg//f06RPt99L5ikxTmQBA5AKlQjbBRiwP+tFxayTYuq4FccZbl2\r\nvxj4K8i+gcjD6wGkSkmVzX6LuKLFGfF3VsergMs11FdIOF11Mtiud2wc/AG6\r\nftyfoOCToKicTsOiLBNrHZjkoZD6EFcWi3KyIq1MU2V2DgUS9vtLbeYQWTIT\r\nExmKClqANdXEQ1TjkYbBtFLIQQ2sz+VMQOsPZ95opulk+a5Yt6u5TezKmhkn\r\noMU0v+8hSyWadNKqiv1WfpPeUMR6NyNYNRqML1GuA+6LetRVYNIUXiheT8Yc\r\nuXtl5g5dLClVTRWx4b021IZHfiHGTJPfRWRu3M0bfSGf2LTdBP+1GrK7JWBT\r\nvIBXoYa1BM+Ke13bEY34ruTFSCRqBx6xNynHZbSNBKpt1llvSqouZD1v33Xy\r\noIOH+MXNBXR62FP5hUgbDkUXZjGuOpDkzAVLTmSXb/r+ouoZBdjB9lD/oDp7\r\nZOdDmjE/8ScTWGmk1m71aP9dsZ4QKfA86RqA9kk61eJtF6QWGIi5txBw+0/w\r\nhglsxgTxn18ZUhxFkb3snIiJc9cjuOZBZiLCqBaMv2YgxJBSErRd1P16CCoO\r\nCNvUMOS8zOaQzsoJO6/IrXsJQsvCDm4C9c7a/q7NR+EgTJipLN/XRSlMWbsC\r\nBRJEmhzjQNYgktHzIafGG3iIEh89sl2qOKM=\r\n=nZ7R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAlewGUbrU0sjKIgXSR4yqXVoVaR24u4tciJgI0CaiLAiEAw5HBHU0QrGAKWNtpUx45opUWweo2pw7GbUl0yUXRwko="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.683.19019.0_1647546696637_0.8455872411379417"},"_hasShrinkwrap":false},"4.14.1--canary.682.19023.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.682.19023.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.682.19023.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"1d2b929040c30256c1b05179a2c40f86aed31612","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.682.19023.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-gN4GFYPj+6DhHXZ0zSbycE2CKm5MGvGX/snKwJaDQi8jdO/M03pTKuo5Cz4FGJdI+L+/ihml9X+MCl8qdRaJ5A==","shasum":"626f99645e04f5f18b2ee41c071f439b495eeada","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.682.19023.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM5FoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpbqw//dfUGYa28+GG6UkV9qOyeH/924fKGQisgXOpV2eIixgYtvhLE\r\nT37gRy3UZ7GiaofNflUh1etDafYCbjCi6Xs22YAjazA7fdw+CUc3OvcuvDRN\r\npBjDZ7ZuHBTNJDrSPpl1kFsXHICEtDEUWN7pCAZHacM08+4Ac1C/Rd1gps1V\r\nmZQqIOC2o6fGg1zcSGVPH3ZNJwwUFvRtuVC4pWH24OYq4tWcXS5LYw4EPhiN\r\nNBdzKV9GxlMxTXTKdw2ebbV/WRMZZ7LsgWRhBvcXC6AczUvcSCEMgg6N1jCh\r\nTJrCRpiiIfSVvb9r8nJanV7hcq65CPuNYn3D02bpeGz9Q6HCk3vvoL9WbASL\r\nUTO6edsb7eWqsmkMKK6AXMsJJC06hDXdJDgQqgFtWcjqqEatjHyh3ohcmNwu\r\nWShtNod/4zTqyt3OTNMjaxaiGu9s3qD6sig2Wg2BTRybdBWh4Q6p5XejdQTC\r\n6Iy1q3P76XCibeLO2YsRlGva7gmLZ6ftTkfiTHoZBDcB/8eIY5OrgPTxSb9+\r\n40HCOsGAnHRR5A73QtcqUMMphutKCvOWUFLJtp7mMiZpR/PH3qwRhjyf6nsf\r\nNXr4GKPi+9MjsNxURM45Km8e65itY24ADjb0raPeFJH7iBSk5Uh7NWYjc6Oq\r\nWtjqMbYSc06CTxAwnrzRPstg/Wg2yskqrgQ=\r\n=AY8I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg2uzNc5samIoKZgi5NmpNTlBzy+tqYI2L3g7W9yvRDAIhAOtFRThD2xfRWNAGApJREwqUByIrcbiYbTLaaHeFLsPm"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.682.19023.0_1647546728045_0.7047607897239871"},"_hasShrinkwrap":false},"4.14.1--canary.684.19024.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.684.19024.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.684.19024.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"266d3bf224a5d3781c1a25fa7c302dd252541384","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.684.19024.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-+MYfgbHH7Am3d2XYrW4evV5sXz2yXDll8SwLdic8EuNWaTU5kg8yNRwOawsrNj8YdwI0N0OxzAtYnB+eeWck3w==","shasum":"75dffe6c0510b023d486dbc9ed4581d8bbbde943","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.684.19024.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM5GcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohhg/+KxXIrxJ/JCe6rsYHIcdtOkgRl4n1bTWburZ5hQkYohL0Upvc\r\nYS1NE0Xe6wCQGCaUF8TQjqLXEcsI2eCguvnrVHItZ6n7CuA1/34kFEBjZ91i\r\nUhKrTp+htS4UYVl6uCfjqu5F7N1jaT6+JDq4qKw10LEEdjd2xk2/zLHeFf5g\r\nfxkN9yI2Giy99BbK3jh9HPH5tG92QB4anv2SEi0yORsxpTwTPOwYw39lFurX\r\n6h/YjdoeKoOMszZIZNWTpcEJrbW5LpGHmzLxZKV8Mpaxnnoo8k99bD3jQUgZ\r\noVOmQmK0KsDpQf3ZnItMQ42OA4vN/E908M7glg8mJgwlf2wLQB40eh4PYlXp\r\nRM4HSogXwvgpiYFULlB46JTP3H3ks88ZJsJcSLLafLmeL9uv7bkI37gHCcEJ\r\n2Tp/zHszOPqag/hrBcHLCnqjannKNgFKZjklywQVFb3/Yh0Z4aPZjuJEzN3G\r\nZG779K0yGSdpopd/Dsto1NyCYqzb7StCkTRfrLRe5nuBGtc+OauYgDERqXT1\r\nBZl8VNgmSTR2TYwDT1hk8IngFYVite93wmv4bBO0uJhZj9VfYt8chvztB7Zn\r\nJ4wUItRg7fg8IsSGnaFwb2u258HRQ506ihC4pL7LHZqZG8XAHSZ8wfTBySuC\r\n+xJFnChfmr5y2CTmnXTw38AebA4X06Acf6o=\r\n=+TMJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYQtMS+pbEKHHLEVIt/qVnhoORu3E96gf6Y2BmaCgf7AIhANTKzXXtsL03SyD6i+MnnbWRNfeusNgJhPAiTdqfgdmq"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.684.19024.0_1647546780596_0.8237805032657"},"_hasShrinkwrap":false},"4.14.1--canary.630.19032.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.630.19032.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.630.19032.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3146967abae2c5f3e013d6cb58646d52b08b34c1","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.630.19032.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-aAwWgspyo2sXMK1UPDadRRy4vj0UUI+Pe7E14V0HqaCrP6m7us8AQf3AzBDRKV+EZZ9nc7kYEa7W9WzPI+ZTzw==","shasum":"25856cd195ab039a51ec1f2627909fa20b04f5a9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.630.19032.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM5IfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdFg//asT83t/cBuAUB3PXWnQU6Y0hXBrEiJpby9yAg92/e41tNZYc\r\nuhckwXcA7hr3Ng0D0Cawit9X69vtt7LF5agP7+ZCl14cJDCGTB/vlUzMZnyb\r\nlZ+NNq+kNb+90bip+26UYzriu+jRpMWHQt05U+d7YjDabnGr77EuC48rksyb\r\nmYZpfKD/MfLq3pGNGccLZk/koRlGjFfhkGRQ1ioY6R/Q9ubXgPE/5lkovUwl\r\na8XkkoRBYOPxQVJHlZI56SzDvspHHexmDXNTYILzMFJ1V2vZXD6UkDH+EbWj\r\nebQr+hZpDpNhdy4hmszp0GXpZYYScnLBsPw4k9Du3HkQS9sW5QMswMg5BcRg\r\njzU2okcyKUYEsCqiIs8NCOp+pYkMvQklN6mGP4HVIUw4Yhrvmdw5c/7Ojul7\r\nlGh4cP82uq3AwgSfXAsWPDbRafaQAwAzDn2XcYMd2+rZurHx9y6JZBxflW1u\r\n/QkTwf6zIStVQUnD1zoKaSpx/nf3J/t+6QrrNr2WEWSUsQHHg7cW23FlY3KU\r\npp1y+juqfGLwVaVRWA+0rgDh85i9PfLClnUTKitToQuR6lNUVllL6zy3yUhD\r\nRpwaxg+4idn+EdE7USwXsHMFxd91fSssdlB6UgSWqm1U0mk6D3o8tCEh78oj\r\nougKumgGs/YTSDb1JbPNRqh0RS1SMv1F1KI=\r\n=YUgn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSCZYdh4i85PmqKak7dgCOY/SZ047plQwioWJwaPpPjAiEAkFyH1GAd3q2Mu64DJLP6kGtvtXnNep+Pz2OxDn2c98k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.630.19032.0_1647546911729_0.5724624335842723"},"_hasShrinkwrap":false},"4.14.1--canary.576.19036.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.576.19036.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.576.19036.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a66ed9bb6627b1b51c7d1b6c232f3aa45d87e62b","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.576.19036.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-pT0msohTnCCnurbWnCrarFX/PqDzRRVUxH2PlygeVw22yvnd99sWbCi7zl0gUvoSF6opA/AYvdzG2s8QeQzv6g==","shasum":"c6cb38c5a96a5373190363ef0dee9f93c9430654","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.576.19036.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM5KjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN9xAAnEjzannuvoBOZvU6vezXAaLsWGckDpvjjNqdir7+6dP9v0s3\r\n1xWWlWHGlg4RQ5mhQp7IsVUkGQ6C4X+d0pCAUs22ATOlIBU873Ot+KuFXkEz\r\n/YrxAvH+/WWRwWpQ/giC3aBWYBskEV/5PPeGiBGwi1p9hRfG5wNVUo+vDXuQ\r\nOD+vxILbgTA5Y6zdmp00oPdQIf506Qr9oocbc54MBBfOPFGezzfh7WyUJzlc\r\nswJ5XS2Zb2ZkTcvkRXvz2FHmNkN4gErMsWJhW8i872NynDw8dV9Fr606GLgg\r\n1gnjpqhwzWXGzodbvnyMjmN8X+xTsQsTuU+SNgqT/z+QIcvGcCHDMN6gZxx2\r\nBcd4NN5jjnhnocqMXQkfe+A7kVztYgSbvflidqYPsvsIW9A50nUg3sPBak44\r\ngSjjdQgoBHcmD6QSUgo6JGx5ziC2sM8J6GaEM0/Vi/9xxFSVfLfwjtmRzHc4\r\nLg0hznwsCB6ipTFEz4lFx9a9NZvZYlycYTwAOk2MYQ7gjh6cAekeCA5bOhIF\r\n5uI5ZnpT9UR8TV0L+5hXL37bG1a+G4332vF6d2pi1ktMQgQS3SfcHOoVzh95\r\nlJfki9e0dgFAVerGTnZD0L/JlRWLc6Src2uMQOu2USWddZiZI1hXydMXahq5\r\nPhFrW0yvORmMQrbX0xqbXOl6m6znR9BM7Jw=\r\n=8ZIl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASQywzjAGJft/08PnuTDdWpbbdfVePjlqqhS8jFR+05AiEAhbNUvLF2cV2XPYYbpFT3wzE9/5QeihaXzi8m2man/JI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.576.19036.0_1647547043190_0.6120487905521597"},"_hasShrinkwrap":false},"4.14.1--canary.686.19052.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.686.19052.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.686.19052.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"bcf5b9a013077a6d42ccf28d706c3444e35ab975","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.686.19052.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-U+GC+QgfzNO0kO5DNaWCd85FQe6pROUyYTd4FRuAjGc0M13vAsXx1Xik8SIx2pzMGh1XBTBwHMZjkeVW0M4hQQ==","shasum":"549c26e8d7429bebb47ba050612db6673fd979ce","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.686.19052.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM6YyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbyBAAiTaa98X/rc2596ZjD+XekDfzsQ36vkpzEeSd5lqNCJzagVk1\r\nRTvBrDb7vfk85VK0bvtwgF1fSYeAjwO282KeHTaS2nh/ZYXFfOZJKUbhSu/k\r\n+difPkX2vCGCg14Iz+ijE9rsZn8GILm+A3YpdfVXqpmvMqpwhMsdSKjz5wlX\r\nFnqNg7VuiJUPZstiUEBEWZCF+IrLsFmTUKfSbtTdcRPW7oKN5DW6HgPdJ/Yo\r\nDBvmaZHt1OO6ViJ8n2ujQaeUOJ+7LlYg4PMdqjuGn4+dzO/C5w3sboGH0tr6\r\nPbNivsTrgTppoiflf0yf5Jbk6RuGid6DZ5U9ck5wdAu9940/fLCKnOKE5z6Z\r\nsOZLdohu2rkvTLzOjnZsStFb/Zu7TkM7gVkHJS+eeCddGEOYL87N9Dqgn2jm\r\nNw8ChxdpMChmS9kjvVK7BiFwNdPyUaktGrthlYg7sSpB6ypWJslxmoLbjZN8\r\nhn3h+6+ExZkGE4X7LpEMpoMGG6Y8fpdJ3lJDU1+BqDRNlMADtlyF7ubM6Yqj\r\nDqFfek5VbXYG+gcQDLqqvmLe1Dgd5YeLFKjs8YCZ6mVefjc3BCdpfCbj5OdJ\r\n6zFGoV/EjgqX5lndluyYmLr60Y9O2lpbkWCwpiO/SOKyVT43BGFbl8EDGkBQ\r\nIW4sUfAoQaypuls6It9b15hkk3m9LW16AzM=\r\n=YApd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ4wpLeh9u18MNQcrhEgEP8ykUQjFsh97JPIszLRF0GgIhANRnQckExKUvMdQ6e1POJ1tOK1vB6O0Vm1tQ789l0E/W"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.686.19052.0_1647552050033_0.02562275811832393"},"_hasShrinkwrap":false},"4.14.1--canary.687.19053.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.687.19053.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.687.19053.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"79d494cde60fa56f865668dc20cd85fce98aaf09","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.687.19053.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-f3duUYjZXvvjh89B68++F2YIH9X7YnKxmvq0wYaxAiDp8tYmGEzHC7sroJUbGgDMW3TxDQZ3j5oanem+gJHWvg==","shasum":"db5f43b94844ef1c9a2cf5b9fbc2f38a2f8fcc70","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.687.19053.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM6Y5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRpw//e0/WHSXx1XGY877ohiQD14YckTMdv1aU4zOYnPh1/2Uul6UC\r\nwnXcmoL7zgBy+KozKnyGaaFHt3SsG+68x8ud97qtQloUV56blfk6DhdVE/I4\r\nJT33p8oHx666QPKWtsVuYyNmDMqnLg1tSTe7HPNr/yUDEmK8/1SqXR7orjCJ\r\ntNqribA17SsQo+B5pY6VvSo8xffk15dry/04ZG/In1TsvJ6bgPALy9o2TeDj\r\n+qbI1vwkeuu3GgLorCkBJaLDhC5PbF3lrDNA0er5cwNfx2n9tKu3RKCqACzD\r\n4ETpGO7yirsBJnYSsb4b/vmYQkh0w3wqTnLHhTEn29bDlRhl+Xslq22OJZJN\r\nkwbDEr7TOJPyoAi4pbzhOu46gMFJjDvPuRsQFX+r3AzKYvKycoQRSgK2DV/k\r\nTNLgs+Gezv0GTXHm9i0sM1qa7VGNPF04qwuU4nyNcyBdujwmv47rlHnWwzb0\r\nGiuhTuDXgAoqc+Ev9r+b9qBuXK0oZiE5Gw1yITYgoJyrAYxUF3mQcSHgU99K\r\nY5KrwnHl142TSAvkXI1Ti2MdfA9V9gyXJw9L+W98//eRAcQH9MzR5P+9EqIb\r\nwQzHBmC6dA9u2O2j+ap39WPsX08IiaSZ5pG2Wab6PQE/CLEm90t92WlCneGo\r\nf9VRxin/h6K7Ho5bB3f8RB79r4hdsqsl0xI=\r\n=MuPF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfqziuNzanXt2nVvWb8zjZGogZVRXpYlnbD4RAPtdwXAiAwBuNLduuT3JFTqmTyFbiAoT8DVZ/eujUDQmTZDz7GGQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.687.19053.0_1647552057216_0.30330010650522454"},"_hasShrinkwrap":false},"4.14.1--canary.684.19054.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.684.19054.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.684.19054.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"082a4959a43a19b6c8e1fa07540fd378f4b0db6e","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.684.19054.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-pwpwSJcats3efEFlZDggYQfhD8u659B946PrXpqSHtv/BFtkhRaQ3IpT46FamGbyk4E5VRWE4zzfJ1QKWT1hVw==","shasum":"08a768952d82320b46ce396c58c6586277401fdf","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.684.19054.0.tgz","fileCount":25,"unpackedSize":89190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM6ZTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf4w//e/GeYzsWVVv3O9tWgNdXNgcMGT3wTqnvLgNxSu1aHYNXZ2bv\r\nFEdLAPfSJKfFO1KdEt6Jzr+wKAcS+InAIg1mKPw7BMEGtPkfJoXVZtXIy/pZ\r\nZ/UCFsJb2+y5YqyiNeYG/sQWm5NbhxcDTiOsOvkWApkKcyzz9kuBw+lJmYZ3\r\njlry5OZspC7qtFplw3MUm4lROukABU5t/Mz/+TDsAJup4/erIa9piJBqYRDM\r\nNb2j+1EFs0VytGmEijraVpW/8eyvfqcvFyRhDPbLBjmlURTveYL7GO41utCm\r\n4ZuHnlc3+ns3zItKzkgXw099yYdWq0MspbPJNTtTVLxOTMtSpNm5ctiV1xBg\r\nKRq34YIUvofJ6g9HTwjwWdzp0cGiQZ150h5wQPOoIQx7ic2PcKOS6rgikmm2\r\nQixbSEclpDYkiZnnQdXPNspBlttVG5Dwp0CKaQ3/Drk38Y97hxvuZrM0Jprf\r\nt3OFqimA71wEJkdVIc/WErFFbwqakjj3V4IOXmu7sH2WRQ1uj1EVWwSKQYjj\r\nyeh/BQ0Ivt+ACBqvwvvdc7qhPrgtudRo00yiV0Jipx5g8PeJrVSiuEC/tvX1\r\nahlRf1s9fw2zrftMh+KGfDJb7dEHtT3wnC14fA+QCILrhJr2sCVE14UEovRm\r\nlrWwmTAuXMS3om3axV7qT5G789Q99G280MI=\r\n=Ovej\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDM9SrPWH110bf8vPwLjroQ8gDocy0UWOyRkAf+X3v/CAiBdcmod2L+iDiWj9SdgBkM7Ep1SJ4wwxbAc1zGNphnaUQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.684.19054.0_1647552082776_0.6370915877450869"},"_hasShrinkwrap":false},"4.14.1--canary.691.19293.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.691.19293.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.691.19293.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"7cc56a7b9f6b134721c8910638382231d2ec7468","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.691.19293.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-CLeScFPQGn8XWMCShZl4PGIqj64TN3gxfsxdS25IdvWjxL5FMOJWLLWExbns++rHhwgtDnWYsoZbiwXdiB4O+A==","shasum":"f92a506a4a6f4ff8fb100a4453672632929faf2b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.691.19293.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh80F6qg9yXYKY8EM/ZELyva5jkZqY9zQeO65lVuTSpAIgO0YqakXdxKmMhrNmoF1yysV21HYxZaV4GkJQ6PhX+qY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaFtYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt/RAAlk7s5a0mKOIpUFEUt5MH6NvRAIS58IZ/r5fGO+0ja+Kik3tG\r\noM0cBfnMMTKzhQf8Y+ara9uwtoKLezt6HppDcT4BlqC2ntzUAsgvh+LBm4p/\r\nrsJr2NmRVZi7tmytn8V2FeI9BoFbFEwDZImLQLaxPFafl7ZSmcZHceajnv05\r\nX6qCXQh5fYB7P4ZlUaGBM+HOrAaox9YHbQIK5mbFf+PsT7S6w+kLwmg1tPDP\r\nmMZOcLp4+xobOhx6qLIu3JtDf43JoUeyL7GTLGrj8G+RQknPujnqbbvB0dRe\r\nZgaL3QnELyubUMlUakl8sxQYfR09o9MAjtORS/k1V/l+rO+dRxooUjNcviTX\r\nDDIwDu05c/cp/ZGmUMDWUAhpPmApziAIGaudXMiz4tUBKk1awIZYwwiUudhi\r\nMAwOfRkqQl2vkPo00w0Vg82jtdMkc1PPCmyh/LGDp0bTKX9eHMUZOLJrw9Ig\r\n/XieUadBBnzKN3sA9wJVx6sMcMkuybwfz2mjA/JkaRQp4z6AnhFInXzy36hK\r\nHbJ8h22tGb7gpBjCgqYNQTog2p/1+4ZjUu7az84z7dweVuwqMWC6saN/t5S+\r\n9CpyVQje6TaCc6OEIHGwJd7URa8cvNdALoZ3t2/co49MK1KZBSWEDkeaRk+/\r\nA4ag1TG0vq2Qzb2BlA4Rn6Tz5AMv81OpRy4=\r\n=x551\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.691.19293.0_1651006296445_0.02405268304016861"},"_hasShrinkwrap":false},"4.14.1--canary.691.19328.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.691.19328.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.691.19328.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f1a7408e27d610835f68b737fd4271cfaabc1fe9","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.691.19328.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-z3SxMn3HR/GrgHkwcpDSfjWD/hTMczmZpH6trt8fRKhvCypAHkvF0tnqTGL67MrRlWvDIwguUwFRoSyyI/4Ciw==","shasum":"02aa00886dbcc0b042f3a5110c769bdb33c1fbde","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.691.19328.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS8yHTRe0A8Um78MNriTDG0BhYcBthu21i3FHdM5HF+wIhAOOLIk1k2+pF2cRiSvGyePQlq6lmgmWf780cSCgmXWoC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiavxqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjCRAAgvnjvIgTnh1zqvySKqDFCCi/3x+puGWiHZc/Dg4pXOyDGucO\r\nYHG2wCiZ3HerEJQyHQjQdnRFw/ue5sF/GsOEaGM5JmkrIrNSCqlqhdLDPxel\r\nnk8wPtZmkAdSzbbILZXfGu5siksoOeDI7TDcljALycKXhcjTp1LYQ4kl2BGe\r\nj6VVBV8rtccGNWwrDxw9OmhWBBVTmo+fl9pXFUFm68rNQChtOHlhJNvZKzZ+\r\nsBYfY4elNmnA9SqogKom6QnGhOSuaRgWUryXZPsmyT3SGPugco5nqDJsx4/d\r\nkmKm//b5uSdqjNWoEFR43Hu5FQrXTWSDB9xdJiJ1mSwe9+RODrBlbrv9U9mD\r\nyH4QWNXyaZY4YHsYRGoyn2DeC/Emz1Fs0XgrZt0VFq6h9dxLoRUBxwlh27m4\r\nBgLgswOBKm2ENs+f4/0OQRQbVE4U5E31uwcnTXa6gs3aRLZeo3K0MgapDU/I\r\nHGNNJ5DUD9d6z4UB3wz/BUjEfoyP4//UnEdjtQzXbRx+iZM33aVE68bmprQd\r\nzhu2g7WRs4Hy3C/m8MshAsX9mF601cmSr/hEYRPSyal1ob3AaiUPeo9RB/qp\r\nMZ4bXCcMcUmidyaoT9JIYgMOIbkH1QeDOwPvYqJ9WuJlD1lH6bUWjBh39lLm\r\nlwAyk1/XnjhR2Xhz3DNPxGfPi5tqXKBjuKg=\r\n=PQ15\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.691.19328.0_1651178602116_0.47949522571062375"},"_hasShrinkwrap":false},"4.14.1--canary.691.19336.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.691.19336.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.691.19336.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"42b4cfd416b77f39c6c3260f2e261b22845d3ddd","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.691.19336.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-/ePI5wY+Yz3J+BbCqrgAiTSkQ+m3ky9x/u1UF952detDp+P/suVJ4zEs2tFlWDfru9K82Dn1IDER27JOpM02wg==","shasum":"d62a4039a15a3bd21a8ff31add060004f35760b8","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.691.19336.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEIlQ14juUC6Yo1b1VuyVGkVBej4JMb9a8vpJ+vZ3C8vAiEAjd7T+bfaH+XaSn3C0w3hnv1yJRFudn7P3qZBu3jFmKc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcURAAkYBP3snv5fVrPCFUOFJ0v3+uuORMWBt8BkXpCAqWvkUR8L8a\r\nm9Yi9QB+bu7KEKli/PM/Yb2ftGSYT7OrEvHUZQh1cp0qWcmvtLY64fxsrgv5\r\nivq5eSZumktA+3MK+74jZJnnC3NvPfFQ2rKP/K+SUmr5/l6KsMmL+kQkvzFT\r\nMN1zQKsWzqL+O1b5TYDP7+214Wrgc7s/F7tt+GpvfDNfkKXdwC3qZZvN5lG5\r\nFt9pkFQ/nk8uh/VstnKafziqrp6k4Erm0eE7SJL0TlD2voountVjCNK8AbCf\r\nYSd41bd1eSlwnwqXAmw6H+7/YktNEUw0x/41jU0PD4IxusmKhXad3JX0EFq0\r\n/r2S8q/CspSJz8eJAQpaRYgRApuECemjk7I8pVhaw4bLNOGhiM4Mf+2eko+/\r\n7H87LoVsAb3mbRnieyMzviclhLktSDdlsnnp/QqnavUdlq1qK/ezu1bH9zuU\r\n9b52+69+URNWm7DytB1fRLYjfEAXgqjd0tTcY5WRG9eWS78r0s/dwACf6DeI\r\n+mOhM5EBngM2k2d21oLTrGPdtKyYfXhYacuDpKRAF8FfGq7rd9rCdgZ5h5m4\r\nmElRsVWbPTbJPqlc7f+LfMkn39WAikzMG5wM8kgO8oSqKIBNuiLiYSWQtnZE\r\npuAIxq8mhz8hUhIXhQVnvnj7kje1nDoqujo=\r\n=zjMs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.691.19336.0_1651244852501_0.23069464336416967"},"_hasShrinkwrap":false},"4.14.1--canary.691.19342.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.691.19342.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.691.19342.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"abd4826465e1bba68a438926ad0bdd48d67f1f1d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.691.19342.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-cCXHbAaZxiw3i6suBAuogDNytD7rr6X4vnvZDhfsXSpQ60I5b38HIDjd20IponNdMeRTxQC6pbyHOKQOEJqemg==","shasum":"78c5a082e9bc1362c000dbb28673ab06af0b6781","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.691.19342.0.tgz","fileCount":25,"unpackedSize":89190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvpzwEJYIvlrId7b3MkWk3asn9TU/w55TswShLRHTCAAiBCeJKgGOgCdDO7nCK9MG7pUBchWgm/D9sDM2Hyh8kr0w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibCcKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwuQ//ZGQscCfm51oZutLjYGkr3aPtI3M9VMe1a66uhzfBIZWVhwwW\r\nOGXjKitV06/KtyLG8Qz5VwU/kk6lBF3XJiKWwOZXNH/qrAf051dEELbdRE3J\r\nb9ufPQ9dtEcIWk58RVAGvcjpbIBouxdVsY0V7CUQl7UPKQkw/vDdtCQwPo8d\r\nylEsM+Vs+evrNLsqWyuarP5L4MSIsoV9VA+kqgLjIw6qeCXbhUdj4zfLmTty\r\nAfMvsfhjHGJtSk0A5kLLQRRpMmLpa0FWFGMJH6LIjYUm1WC5FPOhj5hdjsvH\r\nI1mncbxmp7my7kYBADSklBWn//+ip1VkY3dP/wd/kuTqgcqKRrzD1YIUePAx\r\nAa7xUZlvJPrRBQlwSbOCRd99cnzsILOYjHLz56eu8lmt63uanDiF9RuBsnWt\r\nyq1V67Bgz577scHGELE2KcRAXVzxocjr1z1Ejy9w5hr9fvT/XuZ7V2RHpfAW\r\n2VhdaUZfgJqwWHkDe3e2shfg/yzF5ExzRYlA2aFVLjgMSabqJN8MXACCEaae\r\n0isEJBKMianNyGKQjxVmLCiP8ZKxHe1HOQgFudCCIp3oKdZT2ZuWc1g0Df9O\r\nlU83ORJ4m7LT9zsXRfmoxwQ8t1wMOor4qjTmiBEoHMXHfz8BFNNkgm1KocPw\r\nC6kq8WZztO6zJGO/RSV1Yr7ekmbqSuRtBEw=\r\n=f0Wu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.691.19342.0_1651255049779_0.47245057275367275"},"_hasShrinkwrap":false},"4.14.1--canary.692.19382.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.692.19382.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.692.19382.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0a4b47542a91b9a465eed1b4329c99b1bb789386","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.692.19382.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-xJtxrkOuol+WR9+N6OEGQ42QZtIPjdN2tR7Xlx+naJvGJIgVJvIDrSGVdE+82AYx6lOmpJQfApE2iUThFl1IDA==","shasum":"53230855cdd07cc6b0d0eb12ee92bd4c016bd2c7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.692.19382.0.tgz","fileCount":25,"unpackedSize":89693,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxZNlKWN0UwNHW/xT+HG2TjCwtT0q6GWUA9JKy7gviSAIhAPJvWcIkbPuOlGYzDChiHtAQUH9Wx9kOcGIsJfP9iSUd"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieu9RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzpRAAjZJH9VAlpgkdmPZMKcgZGBjgiJSoG4YsyLKZ0BuRCT9uhQe7\r\n04hAlPIPpq1bOasHyQ4jcQq0Eevf+gL7PiZTR/rj1cRZ3cZeG+IVam5k2fYV\r\nSS/ZjmRv/dSaS3JVwiDVK342iAmqXdM65gI2JhJejF1zm6giAuP2tiYOuhuN\r\nFgmTorkP98u8tStcggJwC34E5F5GmVUOa5lPuBO9VnK7HXeJ28SY42IoP0aU\r\nI587j6zEvqBCJCBED6G8hvkN0K9aE8INayPEdTnf1eZ0/MWKuy02e212IKS/\r\no100IDQ7tKoWRLzlnPsEjahUyq50hEkEaUNDLBrcxd1/vjVBwuzM5a3BuXhz\r\n63Y4IJhOssrNn6CHk64McFmZQoUNlizubzw5ttjq9ztmmj3wJiEFng44QMsy\r\nUdJApJn4l2ucODoIdauOKDv1xPu7jHEW+zQ39T/4NH3VhU3iYe56wKapjzI5\r\nTLs07g6mw1rdmM7NcVMMdye/L9dCORHacS8WkCdBtFdW2pXtk/B2aK+foRHb\r\nu4/gDE4h04aAK9KUfoGYHfAefvDPqDGqtFZPRNrbMQflX1wbH3mirKuJ7g/c\r\nyZgVvHIv9/8OpeXdLN57khuO2uh28wZpgSOKX7F0FOm/zNpcC+0jrHqg6W/5\r\nwfp20UzB26QHBGW+UnKfzRIl1MjsRJoH7U4=\r\n=GlRb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.692.19382.0_1652223825666_0.6315421095787219"},"_hasShrinkwrap":false},"4.14.1--canary.692.19393.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.692.19393.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.692.19393.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a4cf6c7309e7f6232f0c9dd3f688b7b972d01c24","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.692.19393.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-60kiaLi4cxrKMxa0eul5vRiy5gW2vSwgJ4JIMeY71RMsrKl9+eBatnTVv3vlPe2LTK8Nte3rTzHJS/V8mT7bEw==","shasum":"0130183bc88651d836a14f4e2a3a0bc181698f6e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.692.19393.0.tgz","fileCount":25,"unpackedSize":89753,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZK0X7mXVwIgsi7rFIXgowFSP1XwenPyMoPQCpWD97NAiEA8y6zN1G8WFNQn/dPqEPIXrG93+qXdyrpM3vyHan8nwU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiey24ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjAQ/+Mzx5MV/zyyBispqhw0mzvi5WaT23uFKVwIInHr6143dg6cxY\r\n0OyQC48iTZEHaeNjra39r/GfesCraikmGoGcE+b7FXqoJKbeRyoAokNIjKeo\r\ntChS9j9hR9oYOP2uYl2F6x2lWtmw4A9JqMZnH0W+ed8Y9pT94Ha77jNe1xzR\r\n/Z6oxIEvrTHu6KcRUiDnbAErKRwY6HiTVYxyVMH3dl0cknT6mcPO87Ss1LhM\r\n8a5bcSg/iyN3qsb2VZwDLi3ymJ5CZP+FPFzAhZMwo7mPEYsFG5En1kRSPYfh\r\nIx0fh6lGxYnunRZYfgrHN3JpzANGHmNx1E3LcTCFZHKQ8esr5SQv/OR72LAc\r\nYw9hrq4HRtYCsOLEdU7wT+SfWSsE+54e1kKB+etiJUxRmipgDxFu8vZ7Z4ly\r\nSyAZ4ZsW5D2mkn9121PA7Vb0aGdTEe0XJjgOmYZBarV3EESc6eKut+WSMZaE\r\nX2L1thd6ncAI8IXpOyqO2NtsoJGvlsE1Nb3rLuC4eT/HxisZzIJ05egr37Mx\r\nfgSSdNZktXlxs0QxMYf2I+17RhukcrFWSX+iRAcF7PU0CSoMOh8s5GPVJAJI\r\nZcOCNf/TS5rJmLvdIiT+s8UezyQLsyo7MOKifcIwOoqlidFUlB+8HJmSY9HM\r\nRhECs5kU24a9JWw+X9KJG50gw8njNa5igpI=\r\n=+sw4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.692.19393.0_1652239800683_0.4426694791111414"},"_hasShrinkwrap":false},"4.14.1--canary.692.19399.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.692.19399.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.692.19399.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"15ea62708e7983b235d07660860d5573dca7a174","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.692.19399.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-g4EhaqllVJ3c6tjxUPT8m5XBcersV1rOfn3AZQfyllOmlfKF4HoEG95cxRStrJmAI+YWZ2CCEZD1S1k32oqdAg==","shasum":"683cd5293fabcfa870c844745e87f3a648190f81","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.692.19399.0.tgz","fileCount":25,"unpackedSize":91964,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQRhHWZaCoyQykmZQrOGPwIAZ2bxZF7U00AzV8/ukIQAiAx7JvuflB8vC8vSbiXo0oHq5g0P5o97iNLBzc09rV0Rg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifDv4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocpRAApC4TiNDMsCibCADnJJPpUvr4tx0KOZTgqE31OXsDvcfVvVke\r\nI/sRxW256HFV/BlH5XqdPMvxt2PeUxzXXhKnZDvb3elsMJiVnxjz1vQnB0+j\r\nnbXWdenx0/mE4xHYWy7m4gVQUsQeBp3X0TUIcLlpKtPHHtP4mwY2xKXlZFQ5\r\nJWQP+cQy+pI8I3y0p10QyzZK+3kQTArNFkpEgc8PqCBGQalQ7B/FfqwI6nL2\r\nHcxuzK8+IzpYYlWcoHjziEnyWycNZUhPCpwHZDz9rja/0uKuPCojLZa8fAMe\r\ncoHVdkiJ5NHLJadQsSoXbqI1yMy03dPNz5+87QB4cf3HhX8r4JwA4BQnyxHR\r\nF2iFg3HwSVTsAUS+WaXcRPBNnlMKncNpguvN8463y9g5jKSF7WMN8dlrabeO\r\nzyKDl8GXTbij+jytEVTSxH5ET1QQYIC6A5OBjv/li2X9z+qz4WRQAPlRFHcV\r\nhPssRcoPJ62kkoFXlYlXNiDdWtVrWBB7ILv8r6yCqjVeuR7dM9GqJm0j/zoY\r\nDe2mj2kiD3ZN9rMJNI0CODQfNRmG6TKloIeQ9vgPODKRJtXT1AgxCIFASShO\r\nO1SuHyhHkH3d66PNGWyj1SzhR9DBKaS291dIDXSgWH9ffw0RkpLQfh8PAXOX\r\n6GvLCcatGl7kpApldrxFM09f5RCZfN00j8E=\r\n=Opmm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.692.19399.0_1652308984134_0.2531978795695007"},"_hasShrinkwrap":false},"4.14.1--canary.692.19405.0":{"name":"@design-systems/svg-icon-builder","version":"4.14.1--canary.692.19405.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.14.1--canary.692.19405.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"10c7d285da8d8f8ee2b9745335f4f6e49a5fb14d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.14.1--canary.692.19405.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-lCJlQ7tRBp4XwymhWKPReYXfcCnjX3o5JOz3bWLAgp83PB7CeWHvtqSH1LsJGaa6EfuISzYuWFuwgneZ5yDzDQ==","shasum":"33efc19d26ab780257c0eab189f9787e1c5f5e16","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.14.1--canary.692.19405.0.tgz","fileCount":25,"unpackedSize":92038,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFqf3ChB6xII6abVH2A2Ecich3u76Btay4u0IktFg3/AiBuRSfiqY/EJ1xebum6KjieRLUt3BWlKWOpbMfQ+nVMKA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifEFgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoihA/+OB2sMH0bIV82B1CSDP4WTfXK3iStDuu2sqC6T0ovqxFKMKa6\r\nw+jxJscdf+bjRJg6JubU8WCa0zjY7ARfWijZfE4CDxP6lNLZJPJxo7gELjzs\r\nV8JZ4vkLpYULeKt4S4FqGiRIeEZu24IB7Hr29xNQGwmL012GqKf0Itdy1Uk/\r\nPwQCUDNSWDaBW3pmemV1rZQWPfKKa3EANwNkUb6pmepIWGsKf3bwGhPy8EX3\r\nyfiqn1xfBIUtiU6tC+VsV7px8VTbAbRbBqXiTKVEsNXtn7kJzCkl79ovjk9W\r\nij7kdVDkQphm3D3dFdJgNfsks/LsmFBax1mE300JXgImi7/S2A6ecrD5XdJT\r\nw4k9O3FwPAKw1+BMRh5eBswTYeJK1ke2qj3epN81wmuZ1VAYHkRg84ibBezv\r\nKZn98iaR/3AnxjFZKkocQW3f0rEw12zFvLgs6xzDwOuEH2JXjAHOj80U5F4Y\r\nPVxgoYiQ5BM3dddlKkIIfAY01yRxVgfKGQFW0k6vN5EGtpyMXY0/NlvgIqqL\r\nBsy4K0rhIaVMV1D7axU0brUwjkl0KGe+xOX4AouFTjS+Trdi2eBOHYXXFEdK\r\n1050xymdfKiLlZ6A7U8ZnFC1Y31ijkB92XBKIPU1NuzfFDRO7XbwAWnqQOEP\r\n+Atm3sYQJG+Cs8hwjXNBHJ8/hm1W8lq2V+k=\r\n=Agrt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.14.1--canary.692.19405.0_1652310368718_0.7693741554342328"},"_hasShrinkwrap":false},"4.15.0--canary.692.19429.0":{"name":"@design-systems/svg-icon-builder","version":"4.15.0--canary.692.19429.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.18.3","@auto-it/slack":"10.18.3","@design-systems/cli":"4.15.0--canary.692.19429.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"10c7d285da8d8f8ee2b9745335f4f6e49a5fb14d","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.0--canary.692.19429.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-aAF+zENSDhcJm+j/R8TK+VCVOFwehZCMFrU7z+e67T7nuJOhzxhpikTNmA4SB2m5VeXsVOGhxkTrGLAfetmgwg==","shasum":"f5fa76342efbf29796fef75523aab4b97ff5a0cd","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.0--canary.692.19429.0.tgz","fileCount":25,"unpackedSize":92038,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGqqPJKVvvq+13NyJlprZyfIGZHIvIOAHw0+gr+TPi3AiEA1l8lFC63FLIphiF2/h6u4ECzzUB8J68sezEIXe944T0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihshQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbPw//XR0wh4aL5fFmJul4d0uBNkhoapdrSSolCT5T5HJ/jKazchJK\r\n1oddwK93YX287scumu3WY66YkBojArgUA8B3vuEq/0Q4Kgr49pxQ+9Imk+i+\r\nEHBQp1SGcZKY903C8LAdeYC5viCN6bmhASXEN8ikI+iqovBfRE9j08sVGVEa\r\n/+JHStD5XD9xtT54EGnRljeAh2916/wwBm5GOqZaO6thrzfjigtBu3iw8rRd\r\nPtYNtJceAEDrx1yYL/yqdOtFoBuM6vvNKjBtP2qNXnWlFhqCie2stPU0XUOA\r\nQM7BjPMh7sM1YCfj01jDpj+t/p6V2dqAJOTRA/BgsGSA5nMexTtInVBACr90\r\nnBp7VL9UK+jjBY2YTITNcfA+VNYXanNU1ET8eCPbgkoP9SKWwqaHv2W8laHA\r\nw3GH6Vy5YGvoEgtodpZ0eOX8BkiO7eep3j/y/rSvgAARMhUJpx46fw4P/g7I\r\n0Ynkss5hKXUeXnaUISLFyNebIf/u6oqXZEZbGWQlRw/EDm4bT8uL1c3l27mu\r\n9BBl2P5Qalo1IfBUDCpdALfZegFd+TjUhn1iCjT+1V6Sf8Hmskl1gi97lgP9\r\noznGzJA3vi0Ch7Zr6JF4hue8g2rSF52Ze6Vix7Snq3qCWeMH+5sngG433rc/\r\neAmtelOi+J+W51hLfAfDpUkMLf8lHovkP9c=\r\n=I9Yr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.0--canary.692.19429.0_1653000272526_0.49959668277179503"},"_hasShrinkwrap":false},"4.15.0":{"name":"@design-systems/svg-icon-builder","version":"4.15.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.0.1","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"^4.15.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"20031cb5cd2336cc01bcbba8468e49a61e722692","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-ZtSmVI4T1PsFiRJcTNM2r2JUvlY/kRmPqaXlEL74WcXQkXoXRPdE5vuVA+hdXO98GCzZCq3qQ2sCZiYvZMQUWA==","shasum":"a1303b5ac9a9417ac96a96b7a5670452cc6bbcd7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.0.tgz","fileCount":25,"unpackedSize":92811,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPyhTOwG89NBDGUomTxaxVqECQa3pmxsuL5/0V0r5QOwIgFR/OfmTrJ2H0Ur/smPk5Bg3LslWPFfRY/UNwtDeOGkM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiAnLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZSA/9Fso0SjB1+kZ+hujtmQPH+7h7CJmY9n66jxtO20ZguXUH01yi\r\n3APqbstXoUfET1Ii80sM33m/ERb9iAGi0doLfYYdnNdLgD+Pud13cBSV67DE\r\n7TfXchJwnjx1Z6RbjTZnBUE2YDWQo7bnx1Fnl7eWlPhuah1gOpx1p0GSLfYq\r\nzuItBweWkD4NPwm+W6nx0Ek9dN6iwlg9xXyzefli1YdIloRknq4K5AcciUrw\r\nOCPUH14+zOmpeAbMQyceTa+Vd6d9TnMIt+Mgx/t+qL6viunk1OK5luz3+Kwl\r\n0PvmH/nFF9MHVejo9pNoGvQ5KLdxIdzk7fTR7dett6Q9KFMtcknlZOkxxTNU\r\n1p29oe6TY48q+xWhYB/izC8aQbYvckCpnXMlC3PKoeLCVHxGkGEiifYHt9WB\r\nS4G4Iaq2+WSM65DoFEaV/nVROA5prZGMfHvZrCHpHEK8GTV3jzMo25j3/RAi\r\neLR0yLeYBMqfFBooBjz7NC2LOy5SdI+T3VyAOYNlflwhrgHuB3FZu3MOGK7z\r\ntyS5k7bEN7Ln4pgqSGze14XT22i22B4wGc53xw74xsqOEpHeAztDik1WevCG\r\nrkUxs75rlifL9h1WtGSlydSJoERJaVoObQ6HOalu70tdR1IK3zxVLYy4cmSm\r\nwboIT8TNT4ZfiT7QGUc2PzxIuKYPV5MLhPw=\r\n=/nKj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.0_1653082571705_0.8069656407910311"},"_hasShrinkwrap":false},"4.15.1--canary.698.19658.0":{"name":"@design-systems/svg-icon-builder","version":"4.15.1--canary.698.19658.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"4.15.1--canary.698.19658.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c17d17966bcf5ef97cab8147a5a7abdaea4cfaf6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.1--canary.698.19658.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-plh4tOVRtc61CaZWlhiVS5qcGxFo+p2llZw9pg1x7zVnhiduqCT4iRd32+u+4D+og6zotkjiIO7ByZeQ0q9+Kg==","shasum":"ad997566569633bdb127dc0ac44af80e2af85618","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.1--canary.698.19658.0.tgz","fileCount":25,"unpackedSize":92850,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTRCJtXZ7Bvd7YsbgpRjNieMnPexueML/xzbyKrO+kugIhAKuBsCLew9YyRNV2DbViHflkmQ++wbfxTAHyZXFK8K3S"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii9iLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWTg/+IWHRwOWwolAbbrOw6J3+aLR87yG4BCFH8O1RZ+T5CFO2u7sG\r\nT6sCOhuddxo/TyGzuHPsQi0N3R7SO2nWP4aQOu1KzOX51S6/9aL6A6AbaieT\r\nQ5wmOURyapPrawyy/R5IJTuPUdLaLDDKhfiTUtn8XZeXqWmPGgIQ5zQx5h8J\r\nyy4yCEP1rWreSMuQuRvtHSewPcPW+JE2MspFScCwjuiouXqlc32aD5jO8Cgw\r\ngVf3P54AhU3IWatWsivnmDxCszk29ri+dDbPWnE7LiZagiEGQp+/MbVWqDFp\r\nmfjgbuhN/D03TaW0V1xeYRZ2JsLzDo0sHr/sQ3MP3Yylo4WKdQpTjriZtW56\r\ngmzuLmqnVViI1/B+7DLmcy1Osh+N9i1W4zOP12454za5zcpwI8p32JYuuh46\r\n7IpsguLS56M9r0LRaEAH4vFBBWinsihk0nAK0AmyQ4xRRgh+cZCZ1JaZ10yr\r\nihzEkYWTIt7ASvxeEgjMK3nrlzwDTv7pV6Qw3PrfRrC6DBsQyjQziJTR5Tkb\r\nCco8+sDoiL0f2TfKs1A01lLmldiuuBpSA17viEEhIXJCinFhSypkkIWmWQ0L\r\noY4W+hDvjMajmmTkGgFja8mNJbZHN+MOTmIeIvy/jy/SdPt4SpAeNWV9LDWb\r\nVwCPcYtp1ZQLO7E2DJ4XP+PW/vls7iFJZlk=\r\n=it4+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.1--canary.698.19658.0_1653332107250_0.2478603193214477"},"_hasShrinkwrap":false},"4.16.0--canary.698.19664.0":{"name":"@design-systems/svg-icon-builder","version":"4.16.0--canary.698.19664.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"4.16.0--canary.698.19664.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"c17d17966bcf5ef97cab8147a5a7abdaea4cfaf6","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.16.0--canary.698.19664.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-+XlSUicjVDAllM8YI5WRQouT+nHIc4VTikdufJRjRq/gPYnbE5QQpwIlTVTVxZncQO+D+f4I4pCWc70AgfiNcw==","shasum":"fdce1e3608a13f08b3557d0f1ceadb40ede8d974","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.16.0--canary.698.19664.0.tgz","fileCount":25,"unpackedSize":92850,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhoBGp0k57ah4gOvwwGdqt7l7C9NdL+mniqpKz9wwKKAiEAsyLPtlj22EbiLqilf8CrI+7tHY+wRveqzcvaHo094XE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii9u7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+FhAAn4ME96DijYkuvgU58Wq6PTl09rM8k/ZQmpmL/3+rQYB6yWOk\r\n1JXyGxyShuqYFkyKqU4jycehdocHTuu+oIqxCbtCLm5oakOpN4pfi/93sG9j\r\nuJlOnv982DpbwzNRWdSuFQw810W2R6TRo5gZrrZcyaWT20KoSlkkGToGKIDJ\r\nkq75wvyfXTnvArm99uS0Lk2JABw5NZg7zohdD6aHu/Cg/iof0Cyd3qo8m7rD\r\n0smalxO/OP2GWMFQTa3kJqGKwqOTpC8ah8hj+zguFiIKQr6cN5dF1hXr4XfK\r\nT7zg/QXWumAo58s3h+MoJKntKL8EKIbV3fjBtNecYT6QNo5acDPQDnQbzlRA\r\n0I+geFvj8nDqvp4Bsp4mSF1ahtrPFJVhERB5hrpYmTkaaFb0UV9VGzLVABNO\r\nMS6rVS5xYhBhrGCw8U0vJJsuacrge1fXE4SnYoyOlVhDNIU0FY0KtP8hsxQF\r\nHwbmBuG3iroeJMUpsBWuIBPRVhVWa3OagOVzOOaHDgsjEmZRH/rH8tiJDjt9\r\nLJ/6FMfTNeAi0UhjzcTatUR/r8oQk7+ynCKvWk3e3eTvMClx1wI2ojGTNRNX\r\nqaGtoQ0tCkjwk96Klud8f7BDFHwo82RYPa2o4BqXcotJtBi0sXSUWx8d+47I\r\n1EORkvVmrRgvgK3EWxM4tNsLvn67chWU9Zs=\r\n=/oC9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.16.0--canary.698.19664.0_1653332923220_0.690454082213614"},"_hasShrinkwrap":false},"4.15.1--canary.699.19704.0":{"name":"@design-systems/svg-icon-builder","version":"4.15.1--canary.699.19704.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"4.15.1--canary.699.19704.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"a124f977a9769e1b75605cc9ba9c4db7ac4db909","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.1--canary.699.19704.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-oNuPRANtJfFlecJ7xRSwMqBgopCt8iwT9dmzl8U380FTOiKwPKySG79RbOAHQrs727dDa2muwVHZf+wJRaJUwg==","shasum":"af1627ccc9d91f9d0227e279403ebaa5e6fe9b4b","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.1--canary.699.19704.0.tgz","fileCount":25,"unpackedSize":92850,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFaIcjbJ7VUBctWxvk8ygru49vxnteK+OAwJwv5m2o5yAiEAwh+pUqbdFqBKiquxqeQaz6IOuLXZCo/guQcbOLhHKOA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilmoPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprURAAnjMDBFarE3C5ERQqhe8lV1+D4dbbrv8qUHIx394bhAGr8uVR\r\nh8isS2thvyp7OO4ZByMnGOJcwNfVGTAqDMWcGAgBVqE9WZpijpNpo1qnO2Ct\r\nmH973IxS4nx9BjJO8vpb3kRQPLS7k59Wmio+FO9sbUy8vNDvKi1X9QvRidoq\r\nu1J0ezglMNv8jC71un+4Us66yvaAcogar46JHfwY6aDZePJGz7heMQWPnnzO\r\nwdAmXe/2mpHc5iIQJL5DcE/Htlljh9ATIwtnL3aCGX77T7bjt4kKg5K9pLzw\r\nSD2UCSeBJJmzvQIAgwzs9k2a+68uiWAF8hcBTKR2WOO99fUtiSmL9DUJqNQj\r\noENROMAuUYxCsaontb2MCRkiFRWiCegoCnIbOYl9YqW1rWmjzPZ0ZT3AU5KP\r\nGduxFTmGVOWrMTRmBpNEBq33gtxyVfT8FvPFUVoPSN5CR+F513OZvEvKJ2tP\r\n9E+nTDvVQZjn7srhmhXDEpkR0Ng9T00f+gD32so0QT81xySlsHImUH9Koxr2\r\nSzoGAh/nMlcAm3775wWSEJAvcpldPxaqsm+OsL5OOMTzpS9iMmAWoWnlqZQ8\r\nlXAVH+EcASqJliROkFs4/JEkUdfpanEuc2mJJEbZbLPIuSE+BxVa3seHkKks\r\nE2yxI7ChslbMZuTZ8l9o+wezUES5T6JmZPE=\r\n=kmaG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.1--canary.699.19704.0_1654024719346_0.15459003663826865"},"_hasShrinkwrap":false},"4.15.1":{"name":"@design-systems/svg-icon-builder","version":"4.15.1","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"^4.15.1","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"66452d04362b33c108d845f71c0130bcf823d7b5","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.1","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-SuyMgQyghimp2AfwnTZcSUwdo3PU97Jca5Jww5sOYPc2uKk+tvpTG2iY5OxnhKix2qx8IPwL0zgBv6eptIiXuw==","shasum":"de6ad7fb9b5fb5b9d8a3a7e118fc156f0740af03","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.1.tgz","fileCount":25,"unpackedSize":93521,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1mN4RfnYcvpIZVOSYiEu/Qew+d+kKCT6d8EmN6MEQHQIhAKkmyDk+d/qtr1qMFlG82cyUSWk9CXYWPECnfLDoUf8J"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilob7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi1g/7BCXb460UKHhFtXWuFvp2z3zSU2RJGLUL/ThId6QYLcctTBN/\r\nADzeOu0SML0VRS6qFbfd89+uNVik0HZWKBzLtdyV3mcEWQs2Vax3YOu0mU0E\r\nVjRlxK1TNc6q0eomzAKhcBTzqZ7WxHhNHrv8NPbu3Dg8fM481x6GIGFoiaxY\r\n17H1ym9MFcRlsTMh8P0TG+jPhIb7kbR5XACYKeTLAkR/rgrIteF8d76K7d+l\r\npGWoKSD3hAEy+V5AKUzZ4VBxCD82x3czdRooJgKCwCZV5VoHf3i+vpgHJU4n\r\ntvOGJrLXj9s3lp4zvXNLeq+oipZtJDT9HYNok+vio1H+1bmDeGBa3rWK8nTX\r\nRlZXkJ7c/13hWgvZ+rL8bepPBNV3bG96kXjjXBeEyGuNjyZbyY6M3wiiQspJ\r\nuJp3C20CpFGn9rb42x1ImHOr3ceqZCmc85MoWCVfl639aBAro+HklI/VgOuE\r\nRfz9U1uXxgARMrdYbp4RWgZ/kuJfSWJSGFrXYunhKBGiXotPTa4TDL46WOLq\r\nF6KpJ04D5LG4/fqP6fk3KDIneGBooXSPC0m9IyFbyLEUOQI70KJl1wMFMtUv\r\nilIaL7PhXg51FGBj5sR28bpXjyvh1V9bwDpBacp41h72KA98d3cxs+HM9avy\r\ns829gnuYWNFLlW7BXyRrqqLNocsYA1kIXf8=\r\n=q5H7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.1_1654032123355_0.1135815596245715"},"_hasShrinkwrap":false},"4.15.2--canary.709.19992.0":{"name":"@design-systems/svg-icon-builder","version":"4.15.2--canary.709.19992.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"4.15.2--canary.709.19992.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"55365428e9856f4d2e12363eb568e80d463afc0a","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.2--canary.709.19992.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Wf4o31Zh/QUWvU5mJ/BWRa/msBj516Jrv/HohCTACVaoxFHxc+4HjOFCT5O/thYs0IVCErJaCA57FP6xeZzQrA==","shasum":"659881939bc45ebc057854f2c72626d5422126d7","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.2--canary.709.19992.0.tgz","fileCount":25,"unpackedSize":93560,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFapSqwB5/ECGJaiYwB1sSEnTw1G13ZqF+L2Gk6P4GBQIhAJnDSQrkrJ2hLmzTI+T2POW3kd3CJtuIZa2vb5a+R7PG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqjEyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBeg//TjAbHA7sLUHWKAFIQMBJOOMqVp638fCJj0GJrj0E+W/ru/BG\r\njLcnFnEl5yyJbq//TLEHMesxNCkeZ4S24zsDmvFmqTxdmPlAR8DG0bxT4A+3\r\nWXlyMoYqUP8IOfiPeyZam18rrQ6A48wODlAwcjY8U9PVCiscMb0UGnnQe4mh\r\nWinebKEOcf0i/bseswnwJ21rJSy7Sqnumw6BEmkHv6iNwt7XUp6t8V9+U6ya\r\nkr1IDww5soSepXxiDl10vCLB4Z55XkRQ83K5OjKs1WJBc7fGzQmjIeyT6S4O\r\nLv23JcLZCAhynmKjBCEenjvoZvY6xK12U1+zwl4nrg0RojYx/o34gh2Fn2aM\r\nd4fvT8K1q5AZlfOyED2iKqgKk2jnHDX/oTTJmYdeLXG//vkqNx3FG99FB/Ua\r\njjhPfhZ6hhIKSa0rr4eeK8d/h2jDY0SpRNBbDvrTx2h0atLRismaUGZA6RnK\r\nDpivc99zDiX+j7Gp+Trv9NLrgC+6gD0o97clASYIhuGdXjp+O7IpVsGuKdqb\r\n458ggZj7PahSftvJA5pb5Ov8P+mBIISVy7qvSLE1DKZhtJQqV6HqW1okGyFn\r\n7JtW3iwz5Zoc5+stQ0KXqZUgXYuALFiF5BNDySkymi9NPaEK4gkXIKfxplSM\r\nE0r8EGSPeEEBBWHMqlrS1S/+Dov1lKQkblI=\r\n=2k2R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.2--canary.709.19992.0_1672098098100_0.9721785921900834"},"_hasShrinkwrap":false},"4.15.2":{"name":"@design-systems/svg-icon-builder","version":"4.15.2","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"^4.15.2","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"0c4c55096c3104a6c90036cba1632e0a81e68e67","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.2","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-wDll0+NrFrs1c24xoFlEV5Ij+OSu7UMHZBABxLnM8nRiaDGtl25WvkzBNkcHBkFdZs07S58o7VHZkqrZo4VH7g==","shasum":"49cf16393ecd6daa4b6ee1079017f35c6bc35404","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.2.tgz","fileCount":25,"unpackedSize":93521,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXEGlwDrhRJeic7nL2cD5U1UdM8pWXeO72pOPlaGf/qQIgd3vxzUeFF3mX5tKeNRDmLCvflNI3/+KeQnljFz4CMAQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqjRmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxjQ/+LoQD8QD7NXKvcnHlRS9CLieIA9cuQHFEuifUL0rH9Z+pzIvv\r\nInn2f3xvr7nueOiKt31P2ro5OJZRz4zQzY4Q73Acte9F6d+GrpMpe8iTScSp\r\nnqkwCDO7R+w7EvqBXoXi6+pqaQ/1JUU4o3dMv0PDN7L3uZ9038+80utgptCE\r\nxL/qfMH3cQT/M4TNrly7hqggYgb8u7r6x5bGj622QO44S+5iRTkzOvPsPrC0\r\n833eedzZevefwpDUoUClYJJk+LuhLFH9CUyeAmLNnmvVKgkWhf5huOV8prCl\r\nqi2fK6q617gFh4nq6cHUdTS3hhpdqUbgZtI2RDA7oELyS+OQXtK8aPkpXlWJ\r\nJCPuK++hGiLMAOlAvlqzCg+v+0xWekI7Js5KlOJCLdGVKQT5Q5Owrwz/HvyV\r\nPNnUtm/ZQlu4vidlXNkCd3A/LM66Fr58DJhqj649anINmnEZc424d/07X5nX\r\nauoiWcSSY5KCm/TKjWg6Qm9vsDC2r6CMKJjZFhxrZVp/ttB1RRN7Qyfp7KM9\r\npGeMA2Yai9fZdXHSlVWkhFMKgSxxIWR/DNcotq9U2/66vR58Mfcck+hMx5Rj\r\nYwpSV+uxugLEIw5wTEsclZ2Upb0toHT8+K1J2mIh6hAU6lFUoIxdIRB1liVj\r\niqoNZG7mYyYMZfTxM0a1nPT4vP/ApgjUAtM=\r\n=C0an\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.2_1672098918050_0.8983277806392092"},"_hasShrinkwrap":false},"4.15.3--canary.722.20472.0":{"name":"@design-systems/svg-icon-builder","version":"4.15.3--canary.722.20472.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"4.15.3--canary.722.20472.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"ded3829fbcd8c6860ad7e46b80fd5e7d43943055","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.3--canary.722.20472.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-Ds2gEPUgzPTsQj5seehQA6oZBwWGrl0pc5imtsNEdQQF4Ajp3is4gwpJhiBZikDDf54BcvoLAjktE+Vyt9cy+w==","shasum":"f73f03d29ba5cb9732859fec1078f330e76a72a2","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.3--canary.722.20472.0.tgz","fileCount":25,"unpackedSize":93560,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEshyxNsqmC977ln43ZPQsKe0dB/5+SASUE9x7DSluCXAiEAvPZae7aofPs1MrtQsPZE+sftsIJmtwLys2jbUbAh2Mo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.3--canary.722.20472.0_1692026655689_0.3624690538374227"},"_hasShrinkwrap":false},"4.15.3":{"name":"@design-systems/svg-icon-builder","version":"4.15.3","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"^4.15.3","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"f377c5862054fec50a3e9e68f11e81c719e97bd1","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.3","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-JOLkI+VgVSWR/rbBRH2C48cOpUmaBsmdUUATfwd6m6NXir/gQ4hWEvTm+8DLMTzGRbT/uyHt7XSr6ZTkgIMEUQ==","shasum":"9d16358914c9bd419f9ee612655d8d9e5a3d1791","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.3.tgz","fileCount":25,"unpackedSize":93521,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcD3AMDwiOLl3n1UZ2+uKUeVjWPWl3wD4jqf4qRWPyyAiEA8SujF6nphe9A7VU4v6VTMa7ahJQ4Jg9a50mkyBpblaA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.3_1692322566288_0.8954107510207261"},"_hasShrinkwrap":false},"4.15.4":{"name":"@design-systems/svg-icon-builder","version":"4.15.4","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"^4.15.4","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"6acc83e4dc7e80caa41a04ffd47401631f815873","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.15.4","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-XuGjZREAX15/tJGdnLTOsKa1zv0MTVnkZbk9zVYHiPoY6eZAdIWYOpvqHNLHGCIavwxsdG9mai1KdQz8XDR3HA==","shasum":"19a068dafc02bdfbd46d61061e7786398c1f7d54","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.15.4.tgz","fileCount":25,"unpackedSize":93521,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDs6dky92xLLGpm4VazUKaq9+QKkkzm0+wSsOjexHTtDAiEAkaWVKAYq21uOzpfpQnbyxvaucsovO2Qon/MmeKPQKgE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.15.4_1692826320762_0.6920949748912306"},"_hasShrinkwrap":false},"5.0.0--canary.729.20714.0":{"name":"@design-systems/svg-icon-builder","version":"5.0.0--canary.729.20714.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"5.0.0--canary.729.20714.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"11e7c5d8d15ea6903b95e485b94887c2c53b35ad","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@5.0.0--canary.729.20714.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-hiYTCcmAk7BKcwmiyHESUqLx5EhrMHvdO2O30qXawpcMGN/EIJuEjCkHAiB5QwOGsWRtmBKsbMBELyXm7RxCJw==","shasum":"4f5fe25fdf49a0d632aed565ab2588d18e9a44c4","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-5.0.0--canary.729.20714.0.tgz","fileCount":25,"unpackedSize":93558,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5vd9cDt9LzTmJUfCtofZ/+tR9JhRV2vT4ojf6/y+VnAiALDNdF4hU/KfUT9UEutYsKOwJIFwAu4wPVpLruh6beJg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_5.0.0--canary.729.20714.0_1696439586264_0.20587044713477098"},"_hasShrinkwrap":false},"4.16.0--canary.730.20720.0":{"name":"@design-systems/svg-icon-builder","version":"4.16.0--canary.730.20720.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"4.16.0--canary.730.20720.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"e92f9a180f58df5b0238954ad395f0d29775e307","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.16.0--canary.730.20720.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-NWA6R3ry0OpEUgFCnfZE3FXquRCTV1QgYQ1E+Cr2pxsubyMgNbIkUxRBqQ9ZFwx8yBBnCmHZM+1gMuG8r0Njgw==","shasum":"3d393214bcf16df9a9bce70569bac1868cd344c6","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.16.0--canary.730.20720.0.tgz","fileCount":25,"unpackedSize":93560,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBmtUE53+EEeaocxtHZDKq4ynfweQTBIRI87peyDgPegAiEAoOqW3Rd+ZHTMnRyzQhPVbc0GUgYJhkeSW4qWSynw/Qc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.16.0--canary.730.20720.0_1696452806716_0.5384671042623432"},"_hasShrinkwrap":false},"4.16.0-next.0":{"name":"@design-systems/svg-icon-builder","version":"4.16.0-next.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"4.16.0-next.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"9cc5664fa724620e5d4514bb964cf34429ceccee","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@4.16.0-next.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-qwon+Yaua6YWdC6Sx5EgI5KCtfZVtkzIR//iJC0o4NnFhaJci9yD/+sYL0YHgbPlwTUyg2jqYukPAXat+ZYLQw==","shasum":"68a0561ac5b31c1f3425a634f795f91a5e2b61a9","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-4.16.0-next.0.tgz","fileCount":25,"unpackedSize":93534,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUKDDwgZm93lgaqg+HRVEyoNP801zeaXGCgDjkDDWlKAiAhwsdbkc3FHUuo9Cgp7sYmBD2dZ6nXllSKG/s13nE1sw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_4.16.0-next.0_1696457883188_0.2098051189504364"},"_hasShrinkwrap":false},"5.0.0--canary.729.20732.0":{"name":"@design-systems/svg-icon-builder","version":"5.0.0--canary.729.20732.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"5.0.0--canary.729.20732.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"11e7c5d8d15ea6903b95e485b94887c2c53b35ad","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@5.0.0--canary.729.20732.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-K0qZzFneT7+tOi1maDZNFjXBkn5Z4V4V8jwNXgTJA/vuUzJxnhq/aQE2/LhY+HiVbwZf77cBy/EiA7yG485HxQ==","shasum":"c5a3c1525952908d6f7adc41abce607ac939de9e","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-5.0.0--canary.729.20732.0.tgz","fileCount":25,"unpackedSize":93558,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCb20MRQs6PvdLnwq5cfmsX+oZYk71sx7K5/ajJ4pUUygIgBu3aL9ZAKqM0263IgA6b2fP02qwBbb/Vv0u/BYPLZyU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_5.0.0--canary.729.20732.0_1696459932352_0.8916449009511651"},"_hasShrinkwrap":false},"5.0.0--canary.729.20738.0":{"name":"@design-systems/svg-icon-builder","version":"5.0.0--canary.729.20738.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"5.0.0--canary.729.20738.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"b1ef38af6d51b67f25c54a41cabee215de144930","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@5.0.0--canary.729.20738.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-i60eVEZk0L67/UBFQAcnfgAyDkBGPHJiOWY3kjlv9dayUuYwgOQsVKsBOQPreQ5RjRcBcGH0oh+nr5WRVqUWrg==","shasum":"8bb3b827f1fc170de732cab1274f1b2d22bb0772","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-5.0.0--canary.729.20738.0.tgz","fileCount":25,"unpackedSize":93558,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI3kxbY5lLVjlP3XWZE2w/dEdq6yTyrjrbroz2N05PiAIgeGl9P+NRNYwDm4IBoy1K9RFzQOh9GLSW3Xz5bdRsg3I="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_5.0.0--canary.729.20738.0_1696466489146_0.8715729756701611"},"_hasShrinkwrap":false},"5.0.0-next.0":{"name":"@design-systems/svg-icon-builder","version":"5.0.0-next.0","main":"./dist/cjs/index.js","description":"A simple CLI for generating icon components from SVGs.","bin":{"icon-build":"bin/icon.js"},"types":"./dist","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"clean":"ds clean","build":"ds build","start":"ds build --watch","test":"yarn build && ./bin/icon.js --svg ./svg --out output --overwrite","test:colored":"yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite","help":"./bin/icon.js -h","lint":"ds lint"},"dependencies":{"change-case":"3.1.0","command-line-application":"0.10.1","endent":"2.1.0","fs-extra":"9.0.1","maxstache":"1.0.7","signale":"1.4.0","svgo":"1.3.2"},"devDependencies":{"@auto-it/jira":"10.36.5","@auto-it/slack":"10.36.5","@design-systems/cli":"5.0.0-next.0","@types/change-case":"2.3.1","@types/fs-extra":"9.0.1","@types/signale":"1.4.1","@types/svgo":"1.3.3"},"gitHead":"3208b983f34ff9d658aeadb1719746922d151b0f","readme":"# @design-systems/svg-icon-builder\n\nA simple script for converting SVG files into icon React components.\n\n## Installation\n\n```sh\nnpm i @design-systems/svg-icon-builder\n# or with yarn\nyarn add @design-systems/svg-icon-builder\n```\n\n## Usage\n\n```bash\n\n ➜ icon-build help\n\ncli\n\n Convert a directory of SVG files to wrapped React Components.\n\nOptions\n\n --svg string [required] The path to the directory of .svg files to convert.\n --template string The path to the template where the SVG will be added.\n --out string [required] The directory to put the results in.\n --overwrite Overwrite output files that already exist.\n --no-mapping Whether to disable the mapping file.\n --no-strip-color Whether to disable removing color from the SVGs. Default: false\n --name-suffix string The suffix to put after the name of a generated icon. Default: 'Icon'\n -h, --help Display the help output\n\nExamples\n\n icon-build --svg ./svg --template ./templates/icon.template\n\n```\n\n## Example\n\nYou can see how the program works by running the testing script `yarn test`.\n\nThe `svg` folder is read, processed, and then placed in the `output` directory with the following structure.\n\n```\noutput/\n ExampleIcon.tsx <- Each icon gets its own component file.\n exports.ts <- A generated file that lets you easily export every icon.\n mappings.ts <- A file that maps all the icons to a single icon API with types.\n```\n\n## What it Does\n\nThis package is in many regards an alternate version of the great [SVGR](https://github.com/smooth-code/svgr) package but made specifically for icons. The basic things it does:\n\n- Reads SVG files from a directory.\n- Runs them through a custom SVGO config to minifies and optimizing for adding icon styles. SVGO is run multiple times to remove nested groups, similar to SVGO `multipass`.\n- Converts SVG fields to camelCase for JSX.\n- Removes existing colors if necessary to make the icon easier to style.\n- Removes the `` tag to allow us to add props in our template.\n- Injects the SVG and all necessary variables into a template.\n- Names the icon and writes the processed template to an output folder.\n- Can output a map of strings to components, to allow for a single-component API.\n- Sets up TypeScript types.\n\nIf you're familiar with SVGR you'll know that it does some similar steps. There are some differences:\n\n- The template syntax is just a simple {{mustache}}-style.\n- All of the file processing logic is more custom to enforce a convention.\n- We can output a component mapping that allows you to easily create an index file, and a single-component API like ``.\n- Ability to remove colors so icon color can be a React property.\n- Improved TypeScript support.\n\n### Template Variables\n\nYou can see an example template in `/src/icon.template`. The basic variables available to the template are:\n\n- `iconName`: The icon name (AchievementIcon).\n- `titleCase`: Icon title with spaces (Achievement Icon).\n- `viewBox`: The viewBox attribute, which is needed to get nice resizing.\n- `svg`: All of the SVG inside the svg tag.\n- `fill`: The fill attribute from the SVG, if a top level fill is needed.\n\nThe default template uses TypeScript and makes some assumptions about your project structure, so you'll probably want to copy and modify it.\n\n### Known Issues\n\n- Masking - Sometimes the `mask` property doesn't convert properly.\n\n- JSX Conversion - Occasionally we encounter properties that aren't camelCased.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"homepage":"https://github.com/intuit/design-systems-cli#readme","_id":"@design-systems/svg-icon-builder@5.0.0-next.0","_nodeVersion":"16.5.0","_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (linux)","dist":{"integrity":"sha512-AIbuzBi7ZBDR7lyjKuElpmZbI4jF8ZVEoIO/gitNXzFiDo2D/rkgUWXfBFDwmMOzyw70DK22YOweHDFCAb1nqQ==","shasum":"52a81489e213617834946d31648799b20b064a0c","tarball":"https://registry.npmjs.org/@design-systems/svg-icon-builder/-/svg-icon-builder-5.0.0-next.0.tgz","fileCount":25,"unpackedSize":93532,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyJhV3Vq2eCYI1KMhhtcOU5/uX9WZaK1QLoFHLbYr75wIgV9j34b9lVIFX8IwWf60CR4VSkafDKeONAtuDVYthLik="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg-icon-builder_5.0.0-next.0_1696522693743_0.18908226656329363"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-14T20:17:28.444Z","2.11.1-canary.614.14146.0":"2021-01-14T20:17:28.779Z","modified":"2023-10-05T16:18:14.131Z","2.11.1-canary.614.14152.0":"2021-01-14T21:28:41.847Z","2.12.0":"2021-01-14T22:50:22.511Z","2.12.1-canary.562.14178.0":"2021-01-14T22:55:13.723Z","2.12.1-canary.474.14185.0":"2021-01-14T23:02:19.912Z","2.12.1-canary.484.14191.0":"2021-01-14T23:23:36.644Z","2.12.1-canary.568.14288.0":"2021-01-15T02:19:41.329Z","2.12.1-canary.565.14298.0":"2021-01-15T02:27:11.775Z","2.12.1-canary.587.14303.0":"2021-01-15T02:33:58.479Z","2.12.1-canary.475.14302.0":"2021-01-15T02:34:17.308Z","2.12.1-canary.542.14305.0":"2021-01-15T02:35:34.198Z","2.12.1-canary.543.14304.0":"2021-01-15T02:35:42.415Z","2.12.1-canary.606.14307.0":"2021-01-15T02:36:57.464Z","2.12.1-canary.477.14306.0":"2021-01-15T02:37:45.394Z","2.12.1-canary.527.14309.0":"2021-01-15T02:39:46.723Z","2.12.1-canary.481.14308.0":"2021-01-15T02:41:42.436Z","2.12.1-canary.508.14311.0":"2021-01-15T02:42:25.008Z","2.12.1-canary.605.14312.0":"2021-01-15T02:43:08.656Z","2.12.1-canary.574.14313.0":"2021-01-15T02:45:59.458Z","2.12.1-canary.575.14315.0":"2021-01-15T02:47:37.992Z","2.12.1-canary.488.14314.0":"2021-01-15T02:47:52.545Z","2.12.1-canary.607.14316.0":"2021-01-15T02:48:13.866Z","2.12.1-canary.559.14317.0":"2021-01-15T02:48:41.201Z","2.12.1-canary.586.14318.0":"2021-01-15T02:53:15.056Z","2.12.1-canary.565.14324.0":"2021-01-15T15:43:30.385Z","2.12.1-canary.574.14337.0":"2021-01-16T00:47:42.431Z","2.12.1-canary.484.14343.0":"2021-01-16T20:47:46.058Z","2.12.1-canary.615.14349.0":"2021-01-17T10:42:02.726Z","2.12.1-canary.587.14375.0":"2021-01-19T08:11:57.693Z","2.12.1-canary.559.14381.0":"2021-01-19T13:03:35.770Z","2.12.1-canary.562.14389.0":"2021-01-19T19:14:19.848Z","2.12.1-canary.488.14400.0":"2021-01-19T20:19:17.511Z","2.12.1-canary.484.14401.0":"2021-01-19T20:27:38.741Z","2.12.1-canary.474.14409.0":"2021-01-20T01:00:02.271Z","2.12.1-canary.611.14413.0":"2021-01-20T01:03:40.061Z","2.12.1-canary.484.14419.0":"2021-01-20T02:18:28.636Z","2.12.1-canary.611.14430.0":"2021-01-20T22:54:13.188Z","2.12.1-canary.611.14436.0":"2021-01-21T04:48:25.433Z","2.12.1-canary.586.14442.0":"2021-01-21T10:48:08.737Z","2.12.1-canary.484.14448.0":"2021-01-21T22:40:33.033Z","2.12.1-canary.484.14454.0":"2021-01-21T23:53:06.907Z","2.12.1-canary.475.14460.0":"2021-01-22T09:38:03.425Z","2.12.1-canary.601.14470.0":"2021-01-22T15:38:08.619Z","2.12.1-canary.481.14491.0":"2021-01-24T02:15:47.649Z","2.12.1-canary.484.14519.0":"2021-01-25T18:14:43.334Z","2.12.1-canary.484.14535.0":"2021-01-25T21:11:29.316Z","2.12.1-canary.475.14536.0":"2021-01-25T21:12:09.140Z","2.12.1-canary.484.14542.0":"2021-01-25T22:11:49.622Z","2.12.1-canary.578.14548.0":"2021-01-25T22:43:11.306Z","2.12.1-canary.527.14554.0":"2021-01-26T15:12:24.380Z","2.12.1-canary.553.14567.0":"2021-01-28T12:27:06.445Z","2.12.1-canary.484.14573.0":"2021-01-28T18:20:52.838Z","2.12.1-canary.616.14579.0":"2021-01-29T12:53:04.150Z","2.12.1-canary.616.14585.0":"2021-01-29T17:32:40.054Z","2.12.1-canary.484.14613.0":"2021-02-01T21:55:14.427Z","2.12.1-canary.601.14619.0":"2021-02-02T02:47:36.669Z","2.12.1-canary.601.14625.0":"2021-02-02T04:21:08.064Z","2.12.1-canary.572.14631.0":"2021-02-02T10:27:35.226Z","2.12.1-canary.572.14642.0":"2021-02-02T18:11:17.339Z","2.12.1-canary.559.14643.0":"2021-02-02T18:11:54.482Z","2.12.1-canary.475.14653.0":"2021-02-03T04:22:00.636Z","2.12.1-canary.527.14661.0":"2021-02-03T20:24:37.641Z","2.12.1-canary.474.14672.0":"2021-02-03T23:21:38.631Z","2.12.1-canary.484.14673.0":"2021-02-03T23:22:15.299Z","2.12.1-canary.474.14679.0":"2021-02-04T01:02:19.235Z","2.12.1-canary.484.14685.0":"2021-02-04T02:28:51.075Z","2.12.1-canary.474.14691.0":"2021-02-04T09:49:18.301Z","2.12.1-canary.601.14699.0":"2021-02-04T16:47:44.240Z","2.12.1-canary.508.14705.0":"2021-02-04T21:51:11.847Z","2.12.1-canary.484.14713.0":"2021-02-04T22:21:06.550Z","2.12.1-canary.484.14719.0":"2021-02-05T00:01:32.485Z","2.12.1-canary.575.14725.0":"2021-02-05T17:50:41.978Z","2.12.1-canary.617.14744.0":"2021-02-07T23:23:16.662Z","2.12.1-canary.553.14750.0":"2021-02-08T12:36:04.039Z","2.12.1-canary.508.14762.0":"2021-02-08T18:42:52.510Z","2.12.1-canary.618.14768.0":"2021-02-08T21:10:59.701Z","2.12.1-canary.619.14774.0":"2021-02-08T23:51:12.324Z","2.12.1":"2021-02-09T19:41:05.331Z","2.12.2-canary.620.14790.0":"2021-02-09T20:35:03.892Z","2.12.2-canary.475.14800.0":"2021-02-09T22:25:20.343Z","2.12.2-canary.607.14811.0":"2021-02-10T17:57:03.740Z","2.12.2-canary.508.14812.0":"2021-02-10T17:58:51.799Z","2.12.2":"2021-02-10T20:53:05.959Z","2.12.3-canary.475.14828.0":"2021-02-10T23:55:58.865Z","2.12.3-canary.484.14849.0":"2021-02-11T20:37:25.991Z","2.12.3-canary.474.14855.0":"2021-02-11T21:37:11.263Z","2.12.3-canary.484.14868.0":"2021-02-11T23:49:02.452Z","2.12.3-canary.484.14874.0":"2021-02-12T03:37:23.541Z","2.12.3-canary.474.14885.0":"2021-02-12T10:46:14.062Z","2.12.3-canary.529.14891.0":"2021-02-12T18:09:55.144Z","2.12.3-canary.596.14897.0":"2021-02-12T19:39:23.922Z","2.12.3-canary.475.14908.0":"2021-02-13T07:40:27.308Z","2.12.3-canary.601.14914.0":"2021-02-14T18:43:51.012Z","2.12.3-canary.474.14920.0":"2021-02-14T20:23:05.832Z","2.12.3-canary.475.14926.0":"2021-02-14T23:02:50.855Z","2.12.3-canary.553.14944.0":"2021-02-15T15:58:45.580Z","2.12.3-canary.529.14945.0":"2021-02-15T16:02:31.044Z","2.12.3-canary.621.14971.0":"2021-02-17T17:37:42.636Z","2.12.3-canary.622.14977.0":"2021-02-17T19:54:48.188Z","2.12.3-canary.621.14995.0":"2021-02-18T15:39:35.733Z","2.12.3-canary.553.14996.0":"2021-02-18T15:39:46.677Z","2.12.3-canary.616.14997.0":"2021-02-18T15:41:33.595Z","2.12.3-canary.587.15017.0":"2021-02-18T19:43:23.919Z","2.12.3-canary.578.15018.0":"2021-02-18T19:43:32.765Z","2.12.3-canary.484.15019.0":"2021-02-18T19:44:12.245Z","2.12.3-canary.474.15025.0":"2021-02-18T23:19:26.874Z","2.12.3-canary.474.15036.0":"2021-02-19T04:38:45.964Z","2.12.3-canary.475.15037.0":"2021-02-19T04:41:15.292Z","2.12.3-canary.621.15048.0":"2021-02-19T10:47:13.164Z","2.12.3-canary.475.15059.0":"2021-02-19T20:58:29.880Z","2.12.3-canary.488.15070.0":"2021-02-20T11:50:18.392Z","2.12.3-canary.621.15081.0":"2021-02-20T16:49:00.714Z","2.12.3-canary.484.15092.0":"2021-02-21T04:08:47.635Z","2.12.3-canary.618.15108.0":"2021-02-21T22:23:53.968Z","2.12.3-canary.618.15129.0":"2021-02-22T18:38:40.811Z","2.12.3-canary.529.15130.0":"2021-02-22T18:45:41.717Z","2.12.3-canary.623.15141.0":"2021-02-22T21:29:57.730Z","2.12.3-canary.475.15151.0":"2021-02-23T01:09:38.282Z","2.12.3-canary.601.15164.0":"2021-02-23T03:44:04.547Z","2.12.3-canary.601.15175.0":"2021-02-23T06:35:02.975Z","2.12.3-canary.475.15188.0":"2021-02-23T12:43:44.788Z","2.12.3-canary.475.15196.0":"2021-02-23T16:43:55.348Z","2.12.3-canary.475.15204.0":"2021-02-23T20:45:55.158Z","2.12.3-canary.621.15219.0":"2021-02-24T00:39:52.924Z","2.12.3-canary.475.15220.0":"2021-02-24T00:43:10.952Z","2.12.3-canary.475.15231.0":"2021-02-24T04:31:02.319Z","2.12.3-canary.601.15237.0":"2021-02-24T05:34:52.976Z","2.12.3-canary.475.15252.0":"2021-02-24T11:47:56.096Z","2.12.3-canary.475.15259.0":"2021-02-24T14:31:15.388Z","2.12.3-canary.475.15281.0":"2021-02-24T18:58:22.351Z","2.12.3-canary.625.15282.0":"2021-02-24T18:58:42.140Z","2.12.3-canary.484.15285.0":"2021-02-24T19:04:35.416Z","2.12.3-canary.626.15292.0":"2021-02-24T19:53:08.349Z","2.12.3-canary.475.15303.0":"2021-02-24T20:44:26.605Z","2.12.3-canary.625.15314.0":"2021-02-24T21:44:32.670Z","2.12.3-canary.610.15326.0":"2021-02-24T22:11:01.718Z","2.12.3-canary.627.15330.0":"2021-02-24T22:18:20.720Z","2.12.3-canary.475.15345.0":"2021-02-25T00:26:45.742Z","2.12.3-canary.475.15351.0":"2021-02-25T02:29:53.296Z","2.12.3-canary.628.15362.0":"2021-02-25T05:32:46.397Z","2.12.3-canary.475.15369.0":"2021-02-25T05:48:33.456Z","2.12.3-canary.628.15374.0":"2021-02-25T06:03:47.207Z","2.12.3-canary.475.15381.0":"2021-02-25T10:51:17.427Z","2.12.3-canary.629.15392.0":"2021-02-25T14:52:34.349Z","2.12.3-canary.628.15398.0":"2021-02-25T16:05:26.773Z","2.12.3-canary.628.15407.0":"2021-02-25T16:42:38.835Z","2.12.3-canary.566.15413.0":"2021-02-25T16:49:18.316Z","2.12.3-canary.628.15418.0":"2021-02-25T17:04:27.697Z","2.12.3-canary.628.15425.0":"2021-02-25T17:35:31.091Z","2.12.3-canary.475.15443.0":"2021-02-25T18:51:03.453Z","2.12.3-canary.553.15448.0":"2021-02-25T18:57:35.335Z","2.12.3-canary.628.15452.0":"2021-02-25T19:02:54.725Z","2.12.3-canary.475.15459.0":"2021-02-25T20:59:37.182Z","2.12.3-canary.630.15470.0":"2021-02-26T00:32:11.781Z","2.12.3-canary.475.15471.0":"2021-02-26T00:34:18.466Z","2.12.3-canary.475.15477.0":"2021-02-26T04:31:31.708Z","2.12.3-canary.475.15490.0":"2021-02-27T03:11:49.921Z","2.12.3-canary.617.15496.0":"2021-02-27T09:11:36.234Z","2.12.3-canary.587.15507.0":"2021-02-28T18:56:27.045Z","2.12.3-canary.618.15513.0":"2021-03-01T03:20:06.186Z","2.12.3-canary.566.15521.0":"2021-03-01T14:41:38.268Z","2.12.3-canary.475.15534.0":"2021-03-01T20:19:42.909Z","2.12.3-canary.621.15547.0":"2021-03-01T23:02:15.599Z","2.12.3-canary.618.15553.0":"2021-03-02T04:20:03.744Z","2.12.3-canary.484.15564.0":"2021-03-02T20:16:51.281Z","2.12.3-canary.631.15565.0":"2021-03-02T20:24:18.016Z","2.12.3-canary.484.15571.0":"2021-03-02T22:03:29.931Z","2.12.3-canary.484.15577.0":"2021-03-02T23:16:33.470Z","2.12.3-canary.484.15583.0":"2021-03-03T02:52:06.540Z","2.12.3-canary.632.15589.0":"2021-03-03T08:38:11.013Z","2.12.3-canary.475.15595.0":"2021-03-03T11:10:51.026Z","2.12.3-canary.601.15601.0":"2021-03-03T12:05:39.208Z","2.12.3-canary.616.15607.0":"2021-03-03T19:05:16.870Z","2.12.3-canary.484.15615.0":"2021-03-03T22:52:44.495Z","2.12.3--canary.484.15621.0":"2021-03-04T00:39:09.982Z","2.12.3-canary.633.15627.0":"2021-03-04T07:43:38.716Z","2.12.3-canary.635.15650.0":"2021-03-04T09:26:20.885Z","2.12.3":"2021-03-04T09:28:43.728Z","2.13.0":"2021-03-04T18:50:49.624Z","2.13.0-canary.636.15665.0":"2021-03-04T18:51:47.714Z","2.13.1-canary.568.15863.0":"2021-03-05T00:25:28.357Z","2.13.1-canary.604.15864.0":"2021-03-05T00:26:05.727Z","2.13.1-canary.473.15940.0":"2021-03-05T01:05:44.598Z","2.13.1-canary.622.15945.0":"2021-03-05T01:08:14.912Z","2.13.1-canary.474.15962.0":"2021-03-05T01:19:34.382Z","2.13.1-canary.589.15963.0":"2021-03-05T01:19:59.379Z","2.13.1-canary.623.15967.0":"2021-03-05T01:22:23.136Z","2.13.1-canary.565.15969.0":"2021-03-05T01:22:34.342Z","2.13.1-canary.595.15968.0":"2021-03-05T01:22:44.983Z","2.13.1-canary.475.15971.0":"2021-03-05T01:23:45.003Z","2.13.1-canary.629.15970.0":"2021-03-05T01:23:52.856Z","2.13.1-canary.543.15972.0":"2021-03-05T01:24:40.916Z","2.13.1-canary.587.15973.0":"2021-03-05T01:25:00.663Z","2.13.1-canary.615.15974.0":"2021-03-05T01:25:30.375Z","2.13.1-canary.632.15975.0":"2021-03-05T01:26:01.457Z","2.13.1-canary.480.15976.0":"2021-03-05T01:27:06.422Z","2.13.1-canary.542.15978.0":"2021-03-05T01:27:55.294Z","2.13.1-canary.578.15979.0":"2021-03-05T01:28:15.861Z","2.13.1-canary.606.15980.0":"2021-03-05T01:28:29.217Z","2.13.1-canary.493.15981.0":"2021-03-05T01:29:30.834Z","2.13.1-canary.508.15983.0":"2021-03-05T01:30:16.386Z","2.13.1-canary.599.15984.0":"2021-03-05T01:30:44.919Z","2.13.1-canary.529.15986.0":"2021-03-05T01:31:07.679Z","2.13.1-canary.550.15988.0":"2021-03-05T01:32:25.535Z","2.13.1-canary.605.15987.0":"2021-03-05T01:32:36.043Z","2.13.1-canary.601.15989.0":"2021-03-05T01:33:01.453Z","2.13.1-canary.488.15990.0":"2021-03-05T01:33:20.443Z","2.13.1--canary.484.15991.0":"2021-03-05T01:33:52.230Z","2.13.1-canary.571.15992.0":"2021-03-05T01:34:45.244Z","2.13.1-canary.572.15993.0":"2021-03-05T01:35:28.533Z","2.13.1-canary.596.15994.0":"2021-03-05T01:35:55.646Z","2.13.1-canary.564.15996.0":"2021-03-05T01:36:58.464Z","2.13.1-canary.566.15997.0":"2021-03-05T01:37:10.343Z","2.13.1-canary.575.15998.0":"2021-03-05T01:37:46.331Z","2.13.1-canary.630.15999.0":"2021-03-05T01:37:56.945Z","2.13.1-canary.617.16000.0":"2021-03-05T01:38:27.423Z","2.13.1-canary.631.16001.0":"2021-03-05T01:39:26.591Z","2.13.1-canary.553.16002.0":"2021-03-05T01:39:35.342Z","2.13.1-canary.576.16004.0":"2021-03-05T01:40:31.601Z","2.13.1-canary.621.16005.0":"2021-03-05T01:41:10.837Z","2.13.1-canary.477.16006.0":"2021-03-05T01:41:43.653Z","2.13.1-canary.559.16007.0":"2021-03-05T01:42:02.280Z","2.13.1-canary.505.16010.0":"2021-03-05T01:43:47.199Z","2.13.1-canary.586.16011.0":"2021-03-05T01:44:13.930Z","2.13.1-canary.544.16012.0":"2021-03-05T01:45:48.341Z","2.13.1-canary.481.16016.0":"2021-03-05T01:51:34.506Z","2.13.1-canary.606.16125.0":"2021-03-05T19:36:31.262Z","2.13.1-canary.582.16147.0":"2021-03-05T20:00:38.134Z","2.13.1-canary.631.16179.0":"2021-03-05T20:22:51.770Z","2.13.1-canary.631.16181.0":"2021-03-05T20:24:09.911Z","2.13.1-canary.507.16213.0":"2021-03-05T20:42:05.247Z","2.14.0":"2021-03-05T20:58:02.869Z","2.14.1-canary.615.16243.0":"2021-03-05T21:14:17.730Z","2.14.1-canary.629.16244.0":"2021-03-05T21:15:09.968Z","2.14.1-canary.568.16291.0":"2021-03-05T21:58:47.906Z","2.14.1-canary.584.16297.0":"2021-03-05T22:01:59.841Z","2.14.1-canary.599.16300.0":"2021-03-05T22:02:53.599Z","2.14.1-canary.543.16350.0":"2021-03-05T22:41:43.036Z","2.14.1-canary.611.16352.0":"2021-03-05T22:41:59.176Z","2.14.1-canary.596.16356.0":"2021-03-05T22:43:50.373Z","2.14.1-canary.554.16358.0":"2021-03-05T22:44:17.333Z","2.14.1-canary.473.16390.0":"2021-03-05T23:05:24.453Z","2.14.1-canary.641.16436.0":"2021-03-05T23:45:47.115Z","2.14.1-canary.513.16475.0":"2021-03-06T00:05:36.663Z","2.14.1-canary.529.16476.0":"2021-03-06T00:05:51.516Z","2.14.1-canary.481.16477.0":"2021-03-06T00:08:02.783Z","2.14.1-canary.542.16479.0":"2021-03-06T00:09:39.960Z","2.14.1-canary.493.16485.0":"2021-03-06T00:12:36.553Z","2.14.1--canary.484.16488.0":"2021-03-06T00:13:23.846Z","2.14.1-canary.488.16491.0":"2021-03-06T00:17:35.819Z","2.14.1--canary.565.16600.0":"2021-03-06T03:03:15.508Z","2.14.1--canary.542.16607.0":"2021-03-06T03:06:04.114Z","2.14.1--canary.611.16610.0":"2021-03-06T03:06:32.283Z","2.14.1--canary.513.16611.0":"2021-03-06T03:07:04.101Z","2.14.1--canary.529.16612.0":"2021-03-06T03:07:54.155Z","2.14.1--canary.566.16614.0":"2021-03-06T03:08:24.904Z","2.14.1--canary.618.16615.0":"2021-03-06T03:08:52.842Z","2.14.1--canary.630.16617.0":"2021-03-06T03:09:42.776Z","2.14.1--canary.575.16618.0":"2021-03-06T03:09:52.306Z","2.14.1--canary.617.16619.0":"2021-03-06T03:10:27.731Z","2.14.1--canary.553.16621.0":"2021-03-06T03:10:43.002Z","2.14.1--canary.576.16622.0":"2021-03-06T03:11:23.723Z","2.14.1--canary.586.16624.0":"2021-03-06T03:12:02.376Z","2.14.1--canary.559.16625.0":"2021-03-06T03:12:50.720Z","2.14.1--canary.551.16637.0":"2021-03-06T03:34:10.582Z","2.14.1--canary.488.16643.0":"2021-03-06T16:20:46.787Z","2.15.0":"2021-03-08T17:51:29.129Z","2.15.1--canary.642.16683.0":"2021-03-08T19:16:15.932Z","2.15.1":"2021-03-08T19:18:20.871Z","2.15.1--canary.601.16688.0":"2021-03-08T19:18:50.886Z","2.15.2--canary.643.16710.0":"2021-03-09T20:11:00.828Z","2.15.2":"2021-03-09T20:23:21.754Z","2.15.3--canary.551.16729.0":"2021-03-09T22:30:29.009Z","2.15.3--canary.529.16735.0":"2021-03-10T09:28:48.886Z","2.15.3--canary.566.16746.0":"2021-03-10T16:26:57.914Z","2.15.3--canary.566.16777.0":"2021-03-15T20:34:48.511Z","2.15.3--canary.616.16798.0":"2021-03-19T13:07:33.602Z","2.15.3--canary.618.16809.0":"2021-03-21T22:03:56.457Z","2.15.3--canary.544.16820.0":"2021-03-22T23:23:03.923Z","2.15.3--canary.566.16836.0":"2021-03-24T12:04:18.725Z","2.15.3--canary.566.16842.0":"2021-03-24T19:18:52.239Z","2.15.3--canary.562.16850.0":"2021-03-25T20:26:04.611Z","2.15.3--canary.612.16868.0":"2021-03-25T22:30:42.162Z","2.15.3--canary.553.16870.0":"2021-03-25T22:30:53.325Z","2.15.3--canary.553.16876.0":"2021-03-26T20:36:10.198Z","2.16.0--canary.644.16887.0":"2021-03-27T00:33:52.376Z","2.15.3--canary.553.16893.0":"2021-03-27T14:38:42.497Z","2.16.0":"2021-03-29T17:01:22.085Z","2.16.1--canary.645.16907.0":"2021-03-29T17:59:13.381Z","2.17.0--canary.646.16945.0":"2021-03-30T02:08:53.589Z","2.17.0":"2021-03-30T02:31:36.730Z","2.17.1--canary.587.16971.0":"2021-03-31T09:43:06.460Z","2.17.1--canary.647.16978.0":"2021-03-31T20:53:03.906Z","2.17.1":"2021-03-31T21:02:09.499Z","2.17.2--canary.530.17002.0":"2021-04-01T10:45:54.262Z","2.17.2--canary.551.17042.0":"2021-04-05T19:44:06.552Z","2.17.2--canary.587.17059.0":"2021-04-07T20:24:37.978Z","2.17.2--canary.604.17060.0":"2021-04-07T20:25:43.027Z","2.17.2--canary.566.17087.0":"2021-04-09T16:33:34.697Z","2.17.2--canary.649.17093.0":"2021-04-09T20:59:10.820Z","2.17.2--canary.617.17106.0":"2021-04-10T21:20:20.543Z","2.17.2--canary.617.17117.0":"2021-04-11T20:06:19.230Z","2.17.2--canary.562.17123.0":"2021-04-12T09:22:03.345Z","2.17.2":"2021-04-12T19:17:42.253Z","2.17.3--canary.650.17144.0":"2021-04-13T15:45:52.570Z","2.17.3--canary.566.17181.0":"2021-04-16T15:52:40.755Z","2.17.3--canary.566.17191.0":"2021-04-19T14:36:48.569Z","2.17.3--canary.587.17202.0":"2021-04-19T19:23:40.589Z","2.17.3--canary.566.17203.0":"2021-04-19T19:25:28.081Z","2.17.3--canary.488.17209.0":"2021-04-20T14:34:18.296Z","2.17.3--canary.587.17219.0":"2021-04-22T13:34:21.094Z","2.17.3--canary.488.17243.0":"2021-04-24T19:35:19.369Z","2.17.3--canary.587.17272.0":"2021-04-28T14:47:23.357Z","2.17.3--canary.488.17296.0":"2021-05-01T11:32:45.091Z","2.17.3--canary.587.17302.0":"2021-05-03T11:20:20.049Z","2.17.3--canary.587.17324.0":"2021-05-05T15:27:59.178Z","2.17.3--canary.651.17331.0":"2021-05-06T00:05:27.107Z","2.17.3--canary.559.17343.0":"2021-05-06T13:42:20.149Z","2.17.3--canary.652.17355.0":"2021-05-07T18:17:42.544Z","2.17.3--canary.651.17359.0":"2021-05-07T18:24:04.864Z","2.17.3--canary.612.17472.0":"2021-05-07T21:55:52.068Z","2.17.3--canary.604.17473.0":"2021-05-07T21:56:32.164Z","2.17.3--canary.562.17474.0":"2021-05-07T21:57:26.180Z","2.17.3--canary.565.17475.0":"2021-05-07T21:57:52.547Z","2.17.3--canary.587.17476.0":"2021-05-07T21:58:12.789Z","2.17.3--canary.550.17477.0":"2021-05-07T21:58:42.075Z","2.17.3--canary.551.17478.0":"2021-05-07T21:59:20.829Z","2.17.3--canary.605.17480.0":"2021-05-07T22:00:23.669Z","2.17.3--canary.530.17479.0":"2021-05-07T22:00:27.768Z","2.17.3--canary.566.17481.0":"2021-05-07T22:01:09.013Z","2.17.3--canary.616.17482.0":"2021-05-07T22:01:25.862Z","2.17.3--canary.630.17483.0":"2021-05-07T22:02:11.865Z","2.17.3--canary.617.17484.0":"2021-05-07T22:03:00.828Z","2.17.3--canary.607.17485.0":"2021-05-07T22:03:45.895Z","2.17.3--canary.559.17486.0":"2021-05-07T22:04:37.558Z","2.17.3--canary.554.17487.0":"2021-05-07T22:05:17.490Z","2.17.3--canary.544.17488.0":"2021-05-07T22:05:56.175Z","2.17.3--canary.587.17505.0":"2021-05-08T21:37:31.990Z","2.17.3--canary.576.17516.0":"2021-05-10T01:16:22.305Z","2.17.3":"2021-05-16T02:14:23.237Z","2.17.4--canary.612.17569.0":"2021-05-16T17:57:52.946Z","2.17.4--canary.654.17576.0":"2021-05-17T04:23:21.540Z","2.17.4--canary.607.17584.0":"2021-05-17T15:40:27.271Z","2.17.4":"2021-05-17T18:31:09.759Z","2.17.5--canary.655.17602.0":"2021-05-18T16:50:13.956Z","2.17.5":"2021-05-18T23:03:09.010Z","2.17.6--canary.656.17616.0":"2021-05-19T01:30:25.688Z","2.17.6--canary.605.17623.0":"2021-05-19T03:17:40.818Z","2.17.6--canary.566.17648.0":"2021-05-20T14:22:57.109Z","2.17.6--canary.617.17649.0":"2021-05-20T14:25:57.886Z","2.17.6--canary.630.17657.0":"2021-05-21T20:53:12.283Z","2.17.6--canary.617.17666.0":"2021-05-21T22:39:30.152Z","2.17.6--canary.566.17678.0":"2021-05-24T14:44:48.236Z","2.17.6--canary.657.17690.0":"2021-05-24T19:05:03.404Z","2.17.6--canary.549.17709.0":"2021-05-25T17:32:27.811Z","2.17.6--canary.656.17719.0":"2021-05-25T18:01:27.835Z","2.17.6":"2021-05-25T22:00:08.363Z","2.17.7--canary.611.17754.0":"2021-05-27T01:24:32.009Z","2.17.7--canary.505.17760.0":"2021-05-27T11:49:31.164Z","2.17.7--canary.617.17766.0":"2021-05-27T18:05:20.512Z","2.17.7--canary.587.17772.0":"2021-05-29T10:00:22.711Z","2.17.7--canary.611.17785.0":"2021-05-31T02:49:30.385Z","2.17.7--canary.587.17805.0":"2021-06-05T08:58:57.250Z","2.17.7--canary.559.17818.0":"2021-06-07T14:09:01.866Z","2.17.7--canary.559.17825.0":"2021-06-07T18:14:16.684Z","2.17.7--canary.549.17837.0":"2021-06-09T15:22:09.150Z","2.17.7--canary.659.17843.0":"2021-06-10T17:17:20.172Z","2.17.7":"2021-06-10T19:24:13.854Z","2.17.8--canary.612.17891.0":"2021-06-14T21:05:05.356Z","2.17.8--canary.551.17895.0":"2021-06-14T21:06:25.880Z","2.17.8--canary.605.17896.0":"2021-06-14T21:06:59.250Z","2.17.8--canary.566.17897.0":"2021-06-14T21:08:11.780Z","2.17.8--canary.630.17898.0":"2021-06-14T21:09:31.048Z","2.17.8--canary.660.17913.0":"2021-06-14T23:49:35.875Z","2.17.8":"2021-06-15T00:02:33.084Z","2.17.9--canary.565.17928.0":"2021-06-15T13:45:42.164Z","2.17.9--canary.630.17934.0":"2021-06-15T19:35:07.077Z","2.17.9--canary.617.17940.0":"2021-06-16T00:02:15.796Z","2.17.9--canary.587.17954.0":"2021-06-20T18:49:35.120Z","2.17.9--canary.617.17964.0":"2021-06-22T18:32:45.399Z","2.17.9--canary.587.17970.0":"2021-06-22T19:17:34.035Z","2.17.9--canary.612.17976.0":"2021-06-22T20:42:12.052Z","2.17.9--canary.616.17983.0":"2021-06-25T12:17:57.712Z","2.17.9--canary.617.17991.0":"2021-06-25T21:52:07.389Z","2.17.9--canary.576.17997.0":"2021-06-26T10:22:54.877Z","2.17.9--canary.587.18009.0":"2021-06-29T11:51:53.718Z","2.17.9--canary.505.18018.0":"2021-07-02T19:36:16.926Z","2.17.9--canary.604.18029.0":"2021-07-06T19:21:48.698Z","2.17.9--canary.562.18036.0":"2021-07-06T22:21:59.041Z","2.17.9--canary.612.18042.0":"2021-07-07T17:53:48.998Z","2.17.9--canary.578.18048.0":"2021-07-07T19:44:01.243Z","2.17.9--canary.566.18059.0":"2021-07-13T14:34:37.779Z","2.17.9--canary.662.18065.0":"2021-07-13T22:03:11.965Z","2.18.0":"2021-07-13T22:42:18.978Z","2.18.1--canary.630.18080.0":"2021-07-14T16:51:49.014Z","2.18.1--canary.663.18090.0":"2021-07-19T17:52:31.981Z","2.18.1--canary.663.18096.0":"2021-07-19T18:13:17.582Z","2.18.1--canary.505.18106.0":"2021-07-20T10:43:34.700Z","2.18.1--canary.665.18125.0":"2021-07-26T17:43:00.121Z","2.18.1--canary.665.18131.0":"2021-07-26T18:25:38.489Z","2.19.0--canary.665.18139.0":"2021-07-27T23:50:37.966Z","2.18.1--canary.604.18216.0":"2021-07-29T01:10:54.084Z","2.18.1--canary.612.18223.0":"2021-07-29T01:13:57.513Z","2.18.1--canary.562.18227.0":"2021-07-29T01:14:57.262Z","2.18.1--canary.587.18228.0":"2021-07-29T01:15:39.334Z","2.18.1--canary.616.18230.0":"2021-07-29T01:15:47.826Z","2.18.1--canary.551.18231.0":"2021-07-29T01:16:43.558Z","2.18.1--canary.578.18232.0":"2021-07-29T01:17:04.571Z","2.18.1--canary.549.18233.0":"2021-07-29T01:17:33.363Z","2.18.1--canary.605.18234.0":"2021-07-29T01:17:51.785Z","2.18.1--canary.617.18235.0":"2021-07-29T01:18:38.263Z","2.18.1--canary.559.18237.0":"2021-07-29T01:19:15.956Z","4.12.0":"2021-07-29T06:54:27.246Z","4.12.1--canary.616.18256.0":"2021-07-29T11:02:21.154Z","4.12.1--canary.587.18262.0":"2021-07-30T04:21:23.215Z","4.12.1--canary.616.18272.0":"2021-08-05T13:06:31.155Z","4.12.1--canary.587.18280.0":"2021-08-08T18:40:04.891Z","4.12.1--canary.551.18294.0":"2021-08-12T00:17:29.765Z","4.12.1--canary.666.18307.0":"2021-08-13T09:50:31.700Z","4.12.1--canary.666.18313.0":"2021-08-13T10:57:11.414Z","4.12.1--canary.667.18319.0":"2021-08-15T08:29:57.398Z","4.12.1--canary.559.18325.0":"2021-08-15T20:56:36.150Z","4.13.0":"2021-08-16T17:25:21.238Z","4.13.1--canary.587.18341.0":"2021-08-17T13:52:59.544Z","4.13.1--canary.587.18355.0":"2021-08-24T22:18:26.931Z","4.13.1--canary.587.18374.0":"2021-08-29T16:00:32.563Z","4.13.1--canary.587.18391.0":"2021-09-01T18:27:39.280Z","4.13.1--canary.587.18397.0":"2021-09-01T21:49:03.707Z","4.13.1--canary.587.18403.0":"2021-09-02T18:03:40.797Z","4.13.1--canary.630.18411.0":"2021-09-06T19:58:27.677Z","4.13.1--canary.630.18417.0":"2021-09-07T10:46:52.924Z","4.13.1--canary.587.18427.0":"2021-09-09T09:24:51.542Z","4.13.1--canary.576.18433.0":"2021-09-09T10:39:52.062Z","4.13.1--canary.630.18456.0":"2021-09-13T20:49:51.085Z","4.13.1--canary.630.18466.0":"2021-09-15T19:32:31.816Z","4.13.1--canary.576.18478.0":"2021-09-16T08:42:27.831Z","4.13.1--canary.587.18488.0":"2021-09-19T20:13:11.615Z","4.13.1--canary.669.18500.0":"2021-09-21T03:19:38.435Z","4.13.1--canary.565.18566.0":"2021-09-21T21:13:57.509Z","4.13.1--canary.578.18567.0":"2021-09-21T21:14:47.520Z","4.13.1--canary.616.18569.0":"2021-09-21T21:16:22.546Z","4.13.1--canary.551.18570.0":"2021-09-21T21:17:20.081Z","4.13.1--canary.559.18573.0":"2021-09-21T21:20:16.188Z","4.13.1--canary.562.18568.0":"2021-09-21T21:20:34.436Z","4.13.1":"2021-09-21T21:25:05.572Z","4.13.1--canary.630.18574.0":"2021-09-21T21:25:17.492Z","4.13.1--canary.549.18575.0":"2021-09-21T21:25:30.550Z","4.13.2--canary.549.18585.0":"2021-09-21T21:59:09.721Z","4.13.2--canary.616.18591.0":"2021-09-25T13:47:15.914Z","4.13.2--canary.587.18597.0":"2021-09-27T02:21:01.081Z","4.13.2--canary.630.18610.0":"2021-09-28T08:43:49.866Z","4.13.2--canary.616.18622.0":"2021-09-30T13:42:20.668Z","4.13.2--canary.587.18647.0":"2021-10-05T20:26:22.572Z","4.13.2--canary.630.18653.0":"2021-10-06T00:42:29.484Z","4.13.2--canary.559.18659.0":"2021-10-06T23:14:43.424Z","4.13.2--canary.587.18701.0":"2021-10-12T20:20:30.923Z","4.13.2--canary.559.18731.0":"2021-10-19T02:59:50.584Z","4.13.2--canary.604.18739.0":"2021-10-21T11:12:10.871Z","4.13.2--canary.616.18751.0":"2021-10-22T13:24:12.861Z","4.13.2--canary.616.18757.0":"2021-10-22T14:29:38.397Z","4.13.2--canary.587.18769.0":"2021-10-25T09:41:27.728Z","4.13.2--canary.587.18800.0":"2021-11-02T22:25:11.355Z","4.14.0--canary.667.18836.0":"2021-12-21T06:24:38.193Z","4.13.2--canary.671.18842.0":"2022-01-15T04:07:33.062Z","4.13.2--canary.672.18848.0":"2022-01-15T07:39:51.818Z","4.13.2--canary.673.18854.0":"2022-01-16T02:29:07.170Z","4.13.2--canary.674.18860.0":"2022-01-28T15:32:17.467Z","4.13.2--canary.675.18866.0":"2022-02-10T20:16:54.688Z","4.13.2--canary.676.18872.0":"2022-02-12T15:46:20.095Z","4.13.2--canary.677.18878.0":"2022-02-15T04:12:21.773Z","4.13.2--canary.678.18884.0":"2022-02-26T03:44:10.114Z","4.13.2--canary.679.18890.0":"2022-03-03T23:42:15.569Z","4.13.2--canary.612.18933.0":"2022-03-07T17:11:49.073Z","4.13.2--canary.565.18928.0":"2022-03-07T17:12:02.401Z","4.13.2--canary.587.18941.0":"2022-03-07T17:12:49.186Z","4.13.2--canary.530.18942.0":"2022-03-07T17:13:08.387Z","4.13.2--canary.578.18949.0":"2022-03-07T17:13:54.797Z","4.13.2--canary.616.18953.0":"2022-03-07T17:14:20.568Z","4.13.2--canary.630.18954.0":"2022-03-07T17:15:05.547Z","4.13.2--canary.559.18956.0":"2022-03-07T17:15:35.722Z","4.13.2--canary.680.18965.0":"2022-03-08T23:50:17.964Z","4.13.2--canary.681.18971.0":"2022-03-16T17:27:24.004Z","4.14.0--canary.681.18977.0":"2022-03-16T18:11:09.874Z","4.14.0":"2022-03-17T19:38:36.175Z","4.14.1--canary.685.19015.0":"2022-03-17T19:51:15.021Z","4.14.1--canary.683.19019.0":"2022-03-17T19:51:37.079Z","4.14.1--canary.682.19023.0":"2022-03-17T19:52:08.209Z","4.14.1--canary.684.19024.0":"2022-03-17T19:53:00.770Z","4.14.1--canary.630.19032.0":"2022-03-17T19:55:11.915Z","4.14.1--canary.576.19036.0":"2022-03-17T19:57:23.387Z","4.14.1--canary.686.19052.0":"2022-03-17T21:20:50.242Z","4.14.1--canary.687.19053.0":"2022-03-17T21:20:57.378Z","4.14.1--canary.684.19054.0":"2022-03-17T21:21:23.030Z","4.14.1--canary.691.19293.0":"2022-04-26T20:51:36.699Z","4.14.1--canary.691.19328.0":"2022-04-28T20:43:22.299Z","4.14.1--canary.691.19336.0":"2022-04-29T15:07:32.692Z","4.14.1--canary.691.19342.0":"2022-04-29T17:57:30.050Z","4.14.1--canary.692.19382.0":"2022-05-10T23:03:45.844Z","4.14.1--canary.692.19393.0":"2022-05-11T03:30:00.825Z","4.14.1--canary.692.19399.0":"2022-05-11T22:43:04.272Z","4.14.1--canary.692.19405.0":"2022-05-11T23:06:08.941Z","4.15.0--canary.692.19429.0":"2022-05-19T22:44:32.744Z","4.15.0":"2022-05-20T21:36:11.888Z","4.15.1--canary.698.19658.0":"2022-05-23T18:55:07.470Z","4.16.0--canary.698.19664.0":"2022-05-23T19:08:43.384Z","4.15.1--canary.699.19704.0":"2022-05-31T19:18:39.502Z","4.15.1":"2022-05-31T21:22:03.512Z","4.15.2--canary.709.19992.0":"2022-12-26T23:41:38.262Z","4.15.2":"2022-12-26T23:55:18.203Z","4.15.3--canary.722.20472.0":"2023-08-14T15:24:15.905Z","4.15.3":"2023-08-18T01:36:06.443Z","4.15.4":"2023-08-23T21:32:00.969Z","5.0.0--canary.729.20714.0":"2023-10-04T17:13:06.487Z","4.16.0--canary.730.20720.0":"2023-10-04T20:53:26.944Z","4.16.0-next.0":"2023-10-04T22:18:03.442Z","5.0.0--canary.729.20732.0":"2023-10-04T22:52:12.635Z","5.0.0--canary.729.20738.0":"2023-10-05T00:41:29.463Z","5.0.0-next.0":"2023-10-05T16:18:13.942Z"},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"description":"A simple CLI for generating icon components from SVGs.","homepage":"https://github.com/intuit/design-systems-cli#readme","repository":{"type":"git","url":"git+https://github.com/intuit/design-systems-cli.git"},"contributors":[{"name":"Tyler Krupicka github@tylerkrupicka.com"},{"name":"Andrew Lisowski lisowski54@gmail.com"}],"author":{"name":"Tyler Krupicka github@tylerkrupicka.com"},"bugs":{"url":"https://github.com/intuit/design-systems-cli/issues"},"license":"MIT","readme":"","readmeFilename":""}