{"repo":"tanem/react-svg","free":true,"listed":false,"github":"https://github.com/tanem/react-svg","clone":"git clone https://github.com/tanem/react-svg.git","description":":art: A React component that injects SVG into the DOM.","language":"TypeScript","stars":883,"topics":["dom","html","images","img","javascript","react","scalable-vector-graphics","svg","svginjector","typescript"],"license":"MIT","category":"ui-components","readme_excerpt":"react-svg A React component that injects SVG into the DOM. When To Use This Basic Usage API Live Examples Installation Security FAQ Contributing License When To Use This This component uses @tanem/svg-injector to fetch an SVG from a given URL and inject its markup into the DOM (why?). Fetched SVGs are cached, so multiple uses of the same SVG only require a single request. Injection costs a network request and two wrapper elements, and it earns that cost in one case: the SVG's URL isn't known until the app runs, and the markup has to be reachable by CSS. An tag renders an SVG but its contents can't be styled, animated or scripted from the page. - SVGs live in your repo and are known at build time. Reach for a build-time transform - SVGR, vite-plugin-svgr, or your bundler's SVG loader. They compile each file to a React component, so there's no runtime fetch, and unused icons are tree-shaken out. - The URL is only known at runtime. SVGs from a CMS or an API, user uploads, a CDN-hosted icon set, or a path assembled from data. That's what this component is for. - You only need to display the image. Use . It's cheaper than either option above. Basic Usage API Props Prop Type Default ----------------------------------------------------------- ------------------------------- ---------- src string required afterInjection (svg: SVGSVGElement) = void noop beforeInjection (svg: SVGSVGElement) = void noop desc string '' evalScripts 'always' \\ 'once' \\ 'never' 'never' fallback React.Elemen","default_branch":null,"files":null,"tree":[],"storefront":"/r/tanem","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/tanem/react-svg/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}