{"id":16763632,"url":"https://github.com/frenzzy/svg-to-jsx-loader","last_synced_at":"2025-10-04T16:18:19.854Z","repository":{"id":57382667,"uuid":"47430482","full_name":"frenzzy/svg-to-jsx-loader","owner":"frenzzy","description":"SVG to JSX loader module for webpack","archived":false,"fork":false,"pushed_at":"2017-04-28T12:15:26.000Z","size":42,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-18T03:05:18.937Z","etag":null,"topics":["jsx","jsx-loader","react","svg","svg-loader","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frenzzy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-04T21:48:59.000Z","updated_at":"2020-05-18T00:52:32.000Z","dependencies_parsed_at":"2022-09-01T04:41:07.963Z","dependency_job_id":null,"html_url":"https://github.com/frenzzy/svg-to-jsx-loader","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/frenzzy/svg-to-jsx-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frenzzy%2Fsvg-to-jsx-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frenzzy%2Fsvg-to-jsx-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frenzzy%2Fsvg-to-jsx-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frenzzy%2Fsvg-to-jsx-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frenzzy","download_url":"https://codeload.github.com/frenzzy/svg-to-jsx-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frenzzy%2Fsvg-to-jsx-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260342645,"owners_count":22994846,"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":["jsx","jsx-loader","react","svg","svg-loader","webpack","webpack-loader"],"created_at":"2024-10-13T05:07:08.419Z","updated_at":"2025-10-04T16:18:14.749Z","avatar_url":"https://github.com/frenzzy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-to-jsx-loader\n\n[Webpack](https://webpack.js.org/) loader that allows to load SVG files as [stateless functional](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components) [React](http://facebook.github.io/react/) components with [svg-to-jsx](https://github.com/janjakubnanista/svg-to-jsx).\n\n[![NPM version](http://img.shields.io/npm/v/svg-to-jsx-loader.svg?style=flat-square)](https://www.npmjs.com/package/svg-to-jsx-loader)\n[![NPM downloads](http://img.shields.io/npm/dm/svg-to-jsx-loader.svg?style=flat-square)](https://www.npmjs.com/package/svg-to-jsx-loader)\n[![Build Status](http://img.shields.io/travis/frenzzy/svg-to-jsx-loader/master.svg?style=flat-square)](https://travis-ci.org/frenzzy/svg-to-jsx-loader)\n[![Coverage Status](https://img.shields.io/coveralls/frenzzy/svg-to-jsx-loader.svg?style=flat-square)](https://coveralls.io/github/frenzzy/svg-to-jsx-loader)\n[![Dependency Status](http://img.shields.io/david/frenzzy/svg-to-jsx-loader.svg?style=flat-square)](https://david-dm.org/frenzzy/svg-to-jsx-loader)\n\n## Installation\n\nUsing [npm](https://www.npmjs.com/):\n\n```shell\n$ npm install svg-to-jsx-loader --save-dev\n```\n\n## Usage\n\nWebpack documentation: [Using loaders](https://webpack.js.org/concepts/loaders/)\n\nIn your `webpack.config.js`, add the `svg-to-jsx-loader`, chained with the [`babel-loader`](https://babeljs.io/docs/setup/#webpack2):\n\n```js\nrules: [\n  {\n    test: /\\.svg$/,\n    loaders: [\n      'babel-loader', // v5\n      'svg-to-jsx-loader'\n    ]\n  }\n]\n```\n\nOr you can find a working example in [test/webpack.config.js](https://github.com/frenzzy/svg-to-jsx-loader/blob/master/test/webpack.config.js) file:\n\n```js\nrules: [\n  {\n    test: /\\.(js|svg)$/i,\n    loader: 'babel-loader', // v6 or later\n    exclude: /node_modules/,\n    query: {\n      presets: ['react']\n    }\n  },\n  {\n    test: /\\.svg$/i,\n    loader: 'svg-to-jsx-loader'\n  }\n]\n```\n\n### Input example\n\n```svg\n\u003c?xml version=\"1.0\" encoding=\"iso-8859-1\"?\u003e\n\u003c!-- 001-forward-icon.svg --\u003e\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"\u003e\n  \u003cpath d=\"M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z\"/\u003e\n\u003c/svg\u003e\n```\n\n### Output example\n\n```js\nimport React from 'react';\n\nfunction ForwardIcon(props) {\n  return (\n    \u003csvg height=\"24\" width=\"24\" version=\"1.1\" viewBox=\"0 0 24 24\" {...props}\u003e\n      \u003cpath d=\"M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z\"/\u003e\n    \u003c/svg\u003e\n  );\n}\n\nexport default ForwardIcon;\n```\n\n## Inspiration\n\n- [svg-jsx-loader](https://github.com/janjakubnanista/svg-jsx-loader)\n- [react-svg-loader](https://github.com/boopathi/react-svg-loader)\n- [svg-to-jsx](https://github.com/janjakubnanista/svg-to-jsx)\n\n## License\n\nThis source code is licensed under the MIT license found in the [LICENSE.txt](https://github.com/frenzzy/svg-to-jsx-loader/blob/master/LICENSE.txt) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrenzzy%2Fsvg-to-jsx-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrenzzy%2Fsvg-to-jsx-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrenzzy%2Fsvg-to-jsx-loader/lists"}