{"id":22131507,"url":"https://github.com/sairion/svg-inline-react","last_synced_at":"2025-10-07T19:23:42.120Z","repository":{"id":2363959,"uuid":"46330417","full_name":"sairion/svg-inline-react","owner":"sairion","description":"Inline svg wrapper component for React","archived":false,"fork":false,"pushed_at":"2022-03-02T03:33:29.000Z","size":319,"stargazers_count":131,"open_issues_count":16,"forks_count":35,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T15:06:53.359Z","etag":null,"topics":["inline-svg","react","svg"],"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/sairion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-17T07:28:44.000Z","updated_at":"2024-08-15T08:12:05.000Z","dependencies_parsed_at":"2022-08-06T12:15:15.344Z","dependency_job_id":null,"html_url":"https://github.com/sairion/svg-inline-react","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sairion%2Fsvg-inline-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sairion%2Fsvg-inline-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sairion%2Fsvg-inline-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sairion%2Fsvg-inline-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sairion","download_url":"https://codeload.github.com/sairion/svg-inline-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234923,"owners_count":20905854,"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":["inline-svg","react","svg"],"created_at":"2024-12-01T18:34:52.627Z","updated_at":"2025-10-07T19:23:42.028Z","avatar_url":"https://github.com/sairion.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `svg-inline-react`: Inline SVG wrapper component for React\n\nThis component wraps `dangerouslyInnerHTML` prop for easier use. Inlining SVG has pros and cons; See [\"Using SVG\"](https://css-tricks.com/using-svg/) for further detail. However, I recommended to use static svg transformed as React component, since React now supports svg properly.\n\n## note for 1.x.x user: transpiling is discontinued\n\nI removed `dist` and `es` and made `lib` (which is ES2015 source) default, and there are several reason for it. For now use of ES2015 (and modules) is widespread, there are many tools supporting it (i.e. Webpack 2, Rollup), and you will use them anyway – if you are using React/etc. If you want to stay in CommonJS land, please specify deps as `1.x.x`. i.e) `svg-inline-react: 1.x.x`\n\n## Usage\n\nYou can use [`svg-inline-loader`](https://github.com/sairion/svg-inline-loader) with [Webpack](https://webpack.github.io) to inline SVG.\n\nExample:\n\n```jsx\nimport InlineSVG from 'svg-inline-react';\n\n// Use with loader\n\u003cInlineSVG src={require(\"svg-inline-loader!icon.svg\")} /\u003e\n\n// Use without loader\nconst svgSource = `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"xMidYMid\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\"\u003e\n  \u003cg id=\"artboard-1\"\u003e\n    \u003cpath d=\"m-115.8,119.6c-12.8-22-3.2,33.6-3.2,33.6,8.8,34.4,145.6-17.6,145.6-17.6s168.8-30.4,180-34.4,96.8,1.6,96.8,1.6l-4.8-22.4c-64.8-46.4-75.2-16.8-88.8-20.8s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2-31.62-23.007-16.8,8.8c22.23,47.707-60.759,37.627-75.2,28-16.8-11.2,7.2,18.4,7.2,18.4,18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4-8.8-2.4-6.865-21.256-40,3.2c-33.6,24.8-44,8.8-44,8.8l-7.2-4.8z\" class=\"cls-1\"/\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e`;\n\u003cInlineSVG src={svgSource} /\u003e\n```\n\n### prop `src` : string\n\nvalid SVG element string.\n\n### prop `element` : string\n\nYou can change element where svg included using `element` prop, default is `\u003ci /\u003e`. But self closed tags like `img` is not allowed, and an error will be thrown from React side.\n\n### prop `raw` : bool (experimental!)\n\nThis prop allows your svg file to be rendered directly, without a container element wraps it. This is an experimental feature. Also, the prop will be ignored on server side rendering environment.\n\n## Notes\n\n[inspired by](https://gist.github.com/MoOx/1eb30eac43b2114de73a)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsairion%2Fsvg-inline-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsairion%2Fsvg-inline-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsairion%2Fsvg-inline-react/lists"}