react-native-svg#G JavaScript Examples
The following examples show how to use
react-native-svg#G.
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: Privacy.js From real-frontend with GNU General Public License v3.0 | 7 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">
<Circle cx="17.5" cy="18.5" fill="none" r="3.5"/>
<Circle cx="6.5" cy="18.5" fill="none" r="3.5"/>
<Polygon fill="none" points="3 12 21 12 18 8 6 8 3 12" stroke={fill}/>
<Polyline fill="none" points="6 8 7 2 17 2 18 8" stroke={fill}/>
<Path d="M14.1,17.713a3.437,3.437,0,0,0-4.192,0" fill="none"/>
</G>
</Svg>
)
Example #2
| Source File: Icons.js From 4noobs-mobile with MIT License | 6 votes |
|
NotificationIcon = (props) => (
<Svg
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<G clipPath="url(#prefix__clip0)" fill="#4775f2">
<Path d="M20 10V8A8 8 0 004 8v2a4.441 4.441 0 01-1.547 3.193A4.183 4.183 0 001 16c0 2.5 4.112 4 11 4s11-1.5 11-4a4.183 4.183 0 00-1.453-2.807A4.44 4.44 0 0120 10zM9.145 21.9a2.992 2.992 0 005.71 0c-.894.066-1.844.1-2.855.1s-1.961-.032-2.855-.1z" />
</G>
<Defs>
<ClipPath id="prefix__clip0">
<Path fill="#fff" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
</Svg>
)
Example #3
| Source File: Globe.js From monsuivipsy with Apache License 2.0 | 6 votes |
|
function SvgComponent(props) {
return (
<Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" {...props}>
<G
fill="none"
stroke="currentColor"
strokeWidth={3}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit={10}>
<Circle cx={36} cy={36} r={28} />
<Path d="M36 8v56c-8.6 0-15.5-12.5-15.5-28S27.4 8 36 8s15.5 12.5 15.5 28S44.6 64 36 64M64 36H8M60 22H12M60 50H12" />
</G>
</Svg>
);
}
Example #4
| Source File: Loading.mobile.js From actual with MIT License | 6 votes |
|
SvgLoading = props => {
let { color = '#fff' } = props;
return (
<Svg {...props} viewBox="0 0 38 38" style={{ ...props.style }}>
<Defs>
<LinearGradient
x1="8.042%"
y1="0%"
x2="65.682%"
y2="23.865%"
id="loading_svg__a"
>
<Stop stopColor={color} stopOpacity={0} offset="0%" />
<Stop stopColor={color} stopOpacity={0.631} offset="63.146%" />
<Stop stopColor={color} offset="100%" />
</LinearGradient>
</Defs>
<G transform="translate(1 2)" fill="none" fillRule="evenodd">
<Path
d="M36 18c0-9.94-8.06-18-18-18"
stroke="url(#loading_svg__a)"
strokeWidth={2}
fill="none"
/>
<Circle fill="#fff" cx={36} cy={18} r={1} />
</G>
</Svg>
);
}
Example #5
| Source File: Logo.js From turkce-sozluk with MIT License | 6 votes |
|
function SvgLogo(props) {
return (
<Svg
width={86}
height={40}
viewBox="0 0 86 40"
fill="none"
className=""
{...props}
>
<G clipPath="url(#logo_svg__clip0)" fill="currentColor">
<Path d="M8.212 7.815H0V0h25.695v7.815h-8.212v20H8.212v-20zM27.815 0H38.41c11.126 0 16.556 5.43 16.556 13.642v.133c0 8.212-5.695 14.04-16.954 14.04H27.815V0zm9.271 8.08v11.655h1.59c4.238 0 7.02-1.722 7.02-5.828v-.132c0-3.974-2.782-5.828-7.02-5.828h-1.59v.132zM57.616 0h9.272v10.464L74.835 0h10.86l-9.668 12.053 9.8 15.762H74.703l-5.43-8.875-2.385 2.914v5.96h-9.271V0zM2.384 35.497H.662v-.928h4.239v.928H3.31v4.37h-.927v-4.37zM6.623 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.324 1.457.795 0 1.325-.53 1.325-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.252 2.384-1.324-.132-2.251-.927-2.251-2.384zm1.06-4.37h.926v.794h-.927v-.794zm1.589 0h.927v.794h-.927v-.794zM13.377 34.702h2.384c.663 0 1.193.132 1.59.53.265.265.397.662.397 1.192 0 .927-.53 1.457-1.192 1.59L18.013 40h-1.06l-1.324-1.854h-1.192V40h-.927v-5.298h-.133zm2.252 2.649c.662 0 1.06-.397 1.06-.927s-.398-.927-1.06-.927h-1.324v1.721h1.324v.133zM19.603 34.702h.927v2.649l2.517-2.649h1.191l-2.251 2.252L24.239 40h-1.192l-1.855-2.384-.662.795V40h-.927v-5.298zM29.14 34.702h1.986c1.722 0 2.781 1.192 2.781 2.649S32.715 40 31.126 40h-1.987v-5.298zm.926.795v3.576h1.06c1.06 0 1.854-.795 1.854-1.722 0-1.06-.662-1.854-1.854-1.854h-1.06zM35.894 33.377h.927v.795h-.927v-.794zm0 1.325h.927V40h-.927v-5.298zM39.073 34.702H40v4.503h2.782V40h-3.709v-5.298zM47.682 34.702h.927v2.649l2.517-2.649h1.192l-2.252 2.252L52.318 40h-1.192l-1.854-2.384-.663.795V40h-.927v-5.298zM53.775 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.325 1.457.794 0 1.324-.53 1.324-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.251 2.384-1.325-.132-2.252-.927-2.252-2.384zM60.53 34.702h2.384c.662 0 1.192.132 1.59.53.264.265.397.662.397 1.192 0 .927-.53 1.457-1.192 1.59L65.165 40h-1.06l-1.324-1.854H61.59V40h-.927v-5.298h-.132zm2.251 2.649c.663 0 1.06-.397 1.06-.927s-.397-.927-1.06-.927h-1.324v1.721h1.324v.133zM66.755 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.325 1.457.794 0 1.324-.53 1.324-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.251 2.384-1.457-.132-2.252-.927-2.252-2.384zM73.378 34.702h.927l1.59 2.517 1.589-2.517h.927V40h-.927v-3.841l-1.722 2.517-1.59-2.517V40h-.927v-5.298h.133zM80.662 37.748v-3.046h.927v3.046c0 .928.53 1.457 1.325 1.457.795 0 1.325-.53 1.325-1.457v-3.046h.927v3.046c0 1.59-.927 2.384-2.252 2.384-1.325-.132-2.252-.927-2.252-2.384z" />
</G>
<Defs>
<ClipPath id="logo_svg__clip0">
<Path d="M0 0h85.828v40H0V0z" fill="currentColor" />
</ClipPath>
</Defs>
</Svg>
)
}
Example #6
| 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 #7
| Source File: index.js From designcode-app with MIT License | 6 votes |
|
export function NotificationIcon(props) {
return (
<Svg
width={props.size || 24}
height={props.size || 24}
viewBox="0 0 24 24"
fill="none"
{...props}
>
<G clipPath="url(#prefix__clip0)" fill={props.color || "#333"}>
<Path d="M20 10V8A8 8 0 004 8v2a4.441 4.441 0 01-1.547 3.193A4.183 4.183 0 001 16c0 2.5 4.112 4 11 4s11-1.5 11-4a4.183 4.183 0 00-1.453-2.807A4.44 4.44 0 0120 10zM9.145 21.9a2.992 2.992 0 005.71 0c-.894.066-1.844.1-2.855.1s-1.961-.032-2.855-.1z" />
</G>
<Defs>
<ClipPath id="prefix__clip0">
<Path fill="#fff" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
</Svg>
);
}
Example #8
| Source File: Female.js From astrale with GNU General Public License v3.0 | 6 votes |
|
function Female({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Circle cx={236.967} cy={236.967} r={236.967} fill={colors.primary} />
<G fill={colors.accent}>
<Path d="M197.716 336.944c-3.906-3.903-18.904-19.263-18.63-18.993.056-.052 28.741-28.378 28.741-28.378s16.157-14.271 22.275-27.985c.494-1.104-18.821-18.978-18.821-18.978-13.822 6.11-28.303 22.481-28.303 22.481-9.485 9.478-28.557 28.194-28.557 28.194l-17.934-17.934c-10.425-10.421-21.672-30.279-38.305-13.65-16.673 16.677 3.371 28.048 13.822 38.499 3.906 3.903 17.571 17.927 17.571 17.927-7.289 7.285-2.073 2.069-6.275 6.279-10.428 10.428-37.676 29.059-21.048 45.684 16.681 16.685 35.446-10.75 45.889-21.201 4.183-4.18-1.115 1.119 6.092-6.095 7.517 7.529 14.672 14.675 19.005 19.008 10.425 10.428 21.669 30.279 38.305 13.643 16.665-16.671-3.38-28.05-13.827-38.501z" />
<Path d="M352.241 119.801c-44.146-44.153-115.719-44.153-159.868 0-44.146 44.153-44.146 115.722 0 159.864 44.149 44.157 115.722 44.157 159.868 0 44.149-44.142 44.149-115.711 0-159.864zm-30.376 129.466c-27.364 27.364-71.723 27.364-99.09 0s-27.367-71.726 0-99.09 71.73-27.364 99.09 0c27.364 27.363 27.364 71.726 0 99.09z" />
</G>
<Path
d="M148.141 348.888c4.183-4.18-1.115 1.119 6.092-6.095 7.517 7.528 14.672 14.675 19.005 19.008 10.425 10.428 21.669 30.279 38.305 13.643 16.666-16.67-3.379-28.048-13.826-38.499-3.906-3.903-18.904-19.263-18.63-18.993l26.967-26.623c44.198 32.06 106.357 28.179 146.188-11.663 44.149-44.142 44.149-115.711 0-159.864-.03-.03-.064-.06-.094-.086l-30.376 30.372c.03.03.067.06.097.086 27.364 27.364 27.364 71.73 0 99.09-27.364 27.364-71.723 27.364-99.09 0-.03-.03-.056-.064-.086-.094L102.02 369.838c.082.079.146.161.232.247 16.681 16.689 35.446-10.746 45.889-21.197z"
fill={colors.accent}
/>
</Svg>
);
}
Example #9
| Source File: Direct.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="1.5">
<Line fill="none" x1="12" x2="12" y1="2" y2="16"/>
<Polyline fill="none" points="8 6 12 2 16 6"/>
<Polyline fill="none" points="17 10 21 10 21 23 3 23 3 10 7 10" stroke={fill}/>
</G>
</Svg>
)
Example #10
| Source File: EyeOff.native.js From blade with MIT License | 6 votes |
|
function Eye(props) {
const theme = useTheme();
return (
<Icon viewBox="0 0 24 24" {...props}>
<G clipPath="url(#clip0)" fill={getColor(theme, props.fill)}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M1.707.293A1 1 0 00.293 1.707l4.256 4.256C2.118 8.236.61 10.547.106 11.558a1 1 0 00.01.915c.796 1.503 2.316 3.704 4.333 5.493 2 1.773 4.623 3.256 7.597 3.038a11.07 11.07 0 005.783-1.76l4.464 4.463a1 1 0 001.414-1.414l-22-22zm14.668 17.496l-2.322-2.322a4 4 0 01-5.515-5.515L5.964 7.378c-1.942 1.805-3.231 3.624-3.822 4.624.757 1.303 2.027 3.042 3.634 4.467 1.818 1.612 3.934 2.71 6.147 2.539a9.072 9.072 0 004.451-1.22zm-6.346-6.346a2 2 0 002.533 2.533l-2.533-2.533zm13.849.083c-.797-1.46-2.317-3.605-4.33-5.374-2-1.757-4.61-3.25-7.565-3.147-.778 0-1.553.089-2.31.266a1 1 0 00.455 1.948 8.12 8.12 0 011.909-.215c2.236-.082 4.37 1.05 6.19 2.65 1.59 1.398 2.85 3.072 3.608 4.332-.23.364-.517.802-.8 1.22-.215.318-.423.616-.6.856a5.14 5.14 0 01-.342.436 1 1 0 001.414 1.414c.162-.162.36-.42.542-.667a44.54 44.54 0 001.809-2.725 1 1 0 00.02-.994z"
/>
</G>
<Defs>
<ClipPath id="clip0">
<Path d="M0 0H24V24H0z" />
</ClipPath>
</Defs>
</Icon>
);
}
Example #11
| Source File: FurnitureAndHousehold.js From reddit-clone with MIT License | 6 votes |
|
function SvgFurnitureAndHousehold(props) {
return (
<Svg height={512} viewBox="0 0 512 512" width={512} className="" {...props}>
<Circle cx={258.997} cy={136} fill="#d0f2d2" r={40} />
<Circle cx={366} cy={176} fill="#ffdede" r={20} />
<Path
d="M46 502c0-77.32 62.68-140 140-140s140 62.68 140 140"
fill="#99ebfa"
/>
<Path
d="M283.99 402H88.01c25.26-24.74 59.84-40 97.99-40s72.73 15.26 97.99 40z"
fill="#ccf5fc"
/>
<G fill="#fff">
<Path d="M126 502v-40h40v40M206 502v-40h40v40M246 308.274c-18.301 18.301-47.973 18.301-66.274 0s-18.301-47.973 0-66.274z" />
</G>
<Path d="M346 342h120v80H346z" fill="#ccf5fc" />
<Circle cx={86} cy={130} fill="#fff" r={40} />
<Circle cx={426} cy={50} fill="#fff" r={40} />
<G fill="#33d6f5">
<Path d="M366 206c16.542 0 30-13.458 30-30s-13.458-30-30-30-30 13.458-30 30 13.458 30 30 30zm0-40c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zM199.276 174.048c6.647 0 12.974-1.225 16.331-1.875a155.13 155.13 0 007.306-1.615C232.02 180.063 244.824 186 258.997 186c27.57 0 50-22.43 50-50a50.42 50.42 0 00-.153-3.724c19.921-13.089 38.555-30.026 31.722-44.682-3.747-8.034-13.139-11.408-27.926-10.018-10.57.992-24.052 4.318-38.986 9.618a9.97 9.97 0 00-1.361.613 49.859 49.859 0 00-13.295-1.809c-20.739 0-38.565 12.693-46.128 30.717a9.878 9.878 0 00-1.28.685c-28.451 18.292-39.944 33.857-34.159 46.266 3.858 8.275 13.129 10.383 21.845 10.382zM258.997 166a29.82 29.82 0 01-12.466-2.723c8.166-2.976 16.638-6.49 25.145-10.457a328.748 328.748 0 0016.007-8.043C283.922 157.05 272.486 166 258.997 166zm60.934-68.752c-2.848 3.562-8.499 8.77-17.031 14.845a50.259 50.259 0 00-7.868-10.702c11.94-3.29 20.225-4.24 24.899-4.143zM258.997 106c11.845 0 22.106 6.902 26.98 16.894-6.647 3.841-14.22 7.82-22.754 11.799-11.939 5.568-22.687 9.708-31.973 12.701A29.832 29.832 0 01228.996 136c.001-16.542 13.459-30 30.001-30zm-49.461 37.308a49.514 49.514 0 002.281 9.221c-5.91 1.157-10.542 1.611-13.696 1.537 2.003-2.51 5.565-6.158 11.415-10.758zM466 332H346c-5.522 0-10 4.478-10 10v80c0 5.522 4.478 10 10 10h50v60h-60.341c-2.479-37.469-18.769-71.222-43.824-96.193a10.067 10.067 0 00-1.813-1.771C265.28 370.19 232.395 354.749 196 352.341v-22.92a57.19 57.19 0 0016.863 2.552c14.562 0 29.123-5.543 40.208-16.628 3.905-3.905 3.905-10.237 0-14.143l-26.066-26.066 26.066-26.066c3.905-3.905 3.905-10.237 0-14.143-3.906-3.904-10.236-3.904-14.143 0l-26.066 26.066-26.066-26.066c-3.906-3.904-10.236-3.904-14.143 0-22.17 22.171-22.17 58.245 0 80.417a56.895 56.895 0 003.346 3.066v33.929c-36.385 2.407-69.263 17.84-94.001 41.675a9.99 9.99 0 00-1.848 1.804C52.893 422.994 36 460.561 36 502c0 5.522 4.478 10 10 10h360c5.522 0 10-4.478 10-10v-70h50c5.522 0 10-4.478 10-10v-80c0-5.522-4.478-10-10-10zm-285.3-74.884l50.184 50.184c-14.037 7.857-32.164 5.826-44.087-6.097s-13.954-30.049-6.097-44.087zM236 492h-20v-20h20zm10-40h-40c-5.523 0-10 4.478-10 10v30h-20v-30c0-5.522-4.477-10-10-10h-40c-5.522 0-10 4.478-10 10v30H56.381c2.364-30.938 15.609-58.878 35.901-80h187.436c20.292 21.122 33.537 49.062 35.901 80H256v-30c0-5.522-4.477-10-10-10zm-90 40h-20v-20h20zm30-120c25.418 0 49.151 7.339 69.204 20H116.796c20.053-12.661 43.786-20 69.204-20zm270 0h-40v-20h40zm-60-20v20h-40v-20zm-40 60v-20h40v20zm60 0v-20h40v20zM46 140c16.542 0 30 13.458 30 30 0 5.523 4.478 10 10 10s10-4.477 10-10c0-16.542 13.458-30 30-30 5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10-16.542 0-30-13.458-30-30 0-5.522-4.478-10-10-10s-10 4.478-10 10c0 16.542-13.458 30-30 30-5.522 0-10 4.478-10 10 0 5.523 4.478 10 10 10zm40-20.035A50.432 50.432 0 0096.035 130 50.432 50.432 0 0086 140.035 50.432 50.432 0 0075.965 130 50.432 50.432 0 0086 119.965zM386 60c16.542 0 30 13.458 30 30 0 5.522 4.478 10 10 10s10-4.478 10-10c0-16.542 13.458-30 30-30 5.522 0 10-4.478 10-10s-4.478-10-10-10c-16.542 0-30-13.458-30-30 0-5.523-4.478-10-10-10s-10 4.477-10 10c0 16.542-13.458 30-30 30-5.522 0-10 4.478-10 10s4.478 10 10 10zm40-20.035A50.405 50.405 0 00436.035 50 50.432 50.432 0 00426 60.035 50.405 50.405 0 00415.965 50 50.405 50.405 0 00426 39.965z" />
</G>
</Svg>
)
}
Example #12
| Source File: CircleBlueGradient.js From react-native-ring-picker with GNU General Public License v3.0 | 6 votes |
|
CircleBlueGradient = () => (
<Svg width="100%" height="100%" viewBox="0 0 955 955">
<G id="layer_2">
<G id="layer_1-2">
<LinearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="477.3691" y1="0.2666" x2="477.3691" y2="955">
<Stop offset="0" stopColor="#5896D0"/>
<Stop offset="0.2815" stopColor="#3D8CCB"/>
<Stop offset="0.5674" stopColor="#1E80C6"/>
<Stop offset="0.8652" stopColor="#0060AD"/>
<Stop offset="0.9944" stopColor="#004886"/>
</LinearGradient>
<Path fill="url(#SVGID_1_)" d="M477.4,955C214.1,955,0,740.9,0,477.6S214.1,0.3,477.4,0.3s477.4,214.1,477.4,477.4S740.6,955,477.4,955z
M477.4,178.6c-164.9,0-299,134.1-299,299s134.1,299,299,299s299-134.1,299-299S642.2,178.6,477.4,178.6z"/>
</G>
</G>
</Svg>
)
Example #13
| 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 #14
| Source File: Cool.js From astrale with GNU General Public License v3.0 | 5 votes |
|
function Cool({ height, width, style }) {
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Circle cx={256} cy={256} r={256} fill="#ffd93b" />
<Path
d="M240.704 214.688c-8.48 44.24-54.32 77.28-102.4 73.664-48.256-3.632-80.32-42.544-71.84-86.784 8.496-44.384 54.32-77.28 102.56-73.648 48.08 3.616 80.176 42.384 71.68 86.768z"
fill="#fff"
/>
<Circle cx={175.184} cy={202.416} r={39.728} fill="#3e4347" />
<G fill="#fff">
<Ellipse
transform="rotate(-134.999 189.402 188.197)"
cx={189.401}
cy={188.196}
rx={12.832}
ry={7.92}
/>
<Path d="M271.296 214.688c8.48 44.24 54.32 77.28 102.4 73.664 48.256-3.632 80.32-42.544 71.84-86.784-8.496-44.384-54.32-77.28-102.56-73.648-48.08 3.616-80.176 42.384-71.68 86.768z" />
</G>
<Circle cx={336.8} cy={202.416} r={39.728} fill="#3e4347" />
<Ellipse
transform="rotate(-134.999 351.009 188.175)"
cx={351.008}
cy={188.174}
rx={12.832}
ry={7.92}
fill="#fff"
/>
<Path
fill="#3e4347"
d="M292.608 103.648s83.568-26.672 156.16 34.112c-20.56-63.648-72.624-75.008-156.16-34.112zM231.664 39.968S148.096 13.296 75.504 74.08C96.08 10.448 148.128-.928 231.664 39.968zM226.224 247.024c0 29.984-19.536 76.656-31.52 104.32-49.152 0-113.824-8.32-154.72-16.48-4.832-32.896-1.904-79.552 2.08-113.44 71.712 10.88 107.952 17.152 184.16 25.6zM285.776 247.024c0 29.984 19.536 76.656 31.52 104.32 49.152 0 113.824-8.32 154.72-16.48 4.832-32.896 1.904-79.552-2.08-113.44-71.712 10.88-107.952 17.152-184.16 25.6z"
/>
<Path
fill="#5a5f63"
d="M114.928 232.56l-77.12 77.12c.256 6.24.736 12.176 1.36 17.904l92.544-92.544c-5.584-.816-11.152-1.648-16.784-2.48zM176.368 241.12a2541.002 2541.002 0 01-36.064-4.848L41.44 335.136c10.384 2.048 22.208 4.096 34.912 6.016L176.368 241.12zM349.504 239.312l-54.464 54.464c1.536 4.816 3.152 9.6 4.88 14.384l71.904-71.904c-7.28 1.008-14.656 2.032-22.32 3.056zM431.504 227.312c-17.152 2.64-32.672 5.008-48.208 7.28l-80.768 80.768c3.984 10.528 8.08 20.416 11.808 29.12l117.168-117.168z"
/>
<Path
d="M489.936 213.904c-8.384-17.872-12.864-19.232-158.24 3.536A489.469 489.469 0 01256 223.344a489.469 489.469 0 01-75.696-5.904c-145.36-22.784-149.856-21.408-158.24-3.536-5.616 12.912-4.448 82.864-3.52 96.96 3.184 48.352-7.056 46.496 172.96 57.44 8.64-.16 16.16-5.12 20-12.64 7.952-15.168 14.8-31.168 20.608-47.104 3.632-9.936 13.296-16.384 23.888-16.384 10.592 0 20.256 6.448 23.888 16.384 5.808 15.936 12.672 31.936 20.608 47.104 3.84 7.52 11.36 12.48 20 12.64 180.016-10.944 169.776-9.072 172.96-57.44.928-14.096 2.096-84.048-3.52-96.96zM193.088 346.928c-47.136 0-118.864-9.856-151.44-16.16-3.824-22.992-.864-78.208 2.208-103.808 24.768 3.808 111.296 17.744 179.856 25.184.016 17.936-20.4 71.808-30.624 94.784zm277.264-16.16c-32.592 6.32-104.304 16.16-151.44 16.16-10.224-22.976-30.624-76.848-30.624-94.784 68.576-7.44 155.104-21.376 179.872-25.184 3.056 25.6 6.016 80.816 2.192 103.808z"
fill="#e24b4b"
/>
<Path
d="M176.272 442.24c-2.368-.688-1.504-6.496 1.024-6.352 36.224.912 103.072-5.248 158.048-54.56 3.984-3.568 8.288-.304 8.112 6.24-.784 30.896-18.016 101.792-167.184 54.672z"
fill="#3e4347"
/>
</Svg>
);
}
Example #15
| Source File: CrabSvg.js From rn-animation with MIT License | 5 votes |
|
function CrabSvg ({ size=wScale(20) }) {
return (
<Svg
width={size}
height={size}
viewBox="0 0 512 512"
enableBackground="new 0 0 512 512"
>
<Path
d="M156.299 81.142c-15.611-.498-48.105.866-76.074 17.614l-37.899 77.531c91.792 5.982 120.039-26.484 123.021-85.365.264-5.214-3.831-9.614-9.048-9.78zM355.701 81.142c15.611-.498 48.105.866 76.074 17.614l37.899 77.531c-91.792 5.982-120.039-26.484-123.021-85.365-.264-5.214 3.831-9.614 9.048-9.78z"
fill="#e34b4c"
/>
<Path
d="M95.77 277.499a27.092 27.092 0 01-.356-.232c-29.927-19.86-54.582-50.282-64.603-84.963-3.196-11.059-3.471-22.569-2.67-33.965.571-8.122 7.617-14.244 15.739-13.674 7.379.518 13.107 6.382 13.665 13.543 2.668 34.192 29.251 61.23 58.221 76.664 12.523 6.671 21.493 18.914 14.451 33.373-6.183 12.692-22.826 16.663-34.447 9.254zM416.23 277.499c.12-.076.238-.154.356-.232 29.927-19.86 54.582-50.282 64.603-84.963 3.196-11.059 3.471-22.569 2.67-33.965-.571-8.122-7.617-14.244-15.739-13.674-7.379.518-13.107 6.382-13.665 13.543-2.668 34.192-29.251 61.23-58.221 76.664-12.523 6.671-21.493 18.914-14.451 33.373 6.183 12.692 22.826 16.663 34.447 9.254z"
fill="#e34b4c"
/>
<Path
d="M248.722 386.669c-19.795 9.939-39.462 20.421-56.964 34.113-12.343 9.654-23.763 20.921-29.194 35.942-4.711 13.029-.213 26.636 5.417 38.541a8.255 8.255 0 01-3.934 10.992c-3.351 1.584-7.236.708-9.617-1.887-15.502-16.892-22.972-39.972-16.261-62.451 5.493-18.397 17.57-34.051 31.482-46.953 18.896-17.523 41.965-31.298 66.152-40.141 8.913-3.258 18.779 1.325 22.039 10.238 3.133 8.577-1.209 17.634-9.12 21.606zM175.049 374.475c-16.701 4.593-33.328 9.566-49.321 16.271-15.181 6.363-30.184 14.073-41.785 25.995-12.839 14.145-13.793 30.564-9.335 48.422a8.255 8.255 0 01-6.01 10.009c-3.598.898-7.238-.725-9.064-3.739-11.987-19.785-14.805-43.491-3.717-64.42 11.754-22.187 33.296-37.577 55.469-48.239 18.083-8.696 37.482-14.983 57.326-18.053 9.379-1.45 18.157 4.976 19.607 14.355 1.397 9.019-4.635 17.051-13.17 19.399zM139.587 336.75c-15.856.294-31.732.884-47.473 2.923-15.478 2.005-31.596 4.965-45.581 12.226-19.209 9.293-26.626 26.562-26.746 47.138-.028 4.726-3.318 8.874-8.309 8.844-3.709-.023-6.831-2.498-7.853-5.87-8.969-29.616 1.604-58.481 26.997-76.114 31.102-21.496 74.251-27.042 111.106-23.444 9.445.922 16.354 9.326 15.432 18.771-.856 8.773-8.168 15.358-16.772 15.512-.267.004-.534.008-.801.014z"
fill="#fd6f71"
/>
<Path
d="M263.278 386.669c19.795 9.939 39.462 20.421 56.964 34.113 12.343 9.654 23.763 20.921 29.194 35.942 4.711 13.029.213 26.636-5.417 38.541a8.255 8.255 0 003.934 10.992c3.351 1.584 7.236.708 9.617-1.887 15.502-16.892 22.972-39.972 16.261-62.451-5.493-18.397-17.57-34.051-31.482-46.953-18.896-17.523-41.965-31.298-66.152-40.141-8.913-3.258-18.779 1.325-22.039 10.238-3.133 8.577 1.208 17.634 9.12 21.606zM336.951 374.475c16.701 4.593 33.328 9.566 49.321 16.271 15.181 6.363 30.184 14.073 41.785 25.995 12.839 14.145 13.793 30.564 9.336 48.422a8.255 8.255 0 006.01 10.009c3.598.898 7.238-.725 9.064-3.739 11.987-19.785 14.805-43.491 3.717-64.42-11.754-22.187-33.296-37.577-55.469-48.239-18.083-8.696-37.482-14.983-57.326-18.053-9.378-1.45-18.157 4.976-19.607 14.355-1.398 9.019 4.633 17.051 13.169 19.399zM372.412 336.75c15.855.294 31.732.884 47.473 2.923 15.478 2.005 31.596 4.965 45.581 12.226 19.209 9.293 26.626 26.562 26.746 47.138.028 4.726 3.318 8.874 8.309 8.844 3.709-.023 6.831-2.498 7.853-5.87 8.969-29.616-1.604-58.481-26.997-76.114-31.102-21.496-74.251-27.042-111.106-23.444-9.445.922-16.354 9.326-15.432 18.771.856 8.773 8.168 15.358 16.772 15.512.268.004.535.008.801.014z"
fill="#fd6f71"
/>
<G>
<Path
d="M465.798 316.874c-29.007-13.997-64.498-17.452-95.528-14.423-9.445.922-16.354 9.326-15.432 18.771.856 8.773 8.168 15.358 16.772 15.512l.8.014c15.855.294 31.732.884 47.473 2.923 10.376 1.343 21.036 3.125 31.152 6.335 7.782-12.558 12.408-23.069 14.763-29.132zM400.714 358.772c-18.083-8.696-37.482-14.983-57.326-18.053-9.379-1.45-18.157 4.976-19.607 14.355-1.396 9.022 4.636 17.054 13.171 19.401 16.701 4.593 33.328 9.566 49.321 16.271 5.959 2.497 11.886 5.209 17.594 8.294a204.73 204.73 0 0020.381-18.523 205.03 205.03 0 004.479-4.831c-8.704-6.662-18.298-12.242-28.013-16.914zM342.351 394.968c-18.896-17.523-41.965-31.298-66.152-40.141-8.913-3.258-18.779 1.325-22.039 10.238-3.136 8.575 1.205 17.632 9.117 21.604 19.795 9.939 39.462 20.421 56.964 34.113 5.563 4.352 10.932 9.036 15.657 14.238 10.724-3.426 20.602-7.445 29.666-11.872-6.156-10.518-14.303-19.917-23.213-28.18z"
fill="#e34b4c"
/>
<Path
d="M257.839 365.065c-3.258-8.913-13.126-13.496-22.039-10.238-24.187 8.842-47.256 22.618-66.152 40.141-8.91 8.263-17.058 17.662-23.215 28.181 9.066 4.426 18.943 8.444 29.666 11.872 4.724-5.202 10.094-9.887 15.657-14.238 17.502-13.692 37.169-24.173 56.964-34.113 7.913-3.973 12.255-13.029 9.119-21.605zM168.613 340.719c-19.844 3.07-39.245 9.357-57.326 18.053-9.716 4.672-19.31 10.252-28.013 16.914a209.287 209.287 0 004.48 4.831 204.496 204.496 0 0020.381 18.523c5.708-3.085 11.636-5.797 17.594-8.294 15.994-6.704 32.62-11.677 49.321-16.271 8.535-2.347 14.567-10.379 13.171-19.401-1.451-9.379-10.231-15.806-19.608-14.355zM141.728 302.452c-31.03-3.029-66.521.425-95.528 14.423 2.355 6.062 6.982 16.574 14.762 29.132 10.115-3.21 20.776-4.991 31.152-6.335 15.74-2.039 31.616-2.629 47.473-2.923l.8-.014c8.605-.154 15.916-6.739 16.772-15.512.924-9.445-5.985-17.849-15.431-18.771z"
fill="#e34b4c"
/>
</G>
<Path
d="M256 415.942c146.241 0 182.221-113.656 182.221-113.656S439.382 167.233 256 167.233 73.778 302.286 73.778 302.286 109.758 415.942 256 415.942z"
fill="#fd6f71"
/>
<G>
<Path
d="M180.882 245.068a7.726 7.726 0 01-7.726-7.726v-13.595a7.726 7.726 0 1115.452 0v13.595a7.726 7.726 0 01-7.726 7.726zM331.119 245.068a7.726 7.726 0 01-7.726-7.726v-13.595a7.726 7.726 0 1115.452 0v13.595a7.727 7.727 0 01-7.726 7.726zM256 252.324c-9.455 0-18.333-3.953-24.358-10.845a7.726 7.726 0 1111.634-10.17c3.09 3.535 7.726 5.562 12.723 5.562 4.996 0 9.633-2.027 12.724-5.562 2.809-3.213 7.689-3.54 10.902-.731s3.541 7.689.731 10.902c-6.023 6.891-14.901 10.844-24.356 10.844z"
fill="#3a484a"
/>
</G>
<G>
<Path
d="M120.989 4.953c-25.557-.156-82.474 6.665-110.13 66.646-36.31 78.748 26.157 138.26 73.828 83.652 44.955-51.497 3.214-88.947 41.394-140.094 3.139-4.203.154-10.172-5.092-10.204zM391.011 4.953c25.557-.156 82.473 6.665 110.129 66.647 36.31 78.748-26.157 138.26-73.828 83.652-44.955-51.497-3.214-88.947-41.394-140.094-3.138-4.204-.153-10.173 5.093-10.205z"
fill="#fd6f71"
/>
</G>
</Svg>
);
}
Example #16
| Source File: Bubble.js From real-frontend with GNU General Public License v3.0 | 5 votes |
|
Bubble = ({ 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="1.5">
<Path d="M20.4,16.8 C22,15.2,23,13.2,23,11c0-5-4.9-9-11-9S1,6,1,11c0,5,4.9,9,11,9c1.1,0,2.1-0.1,3.1-0.4L21,22L20.4,16.8z" fill="none" stroke={fill}/>
</G>
</Svg>
)
Example #17
| Source File: Spaceship.js From reddit-clone with MIT License | 5 votes |
|
function SvgSpaceship(props) {
return (
<Svg height={512} viewBox="0 0 512 512" width={512} className="" {...props}>
<Path d="M416 390v40h-40v-40" fill="#99ebfa" />
<Path
d="M436 390V150c0-22.091-17.909-40-40-40s-40 17.909-40 40v240"
fill="#fff"
/>
<Path d="M356 256h80v40h-80z" fill="#fff7bf" />
<Path
d="M436 150v20h-80v-20c0-11.04 4.48-21.04 11.72-28.28S384.96 110 396 110c22.09 0 40 17.91 40 40z"
fill="#ccf5fc"
/>
<Path
d="M156 390V150c0-22.091-17.909-40-40-40s-40 17.909-40 40v240"
fill="#fff"
/>
<Path d="M136 390v40H96v-40" fill="#99ebfa" />
<Path
d="M156 390V150c0-22.091-17.909-40-40-40s-40 17.909-40 40v240"
fill="#fff"
/>
<Path d="M76 256h80v40H76z" fill="#fff7bf" />
<Path
d="M156 150v20H76v-20c0-11.04 4.48-21.04 11.72-28.28S104.96 110 116 110c22.09 0 40 17.91 40 40z"
fill="#ccf5fc"
/>
<Path
d="M356 390V110c0-55.228-44.772-100-100-100S156 54.771 156 110v280"
fill="#fff"
/>
<Path
d="M356 110H156c0-27.62 11.19-52.62 29.29-70.71C203.38 21.19 228.38 10 256 10c55.23 0 100 44.77 100 100z"
fill="#ccf5fc"
/>
<Path d="M136 350h80v-80z" fill="#99ebfa" />
<Path d="M296 350V210l-40-60-40 60v140" fill="#fff" />
<Path d="M296 210h-80l40-60z" fill="#ccf5fc" />
<Path
d="M296 270v80h80zM216 430c0-22.091 17.909-40 40-40s40 17.909 40 40z"
fill="#99ebfa"
/>
<Circle cx={256} cy={260} fill="#ccf5fc" r={20} />
<G fill="#33d6f5">
<Path d="M396 456c-5.523 0-10 4.478-10 10v36c0 5.522 4.477 10 10 10s10-4.478 10-10v-36c0-5.522-4.477-10-10-10zM396 100c-11.247 0-21.638 3.735-30 10.027V110C366 49.346 316.654 0 256 0S146 49.346 146 110v.027C137.637 103.735 127.247 100 116 100c-27.57 0-50 22.43-50 50v240c0 5.522 4.477 10 10 10h10v30c0 5.522 4.477 10 10 10h40c5.523 0 10-4.478 10-10v-30h70.027C209.735 408.362 206 418.752 206 430c0 5.522 4.477 10 10 10h80c5.523 0 10-4.478 10-10 0-11.248-3.735-21.638-10.027-30H366v30c0 5.522 4.477 10 10 10h40c5.523 0 10-4.478 10-10v-30h10c5.523 0 10-4.478 10-10V150c0-27.57-22.43-50-50-50zM126 420h-20v-20h20zm20-94.143l-17.071 17.071a10 10 0 007.072 17.071h10v20H86v-74h60zM146 286H86v-20h60zm0-40H86v-66h60zm0-86H86v-10c0-16.542 13.458-30 30-30s30 13.458 30 30zM256 20c46.246 0 84.451 35.063 89.441 80H166.559c4.99-44.937 43.195-80 89.441-80zm-90 100h180v185.857l-40-40V210a9.98 9.98 0 00-.144-1.626 10.008 10.008 0 00-.278-1.241l-.01-.039a9.888 9.888 0 00-.483-1.255c-.035-.076-.072-.151-.109-.226-.191-.39-.4-.769-.638-1.128-.007-.01-.011-.022-.018-.032l-.015-.023-.024-.036-39.961-59.941a9.999 9.999 0 00-16.64 0l-39.96 59.941-.024.036-.015.023c-.007.01-.011.022-.018.032-.238.359-.447.739-.638 1.128-.037.075-.074.15-.109.226a9.888 9.888 0 00-.483 1.255l-.01.039c-.12.403-.209.818-.278 1.241A9.814 9.814 0 00206 210v55.857l-40 40zm60 220v-20h60v20zm60-69.995V300h-60v-29.995V220h60v49.995zM234.685 200L256 168.027 277.315 200zM206 294.143V340h-45.858zM227.713 420c4.127-11.641 15.249-20 28.287-20s24.159 8.359 28.287 20zM346 380H166v-20h180zm-40-40v-45.857L351.858 340zm100 80h-20v-20h20zm20-40h-60v-20h10a10 10 0 007.071-17.071L366 325.857V306h60zm0-94h-60v-20h60zm0-40h-60v-66h60zm0-86h-60v-10c0-16.542 13.458-30 30-30s30 13.458 30 30zM236 456c-5.523 0-10 4.478-10 10v36c0 5.522 4.477 10 10 10s10-4.478 10-10v-36c0-5.522-4.477-10-10-10zM116 456c-5.523 0-10 4.478-10 10v36c0 5.522 4.477 10 10 10s10-4.478 10-10v-36c0-5.522-4.477-10-10-10zM276 456c-5.523 0-10 4.478-10 10v36c0 5.522 4.477 10 10 10s10-4.478 10-10v-36c0-5.522-4.477-10-10-10z" />
</G>
</Svg>
)
}
Example #18
| Source File: SwipeArrowHint.js From react-native-ring-picker with GNU General Public License v3.0 | 5 votes |
|
SwipeArrowHint = () => (
<Svg width="100%" height="100%" viewBox="0 0 444.49 132.87">
<G id="layer_2" data-name="layer 2">
<G id="layer_1-2" data-name="layer 1">
<G opacity="0.5">
<Path fill="#ccc"
d="M177.82,82.11c.34,2.36,2.59,3.86,5.8,3.86,3,0,5.27-1.64,5.27-3.87,0-1.92-1.41-3.14-4.52-3.92l-2.89-.75c-4.08-1-5.84-2.87-5.84-6.08,0-3.83,3.2-6.42,8-6.42,4.36,0,7.61,2.59,7.84,6.23h-2.83c-.39-2.31-2.3-3.69-5.11-3.69-3,0-5,1.5-5,3.78,0,1.77,1.23,2.78,4.34,3.58l2.36.63c4.67,1.17,6.55,3,6.55,6.3,0,4.14-3.27,6.78-8.42,6.78-4.78,0-8.08-2.53-8.37-6.42Z"/>
<Path fill="#ccc"
d="M212.57,88h-2.73l-3.77-13h-.25l-3.75,13h-2.72l-4.72-16.84h2.72l3.31,13.47h.25l3.77-13.47h2.58L211,84.63h.25l3.31-13.47h2.7Z"/>
<Path fill="#ccc"
d="M220.41,66a1.88,1.88,0,1,1,1.88,1.88A1.88,1.88,0,0,1,220.41,66Zm.53,5.13h2.69V88h-2.69Z"/>
<Path fill="#ccc"
d="M244,79.58c0,5.27-2.8,8.72-7.08,8.72a5.65,5.65,0,0,1-5.27-2.83h-.25v8.16h-2.69V71.16h2.56V74h.25A6.07,6.07,0,0,1,237,70.86C241.25,70.86,244,74.28,244,79.58Zm-2.78,0c0-3.94-1.84-6.3-4.92-6.3s-5,2.42-5,6.3,1.92,6.3,5,6.3S241.25,83.52,241.25,79.58Z"/>
<Path fill="#ccc"
d="M262.1,83.64c-.78,2.88-3.41,4.66-7.09,4.66-4.67,0-7.59-3.37-7.59-8.7s3-8.73,7.59-8.73,7.31,3.23,7.31,8.47v1H250.21v.13c.14,3.33,2,5.44,4.86,5.44,2.17,0,3.64-.8,4.34-2.28Zm-11.89-5.45h9.28c-.06-3-1.84-5-4.52-5S250.41,75.2,250.21,78.19Z"/>
<Path fill="#ccc"
d="M120.16,111.81h-2.8v-2.25h2.8v-1.87c0-3.36,1.69-5,4.89-5a9.44,9.44,0,0,1,1.81.16v2.19a7.4,7.4,0,0,0-1.27-.08c-1.94,0-2.75.94-2.75,2.78v1.8h3.86v2.25h-3.86V126.4h-2.69Z"/>
<Path fill="#ccc"
d="M129.07,118c0-5.42,3-8.72,7.77-8.72s7.77,3.3,7.77,8.72-3,8.72-7.77,8.72S129.07,123.38,129.07,118Zm12.75,0c0-4-1.8-6.3-5-6.3s-5,2.3-5,6.3,1.8,6.3,5,6.3S141.82,122,141.82,118Z"/>
<Path fill="#ccc"
d="M148.82,109.56h2.56v2.5h.25c.5-1.64,2.44-2.8,4.67-2.8a11.54,11.54,0,0,1,1.34.08V112a10.79,10.79,0,0,0-1.72-.16A4.13,4.13,0,0,0,151.5,116V126.4h-2.69Z"/>
<Path fill="#ccc"
d="M170,109.56h2.56v2.66h.25c.84-1.86,2.48-3,5.06-3,3.78,0,5.89,2.23,5.89,6.23V126.4h-2.69V116.15c0-3-1.28-4.47-4-4.47s-4.42,1.8-4.42,4.75v10H170Z"/>
<Path fill="#ccc"
d="M187.71,121.68c0-3,2.22-4.75,6.14-5l4.86-.3v-1.53c0-2.08-1.3-3.22-3.81-3.22-2,0-3.42.77-3.8,2.09h-2.72c.36-2.7,3-4.48,6.61-4.48,4.11,0,6.41,2.11,6.41,5.61V126.4h-2.56v-2.48h-.25a5.82,5.82,0,0,1-5.19,2.78C190.13,126.7,187.71,124.76,187.71,121.68Zm11-1.56v-1.55l-4.53.3c-2.56.17-3.69,1.06-3.69,2.75s1.45,2.72,3.41,2.72C196.66,124.34,198.71,122.53,198.71,120.12Z"/>
<Path fill="#ccc"
d="M213.25,126.4H210.5l-6.23-16.84h2.88l4.61,13.88H212l4.61-13.87h2.88Z"/>
<Path fill="#ccc"
d="M222.61,104.43a1.88,1.88,0,1,1,1.88,1.88A1.88,1.88,0,0,1,222.61,104.43Zm.53,5.13h2.69V126.4h-2.69Z"/>
<Path fill="#ccc"
d="M230.83,128.26h2.84c.3,1.38,1.8,2.27,4.22,2.27,3,0,4.81-1.48,4.81-4v-3.31h-.25a5.84,5.84,0,0,1-5.28,2.91c-4.36,0-7.06-3.37-7.06-8.42s2.73-8.47,7.06-8.47a6,6,0,0,1,5.41,3h.25v-2.67h2.56V126.7c0,3.77-2.91,6.17-7.5,6.17C233.83,132.87,231.24,131,230.83,128.26Zm11.94-10.53c0-3.67-1.89-6-5-6s-4.87,2.38-4.87,6,1.75,6,4.88,6S242.77,121.4,242.77,117.73Z"/>
<Path fill="#ccc"
d="M249.46,121.68c0-3,2.22-4.75,6.14-5l4.86-.3v-1.53c0-2.08-1.3-3.22-3.81-3.22-2,0-3.42.77-3.8,2.09h-2.72c.36-2.7,3-4.48,6.61-4.48,4.11,0,6.41,2.11,6.41,5.61V126.4h-2.56v-2.48h-.25a5.82,5.82,0,0,1-5.19,2.78C251.88,126.7,249.46,124.76,249.46,121.68Zm11-1.56v-1.55l-4.53.3c-2.56.17-3.69,1.06-3.69,2.75s1.45,2.72,3.41,2.72C258.41,124.34,260.46,122.53,260.46,120.12Z"/>
<Path fill="#ccc"
d="M268.11,109.56h2.56v2.66h.25c.84-1.86,2.48-3,5.06-3,3.78,0,5.89,2.23,5.89,6.23V126.4h-2.69V116.15c0-3-1.28-4.47-4-4.47s-4.42,1.8-4.42,4.75v10h-2.69Z"/>
<Path fill="#ccc"
d="M286.32,104.43a1.88,1.88,0,1,1,1.88,1.88A1.88,1.88,0,0,1,286.32,104.43Zm.53,5.13h2.69V126.4h-2.69Z"/>
<Path fill="#ccc"
d="M293.82,118c0-5.42,3-8.72,7.77-8.72s7.77,3.3,7.77,8.72-3,8.72-7.77,8.72S293.82,123.38,293.82,118Zm12.75,0c0-4-1.8-6.3-5-6.3s-5,2.3-5,6.3,1.8,6.3,5,6.3S306.57,122,306.57,118Z"/>
<Path fill="#ccc"
d="M313.57,109.56h2.56v2.66h.25c.84-1.86,2.48-3,5.06-3,3.78,0,5.89,2.23,5.89,6.23V126.4h-2.69V116.15c0-3-1.28-4.47-4-4.47s-4.42,1.8-4.42,4.75v10h-2.69Z"/>
</G>
<Path fill="#ccc"
d="M444.49,127l-7.63-37.34-7.55,11.83a264.43,264.43,0,0,0-87.36-72.61,262.49,262.49,0,0,0-239.41,0,264.42,264.42,0,0,0-87.35,72.6L7.63,89.66,0,127l32.07-20.59-13.52-2.73a260.41,260.41,0,0,1,85.82-71.24,258.48,258.48,0,0,1,235.75,0,260.39,260.39,0,0,1,85.83,71.24l-13.52,2.73Z"/>
</G>
</G>
</Svg>
)
Example #19
| Source File: index.js From discovery-mobile-ui with MIT License | 5 votes |
|
TimelineItems = ({
availableWidth, countForMaxBarHeight, intervals, showVariance,
}) => {
if (!countForMaxBarHeight) {
return null;
}
const tickUnits = config.BAR_HEIGHT / countForMaxBarHeight;
return intervals
.filter(({ items }) => !!items.length)
.map(({
key, position, zScore, items, markedItems, collectionItems,
}) => (
<G
key={key}
x={position * availableWidth}
>
{showVariance && (
<Variance
x={0}
y={-4}
zScore={zScore}
/>
)}
<Bar
x={0}
width={config.BAR_WIDTH}
height={Math.max(Math.min(items.length, countForMaxBarHeight) * tickUnits, 4)}
color={config.BAR_COLOR}
/>
{!collectionItems.length ? null : (
<Bar
x={0}
width={config.BAR_WIDTH}
height={Math.max(Math.min(collectionItems.length, countForMaxBarHeight) * tickUnits, 4)}
color={Colors.collectionIcon}
/>
)}
<MarkedIndicators
markedItems={markedItems}
/>
</G>
));
}
Example #20
| Source File: logo_bluezone.js From bluezone-app with GNU General Public License v3.0 | 4 votes |
|
function LogoBluezone(props) {
return (
<Svg width={33.608} height={40.321} viewBox="0 0 33.608 40.321" {...props}>
<Defs>
<LinearGradient
id="prefix__a"
x1={0.502}
y1={0.026}
x2={0.497}
y2={0.949}
gradientUnits="objectBoundingBox"
>
<Stop offset={0} stopColor="#459fe5" />
<Stop offset={1} stopColor="#1c74c4" />
</LinearGradient>
</Defs>
<G data-name="Group 6548">
<G data-name="Group 6547">
<Path
data-name="Path 14790"
d="M287.686 152c-7.794.242-15.469 3.988-15.469 3.988v15.333s-.226 4.322 1.149 6.9c2.838 5.559 14.32 11.3 14.32 11.3s11.482-5.74 14.323-11.3c1.373-2.584 1.147-6.906 1.147-6.906v-15.329s-7.674-3.746-15.47-3.986z"
transform="translate(-270.881 -150.677)"
fill="url(#prefix__a)"
/>
<Path
data-name="Path 14791"
d="M16.804 40.321l-.59-.295c-.484-.242-11.9-6-14.906-11.881-1.464-2.75-1.315-7.057-1.293-7.536V4.484l.741-.362C1.08 3.964 8.778.249 16.763.001h.082c7.987.248 15.684 3.963 16.008 4.121l.741.362v16.125c.022.478.17 4.786-1.3 7.557-2.994 5.859-14.414 11.619-14.9 11.861zM2.655 6.16v14.552c-.056 1.1.014 4.371 1 6.215 2.049 4.015 9.689 8.622 13.151 10.435 2.328-1.233 10.892-5.992 13.152-10.415.99-1.865 1.06-5.133 1-6.237V6.16a41.93 41.93 0 00-14.15-3.517A41.822 41.822 0 002.655 6.16z"
fill="#fff"
/>
<G
data-name="Group 5872"
transform="translate(6.339 7.218)"
opacity={0.8}
>
<Circle
data-name="Ellipse 1142"
cx={0.935}
cy={0.935}
r={0.935}
transform="rotate(-62.45 14.194 8.546)"
/>
<Path
data-name="Path 14792"
d="M21.865 10.129a.934.934 0 00-1.613.137l-2.62.081a6.977 6.977 0 00-.849-2.217l1.716-.65a.729.729 0 10-.144-.46l-1.787.77c-.02-.03-.039-.061-.06-.091a7 7 0 00-1.7-1.717l1.273-3.021a1.332 1.332 0 10-1.217-.565 1.336 1.336 0 00.15.178l-1.19 2.825a7.067 7.067 0 00-3.21-.712l.122-2.906a.934.934 0 10-1.161-.313.931.931 0 00.351.3L9.82 4.744a7 7 0 00-2.585.874L5.192 2.76a1.318 1.318 0 10-.93.648L6.3 6.26a7.028 7.028 0 00-1.141 1.165L3.18 6.097a.934.934 0 10-.369.525.946.946 0 00.124-.1l1.941 1.3a7.056 7.056 0 00-1.182 3.8l-1.84-.174a.934.934 0 10-.388.916.945.945 0 00.146-.125l2.116.2a6.972 6.972 0 00.7 2.419l-2.391 1.263.3.572 2.4-1.269q.1.157.2.31a6.994 6.994 0 001.892 1.848l-1.675 1.781a.934.934 0 10.575.571l1.856-1.917a7.041 7.041 0 001.414.518l-.428 1.425a.735.735 0 10.454.178l.45-1.5a7.038 7.038 0 003.337-.212l1.407 3.226a1.629 1.629 0 101.026-.482l-1.383-3.171a7.114 7.114 0 00.865-.513 7.013 7.013 0 002.452-3.006l2.075 1.022a.938.938 0 10.31-.57l-2.156-1.062a7.065 7.065 0 00.32-2.717l2.518-.078a.934.934 0 101.6-.947z"
/>
</G>
<G data-name="Group 5907">
<G data-name="Group 5902">
<G data-name="Group 5873">
<Path
data-name="Rectangle 1791"
fill="#bf0000"
d="M23.213 21.395l.286-.581 2.404 1.184-.286.582z"
/>
</G>
<G data-name="Group 5874">
<Path
data-name="Path 14793"
d="M8.585 23.716l-.3-.572 2.749-1.452.3.572z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5878">
<G data-name="Group 5875">
<Path
data-name="Path 14794"
d="M22.875 15.208l-.3-.3 2.11-.909.188.448z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5876">
<Path
data-name="Path 14795"
d="M14.801 27.056l.543-1.811.466.137-.543 1.811z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5877">
<Path
data-name="Rectangle 1792"
fill="#bf0000"
d="M9.094 13.486l.271-.403 2.32 1.56-.27.403z"
/>
</G>
</G>
<G data-name="Group 5882">
<G data-name="Group 5879">
<Path
data-name="Path 14796"
d="M19.956 12.681l1.363-3.235 1.049.43-1.363 3.235z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5880">
<Path
data-name="Path 14797"
d="M20.627 29.028l-1.723-3.951 1.04-.451 1.723 3.951z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5881">
<Path
data-name="Path 14798"
d="M12.69 13.491l-2.22-3.106.931-.647 2.22 3.106z"
fill="#bf0000"
/>
</G>
</G>
<G data-name="Group 5887">
<G data-name="Group 5883">
<Path
data-name="Path 14799"
d="M23.658 18.185l-.028-.81 2.869-.089.028.81z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5884">
<Path
data-name="Path 14800"
d="M11.381 26.415l1.757-1.869.838.352-2.005 2.072z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5885">
<Path
data-name="Path 14801"
d="M7.81 19.258l.1-.8 2.383.225-.1.8z"
fill="#bf0000"
/>
</G>
<G data-name="Group 5886">
<Path
data-name="Path 14802"
d="M16.057 12.044l.117-3.29.809.034-.126 2.957z"
fill="#bf0000"
/>
</G>
</G>
<G data-name="Group 5888">
<Ellipse
data-name="Ellipse 1143"
cx={7.039}
cy={7.027}
rx={7.039}
ry={7.027}
transform="rotate(-34.811 30.684 -2.955)"
fill="#bf0000"
/>
</G>
<G data-name="Group 5901">
<G data-name="Group 5889">
<Circle
data-name="Ellipse 1144"
cx={1.332}
cy={1.332}
r={1.332}
fill="#bf0000"
transform="translate(20.867 7.325)"
/>
</G>
<G data-name="Group 5890">
<Circle
data-name="Ellipse 1145"
cx={1.628}
cy={1.628}
r={1.628}
fill="#bf0000"
transform="translate(20.007 28.186)"
/>
</G>
<G data-name="Group 5891">
<Circle
data-name="Ellipse 1146"
cx={1.318}
cy={1.318}
r={1.318}
fill="#bf0000"
transform="translate(8.972 7.815)"
/>
</G>
<G data-name="Group 5892">
<Circle
data-name="Ellipse 1147"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(7.585 11.944)"
/>
</G>
<G data-name="Group 5893">
<Circle
data-name="Ellipse 1148"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(6.24 17.685)"
/>
</G>
<G data-name="Group 5894">
<Circle
data-name="Ellipse 1149"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(6.618 22.868)"
/>
</G>
<G data-name="Group 5895">
<Circle
data-name="Ellipse 1150"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(10.167 26.334)"
/>
</G>
<G data-name="Group 5896">
<Circle
data-name="Ellipse 1151"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(25.497 21.725)"
/>
</G>
<G data-name="Group 5897">
<Circle
data-name="Ellipse 1152"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(26.403 16.749)"
/>
</G>
<G data-name="Group 5898">
<Circle
data-name="Ellipse 1153"
cx={0.729}
cy={0.729}
r={0.729}
fill="#bf0000"
transform="translate(24.594 13.337)"
/>
</G>
<G data-name="Group 5899">
<Circle
data-name="Ellipse 1154"
cx={0.729}
cy={0.729}
r={0.729}
fill="#bf0000"
transform="translate(14.072 26.982)"
/>
</G>
<G data-name="Group 5900">
<Circle
data-name="Ellipse 1155"
cx={0.935}
cy={0.935}
r={0.935}
fill="#bf0000"
transform="translate(15.65 7.021)"
/>
</G>
</G>
</G>
<G data-name="Group 5906">
<G data-name="Group 5903">
<Circle
data-name="Ellipse 1156"
cx={0.947}
cy={0.947}
r={0.947}
fill="#fff"
transform="translate(19.708 20.338)"
/>
</G>
<G data-name="Group 5904">
<Circle
data-name="Ellipse 1157"
cx={1.162}
cy={1.162}
r={1.162}
fill="#fff"
transform="translate(15.002 13.261)"
/>
</G>
<G data-name="Group 5905">
<Circle
data-name="Ellipse 1158"
cx={0.802}
cy={0.802}
r={0.802}
fill="#fff"
transform="translate(11.629 18.382)"
/>
</G>
</G>
</G>
<Path
data-name="Rectangle 1793"
fill="#fff"
d="M4.614 30.662l26.25-26.25 1.819 1.817L6.432 32.48z"
/>
</G>
</G>
</Svg>
)
}
