tessl/npm-react-native-svg

SVG library for React Native applications with comprehensive element support and cross-platform compatibility

—

Pending

Overview

Eval results

Files

XML Processing

Name: tessl/npm-react-native-svg
Author: tessl

Utilities for loading, parsing, and rendering SVG content from XML strings and remote URIs, enabling dynamic SVG content integration.

Capabilities

SvgXml

Renders SVG content from XML strings with error handling and fallback support.

/**
 * Renders SVG from XML string
 * @param xml - SVG XML string to render
 * @param onError - Error handler function
 * @param override - Props to override on root SVG element
 * @param fallback - Component to render on error
 */
interface XmlProps extends SvgProps, AdditionalProps {
  xml: string | null;
}

interface AdditionalProps {
  onError?: (error: Error) => void;
  override?: object;
  onLoad?: () => void;
  fallback?: JSX.Element;
}

declare function SvgXml(props: XmlProps): JSX.Element;

Usage Examples:

import React, { useState } from "react";
import { SvgXml } from "react-native-svg";

// Basic XML rendering
const svgXml = `
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="red" />
    <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
  </svg>
`;

function XmlExample() {
  return (
    <SvgXml xml={svgXml} width="100" height="100" />
  );
}

// XML with error handling
function XmlWithErrorHandling() {
  const [error, setError] = useState<string | null>(null);
  
  const invalidXml = "<svg><invalid-element></svg>";
  
  return (
    <SvgXml
      xml={invalidXml}
      width="100"
      height="100"
      onError={(err) => setError(err.message)}
      fallback={<Text>Failed to load SVG</Text>}
    />
  );
}

// Override SVG properties
function XmlWithOverride() {
  const xml = `<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>`;
  
  return (
    <SvgXml
      xml={xml}
      width="200"
      height="200"
      override={{ fill: "green" }}
    />
  );
}

SvgUri

Fetches and renders SVG content from remote URLs with loading states and error handling.

/**
 * Fetches and renders SVG from URI
 * @param uri - URL to fetch SVG content from
 * @param onError - Error handler function  
 * @param onLoad - Success callback when SVG loads
 * @param fallback - Component to render on error
 * @param override - Props to override on root SVG element
 */
interface UriProps extends SvgProps, AdditionalProps {
  uri: string | null;
}

declare function SvgUri(props: UriProps): JSX.Element;

Usage Examples:

import React, { useState } from "react";
import { SvgUri } from "react-native-svg";
import { ActivityIndicator, Text } from "react-native";

// Basic URI loading
function UriExample() {
  return (
    <SvgUri
      uri="https://example.com/icon.svg"
      width="100"
      height="100"
    />
  );
}

// URI with loading states
function UriWithLoading() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  return (
    <>
      {loading && <ActivityIndicator />}
      <SvgUri
        uri="https://example.com/logo.svg"
        width="200"
        height="100"
        onLoad={() => setLoading(false)}
        onError={(err) => {
          setLoading(false);
          setError(err.message);
        }}
        fallback={<Text>Failed to load SVG</Text>}
      />
    </>
  );
}

// Data URI support
function DataUriExample() {
  const dataUri = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9InJlZCIvPjwvc3ZnPg==";
  
  return (
    <SvgUri
      uri={dataUri}
      width="100"
      height="100"
    />
  );
}

SvgAst

Renders SVG from pre-parsed Abstract Syntax Tree for performance optimization.

/**
 * Renders SVG from parsed AST
 * @param ast - Parsed SVG AST structure
 * @param override - Props to override on root SVG element
 */
interface AstProps extends SvgProps, AdditionalProps {
  ast: JsxAST | null;
}

declare function SvgAst(props: AstProps): JSX.Element | null;

Usage Examples:

import { SvgAst, parse } from "react-native-svg";

// Pre-parse XML for reuse
const svgXml = `<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>`;
const parsedAst = parse(svgXml);

function AstExample() {
  return (
    <SvgAst
      ast={parsedAst}
      width="100"
      height="100"
    />
  );
}

Parsing Functions

Core parsing utilities for converting XML strings to renderable AST structures.

/**
 * Parses SVG XML string into JSX AST
 * @param xml - SVG XML string to parse
 * @returns Parsed JSX AST or null if parsing fails
 */
declare function parse(xml: string): JsxAST | null;

/**
 * Converts kebab-case to camelCase for React props
 * @param str - String to convert
 * @returns CamelCase string
 */
