react-native-svg#Rect JavaScript Examples
The following examples show how to use
react-native-svg#Rect.
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: MarkedIndicators.js From discovery-mobile-ui with MIT License | 6 votes |
|
MarkedCartouche = ({ hasFocused, markedHeight, y }) => (
<Rect
rx={config.MARKED_RADIUS}
x={config.MARKED_RADIUS * -1}
y={y}
width={config.MARKED_RADIUS * 2}
height={markedHeight}
fill={hasFocused ? Colors.hasFocused : Colors.hasMarked}
/>
)
Example #2
| Source File: NavigationMenu.mobile.js From actual with MIT License | 6 votes |
|
SvgNavigationMenu = props => (
<Svg
{...props}
viewBox="0 0 24 24"
style={{
color: '#242134',
...props.style
}}
>
<Rect
x={0.5}
y={2.5}
width={23}
height={3}
rx={1}
ry={1}
fill="currentColor"
/>
<Rect
x={0.5}
y={10.5}
width={23}
height={3}
rx={1}
ry={1}
fill="currentColor"
/>
<Rect
x={0.5}
y={18.5}
width={23}
height={3}
rx={1}
ry={1}
fill="currentColor"
/>
</Svg>
)
Example #3
| Source File: Icons.js From rakning-c19-app with MIT License | 6 votes |
|
CheckIcon = ({ isChecked, ...props }) =>
isChecked ? (
<Svg width={20} height={20} {...props}>
<G fill="none" fillRule="evenodd">
<Rect fill="#FF7A4C" width={20} height={20} rx={6} />
<Path
stroke="#FFF"
strokeWidth={2}
strokeLinecap="round"
d="M4.967 10.068l4.23 4.135 6.19-8.284"
/>
</G>
</Svg>
) : (
<Svg width={22} height={22} {...props}>
<Rect
width={20}
height={20}
rx={6}
transform="translate(1 1)"
stroke="#C8B7B0"
fill="none"
/>
</Svg>
)
Example #4
| Source File: PlusSquare.js From reddit-clone with MIT License | 6 votes |
|
function SvgPlusSquare(props) {
return (
<Svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className=""
{...props}
>
<Rect x={3} y={3} width={18} height={18} rx={2} ry={2} />
<Path d="M12 8v8M8 12h8" />
</Svg>
)
}
Example #5
| Source File: CloseCircle.native.js From blade with MIT License | 6 votes |
|
function CloseCircle(props) {
return (
<Icon viewBox="0 0 24 24" {...props}>
<Rect width="24" height="24" rx="12" />
<Path
d="M16.4716 8.47206C16.7319 8.21171 16.7319 7.7896 16.4716 7.52925C16.2112 7.2689 15.7891 7.2689 15.5288 7.52925L12.0002 11.0578L8.47157 7.52925C8.21122 7.2689 7.78911 7.2689 7.52876 7.52925C7.26841 7.7896 7.26841 8.21171 7.52876 8.47206L11.0574 12.0007L7.52876 15.5292C7.26841 15.7896 7.26841 16.2117 7.52876 16.4721C7.78911 16.7324 8.21122 16.7324 8.47157 16.4721L12.0002 12.9435L15.5288 16.4721C15.7891 16.7324 16.2112 16.7324 16.4716 16.4721C16.7319 16.2117 16.7319 15.7896 16.4716 15.5292L12.943 12.0007L16.4716 8.47206Z"
fill="white"
stroke="white"
stroke-linecap="round"
stroke-linejoin="round"
/>
</Icon>
);
}
Example #6
| Source File: Archive.js From real-frontend with GNU General Public License v3.0 | 6 votes |
|
User = ({ fill = '#333', style = {} }) => (
<Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
<Rect height="14" width="20" fill="none" stroke={fill} x="2" y="9"/>
<Line fill="none" x1="5" x2="19" y1="5" y2="5" stroke={fill}/>
<Line fill="none" x1="8" x2="16" y1="1" y2="1" stroke={fill}/>
<Polyline fill="none" points="16 14 16 16 8 16 8 14" stroke={fill}/>
</G>
</Svg>
)
Example #7
| Source File: Home.js From real-frontend with GNU General Public License v3.0 | 6 votes |
|
Home = ({ fill = '#333', style = {} }) => (
<Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<G fill={fill} stroke={fill} strokeLinecap="square" strokeWidth="2">
<Rect height="6" width="22" fill="none" stroke={fill} x="1" y="3"/>
<Line fill="none" x1="1" x2="23" y1="15" y2="15"/>
<Line fill="none" x1="1" x2="23" y1="21" y2="21"/>
</G>
</Svg>
)
Example #8
| Source File: Upload.js From real-frontend with GNU General Public License v3.0 | 6 votes |
|
Direct = ({ fill = '#333', style = {} }) => (
<Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
<Rect height="20" width="20" fill="none" stroke={fill} x="2" y="2"/>
<Polygon points="5 17 8 12 11 15 15 9 19 17 5 17" stroke="none"/>
<Circle cx="9.5" cy="7.5" r="1.5" stroke="none"/>
</G>
</Svg>
)
Example #9
| Source File: Leo.js From astrale with GNU General Public License v3.0 | 6 votes |
|
function Leo({ color, height, width, style }) {
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Path
d="M176 264l-40 56-64 48-16 32v16h48l8-24 64-24 40-64zM496.415 319.585a8.012 8.012 0 01-12.089-.882A62.16 62.16 0 01472 281.373v-18.746A46.627 46.627 0 00425.373 216H388v-16h37.373A62.627 62.627 0 01488 262.627v18.746a46.278 46.278 0 009.127 27.726 8.03 8.03 0 01-.712 10.486zM336 288v38.667a100 100 0 0020 60l4 5.333-16 16-7.155 3.578A16 16 0 00328 425.889V440h40l48-48V288z"
fill="#46349e"
/>
<Path
d="M448 312v-51.716A68.283 68.283 0 00428 212a68.283 68.283 0 00-48.284-20H280l-144-56H64l-40 32 6.75 25 18.635-.738a5.981 5.981 0 016.206 6.345 5.98 5.98 0 01-5.868 5.611L33 204.5l6 19.5h25l80 16 48 104h91.835a31.116 31.116 0 008.183-1.1L376 320l2.813 9.847A63.637 63.637 0 00440 376v32l-7.155 3.578A16 16 0 00424 425.889V440h40l24-32v-48z"
fill="#5f4bbc"
/>
<Path
d="M200 304v96l-17.473 11.648a14.659 14.659 0 00-6.527 12.2V440h56l16-80v-64z"
fill="#5f4bbc"
/>
<Rect fill="#362684" height={16} rx={8} width={32} x={24} y={160} />
<Path
d="M64 136v-.541a59.645 59.645 0 0125.579-49.254l.568-.394a76.824 76.824 0 0144-13.827C152.265 72 174 72 174 72l-14 24a168.274 168.274 0 01150.51 93.02L312 192h-80l2.144 2.144a150.585 150.585 0 0133.335 50.556L272 256l-13.074 5.23A150.583 150.583 0 01203 272h-3v72a94.721 94.721 0 01-76.385-38.707L64 224l40-48v-40z"
fill="#c378cb"
/>
<G fill="#b267ba">
<Path d="M142.77 143.86l2.367-15.824 30.002 4.49-2.368 15.824zM129.88 183.387l6.272-14.72 27 11.504-6.273 14.72zM138.712 221.924l10.752-11.857 21.509 19.505-10.753 11.857zM100.712 228.002l12.432-10.064 16.995 20.993-12.432 10.064zM140.359 265.195l12.24-10.304 15.996 19.002-12.24 10.304zM185.242 231.236l7.376-14.192 25.986 13.505-7.376 14.192zM175.65 191.495l5.44-15.04 28.99 10.486-5.44 15.04zM206.142 151.853l3.888-15.52 31.995 8.016-3.888 15.52zM112 96h24v16h-24z" />
</G>
<Path
d="M272 296h16v24h-16zM304 296h16v16h-16zM367.121 311.787a84.963 84.963 0 012.109-17.038 8.01 8.01 0 0110.008-6.015 8.008 8.008 0 015.634 9.392c-2.9 13.479-1.3 19.3-1.278 19.364a2.238 2.238 0 00-.092-.268l-5.6 2.074a7.988 7.988 0 01-10.781-7.509z"
fill="#4c3aa3"
/>
</Svg>
);
}
Example #10
| Source File: Taurus.js From astrale with GNU General Public License v3.0 | 6 votes |
|
function Taurus({ color, height, width, style }) {
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Path
d="M488 360v-58.393a109.6 109.6 0 00-42.315-86.518A109.606 109.606 0 00378.393 192H368v28.7h17.476a74.4 74.4 0 0141.265 12.5 74.392 74.392 0 0132.758 54.5l1.631 16.3c1.817 18.17 11.676 45.871 26.87 56zM344 368l-45.259 41.007A49.939 49.939 0 00280 448h48l16-24 56-48V264h-96v33.352A82.39 82.39 0 00344 368zM112 264l-48 48 16 32h24v40h-7.308a70.714 70.714 0 01-31.622-7.465 65.541 65.541 0 01-26.889-24.9l-4.841-8.069A65.532 65.532 0 0124 309.847a65.535 65.535 0 0113.108-39.324L72 224h40z"
fill="#46349e"
/>
<Path
d="M467.588 319.505A84.508 84.508 0 01448 265.4a98.105 98.105 0 00-60.372-90.558l-23.941-9.975a64.013 64.013 0 01-20.64-13.823l-58.854-58.851A96.256 96.256 0 00216.129 64a96.257 96.257 0 00-77.006 38.5L72 192v48l24 72h32a16 16 0 0016-16v-16l32 12.8v28.092a55.788 55.788 0 0016.34 39.448l15.32 15.32a55.789 55.789 0 0070.4 6.97L288 376l-24-32-16 16-32-32 8-32h112a115.776 115.776 0 00103.554 64H448v24l-36.686 36.687A38.624 38.624 0 00400 448h48l16-24 24-24v-56z"
fill="#5f4bbc"
/>
<Path
d="M72 192H60a12 12 0 01-12-12 12 12 0 00-12-12H24a27.315 27.315 0 018 19.314V200a24 24 0 0024 24h16z"
fill="#a961b2"
/>
<Path
d="M152 192h20a12 12 0 0012-12 12 12 0 0112-12h12a27.315 27.315 0 00-8 19.314V200a24 24 0 01-24 24h-24a16 16 0 01-16-16 16 16 0 0116-16z"
fill="#c378cb"
/>
<G fill="#6754c4">
<Path d="M227.6 251.578l-14.311-7.156c6.039-12.077.039-24.763-.022-24.89l14.333-7.11c.4.8 9.677 19.801 0 39.156zM360.845 283.578A87.7 87.7 0 01352 248h8l8-.021a72.437 72.437 0 007.155 28.443zM280 248h16v16h-16zM328 232h-16c0-42.529-20.233-57.207-20.438-57.344l8.876-13.312C301.563 162.094 328 180.312 328 232zM296 232h-16c0-35.588-28.512-57.384-28.8-57.6l9.6-12.8c1.437 1.078 35.2 26.9 35.2 70.4z" />
</G>
<Path
d="M144 280a8 8 0 01-8-8v-8a8 8 0 012.343-5.657L152 244.687V224h16v24a8 8 0 01-2.343 5.657L152 267.313V272a8 8 0 01-8 8zM325.6 291.031a192.238 192.238 0 01-8.577-41.4l15.951-1.264a179.626 179.626 0 007.784 37.539 8.014 8.014 0 01-4.493 9.985 8.017 8.017 0 01-10.665-4.86z"
fill="#4c3aa3"
/>
<Rect fill="#4c3aa3" height={28.335} rx={8} width={16} x={168} y={264} />
<Path
d="M226.521 292.291a7.953 7.953 0 011.223-10.3C237.3 273.356 240 264.262 240 251.155V248h16v3.155c0 17.666-4.621 31.039-17.5 42.678a7.987 7.987 0 01-11.979-1.542z"
fill="#4c3aa3"
/>
</Svg>
);
}
Example #11
| 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 #12
| Source File: Square.js From real-frontend with GNU General Public License v3.0 | 5 votes |
|
Square = ({ fill = '#ffffff', style = {} }) => (
<Svg height={18} width={18} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
<Rect height="14" width="14" fill="none" x="5" y="5"/>
</G>
</Svg>
)
Example #13
| Source File: Portrait.js From real-frontend with GNU General Public License v3.0 | 5 votes |
|
Portrait = ({ fill = '#ffffff', style = {} }) => (
<Svg height={18} width={18} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
<Rect height="14" width="7" fill="none" x="9" y="5"/>
</G>
</Svg>
)
Example #14
| Source File: Aries.js From astrale with GNU General Public License v3.0 | 5 votes |
|
function Aries({ color, height, width, style }) {
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<G fill="#46349e">
<Path d="M104 232a24 24 0 00-24 24v50.335a32 32 0 0020.115 29.711L120 344v-40l-8-8v-24h72l24-32v-8zM384 288l48 38.593C424 344 398.767 346.634 384 336l-24-16v-32zM280 312v46.059A81.941 81.941 0 00304 416l-24 48-1.689.845A25.887 25.887 0 00264 488h40l40-64V312zM80 104v8a24 24 0 0024 24h8v-32z" />
</G>
<Path
d="M392 376v-65.5a48 48 0 00-37.587-46.857L320 256l-72-56-27.692-66.462A48 48 0 00176 104h-64v48l24 48h32v56h-8a24 24 0 00-24 24v50.335a32 32 0 0020.115 29.711L176 368v-40l-8-8v-24h26.667l14.284 21.427a32 32 0 0019.431 13.43L320 352a64.721 64.721 0 0035.777 57.888L384 424l-24 40-1.689.845A25.887 25.887 0 00344 488h40l48-72z"
fill="#5f4bbc"
/>
<Path
d="M232 84a45.309 45.309 0 01-25.04 40.52L184 136l7.06-14.11A84.621 84.621 0 00200 84a20 20 0 00-40 0v20h-48V84c0-1.34.04-2.68.14-4a59.8 59.8 0 0117.43-38.43c1.37-1.37 2.81-2.68 4.31-3.91A59.851 59.851 0 01168 24.14c1.32-.1 2.66-.14 4-.14a59.775 59.775 0 0136.39 12.29 59.881 59.881 0 0111.32 11.32A59.74 59.74 0 01232 84z"
fill="#a961b2"
/>
<Path
d="M136 64v16h-23.86a59.426 59.426 0 013.28-16zM159.16 52.42l-14.32 7.16-10.96-21.92a59.6 59.6 0 0113.67-8.46zM184 25.2V48h-16V24.14c1.32-.1 2.66-.14 4-.14a60.075 60.075 0 0112 1.2zM219.71 47.61l-14.05 14.05-11.32-11.32 14.05-14.05a59.881 59.881 0 0111.32 11.32z"
fill="#b267ba"
/>
<Path
d="M272 84a45.309 45.309 0 01-25.04 40.52L224 136l7.06-14.11A84.621 84.621 0 00240 84a20 20 0 00-40 0v20h-48V84c0-1.34.04-2.68.14-4a59.8 59.8 0 0117.43-38.43c1.37-1.37 2.81-2.68 4.31-3.91A59.851 59.851 0 01208 24.14c1.32-.1 2.66-.14 4-.14a59.793 59.793 0 0136.25 12.18 61.011 61.011 0 016.18 5.39 59.159 59.159 0 015.17 5.9A59.773 59.773 0 01272 84z"
fill="#c378cb"
/>
<Path
d="M176 64v16h-23.86a59.426 59.426 0 013.28-16zM199.16 52.42l-14.32 7.16-10.96-21.92a59.6 59.6 0 0113.67-8.46zM224 25.2V48h-16V24.14c1.32-.1 2.66-.14 4-.14a60.075 60.075 0 0112 1.2zM259.6 47.47l-13.89 14.14-11.42-11.22 13.96-14.21a61.011 61.011 0 016.18 5.39 59.159 59.159 0 015.17 5.9z"
fill="#cb84d3"
/>
<Path d="M136 136h16v16h-16z" fill="#362684" />
<Rect fill="#4c3aa3" height={48} rx={8} width={16} x={160} y={152} />
<Rect fill="#4c3aa3" height={40} rx={8} width={16} x={312} y={312} />
<Path
d="M236 304h-28.888a8 8 0 01-8-8 8 8 0 018-8H232a8 8 0 006.4-3.2l14.4-19.2A8 8 0 01264 264a8 8 0 011.6 11.2l-16.8 22.4A16 16 0 01236 304z"
fill="#4c3aa3"
/>
<Rect
fill="#4c3aa3"
height={16}
rx={8}
width={46.886}
x={169.114}
y={248}
/>
<Path
d="M176 104l-.149 31.812 16 .15a24 24 0 0024.224-23.774L216 104z"
fill="#5f4bbc"
/>
<Path
d="M208 104v8a16.019 16.019 0 01-16 16h-16a8 8 0 000 16h16a32.036 32.036 0 0032-32v-8z"
fill="#4c3aa3"
/>
</Svg>
);
}
Example #15
| Source File: Aquarius.js From astrale with GNU General Public License v3.0 | 5 votes |
|
/**
* @param color
* @param height
* @param width
* @param style
* @returns {*}
* @constructor
*/
function Aquarius({ color, height, width, style }) {
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Path
d="M464 75.649l-25.79 22.4a260.261 260.261 0 01-32.25 23.84q-8.325 5.25-17.14 9.97c-3.98 2.13-8.04 4.19-12.15 6.14a306 306 0 01-45.59 17.45c-40.56 11.94-82.94 15.45-122.3 10.14l-34.47-4.66-14.31-44.58 25.79-22.4a268.994 268.994 0 0149.39-33.81 304.7 304.7 0 0157.74-23.59 310.725 310.725 0 0146.62-9.92 297.477 297.477 0 0133.81-2.58 276.132 276.132 0 0141.87 2.36l34.47 4.66z"
fill="#c04a42"
/>
<Path
d="M344 128l-8 8v16h-24v32h-32v-76a28 28 0 1156 0v4z"
fill="#cb84d3"
/>
<Path
d="M318.48 82.029L296 112l-3.654 40.2A52.563 52.563 0 01240 200l18.86-89.15A36.922 36.922 0 01295.27 80H308a27.867 27.867 0 0110.48 2.029z"
fill="#5f4bbc"
/>
<Path
d="M448 128c-8 32-27.479 70.959-32 80-8 16-80 8-80 8l-8 16h-64.25L248 216l-9.257 32.4a32.541 32.541 0 01-31.289 23.6 32.541 32.541 0 01-30.871-22.251L144 152l32-8 32 96 9.652-33.782A30.634 30.634 0 01247.107 184H384l32-48v-12a24 24 0 019.6-19.2L448 88v-6.7a9.3 9.3 0 019.3-9.3 9.3 9.3 0 018.821 6.358l4.34 13.02a9.3 9.3 0 01-1.382 8.519zM344 350.6c0-20.193-24.391-30.333-38.706-16.091l-86.356 85.911A40.071 40.071 0 00208 447.929 40.07 40.07 0 00248.069 488h149.715A10.216 10.216 0 00408 477.783a10.215 10.215 0 00-4.96-8.76L368 448l-16 8-96-8 81.352-81.352A22.7 22.7 0 00344 350.6z"
fill="#cb84d3"
/>
<Path
d="M288 304h-86.962A33.038 33.038 0 00168 337.036V352c0 .74 8 104 8 104l-26.534 13.267A9.888 9.888 0 00144 478.11a9.889 9.889 0 009.889 9.89H208V352h80z"
fill="#cb84d3"
/>
<Path
d="M440 440a16 16 0 00-16-16 16 16 0 01-16-16 16 16 0 00-16-16h-4.183a16 16 0 01-15.292-11.3l-21.119-68.635a101.387 101.387 0 00-25.214-41.878 14.17 14.17 0 01-3.423-14.5L328 232a107.334 107.334 0 01-48-48l-18.492 11.557A30.1 30.1 0 00264 248v144a96 96 0 0096 96h96a16 16 0 0016-16 16 16 0 00-16-16 16 16 0 01-16-16z"
fill="#5f4bbc"
/>
<Circle cx={168} cy={135.999} fill="#c8534b" r={56} />
<Rect fill="#4c3aa3" height={16} rx={8} width={40} x={384} y={415.999} />
<Rect fill="#4c3aa3" height={16} rx={8} width={40} x={416} y={447.999} />
<Path
d="M340.6 383.758c-33.829-35.636-50.7-70.036-57.079-85.2a7.993 7.993 0 014.843-10.682l.022-.007a8 8 0 019.9 4.47 230.1 230.1 0 0010.943 22.2 293.706 293.706 0 0043.016 58.25 7.988 7.988 0 01-.165 11.138 8.014 8.014 0 01-11.48-.169zM365.279 460.322c-37.356-17.345-63.646-63.232-72.938-81.507a7.992 7.992 0 013.888-10.92l.031-.014a7.994 7.994 0 0110.367 3.656c8.528 16.635 32.829 59.139 65.267 74.223a8.01 8.01 0 014.254 9.794 7.971 7.971 0 01-10.869 4.768z"
fill="#4c3aa3"
/>
<Path
d="M382.929 52.787l-9.579-28.738a297.477 297.477 0 00-33.81 2.58L344.4 41.2l38.271 11.9z"
fill="#af3b34"
/>
<Path
d="M358.507 81.951l38.403 13.266.109-.154-13.945-41.839-.406-.126zM397.091 95.28l-.181-.063-23.452 33.148L376.67 138c4.11-1.95 8.17-4.01 12.15-6.14q8.805-4.71 17.14-9.97z"
fill="#af3b34"
/>
<Path
d="M358.507 81.951l-.374.447 15.325 45.967 23.452-33.148zM382.668 53.098l-38.271-11.901 13.519 40.55.591.204z"
fill="#a3332c"
/>
<Path
d="M136 407.547V360c0-147.952 56-192 56-224a24 24 0 00-24-24c-6.627 0-12.271 3.074-16.971 7.029C117 147.665 40 272 40 376v40a16 16 0 0016 16 15.994 15.994 0 0016-16 16 16 0 0016 16 16 16 0 0016-16 16 16 0 0016 16 16 16 0 0016-16z"
fill="#d87474"
/>
<G fill="#cc6968">
<Path d="M61 392.067c-.309-36.269 8.125-79.462 8.485-81.283l15.7 3.1c-.085.426-8.48 43.436-8.185 78.046zM109.224 384.677l-16-.347c.1-4.551.231-9.122.394-13.588l15.989.582a985.062 985.062 0 00-.383 13.353zM110.556 351.547l-15.972-.95c1.226-20.614 3.183-40.522 5.816-59.171l15.843 2.237c-2.574 18.224-4.487 37.699-5.687 57.884zM118.753 277.483l-15.774-2.675a458.181 458.181 0 0113.084-56.752l15.3 4.673a442.341 442.341 0 00-12.61 54.754zM136.279 208.042l-15.018-5.52A142.8 142.8 0 01129 184.465l14 7.735-7-3.867 7.013 3.85a132.691 132.691 0 00-6.734 15.859z" />
</G>
<Circle cx={80} cy={223.999} fill="#e59090" r={16} />
<Path
d="M64 159.999h16v16H64zM48 111.999h16v16H48zM48 463.999h16v16H48zM80 479.999h16v16H80z"
fill="#e59090"
/>
</Svg>
);
}
Example #16
| Source File: Icons.js From rakning-c19-app with MIT License | 5 votes |
|
OnboardingChatIcon = props => (
<Svg width="375px" height="100%" viewBox="0 0 375 335" {...props}>
<Defs>
<Path id="prefix__a" d="M0 0h375v335H0z" />
<Path
d="M12 10a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zm-8 0a1 1 0 110 2 1 1 0 010-2zm11.9 2.293c-.507 3.254-3.13 5.953-6.38 6.562a8.003 8.003 0 01-4.616-.487 3.215 3.215 0 00-1.253-.262c-.19 0-.378.018-.563.055l-2.812.562.563-2.817c.118-.585.046-1.21-.207-1.81a8.01 8.01 0 01-.487-4.617C4.754 6.23 7.452 3.607 10.707 3.1c2.59-.403 5.123.413 6.95 2.241 1.83 1.83 2.647 4.363 2.243 6.952m-.827-8.366c-2.285-2.284-5.445-3.303-8.674-2.804-4.077.636-7.457 3.92-8.22 7.987a10.007 10.007 0 00.61 5.765c.098.231.128.446.09.64l-.858 4.287a.997.997 0 00.274.903.996.996 0 00.903.274l4.283-.857a1.15 1.15 0 01.643.088 10.02 10.02 0 005.765.611c4.068-.763 7.352-4.143 7.988-8.22.502-3.227-.52-6.389-2.804-8.674"
id="prefix__d"
/>
<Path
d="M12 10a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2zm-8 0a1 1 0 110 2 1 1 0 010-2zm11.9 2.293c-.507 3.254-3.13 5.953-6.38 6.562a8.003 8.003 0 01-4.616-.487 3.215 3.215 0 00-1.253-.262c-.19 0-.378.018-.563.055l-2.812.562.563-2.817c.118-.585.046-1.21-.207-1.81a8.01 8.01 0 01-.487-4.617C4.754 6.23 7.452 3.607 10.707 3.1c2.59-.403 5.123.413 6.95 2.241 1.83 1.83 2.647 4.363 2.243 6.952m-.827-8.366c-2.285-2.284-5.445-3.303-8.674-2.804-4.077.636-7.457 3.92-8.22 7.987a10.007 10.007 0 00.61 5.765c.098.231.128.446.09.64l-.858 4.287a.997.997 0 00.274.903.996.996 0 00.903.274l4.283-.857a1.15 1.15 0 01.643.088 10.02 10.02 0 005.765.611c4.068-.763 7.352-4.143 7.988-8.22.502-3.227-.52-6.389-2.804-8.674"
id="prefix__f"
/>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__g">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__c" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G filter="url(#prefix__b)" mask="url(#prefix__c)">
<G transform="translate(15 163)">
<Path
d="M275 0c6.627 0 12 5.373 12 12v108c0 6.627-5.373 12-12 12H30.061L18 147.833V132h-6c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h263z"
fill="#FFF"
/>
<Use
fill="#FE7A4C"
xlinkHref="#prefix__d"
transform="translate(17 17)"
/>
<Rect fill="#F0E5E0" x={52} y={22} width={95} height={14} rx={2} />
<Rect fill="#F0E5E0" x={52} y={54} width={181} height={10} rx={2} />
<Rect fill="#F0E5E0" x={52} y={75} width={201} height={10} rx={2} />
<Rect fill="#F0E5E0" x={52} y={94} width={115} height={10} rx={2} />
</G>
</G>
<G filter="url(#prefix__e)" mask="url(#prefix__c)">
<G transform="translate(67 87)">
<Path
d="M12 0C5.373 0 0 5.373 0 12v66c0 6.627 5.373 12 12 12h254.2l12.8 16V90h6c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12H12z"
fill="#FFF"
/>
<Use
fill="#FE7A4C"
xlinkHref="#prefix__f"
transform="matrix(-1 0 0 1 287 13)"
/>
<Rect fill="#F0E5E0" x={72} y={18} width={183} height={14} rx={2} />
<Rect
fill="#F0E5E0"
transform="matrix(-1 0 0 1 280 0)"
x={25}
y={44}
width={230}
height={10}
rx={2}
/>
<Rect
fill="#F0E5E0"
transform="matrix(-1 0 0 1 364 0)"
x={109}
y={62}
width={146}
height={10}
rx={2}
/>
</G>
</G>
<Path
fill="url(#prefix__g)"
mask="url(#prefix__c)"
d="M0 251h375v84H0z"
/>
<Path fill="#FEEFE8" mask="url(#prefix__c)" d="M0 0h375v56H0z" />
</G>
</Svg>
)
Example #17
| Source File: Icons.js From rakning-c19-app with MIT License | 5 votes |
|
OnboardingCardIcon = props => (
<Svg width="375px" height="100%" viewBox="0 0 375 335" {...props}>
<Defs>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__c">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
<Path id="prefix__a" d="M0 0h375v335H0z" />
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G mask="url(#prefix__b)">
<G transform="translate(28 125)">
<Rect fill="#FFF" width={319} height={269} rx={12} />
<Rect
fill="#FF8F5E"
opacity={0.358}
x={97}
y={27}
width={125}
height={11}
rx={2}
/>
<Path
d="M226 80a2 2 0 012 2v17a2 2 0 01-2 2H97a2 2 0 01-2-2V82a2 2 0 012-2h129zm33-25a2 2 0 012 2v17a2 2 0 01-2 2H64a2 2 0 01-2-2V57a2 2 0 012-2h195z"
fill="#324355"
opacity={0.08}
/>
<Path
d="M272 197a2 2 0 012 2v6a2 2 0 01-2 2H46a2 2 0 01-2-2v-6a2 2 0 012-2h226zm-9-18a2 2 0 012 2v6a2 2 0 01-2 2H55a2 2 0 01-2-2v-6a2 2 0 012-2h208zm15-18a2 2 0 012 2v6a2 2 0 01-2 2H40a2 2 0 01-2-2v-6a2 2 0 012-2h238zm8-19a2 2 0 012 2v6a2 2 0 01-2 2H32a2 2 0 01-2-2v-6a2 2 0 012-2h254zm-8-18a2 2 0 012 2v6a2 2 0 01-2 2H40a2 2 0 01-2-2v-6a2 2 0 012-2h238z"
fill="#F7F7F7"
/>
</G>
</G>
<Path
fill="url(#prefix__c)"
mask="url(#prefix__b)"
d="M0 251h375v84H0z"
/>
<G mask="url(#prefix__b)">
<G transform="translate(299 115)">
<Circle fill="#FE7A4C" cx={27} cy={27} r={27} />
<Path
stroke="#FFF"
strokeWidth={5}
d="M14.07 26.432l11.414 9.26 14.748-18.294"
/>
</G>
</G>
</G>
</Svg>
)
Example #18
| Source File: Icons.js From rakning-c19-app with MIT License | 5 votes |
|
TestResults = props => (
<Svg width={375} height={335} {...props}>
<Defs>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__c">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
<Path id="prefix__a" d="M0 0h375v335H0z" />
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G mask="url(#prefix__b)">
<G transform="translate(28 125)">
<Rect fill="#FFF" width={319} height={269} rx={12} />
<Text
fontFamily="OpenSansBold"
fontSize={15}
fontWeight="bold"
letterSpacing={-0.2}
>
<TSpan x={86.386} y={37.5} fill="#FE7A4C">
{'YOUR TEST RESULT'}
</TSpan>
</Text>
<Text
fontFamily="OpenSansBold"
fontSize={26}
fontWeight="bold"
letterSpacing={-0.347}
>
<TSpan x={51.092} y={69.702} fill="#263343">
{'You do not have '}
</TSpan>
<TSpan x={88.473} y={97.702} fill="#263343">
{'COVID-19'}
</TSpan>
</Text>
<Text fontFamily="OpenSans" fontSize={14} letterSpacing={-0.187}>
<TSpan x={37.792} y={133} fill="#606A77">
{'Vestibulum rutrum quam vitae fringilla '}
</TSpan>
<TSpan x={34.672} y={151} fill="#606A77">
{'tincidunt. Suspendisse nec tortor urna. '}
</TSpan>
<TSpan x={32.339} y={169} fill="#606A77">
{'Ut laoreet sodales nisi, quis iaculis nulla '}
</TSpan>
<TSpan x={43.127} y={187} fill="#606A77">
{'iaculis vitae. Donec sagittis faucibus '}
</TSpan>
<TSpan x={32.659} y={205} fill="#606A77">
{'lacus eget blandit. Mauris vitae ultricies '}
</TSpan>
<TSpan x={41.988} y={223} fill="#606A77">
{'metus, at condimentum nulla. Donec '}
</TSpan>
<TSpan x={36.904} y={241} fill="#606A77">
{'quis ornare lacus. Etiam gravida mollis '}
</TSpan>
<TSpan x={96.062} y={259} fill="#606A77">
{'tortor quis porttitor.'}
</TSpan>
</Text>
</G>
</G>
<Path
fill="url(#prefix__c)"
mask="url(#prefix__b)"
d="M0 251h375v84H0z"
/>
</G>
</Svg>
)
Example #19
| Source File: Icons.js From rakning-c19-app with MIT License | 4 votes |
|
OnboardingPhoneIcon = props => (
<Svg width="375px" height="100%" viewBox="0 0 375 335" {...props}>
<Defs>
<LinearGradient
x1="50%"
y1="3.864%"
x2="34.509%"
y2="93.153%"
id="prefix__c"
>
<Stop stopOpacity={0} offset="0%" />
<Stop stopOpacity={0.433} offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__g">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__l">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__q">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="8.515%" x2="50%" y2="91.923%" id="prefix__s">
<Stop stopColor="#111" offset="0%" />
<Stop stopColor="#FEFEFE" offset="15.353%" />
<Stop stopColor="#FEFEFE" offset="83.104%" />
<Stop stopColor="#1D1D1D" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="1.699%" x2="50%" y2="98.563%" id="prefix__w">
<Stop stopColor="#252525" offset="0%" />
<Stop stopColor="#5E5E5E" offset="5.164%" />
<Stop stopColor="#666" offset="92.073%" />
<Stop stopColor="#1E1E1E" offset="100%" />
</LinearGradient>
<LinearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="prefix__C">
<Stop stopColor="#363636" offset="0%" />
<Stop stopColor="#2B2B2B" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="prefix__J">
<Stop stopColor="#FFF" stopOpacity={0.2} offset="0%" />
<Stop stopOpacity={0.3} offset="100%" />
</LinearGradient>
<LinearGradient
x1="29.845%"
y1="100%"
x2="66.008%"
y2="11.545%"
id="prefix__K"
>
<Stop stopColor="#686868" offset="0%" />
<Stop stopColor="#191919" offset="100%" />
</LinearGradient>
<LinearGradient
x1="-24.631%"
y1="74.934%"
x2="90.63%"
y2="36.282%"
id="prefix__N"
>
<Stop stopColor="#484848" offset="0%" />
<Stop stopColor="#383838" offset="100%" />
</LinearGradient>
<LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__W">
<Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
<Stop stopColor="#FEEFE8" offset="100%" />
</LinearGradient>
<Path id="prefix__a" d="M0 0h375v308H0z" />
<Path
d="M1.62 3.02c-.032-1.352 0-2.31-.394-2.836C.846.237.436.319 0 .43v27.897c.189.12.598.288 1.226.5.24-.362.313-.415.394-2.412 0-1.85.033-22.042 0-23.395z"
id="prefix__e"
/>
<Path
d="M1.62 3.02C1.588 1.669 1.467.307 1.24.127A8.985 8.985 0 000 .431v27.897c.062.188.456.348 1.181.48.256-.301.44-.719.44-2.392 0-1.85.032-22.042 0-23.395z"
id="prefix__j"
/>
<Path
d="M1.852 1.85c0-1.105-.28-1.85-.28-1.85H.432L0 .431v14.024l.462.503 1.11.003s.28-1.178.28-2.475V1.85z"
id="prefix__o"
/>
<Path
d="M.231 3.02C.264 1.669.478.643.613.247c1.08.263 1.239.185 1.239.185v45.006s-.337.509-1.239.63c-.122-.145-.3-.544-.382-2.541 0-1.85-.032-39.152 0-40.505z"
id="prefix__u"
/>
<Path
d="M164.336.925c22.649 0 34.738 12.066 34.738 34.685v65.781c-.223.236-.393.801-.446 1.5h-.017v43.236l.117 1.387c.083.37.204.656.346.807v216.994c0 22.614-12.088 34.685-34.738 34.685h-52.239c-.484-.257-1.359-.436-2.375-.46l-18.518-.002h-.232c-1.113 0-2.086.185-2.606.462h-52.24C13.478 400 1.39 387.931 1.39 365.318V158.085c.27-.163.463-.645.463-1.544v-26.613h-.017c-.053-.694-.224-.992-.446-1.096v-9.128c.27-.164.463-.645.463-1.545V91.546h-.017c-.053-.693-.224-.991-.446-1.096V76.09c.316-.673.324-2.826.463-4.414v-6.374c-.005-.705-.05-4.042-.464-4.955V35.61C1.389 12.99 13.479.925 36.128.925h128.21z"
id="prefix__z"
/>
<Path
d="M162.072 4.162c22.938 0 33.761 9.443 33.761 32.37v328.786c0 22.922-10.822 31.907-33.761 31.907H38.392c-22.94 0-34.225-8.985-34.225-31.907V36.532c0-22.927 11.286-32.37 34.224-32.37h123.68z"
id="prefix__D"
/>
<Path
d="M162.26 5.55c22.94 0 31.721 9.242 31.721 32.193v325.901c0 22.946-8.78 31.732-32.647 31.732H38.204c-22.48 0-32.185-8.786-32.185-31.27V37.744c0-22.95 9.244-32.194 32.184-32.194H162.26z"
id="prefix__F"
/>
<Path
d="M0 1.618c0 .894.725 1.619 1.618 1.619h20.838a1.618 1.618 0 000-3.237H1.618C.725 0 0 .725 0 1.618z"
id="prefix__H"
/>
<Path
d="M36.111 0a2.313 2.313 0 012.315 2.312V3.7c0 5.619 4.56 10.174 10.185 10.174H125c5.625 0 10.185-4.555 10.185-10.174V2.312A2.313 2.313 0 01137.5 0h18.056c9.971 0 18.055 8.074 18.055 18.035v339.422c0 9.96-8.084 18.034-18.055 18.034h-137.5C8.084 375.491 0 367.417 0 357.457V18.035C0 8.075 8.084 0 18.056 0H36.11z"
id="prefix__Q"
/>
<Path id="prefix__S" d="M.611 0h193v417h-193z" />
<Ellipse id="prefix__L" cx={3.704} cy={3.468} rx={2.775} ry={2.778} />
<Ellipse id="prefix__O" cx={3.704} cy={3.468} rx={1.85} ry={1.852} />
<Rect id="prefix__U" x={0} y={0} width={60} height={60} rx={14.609} />
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<G mask="url(#prefix__b)">
<Path
d="M30.092 146.817c-7.568-13.084-3.369-30.286 9.374-38.419l143.124-91.34 38.712 85.027c6.265 13.76.936 31.377-11.912 39.356L98.443 210.347c-12.843 7.976-29.394 3.826-36.957-9.25l-31.394-54.28z"
fill="url(#prefix__c)"
filter="url(#prefix__d)"
transform="scale(-1 1) rotate(-10 1520.311 2042.638)"
/>
<G transform="translate(88 94)">
<G transform="translate(.463 129.017)">
<Mask id="prefix__i" fill="#fff">
<Use xlinkHref="#prefix__e" />
</Mask>
<Use fill="#000" filter="url(#prefix__f)" xlinkHref="#prefix__e" />
<Use fill="url(#prefix__g)" xlinkHref="#prefix__e" />
<Use fill="#000" filter="url(#prefix__h)" xlinkHref="#prefix__e" />
<Path
d="M-.821-.462S.319-.61.463 2.775v22.119c0 3.822-1.11 4.026-1.284 4.239l-.105-.669c.642-.954.747-2.117.747-3.932V4.607C-.18 2.443-.643.343-.821.352v-.814z"
fill="#464646"
mask="url(#prefix__i)"
/>
</G>
<G transform="translate(.463 90.636)">
<Mask id="prefix__n" fill="#fff">
<Use xlinkHref="#prefix__j" />
</Mask>
<Use fill="#000" filter="url(#prefix__k)" xlinkHref="#prefix__j" />
<Use fill="url(#prefix__l)" xlinkHref="#prefix__j" />
<Use fill="#000" filter="url(#prefix__m)" xlinkHref="#prefix__j" />
<Path
d="M-.821-.462S.319-.61.463 2.775v22.119c0 3.822-1.11 4.026-1.284 4.239l-.105-.669c.642-.954.747-2.117.747-3.932V4.607C-.18 2.443-.643.343-.821.352v-.814z"
fill="#464646"
mask="url(#prefix__n)"
/>
</G>
<G transform="translate(0 60.578)">
<Mask id="prefix__t" fill="#fff">
<Use xlinkHref="#prefix__o" />
</Mask>
<Use fill="#000" filter="url(#prefix__p)" xlinkHref="#prefix__o" />
<Use fill="url(#prefix__q)" xlinkHref="#prefix__o" />
<Use fill="#000" filter="url(#prefix__r)" xlinkHref="#prefix__o" />
<Path
d="M0-.925c-.076 0 .694.835.694 2.909v10.264c0 3.272-.725 3.15-.85 3.365l-.075-.677c.462-.965.462-2.001.462-2.913V2.775c0-1.313-.259-2.885-.387-2.876L0-.925z"
fillOpacity={0.2}
fill="url(#prefix__s)"
mask="url(#prefix__t)"
/>
</G>
<G transform="translate(198.148 101.734)">
<Mask id="prefix__y" fill="#fff">
<Use xlinkHref="#prefix__u" />
</Mask>
<Use fill="#000" filter="url(#prefix__v)" xlinkHref="#prefix__u" />
<Use fill="url(#prefix__w)" xlinkHref="#prefix__u" />
<Use fill="#000" filter="url(#prefix__x)" xlinkHref="#prefix__u" />
<Path
d="M2.673-.462S1.533-.61 1.389 2.775v39.229c0 3.822 1.11 4.026 1.284 4.239l.105-.669c-.642-.954-.747-2.118-.747-3.933V4.607c0-2.164.464-4.264.642-4.255v-.814z"
fill="#464646"
mask="url(#prefix__y)"
/>
</G>
<Use fill="#3A3A3A" xlinkHref="#prefix__z" />
<Use fill="#000" filter="url(#prefix__A)" xlinkHref="#prefix__z" />
<Ellipse
fillOpacity={0.15}
fill="#4A4A4A"
style={{
mixBlendMode: 'multiply',
}}
filter="url(#prefix__B)"
cx={15.741}
cy={11.561}
rx={11.574}
ry={11.561}
/>
<Use fill="url(#prefix__C)" xlinkHref="#prefix__D" />
<Use fill="#000" filter="url(#prefix__E)" xlinkHref="#prefix__D" />
<Use fill="#2D2D2D" xlinkHref="#prefix__F" />
<Use fill="#000" filter="url(#prefix__G)" xlinkHref="#prefix__F" />
<G transform="translate(87.963 15.26)">
<Use fill="#343434" xlinkHref="#prefix__H" />
<Use fill="#000" filter="url(#prefix__I)" xlinkHref="#prefix__H" />
<Path
stroke="url(#prefix__J)"
strokeWidth={0.5}
d="M1.618.25A1.364 1.364 0 00.25 1.618a1.364 1.364 0 001.368 1.368l20.838.001a1.364 1.364 0 001.368-1.368A1.364 1.364 0 0022.456.25L1.618.249z"
strokeLinejoin="square"
/>
</G>
<G transform="rotate(-74 71.398 -67.852)">
<Use fill="url(#prefix__K)" xlinkHref="#prefix__L" />
<Use fill="#000" filter="url(#prefix__M)" xlinkHref="#prefix__L" />
</G>
<G transform="rotate(-74 71.398 -67.852)">
<Use fill="url(#prefix__N)" xlinkHref="#prefix__O" />
<Use fill="#000" filter="url(#prefix__P)" xlinkHref="#prefix__O" />
</G>
</G>
<G transform="translate(101.426 106.948)">
<Mask id="prefix__R" fill="#fff">
<Use xlinkHref="#prefix__Q" />
</Mask>
<G mask="url(#prefix__R)">
<G transform="translate(-9.426 -18.948)">
<Mask id="prefix__T" fill="#fff">
<Use xlinkHref="#prefix__S" />
</Mask>
<Use fill="#FEF2ED" xlinkHref="#prefix__S" />
<G opacity={0.152} mask="url(#prefix__T)">
<G transform="rotate(-15 -138.766 94.787)">
<Circle fill="#006DC2" cx={104.354} cy={103.612} r={29} />
<Circle fill="#D8C3B9" cx={104.636} cy={29.148} r={29} />
<Circle fill="#D8C3B9" cx={104.33} cy={177.111} r={29} />
<Circle
fill="#D8C3B9"
transform="rotate(-90 29.89 103.33)"
cx={29.889}
cy={103.33}
r={29}
/>
<Circle
fill="#D8C3B9"
transform="rotate(-90 177.852 103.636)"
cx={177.852}
cy={103.636}
r={29}
/>
</G>
</G>
</G>
</G>
<G mask="url(#prefix__R)">
<G transform="translate(57 38.052)">
<Mask id="prefix__V" fill="#fff">
<Use xlinkHref="#prefix__U" />
</Mask>
<Use fill="#D8D8D8" xlinkHref="#prefix__U" />
<Image
mask="url(#prefix__V)"
width={60}
height={60}
xlinkHref="data:image/png;base64,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"
/>
</G>
</G>
</G>
</G>
<Path
fill="url(#prefix__W)"
mask="url(#prefix__b)"
d="M0 225h375v84H0z"
/>
<G mask="url(#prefix__b)">
<G transform="translate(111 230)">
<Rect
fill="#D1B4A8"
opacity={0.284}
width={154}
height={42}
rx={4.702}
/>
<Path
d="M121.059 12.446c0-.534.746-.868 1.343-.6l3.758 1.68c.277.123.448.352.448.6V28.15c0 .248-.17.477-.448.6l-3.758 1.68c-.597.267-1.343-.066-1.343-.6zm6.728 3.007c0-.534.746-.867 1.343-.6l2.163.967c.277.123.448.352.448.6v9.436c0 .247-.17.476-.448.6l-2.163.967c-.597.267-1.343-.067-1.343-.6zm5.133 2.294c0-.533.746-.867 1.343-.6l2.163.967c.277.124.448.353.448.6v4.847c0 .248-.17.477-.448.6l-2.163.968c-.597.266-1.343-.067-1.343-.6zm5.133 2.295c0-.534.746-.867 1.343-.6l2.452 1.096c.597.266.597.933 0 1.2l-2.452 1.096c-.597.267-1.343-.066-1.343-.6z"
fill="#FEF5F1"
opacity={0.3}
/>
<Rect
fill="#FEF5F1"
opacity={0.267}
x={15}
y={17}
width={88}
height={8}
rx={4}
/>
</G>
</G>
</G>
</Svg>
)
Example #20
| Source File: Shadow.js From react-native-neu-element with MIT License | 4 votes |
|
Shadow = props => {
const {
width = 0,
height = 0,
color = '#000',
offsetX = 0,
offsetY = 0,
blur = 3,
spread = 0,
borderRadius: _borderRadius = 0,
opacity = '1',
style = {},
children,
} = props.setting;
const borderRadius =
_borderRadius > Math.min(width, height) / 2
? Math.min(width, height) / 2
: _borderRadius;
const rectInnerWidth = width + spread * 2 - blur;
const rectInnerHeight = height + spread * 2 - blur;
const rectOuterWidth = width + spread * 2 + blur;
const rectOuterHeight = height + spread * 2 + blur;
const innerRadius =
borderRadius > 0 ? Math.max(0, borderRadius + spread - blur / 2) : 0;
const outerRadius =
borderRadius > 0 ? Math.max(0, borderRadius + spread + blur / 2) : blur;
const borderWidth = (rectOuterWidth - rectInnerWidth) / 2;
const rgb = hexToRgb(color);
const linear = key => {
return [
<Stop
offset="0"
stopColor={color}
stopOpacity={opacity}
key={key + 'Linear0'}
/>,
<Stop
offset="1"
stopColor={color}
stopOpacity="0"
key={key + 'Linear1'}
/>,
];
};
const radial = key => {
return [
<Stop
offset="0"
stopColor={color}
stopOpacity={opacity}
key={key + 'Radial0'}
/>,
<Stop
offset={Math.max(0, innerRadius / outerRadius).toString()}
stopColor={color}
stopOpacity={opacity}
key={key + 'Radial1'}
/>,
<Stop
offset="1"
stopColor={color}
stopOpacity="0"
key={key + 'Radial2'}
/>,
];
};
const styles = StyleSheet.create({
viewContainer: {
width: rectOuterWidth,
height: rectOuterHeight,
position: 'absolute',
left: -blur / 2 - spread + offsetX,
top: -blur / 2 - spread + offsetY,
...style,
},
});
return (
<View style={styles.viewContainer}>
<Svg width={rectOuterWidth} height={rectOuterHeight}>
<Defs>
<LinearGradient id="top" x1="0%" x2="0%" y1="100%" y2="0%">
{linear('BoxTop')}
</LinearGradient>
<LinearGradient id="bottom" x1="0%" x2="0%" y1="0%" y2="100%">
{linear('BoxBottom')}
</LinearGradient>
<LinearGradient id="left" x1="100%" x2="0%" y1="0%" y2="0%">
{linear('BoxLeft')}
</LinearGradient>
<LinearGradient id="right" x1="0%" x2="100%" y1="0%" y2="0%">
{linear('BoxRight')}
</LinearGradient>
<RadialGradient
id="border-left-top"
rx="100%"
ry="100%"
cx="100%"
cy="100%"
fx="100%"
fy="100%">
{radial('BoxLeftTop')}
</RadialGradient>
<RadialGradient
id="border-left-bottom"
rx="100%"
ry="100%"
cx="100%"
cy="0%"
fx="100%"
fy="0%">
{radial('BoxLeftBottom')}
</RadialGradient>
<RadialGradient
id="border-right-top"
rx="100%"
ry="100%"
cx="0%"
cy="100%"
fx="0%"
fy="100%">
{radial('BoxRightTop')}
</RadialGradient>
<RadialGradient
id="border-right-bottom"
rx="100%"
ry="100%"
cx="0%"
cy="0%"
fx="0%"
fy="0%">
{radial('BoxRightBottom')}
</RadialGradient>
</Defs>
<Path
d={`
M 0 ${outerRadius},
a ${outerRadius} ${outerRadius} 0 0 1 ${outerRadius} ${-outerRadius}
v ${blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${-innerRadius} ${innerRadius}
z
`}
fill="url(#border-left-top)"
/>
<Path
d={`
M ${rectOuterWidth - outerRadius} 0,
a ${outerRadius} ${outerRadius} 0 0 1 ${outerRadius} ${outerRadius}
h ${-blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${-innerRadius} ${-innerRadius}
z
`}
fill="url(#border-right-top)"
/>
<Path
d={`
M ${rectOuterWidth} ${rectOuterHeight - outerRadius},
a ${outerRadius} ${outerRadius} 0 0 1 ${-outerRadius} ${outerRadius}
v ${-blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${innerRadius} ${-innerRadius}
z
`}
fill="url(#border-right-bottom)"
/>
<Path
d={`
M ${outerRadius} ${rectOuterHeight},
a ${outerRadius} ${outerRadius} 0 0 1 ${-outerRadius} ${-outerRadius}
h ${blur}
a ${innerRadius} ${innerRadius} 0 0 0 ${innerRadius} ${innerRadius}
z
`}
fill="url(#border-left-bottom)"
/>
<Rect
x={outerRadius}
y={0}
width={rectInnerWidth - innerRadius * 2}
height={blur}
fill="url(#top)"
/>
<Rect
x={rectOuterWidth - blur}
y={outerRadius}
width={blur}
height={rectInnerHeight - innerRadius * 2}
fill="url(#right)"
/>
<Rect
x={outerRadius}
y={rectOuterHeight - blur}
width={rectInnerWidth - innerRadius * 2}
height={blur}
fill="url(#bottom)"
/>
<Rect
x={0}
y={outerRadius}
width={blur}
height={rectInnerHeight - innerRadius * 2}
fill="url(#left)"
/>
<Path
d={`
M ${borderWidth} ${borderWidth + innerRadius},
a ${innerRadius} ${innerRadius} 0 0 1 ${innerRadius} ${-innerRadius}
h ${rectInnerWidth - innerRadius * 2}
a ${innerRadius} ${innerRadius} 0 0 1 ${innerRadius} ${innerRadius}
v ${rectInnerHeight - innerRadius * 2}
a ${innerRadius} ${innerRadius} 0 0 1 ${-innerRadius} ${innerRadius}
h ${-rectInnerWidth + innerRadius * 2}
a ${innerRadius} ${innerRadius} 0 0 1 ${-innerRadius} ${-innerRadius}
z
`}
fill={`rgba(${rgb.r},${rgb.g},${rgb.b},${opacity || 1})`}
/>
{children}
</Svg>
</View>
);
}
Example #21
| Source File: index.js From discovery-mobile-ui with MIT License | 4 votes |
|
TimelineChart = ({ timelineIntervals }) => {
const {
maxCount, maxCount1SD, maxCount2SD, recordCount, recordCount2SDplus,
intervals, intervalLength,
minDate, maxDate,
} = timelineIntervals;
const screenWidth = Dimensions.get('window').width;
const availableWidth = screenWidth - (4 * config.CHART_MARGIN);
// TODO: a full, multi-line description of applied filters?
const noResultsMessage = recordCount ? '' : 'No loaded records pass your filters.';
const showVariance = maxCount > config.VARIANCE_THRESHOLD;
const countForMaxBarHeight = showVariance ? maxCount1SD : maxCount;
return (
<View
style={[
// StyleSheet.absoluteFill,
styles.root,
]}
>
<Svg
width={`${screenWidth}`}
height={config.CHART_HEIGHT}
viewBox={`0 0 ${screenWidth} ${config.CHART_HEIGHT}`}
style={{ borderWidth: 0 }}
>
<G
x={2 * config.CHART_MARGIN} // accommodate label for boundary line
y={32}
>
<SvgText
fill={config.LABEL_COLOR}
stroke="none"
fontSize="12"
fontWeight="bold"
fontStyle="italic"
x={availableWidth / 2}
y={config.BAR_HEIGHT / 2}
textAnchor="middle"
>
{noResultsMessage}
</SvgText>
<XAxis
availableWidth={availableWidth}
minDate={minDate}
maxDate={maxDate}
/>
<TimelineItems
availableWidth={availableWidth}
countForMaxBarHeight={countForMaxBarHeight}
intervals={intervals}
showVariance={showVariance}
/>
<VerticalBound
availableWidth={availableWidth}
countForMaxBarHeight={countForMaxBarHeight}
/>
{showVariance && (
<VarianceLegend
maxCount={maxCount}
maxCount1SD={maxCount1SD}
maxCount2SD={maxCount2SD}
recordCount2SDplus={recordCount2SDplus}
/>
)}
<GroupingLegend
availableWidth={availableWidth}
intervalLength={intervalLength}
/>
<Rect
x="0"
y="0"
width={availableWidth}
height={config.BAR_HEIGHT}
strokeDasharray="2 2"
// stroke="#f008" // debug position
/>
</G>
<Rect
x="0"
y="0"
width={screenWidth}
height={config.CHART_HEIGHT}
strokeDasharray="2 2"
// stroke="#00f8" // debug position
/>
</Svg>
</View>
);
}
