Options

The vanilla package exposes the shared styling model as createElement options, plus a couple specific to imperative rendering and the createIcons helper.

createElement optionsCopy Anchor Link

createIcons optionsCopy Anchor Link

Both packages share the same styling model: four knobs — size, color, strokeWidth, and absoluteStrokeWidth — plus the stroke/fill variant distinction. Only the surface syntax differs (React props vs createElement options).

How color behaves per variantCopy Anchor Link

• Stroke variant — color sets the stroke attribute; the interior stays transparent (fill: none).
• Fill variant — color sets the fill attribute; strokeWidth and absoluteStrokeWidth are ignored.

How absoluteStrokeWidth worksCopy Anchor Link

Normally a stroke scales with the icon: a strokeWidth of 2 looks thicker at size={48} than at size={24}. With absoluteStrokeWidth, the rendered stroke is computed as:

renderedStrokeWidth = strokeWidth × 24 / size

So the visual thickness matches your strokeWidth value at any size — handy when icons of different sizes need to read as the same weight.

CSS hooksCopy Anchor Link

Every rendered icon carries two class names you can target globally: jedd (on every icon) and jedd-<name> (per icon). Any class name you pass is appended to these.

.jedd {
  vertical-align: middle;
}
.jedd-arrow-down-left {
  /* style one specific icon */
}

You can also set defaults for every icon this way, for example a lighter stroke:

.jedd {
  stroke-width: 1.5;
}

CSS takes precedence over the attributes the options set, so where a rule like this applies, setting strokeWidth on a single icon has no effect.

To keep the stroke the same visual thickness at any size with CSS — the equivalent of absoluteStrokeWidth, but also when the size comes from CSS width / height — add vector-effect to the icon's shapes:

.jedd * {
  vector-effect: non-scaling-stroke;
}

Variant selectionCopy Anchor Link

In vanilla you select the variant with the variant option on createElement (or via attrs.variant in createIcons) — "stroke" (default) or "fill". Import filled icon data from the @jedd-icons/core/fill subpath.

Exported helpers and typesCopy Anchor Link

import {
  createElement,
  createIcons,
  defaultAttributes,
  variantDefaults,
  resolveStrokeWidth,
} from "@jedd-icons/core";
import type {
  IconNode,
  Variant,
  CreateElementOptions,
  CreateIconsOptions,
} from "@jedd-icons/core";