{"id":13809330,"url":"https://github.com/gilbarbara/react-inlinesvg","last_synced_at":"2026-04-01T20:44:04.956Z","repository":{"id":15297154,"uuid":"18026867","full_name":"gilbarbara/react-inlinesvg","owner":"gilbarbara","description":"An SVG loader component for ReactJS","archived":false,"fork":false,"pushed_at":"2026-03-29T19:36:35.000Z","size":3270,"stargazers_count":1311,"open_issues_count":0,"forks_count":107,"subscribers_count":8,"default_branch":"main","last_synced_at":"2026-04-01T05:51:01.431Z","etag":null,"topics":["react","react-components","remote-svgs","svg"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo","language":"TypeScript","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/gilbarbara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2014-03-23T05:04:09.000Z","updated_at":"2026-03-29T19:36:36.000Z","dependencies_parsed_at":"2024-02-28T01:31:35.290Z","dependency_job_id":"c52e57c4-6e35-422b-8815-41ae5cb2e89a","html_url":"https://github.com/gilbarbara/react-inlinesvg","commit_stats":{"total_commits":319,"total_committers":23,"mean_commits":"13.869565217391305","dds":"0.24764890282131657","last_synced_commit":"c8e78ee8dc031d2265cab6e5380314f6d6b28f87"},"previous_names":["matthewwithanm/react-inlinesvg"],"tags_count":71,"template":false,"template_full_name":null,"purl":"pkg:github/gilbarbara/react-inlinesvg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-inlinesvg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-inlinesvg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-inlinesvg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-inlinesvg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilbarbara","download_url":"https://codeload.github.com/gilbarbara/react-inlinesvg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-inlinesvg/sbom","scorecard":{"id":426711,"data":{"date":"2025-08-11","repo":{"name":"github.com/gilbarbara/react-inlinesvg","commit":"c4db6b26c8d58805714be980a7d1ca98db27f60c"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.6,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":1,"reason":"Found 3/22 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/gilbarbara/react-inlinesvg/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/gilbarbara/react-inlinesvg/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/gilbarbara/react-inlinesvg/main.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/gilbarbara/react-inlinesvg/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/gilbarbara/react-inlinesvg/main.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/gilbarbara/react-inlinesvg/main.yml/main?enable=pin","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   3 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/main.yml:17"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":5,"reason":"SAST tool is not run on all commits -- score normalized to 5","details":["Warn: 8 commits out of 15 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"22 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T02:23:17.273Z","repository_id":15297154,"created_at":"2025-08-19T02:23:17.274Z","updated_at":"2025-08-19T02:23:17.274Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31291781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","react-components","remote-svgs","svg"],"created_at":"2024-08-04T01:02:18.749Z","updated_at":"2026-04-01T20:44:04.947Z","avatar_url":"https://github.com/gilbarbara.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-inlinesvg\n\n[![NPM version](https://badge.fury.io/js/react-inlinesvg.svg)](https://www.npmjs.com/package/react-inlinesvg) [![CI](https://github.com/gilbarbara/react-inlinesvg/actions/workflows/ci.yml/badge.svg)](https://github.com/gilbarbara/react-inlinesvg/actions/workflows/ci.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-inlinesvg\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-inlinesvg) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-inlinesvg\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-inlinesvg)\n\nLoad inline, local, or remote SVGs in your React components.\n\nView the [demo](https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo)\n\n## Highlights\n\n- 🏖 **Easy to use:** Just set the `src`\n- 🛠 **Flexible:** Personalize the options to fit your needs\n- ⚡️ **Smart:** Async requests will be cached.\n- 🚀 **SSR:** Safe for server-side rendering\n\n## Usage\n\n```sh\nnpm i react-inlinesvg\n```\n\nAnd import it into your code:\n\n```tsx\nimport SVG from 'react-inlinesvg';\n\nexport default function App() {\n  return (\n    \u003cmain\u003e\n      \u003cSVG\n        src=\"https://cdn.svglogos.dev/logos/react.svg\"\n        width={128}\n        height=\"auto\"\n        title=\"React\"\n      /\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n## Props\n\n**src** {string} - **required**.\nThe SVG to load. It accepts:\n\n- A URL or path to an SVG file (absolute or relative, including from a bundler import)\n- A data URI (base64 or URL-encoded)\n- A raw SVG string\n\n**baseURL** {string}\nA URL to prepend to `url()` references inside the SVG when using `uniquifyIDs`. Required if your page uses an HTML `\u003cbase\u003e` tag.\n\n**children** {ReactNode}  \nThe fallback content in case of a fetch error or unsupported browser.\n\n```\n\u003cSVG src=\"...\"\u003e\n\t\u003cimg src=\"...\" alt=\"fallback\" /\u003e\n\u003c/SVG\u003e\n```\n\n**cacheRequests** {boolean} ▶︎ `true`\nCache remote SVGs in memory. When used with the [CacheProvider](#caching), requests are also persisted in the browser cache.\n\n**description** {string}  \nA description for your SVG. It will override an existing `\u003cdesc\u003e` tag.\n\n**fetchOptions** {RequestInit}  \nCustom options for the [request](https://developer.mozilla.org/en-US/docs/Web/API/Request/Request).\n\n**innerRef** {React.Ref\\\u003cSVGElement | null\u003e}\nSet a ref on the SVG element.  \n\n\u003eThe SVG is processed and parsed so the ref won't be set on the initial render.\nYou can use the `onLoad` callback to get and use the ref instead.\n\n**loader** {node}  \nA component to be shown while the SVG is loading.\n\n**onError** {function}  \nA callback to be invoked if loading the SVG fails.  \nThis will receive a single argument with:\n\n- a `FetchError` with:\n\n```typescript\n{\n  message: string;\n  type: string;\n  errno: string;\n  code: string;\n}\n```\n\n- or an `Error` for issues like missing `src`, unsupported browser, or invalid SVG content.\n\n**onLoad** {function}.  \nA callback to be invoked upon successful load.  \nThis will receive 2 arguments: the `src` prop and an `isCached` boolean\n\n**preProcessor** {function}\nA function to pre-process the SVG string before parsing. Receives the SVG string and must return a string.\n\n**title** {string | null}  \nA title for your SVG. It will override an existing `\u003ctitle\u003e` tag.  \nIf `null` is passed, the `\u003ctitle\u003e` tag will be removed.\n\n**uniqueHash** {string} ▶︎ a random 8 characters string `[A-Za-z0-9]`  \nA string to use with `uniquifyIDs`.\n\n**uniquifyIDs** {boolean} ▶︎ `false`  \nCreate unique IDs for each icon.\n\n\u003e Any additional props will be passed down to the SVG element.\n\n### Example\n\n```tsx\n\u003cSVG\n  baseURL=\"/home\"\n  cacheRequests={true}\n  description=\"The React logo\"\n  loader={\u003cspan\u003eLoading...\u003c/span\u003e}\n  onError={(error) =\u003e console.log(error.message)}\n  onLoad={(src, isCached) =\u003e console.log(src, isCached)}\n  preProcessor={(code) =\u003e code.replace(/fill=\".*?\"/g, 'fill=\"currentColor\"')}\n  src=\"https://cdn.svglogos.dev/logos/react.svg\"\n  title=\"React\"\n  uniqueHash=\"a1f8d1\"\n  uniquifyIDs={true}\n/\u003e\n```\n\n## Caching\n\nYou can use the browser's cache to store the SVGs permanently.  \nTo set it up, wrap your app with the cache provider:\n\n```tsx\nimport { createRoot } from 'react-dom/client';\nimport CacheProvider from 'react-inlinesvg/provider';\nimport App from './App';\n\ncreateRoot(document.getElementById('root')!).render(\n  \u003cCacheProvider\u003e\n    \u003cApp /\u003e\n  \u003c/CacheProvider\u003e\n);\n```\n\nThe `CacheProvider` accepts an optional `name` prop to customize the cache storage name.\n\n\u003e Be aware of the limitations of the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n\n## Browser Support\n\nAny browser that supports inlining [SVGs](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg) and [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) will work.\n\nIf you need to support legacy browsers, include a polyfill for `fetch` in your app.\n\n## CORS\n\nIf you are loading remote SVGs, you must ensure they have [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) headers.\n\n## Why do you need this package?\n\nOne reason SVGs are awesome is that you can style them with CSS.\nUnfortunately, this is not useful in practice because the style element has to be in the same document. This leaves you with three bad options:\n\n1. Embed the CSS in the SVG document\n   - Can't use your CSS preprocessors (LESS, SASS)\n   - Can't target parent elements (button hover, etc.)\n   - Makes maintenance difficult\n2. Link to a CSS file in your SVG document\n   - Sharing styles with your HTML means duplicating paths across your project, making maintenance a pain\n   - Not sharing styles with your HTML means extra HTTP requests (and likely\n     duplicating paths between different SVGs)\n   - Still can't target parent elements\n   - Your SVG becomes coupled to your external stylesheet, complicating reuse.\n3. Embed the SVG in your HTML\n   - Bloats your HTML\n   - SVGs can't be cached by browsers between pages.\n   - A maintenance nightmare\n\nBut there's an alternative that sidesteps these issues: load the SVG with a GET request and then embed it in the document. This is what this component does.\n\n### Note\n\nThe SVG [`\u003cuse\u003e`](https://css-tricks.com/svg-use-external-source/) element can be used to achieve something similar to this component. See [this article](https://taye.me/blog/svg/a-guide-to-svg-use-elements) for more information and [this table](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use#Browser_compatibility) for browser support and caveats.\n\n## Credits\n\nThanks to [@matthewwithanm](https://github.com/matthewwithanm) for creating this component and so kindly transferring it to me.\nI'll definitely keep up the good work! ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbarbara%2Freact-inlinesvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilbarbara%2Freact-inlinesvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbarbara%2Freact-inlinesvg/lists"}