{"_id":"@svgx/core","_rev":"3759755","name":"@svgx/core","description":"Transform SVG inputs into many outputs, especially \"HAST\" \"JSX\" and \"JS\".","dist-tags":{"latest":"1.0.1"},"maintainers":[{"name":"salihbenlalla","email":""}],"time":{"modified":"2025-04-22T08:04:41.000Z","created":"2023-01-22T20:14:08.694Z","1.0.1":"2023-01-22T20:14:08.694Z"},"users":{},"author":{"name":"salih benlalla","email":"salihbenlalla@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/salihbenlalla/svgx.git"},"versions":{"1.0.1":{"name":"@svgx/core","version":"1.0.1","description":"Transform SVG inputs into many outputs, especially \"HAST\" \"JSX\" and \"JS\".","keywords":["svg","svgx","core","qwik","qwik-city","react","vite","rollup","webpack"],"author":{"name":"salih benlalla","email":"salihbenlalla@gmail.com"},"homepage":"https://github.com/salihbenlalla/svgx/blob/main/packages/core","license":"MIT","main":"./lib/cjs/index.js","module":"./lib/esm/index.js","types":"./lib/index.d.ts","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/esm/index.js","require":"./lib/cjs/index.js","default":"./lib/cjs/index.js"},"./package.json":"./package.json"},"directories":{"lib":"lib"},"repository":{"type":"git","url":"git+https://github.com/salihbenlalla/svgx.git"},"scripts":{"clean":"rm -rf ./lib","build":"npm run clean && npm run build:esm && npm run build:cjs && ./fixup.sh","build:esm":"tsc -p ./tsconfig.esm.json","build:cjs":"tsc -p ./tsconfig.cjs.json","prepack":"npm run build"},"bugs":{"url":"https://github.com/salihbenlalla/svgx/issues"},"dependencies":{"@types/estree":"^1.0.0","astring":"^1.8.3","estraverse":"^5.3.0","estree-util-build-jsx":"^2.2.0","estree-util-to-js":"^1.1.0","hast-util-from-html":"^1.0.0","hast-util-to-estree":"^2.1.0","parse5":"~6.0.0","svgo":"^3.0.2"},"devDependencies":{"@types/estraverse":"^5.1.2"},"engines":{"node":">=14.16"},"publishConfig":{"access":"public"},"gitHead":"59195f727e216b4ec6648f29f54e18153282c5c4","_id":"@svgx/core@1.0.1","_nodeVersion":"16.18.0","_npmVersion":"lerna/6.1.0/node@v16.18.0+x64 (linux)","dist":{"shasum":"ebdf3b8c9d8fed25065214868f9347fc9e1662c3","size":5286,"noattachment":false,"key":"/@svgx/core/-/@svgx/core-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@svgx/core/download/@svgx/core-1.0.1.tgz"},"_npmUser":{"name":"salihbenlalla","email":"salihbenlalla@gmail.com"},"maintainers":[{"name":"salihbenlalla","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_1.0.1_1674418448523_0.9576300689176833"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-01-22T20:14:08.694Z","publish_time":1674418448694,"_cnpm_publish_time":1674418448694}},"readme":"# SVGX core\n\nThis is the core package for [@svgx/vite-plugin-react](https://github.com/salihbenlalla/svgx/blob/main/packages/vite-plugin-react) and [@svgx/vite-plugin-qwik](https://github.com/salihbenlalla/svgx/blob/main/packages/vite-plugin-qwik) plugins. it exposes many functions that are used under the hood to transform SVG files into components, these functions may be especially useful for library authors, or you may find them useful for some tasks in your app.\n\n## Install\n\nThis package is hybrid (ESM & CommonJS), which means it can be `import`ed or `require`d.\n\n**npm**\n\n```\nnpm install @svgx/core\n```\n\n## API\n\nAll of these functions take a raw `svg` string as first argument, and an `options` object as second argument, and return a Promise:\n\n**toHast**\n\nThis function takes a raw SVG string and transforms it into **HAST** (Hypertext Abstract Syntax Tree).\n\n- Signature: `toHast: (svg: string, options?: ToHastOptions) => Promise<import(\"hast\").Root>`\n- Options:\n\n  ```ts\n  interface ToHastOptions {\n    optimize?: boolean | undefined;\n    svgoConfig?: SVGOConfig | undefined;\n  }\n  ```\n\n**toEstree**\n\nThis function takes a raw SVG string and transforms it into **ESTree** (EcmaScript Tree).\n\n- Signature: `toEstree: (svg: string, options?: ToEsTreeOptions) => Promise<import(\"estree\").Program>`\n- Options:\n\n  ```ts\n  interface ToEsTreeOptions extends ToHastOptions {}\n  ```\n\n**toJsx**\n\nThis function takes a raw SVG string and transforms it into **JSX** Element (string).\n\n- Signature: `toJsx: (svg: string, options?: ToJsxOptions) => Promise<string>`\n- Options:\n\n  ```ts\n  interface ToJsxOptions extends ToEsTreeOptions {}\n  ```\n\n**toJs**\n\nThis function takes a raw SVG string and transforms it into vanilla javascript (string) with pragma factory function calls.\n\n- Signature: `toJs: (svg: string, options?: ToJsOptions) => Promise<string>`\n- Options:\n\n  ```ts\n  interface ToJsOptions extends ToEsTreeOptions {\n    runtime?: \"classic\" | \"automatic\";\n    importSource?: string;\n    pragma?: string;\n    pragmaFrag?: string;\n    development?: boolean;\n    filePath?: string;\n  }\n  ```\n\n**toEstreeComponent**\n\nThis function takes a raw SVG string and transforms it into a **function component** (not JSX element) represented with **Estree** format.\n\n- Signature: `toEstreeComponent: (svg: string, options?: ToEstreeComponentOptions) => Promise<import(\"estree\").Program>`\n- Options:\n\n  ```ts\n  interface ToEstreeComponentOptions extends ToEsTreeOptions {\n    runtime?: \"classic\" | \"automatic\";\n    pragma?: string;\n    pragmaFrag?: string;\n    importSource?: string;\n    componentName?: string;\n    passProps?: boolean;\n    defaultExport?: boolean;\n  }\n  ```\n\n**toJsxComponent**\n\nThis function takes a raw SVG string and transforms it into a **function component** (not JSX element) that returns regular JSX (without compilation).\n\n- Signature: `toJsxComponent: (svg: string, options: ToJsxComponentOptions) => Promise<string>`\n- Options:\n\n  ```ts\n  interface ToJsxComponentOptions extends ToEstreeComponentOptions {}\n  ```\n\n**toJsComponent**\n\nThis function takes a raw SVG string and transforms it into a vanilla javascript **function component** (not JSX element), the JSX is compiled down to vanilla javascript.\n\n- Signature: `toJsComponent: (svg: string, options?: ToJsComponentOptions) => Promise<string>`\n- Options:\n\n  ```ts\n  interface ToJsComponentOptions\n    extends ToJsOptions,\n      ToEstreeComponentOptions {}\n  ```\n\n### Options\n\nAs there are many similar options for these functions i decided to document them once and for all:\n\n### `optimize`\n\n- type: `boolean`\n- default: `true`\n\nWether to optimize the SVG files using [SVGO](https://github.com/svg/svgo) or not.\n\n### `svgoConfig`\n\n- type: `import(\"svgo\").Config` ([SVGO](https://github.com/svg/svgo) configuration)\n- default: default [SVGO](https://github.com/svg/svgo) Options\n\nIf `optimize` is `true`, pass options to [SVGO](https://github.com/svg/svgo).\n\n### `runtime`\n\n- type: `\"classic\" | \"automatic\"`\n- default: `\"automatic\"`\n\nWether to use **classic** or **automatic** JSX runtime.\n\n### `importSource`\n\n- type: `string`\n- default: `\"react\"`\n\nSpecify where you want to import the JSX runtime from.\n\n### `pragma`\n\n- type: `string`\n- default: `\"createElement\"`\n\nThe pragma specific to the library intended,\n\n### `pragmaFrag`\n\n- type: `string`\n- default: `\"Fragment\"`\n\nThe fragment pragma specific to the library intended,\n\n### `development`\n\n- type: `boolean`\n- default: `false`\n\nWhen in the automatic runtime, whether to import `theSource/jsx-dev-runtime.js`, use `jsxDEV`, and pass location info when available.\n\nThis helps debugging but adds a lot of code that you don’t want in production.\n\n### `filePath`\n\n- type: `string`\n- default: `undefined`\n\nFile path to the original source file. Passed in location info to `jsxDEV` when using the automatic runtime with `development: true`.\n\n### `componentName`\n\n- type: `string`\n- default: `\"Component\"`\n\nThe identifier of the generated function component.\n\n### `defaultExport`\n\n- type: `boolean`\n- default: `true`\n\nWether to default export the component, or use named export instead.\n\n### `passProps`\n\n- type: `boolean`\n- default: `true`\n\nWether the component accepts props (the props are passed directly to the `<svg>` element using spread operator `<svg {...props}></svg>`).\n","_attachments":{},"homepage":"https://github.com/salihbenlalla/svgx/blob/main/packages/core","bugs":{"url":"https://github.com/salihbenlalla/svgx/issues"},"license":"MIT"}