From e05157e6bd6c464396605fa651603d09c67207e9 Mon Sep 17 00:00:00 2001 From: Tane Morgan <464864+tanem@users.noreply.github.com> Date: Tue, 17 Feb 2026 06:52:47 +1300 Subject: [PATCH] Tidy README.md --- README.md | 20 +------------------- examples/sprite-usage/README.md | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 19 deletions(-) create mode 100644 examples/sprite-usage/README.md diff --git a/README.md b/README.md index 1b68874f..8c15e4c1 100644 --- a/README.md +++ b/README.md @@ -28,25 +28,7 @@ SVGInjector(document.getElementById('inject-me')) ## SVG Sprite Support -You can inject individual symbols from an SVG sprite sheet by appending a fragment identifier to the `data-src` URL. The library will fetch the sprite file, extract the `` matching the fragment ID, and inject it as a standalone inline ``. - -```html -
-
-``` - -```js -import { SVGInjector } from '@tanem/svg-injector' - -SVGInjector(document.getElementsByClassName('icon')) -``` - -When `cacheRequests` is `true` (the default), the sprite file is fetched once and reused for all symbol extractions, so multiple icons from the same sprite file result in only a single HTTP request. - -**Limitations:** - -- Each `` must be self-contained. Shared `` at the root level of the sprite (e.g. gradients or filters referenced by multiple symbols) are **not** copied into the extracted SVG. If your symbols depend on shared definitions, use individual SVG files instead or inline the required definitions within each ``. -- Only `` elements are supported for extraction. The fragment ID must match the `id` of a `` in the sprite. +You can inject individual symbols from an SVG sprite sheet by appending a fragment identifier (e.g. `sprite.svg#icon-star`) to the `data-src` URL. See the [sprite usage example](https://github.com/tanem/svg-injector/tree/master/examples/sprite-usage) for full documentation and known limitations. ## Avoiding XSS diff --git a/examples/sprite-usage/README.md b/examples/sprite-usage/README.md new file mode 100644 index 00000000..d4c4230c --- /dev/null +++ b/examples/sprite-usage/README.md @@ -0,0 +1,24 @@ +# Sprite Usage + +Inject individual symbols from an SVG sprite sheet by appending a fragment identifier to the `data-src` URL. The library fetches the sprite file, extracts the `` matching the fragment ID, and injects it as a standalone inline ``. + +## Usage + +```html +
+
+``` + +```js +import { SVGInjector } from '@tanem/svg-injector' + +SVGInjector(document.getElementsByClassName('icon')) +``` + +When `cacheRequests` is `true` (the default), the sprite file is fetched once and reused for all symbol extractions. Multiple icons from the same sprite file result in only a single HTTP request. + +## Limitations + +- Each `` must be self-contained. Shared `` at the root level of the sprite (e.g. gradients or filters referenced by multiple symbols) are **not** copied into the extracted SVG. If your symbols depend on shared definitions, use individual SVG files instead or inline the required definitions within each ``. +- Only `` elements are supported for extraction. The fragment ID must match the `id` of a `` in the sprite. +- `` chains within symbols are not resolved. If a symbol internally references another symbol via ``, the reference will break after extraction.