docs Framework Adapters

Framework Adapters

Relaxicons generates idiomatic components for different ecosystems.

The prop contract

Every component (except raw SVG and Blade attribute-merge) exposes the same props:

Prop	Default	Effect
`size`	`1em`	Sets `width` and `height`.
`color`	inherited	Applied as CSS `color`, which the icon’s `currentColor` resolves to — recolors both outline and filled icons. Leave unset to inherit the surrounding text color.
`strokeWidth`	the icon’s own value	Overrides stroke width; defaults to whatever the source icon used (e.g. `2` for Lucide).
`className` / `class`	—	Merged onto the root `<svg>`.

The icon’s own fill/stroke are preserved, so outline icons stay outlines. color recolors via currentColor rather than forcing a fill, so it never turns an outline icon into a solid shape.

React (Vite / Next.js / RSC)

Functional component using JSX/TSX.
color is applied via style; source SVG attributes (including fill="none") are preserved.
RSC-safe variant available via --framework next-rsc.
Named + default export: HomeIcon.

Vue

Single File Component with real, typed props and inheritAttrs: false.
size, color, strokeWidth are declared props; any other attribute (including class) is forwarded via v-bind="$attrs".

Angular

Standalone component with @Component decorator.
@Input() properties: size, color, strokeWidth.
color binds to [style.color]; selector derived from kebab-case id: icon-home.

Laravel (Blade)

Blade component using @props(['size', 'color', 'strokeWidth']).
Attributes are merged onto the <svg> via $attributes->merge([...]), so class/style pass through.
Use as <x-home-icon size="24" color="red" />.

Svelte

.svelte component with exported props size, color, strokeWidth, and class (aliased). Extra attributes forwarded via $$restProps.

Solid

JSX component; props size, color, strokeWidth, class, style are split from the rest and spread via splitProps.

Web Components

Custom element with Shadow DOM. Observed attributes: size, color, stroke-width, class. Attributes are applied to the SVG programmatically after render.

Barrel exports

For JS/TS component frameworks — React, Next, Vue, Svelte, Solid, and Angular — each added icon is also appended to an index.js/index.ts barrel (kept sorted), so you can import { HomeIcon } from './icons'. Laravel, Web Components, and --raw output do not generate a barrel.

Raw SVG

Use --raw to write optimized SVG instead of a component wrapper.

relaxicons add lucide:home --raw

Attribute Normalization

The transformer removes explicit width/height and applies currentColor for theming while preserving the icon’s fill/stroke style. See Transform Pipeline for details.

Extensibility

Custom templates: set templatesDir in relaxicons.config.json to point to your template directory. Supported engines: .hbs (Handlebars), .ejs (EJS), or .js (module exporting a function(context) => string). Files are resolved by framework id, e.g. react.hbs, vue.ejs, angular.js, webc.hbs.