docs: add Empty screen as playground (#2517)

# Summary

Create Empty screen with blank svg in example app as playground
Additionally add FeDropShadow icon as i forgot about it.
This commit is contained in:
Jakub Grzywacz
2024-10-28 17:12:35 +01:00
committed by GitHub
parent fd9397c1f9
commit c6af6b447d
3 changed files with 29 additions and 24 deletions

View File

@@ -0,0 +1,16 @@
import React from 'react';
import {Rect, Svg} from 'react-native-svg';
function EmptyExample() {
return <Svg height="400" width="400"></Svg>;
}
EmptyExample.title = '';
const icon = (
<Svg height="30" width="30" viewBox="0 0 20 20">
<Rect x="0" y="0" width="20" height="20" fill="none" stroke="black" />
</Svg>
);
const samples = [EmptyExample];
export {icon, samples};

View File

@@ -1,12 +1,5 @@
import React from 'react';
import {
Circle,
FeDropShadow,
FeFlood,
Filter,
Rect,
Svg,
} from 'react-native-svg';
import {Circle, FeDropShadow, Filter, Svg} from 'react-native-svg';
BasicMDN.title = 'Basic MDN example';
function BasicMDN() {
@@ -35,23 +28,17 @@ function BasicMDN() {
}
const icon = (
<Svg height="30" width="30" viewBox="0 0 140 140">
<Filter
id="floodFilterIcon"
x="50%"
filterUnits="userSpaceOnUse"
primitiveUnits="userSpaceOnUse">
<FeFlood
y="-10%"
x="10%"
width="50%"
height="50%"
floodColor="yellow"
floodOpacity="0.5"
/>
<Svg height="30" width="30" viewBox="0 0 100 100">
<Filter id="dropShadowIcon" x="-1" width="3" y="-1" height="3">
<FeDropShadow dx="3" dy="3" stdDeviation="2" floodOpacity="0.7" />
</Filter>
<Rect x="0" y="0" width="100" height="100" fill="blue" />
<Circle cx="50" cy="50" r="40" filter="url(#floodFilterIcon)" />
<Circle
cx="50"
cy="50"
r="30"
fill="lightblue"
filter="url(#dropShadowIcon)"
/>
</Svg>
);
const samples = [BasicMDN];

View File

@@ -1,5 +1,6 @@
import * as Circle from './Circle';
import * as Clipping from './Clipping';
import * as Empty from './Empty';
import * as Ellipse from './Ellipse';
import * as G from './G';
import * as Gradients from './Gradients';
@@ -21,6 +22,7 @@ import * as TouchEvents from './TouchEvents';
import * as Transforms from './Transforms';
export const examples = {
Empty,
Svg,
Rect,
Circle,