mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
feat: add web implementation SvgXml and others component (#2382)
# Summary We want to make available SvgXml and other components in the web platform. ## Test Plan We can easily check how that works by opening `Test1813`. ## Compatibility | OS | Implemented | | ------- | :---------: | | Web | ✅ | --------- Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
This commit is contained in:
@@ -1,15 +1,16 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useEffect, Component } from 'react';
|
||||
import type { ImageSourcePropType } from 'react-native';
|
||||
import { Platform, Image } from 'react-native';
|
||||
|
||||
import { fetchText } from 'react-native-svg';
|
||||
import { Image, Platform, type ImageSourcePropType } from 'react-native';
|
||||
import { fetchText, type SvgProps } from 'react-native-svg';
|
||||
import { resolveAssetUri } from '../lib/resolveAssetUri';
|
||||
import { SvgCss, SvgWithCss } from './css';
|
||||
import type { SvgProps } from 'react-native-svg';
|
||||
|
||||
export function getUriFromSource(source: ImageSourcePropType) {
|
||||
const resolvedAssetSource = Image.resolveAssetSource(source);
|
||||
return resolvedAssetSource.uri;
|
||||
const resolvedAssetSource =
|
||||
Platform.OS === 'web'
|
||||
? resolveAssetUri(source)
|
||||
: Image.resolveAssetSource(source);
|
||||
return resolvedAssetSource?.uri;
|
||||
}
|
||||
|
||||
export function loadLocalRawResourceDefault(source: ImageSourcePropType) {
|
||||
@@ -39,7 +40,7 @@ export async function loadAndroidRawResource(uri: string) {
|
||||
|
||||
export function loadLocalRawResourceAndroid(source: ImageSourcePropType) {
|
||||
const uri = getUriFromSource(source);
|
||||
if (isUriAnAndroidResourceIdentifier(uri)) {
|
||||
if (uri && isUriAnAndroidResourceIdentifier(uri)) {
|
||||
return loadAndroidRawResource(uri);
|
||||
} else {
|
||||
return fetchText(uri);
|
||||
|
||||
10
src/xml.tsx
10
src/xml.tsx
@@ -78,7 +78,10 @@ export function SvgXml(props: XmlProps) {
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchText(uri: string) {
|
||||
export async function fetchText(uri?: string) {
|
||||
if (!uri) {
|
||||
return null;
|
||||
}
|
||||
const response = await fetch(uri);
|
||||
if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
|
||||
return await response.text();
|
||||
@@ -207,6 +210,11 @@ export function astToReact(
|
||||
): JSX.Element | string {
|
||||
if (typeof value === 'object') {
|
||||
const { Tag, props, children } = value;
|
||||
if (props?.class) {
|
||||
props.className = props.class;
|
||||
delete props.class;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tag key={index} {...props}>
|
||||
{(children as (AST | string)[]).map(astToReact)}
|
||||
|
||||
Reference in New Issue
Block a user