ump-plugin-svg

SVG components for UMP. Drop-in replacement for react-native-svg — same component shape (Svg, Path, Rect, Circle, Ellipse, Line, Polygon, Polyline, G, Defs, Symbol, Use, Text, TSpan, TextPath, Image, LinearGradient, RadialGradient, Stop, Pattern, ClipPath, Mask, Marker).

Backed by Skia paint commands on native (Android / iOS / HarmonyOS) and plain <svg> DOM on the browser. Path / transform / paint reference parsers (parsePath, parseTransform, parsePaintRef) are also exposed for tooling.

Text supports SVG text spacing props on native and H5: letterSpacing and wordSpacing accept numbers, px / dp strings, and normal (treated as 0). On H5 they are forwarded as letter-spacing / word-spacing; on native they are rendered through Skia. Native currently applies wordSpacing only to ASCII spaces and does not fully match browser shaping for complex grapheme clusters, ZWJ emoji, or ligatures.

Install

npm install ump-plugin-svg ump-core

ump-core is a peer dependency.

Usage

UMP uses the automatic JSX runtime (jsx: "react-jsx" + jsxImportSource: "ump-core"); no per-file createElement import is needed.

import { Svg, Path, Circle } from 'ump-plugin-svg';

export function Logo() {
    return (
        <Svg width={120} height={120} viewBox="0 0 120 120">
            <Circle cx={60} cy={60} r={50} fill="#4299E1" />
            <Path d="M30 60 L55 85 L90 35" stroke="#FFF" strokeWidth={8} fill="none" />
        </Svg>
    );
}

See the main README.

License

MIT — see LICENSE.