Menu

docs Transform Pipeline

Transform Pipeline

Relaxicons fetches raw SVG, then processes it to make theme-friendly components.

Steps

  1. Remove width and height attributes to allow flexible sizing.
  2. Apply currentColor for theming — without breaking the icon’s style:
    • Outline icons (root fill="none" or a root stroke, e.g. Lucide, Feather, Tabler) keep their strokes and are left unfilled, so they render as outlines rather than solid blobs.
    • Filled icons get fill="currentColor" on shape children that don’t already declare a fill.
    • A child with its own fill (including fill="none") is always preserved.
  3. Strip extraneous data- attributes that don’t affect rendering.
  4. Preserve viewBox for scaling.

Optional: If optimizeSvg is enabled in config and svgo is installed, the raw SVG is optimized with SVGO before transformation. Provide an object to pass custom SVGO options.

Result Structure

Internal representation:

{
  attrs: { viewBox: '0 0 24 24', fill: 'none' },
  children: '<path ... />'
}

This gets fed into the specific framework template.

Customization

You can modify transform logic in src/utils/transformSvg.js.

Testing

Jest tests (tests/transformSvg.test.js) assert attribute normalization.