mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
b3b175a7fb
# Summary Due to the large number of example apps in the repository, I decided to change the structure and move all applications into an "apps" folder to maintain a clear structure.
56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import {Line, Svg} from 'react-native-svg';
|
|
|
|
function LineExample() {
|
|
return (
|
|
<Svg height="100" width="100">
|
|
<Line x1="10%" y1="10%" x2="90%" y2="90%" stroke="red" strokeWidth="2" />
|
|
</Svg>
|
|
);
|
|
}
|
|
LineExample.title = 'Line';
|
|
|
|
function LineWithStrokeLinecap() {
|
|
return (
|
|
<Svg height="100" width="200">
|
|
<Line
|
|
x1="40"
|
|
y1="10"
|
|
x2="160"
|
|
y2="10"
|
|
stroke="red"
|
|
strokeWidth="10"
|
|
strokeLinecap="round"
|
|
/>
|
|
<Line
|
|
x1="40"
|
|
y1="40"
|
|
x2="160"
|
|
y2="40"
|
|
stroke="red"
|
|
strokeWidth="10"
|
|
strokeLinecap="butt"
|
|
/>
|
|
<Line
|
|
x1="40"
|
|
y1="80"
|
|
x2="160"
|
|
y2="80"
|
|
stroke="red"
|
|
strokeWidth="10"
|
|
strokeLinecap="square"
|
|
/>
|
|
</Svg>
|
|
);
|
|
}
|
|
LineWithStrokeLinecap.title = 'Line';
|
|
|
|
const icon = (
|
|
<Svg height="30" width="30" viewBox="0 0 20 20">
|
|
<Line x1="0" y1="0" x2="20" y2="20" stroke="red" strokeWidth="1" />
|
|
</Svg>
|
|
);
|
|
const samples = [LineExample, LineWithStrokeLinecap];
|
|
|
|
export {icon, samples};
|