react-native-svg#Svg JavaScript Examples
The following examples show how to use
react-native-svg#Svg.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: svg-icons.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 | 6 votes |
|
HomeIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M16.61,2.21a1,1,0,0,0-1.24,0L1,13.42,2.24,15,4,13.62V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V13.63L29.76,15,31,13.43ZM18,26H14V18h4Zm2,0h0V18a2,2,0,0,0-2-2H14a2,2,0,0,0-2,2v8H6V12.06L16,4.27l10,7.8V26Z'>
</Path>
</Svg>
);
}
Example #2
| Source File: svg-icons.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 | 6 votes |
|
MapIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M16,10a3,3,0,1,1-3,3,3,3,0,0,1,3-3m0-2a5,5,0,1,0,5,5A5,5,0,0,0,16,8Z'>
</Path>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M16,4a8.88,8.88,0,0,1,9,8.71,8.47,8.47,0,0,1-1.79,5.21l0,0,0,0L16,28.46,8.85,18l0,0,0,0A8.47,8.47,0,0,1,7,12.71,8.88,8.88,0,0,1,16,4m0-2A10.86,10.86,0,0,0,5,12.71a10.53,10.53,0,0,0,2.2,6.43L16,32l8.8-12.86A10.53,10.53,0,0,0,27,12.71,10.86,10.86,0,0,0,16,2Z'>
</Path>
</Svg>
);
}
Example #3
| Source File: svg-icons.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 | 6 votes |
|
DonateIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M28.76,11.35A1,1,0,0,0,28,11H22V7a3,3,0,0,0-3-3H13a3,3,0,0,0-3,3v4H4a1,1,0,0,0-1,1.15L4.88,24.3a2,2,0,0,0,2,1.7H25.14a2,2,0,0,0,2-1.7L29,12.15A1,1,0,0,0,28.76,11.35ZM12,7a1,1,0,0,1,1-1h6a1,1,0,0,1,1,1v4H12ZM25.14,24H6.86L5.17,13H26.83Z'>
</Path>
</Svg>
);
}
Example #4
| Source File: svg-icons.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 | 6 votes |
|
ChatIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M17.74,30,16,29l4-7h6a2,2,0,0,0,2-2V8a2,2,0,0,0-2-2H6A2,2,0,0,0,4,8V20a2,2,0,0,0,2,2h9v2H6a4,4,0,0,1-4-4V8A4,4,0,0,1,6,4H26a4,4,0,0,1,4,4V20a4,4,0,0,1-4,4H21.16Z'>
</Path>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M8 10H24V12H8zM8 16H18V18H8z'>
</Path>
</Svg>
);
}
Example #5
| Source File: svg-icons.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 | 6 votes |
|
SearchIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M30,28.59,22.45,21A11,11,0,1,0,21,22.45L28.59,30ZM5,14a9,9,0,1,1,9,9A9,9,0,0,1,5,14Z'>
</Path>
</Svg>
);
}
Example #6
| Source File: svg-icons.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 | 6 votes |
|
CheckedIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z'>
</Path>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M14 21.5L9 16.54 10.59 15 14 18.35 21.41 11 23 12.58 14 21.5z'>
</Path>
</Svg>
);
}
Example #7
| Source File: svg-icons.js From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 | 6 votes |
|
UncheckedIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z'>
</Path>
</Svg>
);
}
Example #8
| Source File: svg-icons.js From Solution-Starter-Kit-Disasters-2020 with Apache License 2.0 | 6 votes |
|
HomeIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M16.61,2.21a1,1,0,0,0-1.24,0L1,13.42,2.24,15,4,13.62V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V13.63L29.76,15,31,13.43ZM18,26H14V18h4Zm2,0h0V18a2,2,0,0,0-2-2H14a2,2,0,0,0-2,2v8H6V12.06L16,4.27l10,7.8V26Z'>
</Path>
</Svg>
);
}
Example #9
| Source File: svg-icons.js From Solution-Starter-Kit-Disasters-2020 with Apache License 2.0 | 6 votes |
|
ChatIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M17.74,30,16,29l4-7h6a2,2,0,0,0,2-2V8a2,2,0,0,0-2-2H6A2,2,0,0,0,4,8V20a2,2,0,0,0,2,2h9v2H6a4,4,0,0,1-4-4V8A4,4,0,0,1,6,4H26a4,4,0,0,1,4,4V20a4,4,0,0,1-4,4H21.16Z'>
</Path>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M8 10H24V12H8zM8 16H18V18H8z'>
</Path>
</Svg>
);
}
Example #10
| Source File: svg-icons.js From Solution-Starter-Kit-Disasters-2020 with Apache License 2.0 | 6 votes |
|
MapIcon = (props) => {
const height = props.height || 28;
const width = props.width || 28;
const fill = props.fill || '#000';
const stroke = props.stroke || 'none';
const strokeWidth = props.strokeWidth || 0;
return (
<Svg height={height} width={width} viewBox='0 0 32 32'>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M16,10a3,3,0,1,1-3,3,3,3,0,0,1,3-3m0-2a5,5,0,1,0,5,5A5,5,0,0,0,16,8Z'>
</Path>
<Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
d='M16,4a8.88,8.88,0,0,1,9,8.71,8.47,8.47,0,0,1-1.79,5.21l0,0,0,0L16,28.46,8.85,18l0,0,0,0A8.47,8.47,0,0,1,7,12.71,8.88,8.88,0,0,1,16,4m0-2A10.86,10.86,0,0,0,5,12.71a10.53,10.53,0,0,0,2.2,6.43L16,32l8.8-12.86A10.53,10.53,0,0,0,27,12.71,10.86,10.86,0,0,0,16,2Z'>
</Path>
</Svg>
);
}
Example #11
| Source File: FavoriteIcon.js From ReactNativeApolloOnlineStore with MIT License | 6 votes |
|
export function FavoriteIcon({favorite, onPress}) {
return (
<TouchableOpacity style={styles.container} onPress={onPress}>
<Svg
width={32}
height={32}
viewBox="0 0 24 24"
fill={favorite ? 'white' : 'none'}
stroke="white"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
</Svg>
</TouchableOpacity>
);
}
Example #12
| Source File: ChartPath.js From react-native-animated-charts with MIT License | 6 votes |
|
export function SvgComponent() {
const {
style,
animatedStyle,
height,
width,
animatedProps,
props,
onLongPressGestureEvent,
gestureEnabled,
longPressGestureHandlerProps,
} = useContext(InternalContext);
return (
<LongPressGestureHandler
enabled={gestureEnabled}
maxDist={100000}
minDurationMs={0}
shouldCancelWhenOutside={false}
{...longPressGestureHandlerProps}
{...{ onGestureEvent: onLongPressGestureEvent }}
>
<Animated.View>
<Svg
height={height + 20} // temporary fix for clipped chart
viewBox={`0 0 ${width} ${height}`}
width={width}
>
<AnimatedPath
animatedProps={animatedProps}
{...props}
style={[style, animatedStyle]}
/>
</Svg>
</Animated.View>
</LongPressGestureHandler>
);
}
Example #13
| Source File: ScanQRCodeScreen.js From RRWallet with MIT License | 5 votes |
|
render() {
return (
<View style={styles.container}>
<RNCamera
ref={cam => {
this.camera = cam;
}}
style={styles.preview}
type={this.state.camera.type}
flashMode={this.state.camera.flashMode}
autoFocus={RNCamera.Constants.AutoFocus.on}
onBarCodeRead={this.onBarCodeRead.bind(this)}
permissionDialogTitle={"请求使用相机"}
permissionDialogMessage={"App需要获得使用相机的许可"}
/>
<View style={styles.overlay}>
<Svg height={height} width={width} style={styles.svg}>
<Defs>
<ClipPath id="clip" height={height} width={width}>
<Rect x="0" y="0" height={height} width={width} />
<Polygon points={polygonPoints} />
</ClipPath>
</Defs>
<Path
x={reactX}
y={reactY}
d={`M0 1.5 L20 1.5 M1.5 0 L1.5 20`}
fill="none"
stroke={theme.brandColor}
strokeWidth="3"
/>
<Path
x={reactX + rectWidth}
y={reactY}
d={`M0 1.5 L-20 1.5 M-1.5 0 L-1.5 20`}
fill="none"
stroke={theme.brandColor}
strokeWidth="3"
/>
<Path
x={reactX + rectWidth}
y={reactY + rectHeight}
d={`M0 -1.5 L-20 -1.5 M-1.5 0 L-1.5 -20`}
fill="none"
stroke={theme.brandColor}
strokeWidth="3"
/>
<Path
x={reactX}
y={reactY + rectHeight}
d={`M0 -1.5 L20 -1.5 M1.5 0 L1.5 -20`}
fill="none"
stroke={theme.brandColor}
strokeWidth="3"
/>
<Rect x="0" y="0" width="100%" height="100%" fill="#000000" opacity="0.6" clipPath="url(#clip)" />
</Svg>
<Header
title={i18n.wallet("title-scan")}
titleColor={"#FFFFFF"}
leftButtons={ScanQRCodeScreen.navigatorButtons.leftButtons}
rightButtons={ScanQRCodeScreen.navigatorButtons.rightButtons}
navigator={this.props.navigator}
style={styles.header}
/>
<Tip ref={o => (this.tip = o)} />
</View>
</View>
);
}
Example #14
| Source File: AddComment.js From ReactNativeApolloOnlineStore with MIT License | 5 votes |
|
export function AddComment({productId}) {
const [comment, setComment] = React.useState('');
const [createComment] = useMutation(CREATE_COMMENT, {
update(cache, {data}) {
const {comments} = cache.readQuery({
query: GET_COMMENTS_BY_PRODUCT,
variables: {
productId,
},
});
cache.writeQuery({
query: GET_COMMENTS_BY_PRODUCT,
variables: {
productId,
},
data: {
comments: [data.createComment.comment, ...comments],
},
});
},
});
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder={'Add Comment'}
value={comment}
onChangeText={setComment}
/>
<TouchableOpacity
style={styles.sendButton}
disabled={!comment}
onPress={async () => {
await createComment({
variables: {
comment,
productId,
},
});
setComment('');
}}>
<Svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
</Svg>
</TouchableOpacity>
</View>
);
}
Example #15
| Source File: ChartLines.js From react-native-animated-charts with MIT License | 5 votes |
|
function ChartLineFactory(orientation) {
const isVertical = orientation == 'vertical';
return function ChartLine({
color = '#000000',
thickness = 2,
length,
...props
}) {
const {
currentPositionVerticalLineStyle,
openingPositionHorizontalLineStyle,
} = useContext(ChartContext);
return (
<Animated.View
pointerEvents="none"
style={[
isVertical
? currentPositionVerticalLineStyle
: openingPositionHorizontalLineStyle,
{
height: isVertical ? length + 20 : thickness,
position: 'absolute',
left: 0,
top: 0,
width: isVertical ? thickness : length,
zIndex: -1,
},
]}
>
<Svg>
<Line
stroke={color}
strokeWidth={thickness}
strokeDasharray={10}
x1={0}
y1={0}
x2={isVertical ? 0 : length}
y2={isVertical ? length + 20 : 0}
{...props}
/>
</Svg>
</Animated.View>
);
};
}
Example #16
| Source File: Icon.js From oplayer with MIT License | 5 votes |
|
Icon = ({ color, name, size, ...rest }) => {
switch (name) {
case 'back':
return (
<Svg viewBox='0 0 1024 1024' width={size} height={size} {...rest}>
<Path
d='M402.816 512L795.52 134.912a76.8 76.8 0 0 0 0-111.616 84.736 84.736 0 0 0-116.224 0L228.48 456.192a76.8 76.8 0 0 0 0 111.616l450.56 432.896a84.736 84.736 0 0 0 116.224 0 76.8 76.8 0 0 0 0-111.616z'
fill={getIconColor(color, 0, '#333333')}
/>
</Svg>
)
case 'pause':
return (
<Svg viewBox='0 0 1024 1024' width={size} height={size} {...rest}>
<Path
d='M73.225643 0m129.382487 0l0.594127 0q129.382487 0 129.382486 129.382487l0 765.235026q0 129.382487-129.382486 129.382487l-0.594127 0q-129.382487 0-129.382487-129.382487l0-765.235026q0-129.382487 129.382487-129.382487Z'
fill={getIconColor(color, 0, '#333333')}
/>
<Path
d='M655.241175 0m129.382487 0l0.594126 0q129.382487 0 129.382487 129.382487l0 765.235026q0 129.382487-129.382487 129.382487l-0.594126 0q-129.382487 0-129.382487-129.382487l0-765.235026q0-129.382487 129.382487-129.382487Z'
fill={getIconColor(color, 1, '#333333')}
/>
</Svg>
)
case 'play':
return (
<Svg viewBox='0 0 1024 1024' width={size} height={size} {...rest}>
<Path
d='M849.92 618.66666666L315.73333333 953.17333333c-63.14666667 39.25333333-148.48 20.48-187.73333333-42.66666667-13.65333333-22.18666667-20.48-46.08-20.48-71.68V168.10666666c0-75.09333333 61.44-136.53333333 136.53333333-136.53333333 25.6 0 51.2 6.82666667 71.68 20.48l534.18666667 334.50666667c63.14666667 39.25333333 83.62666667 124.58666667 42.66666667 187.73333333-10.24 18.77333333-23.89333333 32.42666667-42.66666667 44.37333333z'
fill={getIconColor(color, 0, '#333333')}
/>
</Svg>
)
case 'full':
return (
<Svg viewBox='0 0 1024 1024' width={size} height={size} {...rest}>
<Path
d='M147.91111147 147.91111147v204.8a68.26666667 68.26666667 0 0 1-136.53333334 0v-273.06666667A68.26666667 68.26666667 0 0 1 79.6444448 11.37777813h273.06666667a68.26666667 68.26666667 0 0 1 0 136.53333334H147.91111147zM876.08888853 876.08888853v-204.8a68.26666667 68.26666667 0 0 1 136.53333334 0v273.06666667a68.26666667 68.26666667 0 0 1-68.26666667 68.26666667h-273.06666667a68.26666667 68.26666667 0 0 1 0-136.53333334H876.08888853z'
fill={getIconColor(color, 0, '#333333')}
/>
</Svg>
)
}
return null
}
