From 458bb21b669f18d74750822d00ecf70eab52aeba Mon Sep 17 00:00:00 2001
From: warren-ms <63264034+warren-ms@users.noreply.github.com>
Date: Thu, 23 Mar 2023 20:27:27 -0700
Subject: [PATCH 001/176] Add a custom SVG REPL so so you can paste or type in
an svg and render it live! Add a test for a very fancy svg using lots of
stuff Add a test for radial gradient
---
.../src/TestComponents/Svg/SvgTest.tsx | 204 +++++++++++++++++-
1 file changed, 198 insertions(+), 6 deletions(-)
diff --git a/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx b/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx
index 4f9182e364..a22d7eca56 100644
--- a/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx
+++ b/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx
@@ -1,13 +1,28 @@
import * as React from 'react';
-import { StyleSheet, Switch, Text, View } from 'react-native';
-
+import { useState } from 'react';
+import { StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+import { ButtonV1 as Button, ToggleButton } from '@fluentui/react-native';
import { Separator } from '@fluentui/react-native';
-import { Circle, Defs, G, Line, Path, Polygon, LinearGradient, RadialGradient, Rect, Stop, Svg, SvgUri, Use } from 'react-native-svg';
-
+import {
+ Circle,
+ Defs,
+ G,
+ Line,
+ Path,
+ Polygon,
+ LinearGradient,
+ RadialGradient,
+ Rect,
+ Stop,
+ Svg,
+ SvgUri,
+ SvgXml,
+ Use,
+ parse,
+} from 'react-native-svg';
import TestSvg from './Assets/accessible-icon-brands.svg';
import { SVG_TESTPAGE } from '../../../../E2E/src/Svg/consts';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
+import { Test, TestSection, PlatformStatus } from '../Test';
const styles = StyleSheet.create({
svg: {
backgroundColor: 'green',
@@ -99,6 +114,28 @@ const RadialGradientTest: React.FunctionComponent = () => {
);
};
+const RadialGradientTransformTest: React.FunctionComponent = () => {
+ return (
+
+ );
+};
+
const RectCircleTest: React.FunctionComponent = () => {
return (