mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-06 16:32:24 +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 * as React from 'react';
|
||||||
import { useState, useEffect, Component } from 'react';
|
import { useState, useEffect, Component } from 'react';
|
||||||
import type { ImageSourcePropType } from 'react-native';
|
import { Image, Platform, type ImageSourcePropType } from 'react-native';
|
||||||
import { Platform, Image } from 'react-native';
|
import { fetchText, type SvgProps } from 'react-native-svg';
|
||||||
|
import { resolveAssetUri } from '../lib/resolveAssetUri';
|
||||||
import { fetchText } from 'react-native-svg';
|
|
||||||
import { SvgCss, SvgWithCss } from './css';
|
import { SvgCss, SvgWithCss } from './css';
|
||||||
import type { SvgProps } from 'react-native-svg';
|
|
||||||
|
|
||||||
export function getUriFromSource(source: ImageSourcePropType) {
|
export function getUriFromSource(source: ImageSourcePropType) {
|
||||||
const resolvedAssetSource = Image.resolveAssetSource(source);
|
const resolvedAssetSource =
|
||||||
return resolvedAssetSource.uri;
|
Platform.OS === 'web'
|
||||||
|
? resolveAssetUri(source)
|
||||||
|
: Image.resolveAssetSource(source);
|
||||||
|
return resolvedAssetSource?.uri;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function loadLocalRawResourceDefault(source: ImageSourcePropType) {
|
export function loadLocalRawResourceDefault(source: ImageSourcePropType) {
|
||||||
@@ -39,7 +40,7 @@ export async function loadAndroidRawResource(uri: string) {
|
|||||||
|
|
||||||
export function loadLocalRawResourceAndroid(source: ImageSourcePropType) {
|
export function loadLocalRawResourceAndroid(source: ImageSourcePropType) {
|
||||||
const uri = getUriFromSource(source);
|
const uri = getUriFromSource(source);
|
||||||
if (isUriAnAndroidResourceIdentifier(uri)) {
|
if (uri && isUriAnAndroidResourceIdentifier(uri)) {
|
||||||
return loadAndroidRawResource(uri);
|
return loadAndroidRawResource(uri);
|
||||||
} else {
|
} else {
|
||||||
return fetchText(uri);
|
return fetchText(uri);
|
||||||
|
|||||||
+9
-1
@@ -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);
|
const response = await fetch(uri);
|
||||||
if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
|
if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
|
||||||
return await response.text();
|
return await response.text();
|
||||||
@@ -207,6 +210,11 @@ export function astToReact(
|
|||||||
): JSX.Element | string {
|
): JSX.Element | string {
|
||||||
if (typeof value === 'object') {
|
if (typeof value === 'object') {
|
||||||
const { Tag, props, children } = value;
|
const { Tag, props, children } = value;
|
||||||
|
if (props?.class) {
|
||||||
|
props.className = props.class;
|
||||||
|
delete props.class;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tag key={index} {...props}>
|
<Tag key={index} {...props}>
|
||||||
{(children as (AST | string)[]).map(astToReact)}
|
{(children as (AST | string)[]).map(astToReact)}
|
||||||
|
|||||||
Reference in New Issue
Block a user