declare function camelCase(str: string): string;

Usage Examples:

import { parse, camelCase } from "react-native-svg";

// Parse XML to AST
const xmlString = `
  <svg width="200" height="200">
    <rect x="50" y="50" width="100" height="100" fill="green"/>
  </svg>
`;

const ast = parse(xmlString);
console.log(ast); // JsxAST structure

// Convert attribute names
const converted = camelCase("stroke-width"); // "strokeWidth"
const converted2 = camelCase("text-anchor"); // "textAnchor"

Utility Functions

Additional utilities for handling SVG data and URIs.

/**
 * Fetches text content from URI with support for data URIs and base64
 * @param uri - URI to fetch from (http/https/data/file)
 * @returns Promise resolving to text content or null
 */
declare function fetchText(uri?: string): Promise<string | null>;

Usage Examples:

import { fetchText } from "react-native-svg";

// Fetch SVG from URL
async function loadSvgContent() {
  try {
    const svgText = await fetchText("https://example.com/icon.svg");
    if (svgText) {
      // Use with SvgXml
      return svgText;
    }
  } catch (error) {
    console.error("Failed to fetch SVG:", error);
  }
  return null;
}

// Handle data URIs
async function loadDataUri() {
  const dataUri = "data:image/svg+xml;utf8,<svg width='100' height='100'><circle cx='50' cy='50' r='40' fill='red'/></svg>";
  const content = await fetchText(dataUri);
  return content; // Decoded SVG string
}

// Handle base64 data URIs
async function loadBase64Uri() {
  const base64Uri = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9InJlZCIvPjwvc3ZnPg==";
  const content = await fetchText(base64Uri);
  return content; // Decoded SVG string
}

AST Structure Types

/**
 * Base AST node structure
 */
interface AST {
  tag: string;
  style?: Styles;
  styles?: string;
  priority?: Map<string, boolean | undefined>;
  parent: AST | null;
  children: (AST | string)[] | (JSX.Element | string)[];
  props: {
    [prop: string]: Styles | string | undefined;
  };
  Tag: ComponentType<ComponentProps<any>>;
}

/**
 * XML-specific AST node
 */
interface XmlAST extends AST {
  children: (XmlAST | string)[];
  parent: XmlAST | null;
}

/**
 * JSX-specific AST node
 */
interface JsxAST extends AST {
  children: (JSX.Element | string)[];
}

/**
 * Style definitions
 */
interface Styles {
  [key: string]: string | number | undefined;
}

/**
 * Middleware function for processing XML
 */
type Middleware = (ast: XmlAST) => XmlAST;

Advanced XML Processing

Custom Error Handling

function AdvancedXmlComponent() {
  const [svgContent, setSvgContent] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  
  const handleError = (err: Error) => {
    console.error("SVG Error:", err);
    setError(err);
    // Log to analytics, show user-friendly message, etc.
  };
  
  return (
    <SvgXml
      xml={svgContent}
      width="200"
      height="200"
      onError={handleError}
      fallback={
        <View style={{ width: 200, height: 200, justifyContent: 'center', alignItems: 'center' }}>
          <Text>SVG could not be loaded</Text>
        </View>
      }
    />
  );
}

Dynamic SVG Loading

function DynamicSvgLoader({ url }: { url: string }) {
  const [svgData, setSvgData] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const loadSvg = async () => {
      try {
        setLoading(true);
        const data = await fetchText(url);
        setSvgData(data);
      } catch (error) {
        console.error("Failed to load SVG:", error);
      } finally {
        setLoading(false);
      }
    };
    
    loadSvg();
  }, [url]);
  
  if (loading) {
    return <ActivityIndicator />;
  }
  
  return (
    <SvgXml
      xml={svgData}
      width="100%"
      height="200"
      preserveAspectRatio="xMidYMid meet"
    />
  );
}

SVG Content Validation

function validateSvgContent(xml: string): boolean {
  try {
    const ast = parse(xml);
    return ast !== null && ast.tag === 'svg';
  } catch {
    return false;
  }
}

function SafeSvgRenderer({ xml }: { xml: string }) {
  const isValid = validateSvgContent(xml);
  
  if (!isValid) {
    return <Text>Invalid SVG content</Text>;
  }
  
  return <SvgXml xml={xml} width="100" height="100" />;
}

Install with Tessl CLI