mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
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:
16
apps/common/example/examples/Empty.tsx
Normal file
16
apps/common/example/examples/Empty.tsx
Normal 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};
|
||||
@@ -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];
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user