{"id":13907567,"url":"https://github.com/mapbox/svg-react-transformer","last_synced_at":"2025-07-18T05:32:57.021Z","repository":{"id":56412774,"uuid":"94642792","full_name":"mapbox/svg-react-transformer","owner":"mapbox","description":"Transform SVG into JSX or React component modules","archived":true,"fork":false,"pushed_at":"2023-11-09T16:07:52.000Z","size":942,"stargazers_count":45,"open_issues_count":2,"forks_count":4,"subscribers_count":111,"default_branch":"main","last_synced_at":"2025-06-29T18:15:57.236Z","etag":null,"topics":["frontend-shared","frontend-tooling"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mapbox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-06-17T18:46:03.000Z","updated_at":"2024-10-13T14:54:05.000Z","dependencies_parsed_at":"2024-04-09T11:37:03.278Z","dependency_job_id":"5045c7e2-25d2-4c7d-9678-dd4af44ff8b0","html_url":"https://github.com/mapbox/svg-react-transformer","commit_stats":{"total_commits":76,"total_committers":7,"mean_commits":"10.857142857142858","dds":0.368421052631579,"last_synced_commit":"191a5b432b2a543ae15b9cf2cf34a63e89074c69"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/mapbox/svg-react-transformer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fsvg-react-transformer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fsvg-react-transformer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fsvg-react-transformer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fsvg-react-transformer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mapbox","download_url":"https://codeload.github.com/mapbox/svg-react-transformer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fsvg-react-transformer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265705435,"owners_count":23814454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-shared","frontend-tooling"],"created_at":"2024-08-06T23:01:59.550Z","updated_at":"2025-07-18T05:32:56.653Z","avatar_url":"https://github.com/mapbox.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# @mapbox/svg-react-transformer\n\n[![Build Status](https://travis-ci.com/mapbox/svg-react-transformer.svg?branch=main)](https://travis-ci.com/mapbox/svg-react-transformer)\n\nTransform SVGs into JSX or React component modules.\n\nThis monorepo includes the following packages:\n\n- [**@mapbox/svg-react-transformer**](./packages/svg-react-transformer) includes the core, low-level transform functions to convert an SVG into JSX or React component modules. These functions take one string and output another string. They can be used by higher-level modules that target specific contexts, like the following ...\n- [**@mapbox/svg-react-transformer-writer**](./packages/svg-react-transformer-writer) is a CLI and Node API for running SVG files through svg-react-transformer and writing the React component modules to new files. Takes an SVG file, outputs a JS file.\n- [**@mapbox/svg-react-transformer-loader**](./packages/svg-react-transformer-loader) is a Webpack loader that transforms SVG files into React component modules. Allows you to `import` SVG files within Webpack-compiled JS and get a React component.\n\nFor example, given an SVG like this:\n\n```svg\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?\u003e\n\u003csvg viewBox=\"0 0 18 18\"\u003e\n  \u003cpath d=\"M7,4l1.6,4H5.5c0,0-1.4-2-2.5-2H2.2L3,8l1,3h4.6L7,15h2l3.2-4H14c1,0,2-0.7,2-1.5S15,8,14,8h-1.8L9,4H7z\"/\u003e\n\u003c/svg\u003e\n```\n\nYou can get a React component module like this:\n\n```jsx\nconst React = require(\"react\");\n\nclass SvgComponent extends React.PureComponent {\n  render() {\n    return (\n      \u003csvg viewBox=\"0 0 18 18\" {...this.props}\u003e\n        \u003cpath d=\"M7 4l1.6 4H5.5S4.1 6 3 6h-.8L3 8l1 3h4.6L7 15h2l3.2-4H14c1 0 2-.7 2-1.5S15 8 14 8h-1.8L9 4H7z\" /\u003e\n      \u003c/svg\u003e\n    );\n  }\n}\n\nmodule.exports = SvgComponent;\n```\n\nOr a fancier React component module like this:\n\n```jsx\n\"use strict\";\nconst React = require(\"react\");\nclass SvgComponent extends React.PureComponent {\n  render() {\n    const containerStyle = this.props.containerStyle || {};\n    if (!containerStyle.position || containerStyle.position === \"static\") {\n      containerStyle.position = \"relative\";\n    }\n    containerStyle.paddingBottom = \"100%\";\n    const svgStyle = this.props.svgStyle || {};\n    svgStyle.position = \"absolute\";\n    svgStyle.overflow = \"hidden\";\n    svgStyle.top = 0;\n    svgStyle.left = 0;\n    svgStyle.width = \"100%\";\n    const text = !this.props.alt ? null : (\n      \u003cdiv style={{ position: \"absolute\", left: -9999 }}\u003e{this.props.alt}\u003c/div\u003e\n    );\n    return (\n      \u003cdiv style={containerStyle} className={this.props.containerClassName}\u003e\n        \u003csvg\n          aria-hidden={true}\n          focusable=\"false\"\n          style={svgStyle}\n          className={this.props.svgClassName}\n          viewBox=\"0 0 18 18\"\n        \u003e\n          \u003cpath d=\"M7 4l1.6 4H5.5S4.1 6 3 6h-.8L3 8l1 3h4.6L7 15h2l3.2-4H14c1 0 2-.7 2-1.5S15 8 14 8h-1.8L9 4H7z\" /\u003e\n        \u003c/svg\u003e\n        {text}\n      \u003c/div\u003e\n    );\n  }\n}\nmodule.exports = SvgComponent;\n```\n\n## Development\n\n`npm install` to get all the dependencies and linking hooked up.\n`lerna bootstrap` runs in a `postinstall` script.\n(If you are experiencing errors, in linting or at runtime, about missing or fouled-up dependencies, you probably need to rerun installation \u0026 bootstrapping.)\n\nJest is installed at the top level, so you can test all repos by with `npx jest` or `npm test`.\n\nRelease with `mbx npm login \u0026\u0026 lerna publish --skip-npm \u0026\u0026 lerna exec mbx npm publish --tag latest`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapbox%2Fsvg-react-transformer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmapbox%2Fsvg-react-transformer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapbox%2Fsvg-react-transformer/lists"}