@unmade/svg-helpers

A set of standalone helper functions for working with SVG content, designed for modular imports. Each helper module can be imported individually for optimal bundle size and clarity.

Installation

npm install @unmade/svg-helpers

Usage

You can import specific helpers or groups of helpers directly from the package using subpath imports:

// Import a specific helper from the colours module
import { getUniqueColoursFromSVG } from '@unmade/svg-helpers/colours';

// Import all helpers from the colours module
import * as colours from '@unmade/svg-helpers/colours';

Exported Modules

colours

Helpers for extracting and working with colour information in SVGs.

Exports

• getUniqueColoursFromSVG(svg: SVGElement): string[]
  • Returns a list of unique hex colours used in the SVG (expands short hex codes to full length).
• getColourableElements(svg: SVGElement): SVGElement[]
  • Returns all SVG elements that can have a colour (fill, stroke, stop-color, etc).
• expandHex(short: string): string
  • Converts a short hex colour (e.g. #abc) to full length (e.g. #aabbcc).

Adding More Helpers

To add a new helper module, create a new folder in src/ with an index.ts file. It will be automatically exported as a subpath import:

import { yourHelper } from '@unmade/svg-helpers/your-module';

For more details, see the source code in each module.