{"_id":"@bento/svg-parser","_rev":"3-34021e445ddf90fd0e2578d7be6101a0","name":"@bento/svg-parser","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@bento/svg-parser","version":"0.1.0","keywords":["bento","component","library","react","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/svg-parser@0.1.0","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"c069209dfdf8fa1eebdedcaa87696a5c4cec4766","tarball":"https://registry.npmjs.org/@bento/svg-parser/-/svg-parser-0.1.0.tgz","fileCount":10,"integrity":"sha512-UmbsWvhQX95VJNhYnZlwPuonS0E1fzntOcyfGcYFJP/62gPJaJ/UWnbRJvtTZCwfH8daNPQXWyYc30uEklyReA==","signatures":[{"sig":"MEUCIQCzhBKdl/nJewDfKpw2YNRbTbyaLJ6w9jnxw/h5Nsd8igIgQa7mXxz6X/p8ricKzfwQo1aVvWQplcK5DNJ+i4WabYs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fsvg-parser@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":21140},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"8cf6c3e7e24572c8b548fc4207e3af58bc3b5cc1","scripts":{"dev":"tsup-node src/index.tsx --watch","lint":"biome lint && tsc","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"10.9.2","description":"A utility for parsing SVG strings into React elements","directories":{},"_nodeVersion":"23.11.1","dependencies":{"camelcase":"^8.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/svg-parser_0.1.0_1761318929752_0.137010141191791","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@bento/svg-parser","version":"0.1.1","keywords":["bento","component","library","react","svg","vector"],"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","_id":"@bento/svg-parser@0.1.1","maintainers":[{"name":"3rdeden","email":"npmjs@3rd-Eden.com"},{"name":"rxmarbles","email":"rmarkins@gmail.com"},{"name":"kawikabader","email":"ekbader@gmail.com"}],"homepage":"https://github.com/godaddy/bento#readme","bugs":{"url":"https://github.com/godaddy/bento/issues"},"dist":{"shasum":"19f36d116f36f1a0f10d7dbf1e5ad1dbefdbf7fe","tarball":"https://registry.npmjs.org/@bento/svg-parser/-/svg-parser-0.1.1.tgz","fileCount":11,"integrity":"sha512-ZtEFpMLmYVDP3PW2hG+f0uJCMpPcpwAtNcACDHZz9A3il66GCwa022MdlVZpRSKi0ckME9RqAoZ5fefxuIZeiA==","signatures":[{"sig":"MEQCIBab9L8ZshOP74UwMQdxaDGWIe/wnatp20pbnZ/Av4naAiBYz0ENZtCeGik5fnDHuOTYcFROWGdI1htcTV5y57IV7Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bento%2fsvg-parser@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":27090},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"b630e17d1fad413043801e80ed1c1a0c5fe1d4b3","scripts":{"dev":"tsup-node src/index.tsx --watch","lint":"biome lint && tsc","test":"vitest --run","build":"tsup-node","pretest":"npm run build","posttest":"npm run lint","test:watch":"vitest","prepublishOnly":"node ../../scripts/compile-readme.ts"},"_npmUser":{"name":"kawikabader","email":"ekbader@gmail.com"},"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"_npmVersion":"11.6.2","description":"A utility for parsing SVG strings into React elements","directories":{},"_nodeVersion":"23.11.1","dependencies":{"camelcase":"^8.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react":"18.x || 19.x","react-dom":"18.x || 19.x"},"_npmOperationalInternal":{"tmp":"tmp/svg-parser_0.1.1_1762462133713_0.5879233024922625","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-24T15:15:29.640Z","modified":"2025-12-18T16:37:30.200Z","0.1.0":"2025-10-24T15:15:29.932Z","0.1.1":"2025-11-06T20:48:53.919Z"},"bugs":{"url":"https://github.com/godaddy/bento/issues"},"author":{"name":"GoDaddy Operating Company, LLC"},"license":"MIT","homepage":"https://github.com/godaddy/bento#readme","keywords":["bento","component","library","react","svg","vector"],"repository":{"url":"git+https://github.com/godaddy/bento.git","type":"git"},"description":"A utility for parsing SVG strings into React elements","maintainers":[{"email":"rmarkins@godaddy.com","name":"rmarkins"},{"email":"npmjs@3rd-Eden.com","name":"3rdeden"},{"email":"rmarkins@gmail.com","name":"rxmarbles"},{"email":"ekbader@gmail.com","name":"kawikabader"}],"readme":"# SVG Parser\n\nA utility for transforming SVG strings into React components with support for \ncustom node and property transformations.\n\n## Installation\n\n```bash\nnpm install @bento/svg-parser\n```\n\n## Basic Usage\n\nImport the `parser` function and pass your SVG string as the first argument. \nStandard SVG attributes are automatically converted to React-friendly props \n(hyphenated attributes become camelCase).\n\n```tsx\nimport { parser } from '@bento/svg-parser';\n\n/**\n * Basic SVG parsing example\n *\n * This example demonstrates the simplest usage of the svg-parser.\n * It takes a basic SVG string and converts it to a React element.\n *\n * Usage:\n * ```tsx\n * import { BasicExample } from './examples/basic';\n *\n * function App() {\n *   return <BasicExample />;\n * }\n * ```\n */\nconst basicSvg = `\n<svg width=\"100\" height=\"100\">\n  <rect x=\"10\" y=\"10\" width=\"80\" height=\"80\" fill=\"blue\" />\n</svg>\n`;\n\nexport function BasicExample() {\n  const parsedSvg = parser(basicSvg);\n  return parsedSvg;\n}\n```\n\n## Custom Property Transformations Example\n\nUse property transformations when you need to convert SVG attributes that don't \nfollow React conventions. Each transformation function receives the DOM element \nand returns `[newPropertyName, newPropertyValue]`. Essential for attributes \nlike `class` (becomes `className`) or `stroke-width` (becomes `strokeWidth`).\n\n```tsx\nimport { parser } from '@bento/svg-parser';\n\n/**\n * Custom Props Transformation Example\n *\n * This example demonstrates how to transform SVG attributes using custom prop transformations.\n * It shows how to:\n * - Convert 'class' to 'className'\n * - Convert 'stroke-width' to 'strokeWidth'\n */\nconst svgWithCustomProps = `\n<svg width=\"100\" height=\"100\">\n  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke-width=\"2\" class=\"custom-circle\" />\n</svg>\n`;\n\nexport function CustomPropsExample() {\n  const parsedSvg = parser(svgWithCustomProps, {\n    props: {\n      // Transform 'class' attribute to 'className'\n      class: (node) => ['className', node.getAttribute('class')!],\n      // Transform 'stroke-width' to 'strokeWidth'\n      'stroke-width': (node) => ['strokeWidth', node.getAttribute('stroke-width')!]\n    }\n  });\n  return parsedSvg;\n}\n```\n\n## Custom Node Transformations Example\n\nTransform custom SVG elements into standard elements or React components when \nyou have non-standard elements in your SVG. Each transformation function \nreceives the DOM element and returns `[componentName, componentProps]`, \nallowing you to extract attributes and create new component properties.\n\n```tsx\nimport { parser } from '@bento/svg-parser';\n\n/**\n * Custom Nodes Transformation Example\n *\n * This example demonstrates how to transform custom SVG elements into React components.\n * It shows how to:\n * - Transform a custom-shape into a rectangle with specific styling\n * - Transform a special-element into a circle with dynamic properties\n */\nconst svgWithCustomNodes = `\n<svg width=\"200\" height=\"200\">\n  <custom-shape x=\"50\" y=\"50\" size=\"100\" />\n  <special-element type=\"circle\" radius=\"40\" />\n</svg>\n`;\n\nexport function CustomNodesExample() {\n  const parsedSvg = parser(svgWithCustomNodes, {\n    nodes: {\n      // Transform custom-shape to a rectangle with specific styling\n      'custom-shape': (node) => [\n        'rect',\n        {\n          x: node.getAttribute('x'),\n          y: node.getAttribute('y'),\n          width: node.getAttribute('size'),\n          height: node.getAttribute('size'),\n          fill: 'purple',\n          rx: '8'\n        }\n      ],\n      // Transform special-element to a circle with dynamic properties\n      'special-element': (node) => [\n        'circle',\n        {\n          cx: '100',\n          cy: '100',\n          r: node.getAttribute('radius'),\n          fill: 'orange'\n        }\n      ]\n    }\n  });\n  return parsedSvg;\n}\n```\n\n## Advanced Usage: Combining Transformations Example\n\nCombine both transformations when you need to handle custom elements AND \ncustom attributes. The parser applies node transformations first, then \nprocesses properties on all elements (including newly transformed ones).\n\n```tsx\nimport { parser } from '@bento/svg-parser';\n\n/**\n * Complex SVG Parser Example\n *\n * This example demonstrates a more complex usage of the SVG parser with\n * both custom node transformations and custom props transformations.\n * It shows how to:\n * - Transform custom elements into standard SVG elements\n * - Transform custom attributes into React props\n * - Apply both transformations simultaneously\n */\nconst svgWithComplexFeatures = `\n<svg width=\"200\" height=\"200\">\n  <custom-shape x=\"50\" y=\"50\" size=\"100\" stroke-width=\"2\" class=\"purple-box\" />\n  <special-element type=\"circle\" radius=\"40\" stroke-width=\"3\" class=\"orange-circle\" />\n  <rect x=\"10\" y=\"10\" width=\"50\" height=\"50\" stroke-width=\"1\" class=\"blue-box\" />\n</svg>\n`;\n\nexport function ComplexExample() {\n  const parsedSvg = parser(svgWithComplexFeatures, {\n    // Custom node transformations\n    nodes: {\n      'custom-shape': (node) => [\n        'rect',\n        {\n          x: node.getAttribute('x'),\n          y: node.getAttribute('y'),\n          width: node.getAttribute('size'),\n          height: node.getAttribute('size'),\n          fill: 'purple',\n          rx: '8',\n          strokeWidth: node.getAttribute('stroke-width'),\n          className: node.getAttribute('class')\n        }\n      ],\n      'special-element': (node) => [\n        'circle',\n        {\n          cx: '100',\n          cy: '100',\n          r: node.getAttribute('radius'),\n          fill: 'orange',\n          strokeWidth: node.getAttribute('stroke-width'),\n          className: node.getAttribute('class')\n        }\n      ]\n    },\n    // Custom props transformations\n    props: {\n      'stroke-width': (node) => ['strokeWidth', node.getAttribute('stroke-width')!],\n      class: (node) => ['className', node.getAttribute('class')!]\n    }\n  });\n  return parsedSvg;\n}\n```","readmeFilename":"README.md"}