react-native-svg#ClipPath JavaScript Examples
The following examples show how to use
react-native-svg#ClipPath.
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: 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 #2
| Source File: Icons.js From 4noobs-mobile with MIT License | 6 votes |
|
CoursesIcon = (props) => (
<Svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<G clipPath="url(#prefix__clip0)">
<Path
d="M6 12h2c.6 0 1-.4 1-1V3.5l3.2 7.9c.2.5.8.8 1.3.5l1.9-.8c.5-.2.8-.8.5-1.3L12.1.5c-.2-.5-.8-.8-1.3-.5L9 .8C8.9.4 8.5 0 8 0H6c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1z"
fill="#7D8FFF"
/>
<Path
d="M1 12h2c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1H1C.4 0 0 .4 0 1v10c0 .6.4 1 1 1z"
fill="#546BFB"
/>
<Path d="M16 14H0v2h16v-2z" fill="#D7DCFF" />
</G>
<Defs>
<ClipPath id="prefix__clip0">
<Path fill="#fff" d="M0 0h16v16H0z" />
</ClipPath>
</Defs>
</Svg>
)
Example #3
| Source File: Icons.js From 4noobs-mobile with MIT License | 6 votes |
|
StarIcon = (props) => (
<Svg
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<G clipPath="url(#prefix__clip0)">
<Path
d="M15.144 5.439l-4.317-.628L8.9.9a1.041 1.041 0 00-1.8 0L5.173 4.812l-4.317.627A1 1 0 00.3 7.145l3.123 3.045-.737 4.3a1 1 0 001.451 1.054L8 13.513l3.861 2.029a1 1 0 001.451-1.054l-.737-4.3L15.7 7.145a1 1 0 00-.554-1.705l-.002-.001z"
fill="#546BFB"
/>
</G>
<Defs>
<ClipPath id="prefix__clip0">
<Path fill="#fff" d="M0 0h16v16H0z" />
</ClipPath>
</Defs>
</Svg>
)
Example #4
| Source File: exercise.js From monsuivipsy with Apache License 2.0 | 6 votes |
|
function SvgComponent(props) {
return (
<Svg
width={30}
height={25}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<G clipPath="url(#prefix__clip0_2777_13335)" fill="currentColor">
<Path d="M10.313 9.375c.517 0 .937-.35.937-.781 0-.647-.63-1.172-1.406-1.172-.518 0-.938.35-.938.781 0 .317.227.59.552.712.147.271.474.46.854.46z" />
<Path d="M9.844 7.422c-.777 0-1.406.525-1.406 1.172 0 .647.63 1.172 1.406 1.172.776 0 1.406-.525 1.406-1.172 0-.317-.226-.59-.552-.712-.147-.272-.474-.46-.854-.46zM15.469 7.422c-.777 0-1.406.525-1.406 1.172 0 .647.63 1.172 1.406 1.172.776 0 1.406-.525 1.406-1.172 0-.647-.63-1.172-1.406-1.172-.518 0-.938.35-.938.781 0 .432.42.781.938.781-.26 0-.469-.175-.469-.39 0-.216.21-.39.469-.39s.469.174.469.39c0 .215-.21.39-.47.39.518 0 .938-.35.938-.78 0-.432-.42-.782-.937-.782zM4.688 21.484c0-1.51 1.469-2.734 3.28-2.734 1.813 0 3.282 1.224 3.282 2.734S9.78 24.22 7.969 24.22c-1.812 0-3.282-1.225-3.282-2.735zm3.28 1.172c.777 0 1.407-.524 1.407-1.172 0-.647-.63-1.172-1.406-1.172-.777 0-1.407.525-1.407 1.172 0 .648.63 1.172 1.407 1.172zM1.406 22.656C.63 22.656 0 23.181 0 23.828 0 24.475.63 25 1.406 25c.777 0 1.407-.525 1.407-1.172 0-.647-.63-1.172-1.407-1.172-.518 0-.937.35-.937.782 0 .431.42.78.937.78-.259 0-.468-.174-.468-.39 0-.216.21-.39.468-.39.26 0 .469.174.469.39 0 .216-.21.39-.469.39.518 0 .938-.349.938-.78 0-.432-.42-.782-.938-.782zM21.563 9.375c.517 0 .937-.35.937-.781 0-.647-.63-1.172-1.406-1.172-.518 0-.938.35-.938.781 0 .317.227.59.552.712.147.271.474.46.855.46z" />
<Path d="M20.625 7.813c-.518 0-.938.35-.938.78 0 .648.63 1.173 1.407 1.173.776 0 1.406-.525 1.406-1.172 0-.432-.42-.781-.938-.781-.17 0-.33.038-.468.104a1.08 1.08 0 00-.469-.104z" />
<Path d="M22.031 8.203c0-.431-.42-.781-.937-.781-.777 0-1.407.525-1.407 1.172 0 .431.42.781.938.781.38 0 .707-.189.855-.46.325-.122.551-.395.551-.712z" />
<Path d="M5.66 6.515c.064.356-.174.703-.574.839-2.284.774-3.59 2.787-3.115 4.803.474 2.016 2.594 3.47 5.06 3.468h12.657c3.885.002 7.269-2.208 8.193-5.353.924-3.145-.85-6.408-4.297-7.902-3.447-1.494-7.672-.832-10.231 1.604-.355.338-.977.357-1.362.043-1.077-.88-2.683-1.135-4.073-.647-1.384.485-2.286 1.611-2.293 2.86.006.096.018.19.035.285zm1.53-4.586c1.791-.627 3.82-.434 5.381.468C15.731-.126 20.507-.725 24.449.984c4.214 1.826 6.383 5.816 5.253 9.66-1.13 3.844-5.266 6.546-10.015 6.543H7.032C3.67 17.19.777 15.207.13 12.457-.471 9.9 1.03 7.343 3.75 6.15c.045-1.846 1.39-3.502 3.44-4.22z" />
</G>
<Defs>
<ClipPath id="prefix__clip0_2777_13335">
<Path fill="#fff" d="M0 0h30v25H0z" />
</ClipPath>
</Defs>
</Svg>
);
}
Example #5
| Source File: PiggyBank.mobile.js From actual with MIT License | 6 votes |
|
SvgPiggyBank = props => (
<Svg
{...props}
viewBox="0 0 20 20"
style={{
color: '#242134',
...props.style
}}
>
<G clipPath="url(#piggy-bank_svg__clip0)">
<Path
d="M1.857 7.612H.98a.98.98 0 0 0-.98.98v2.224c0 .449.184.857.51 1.163.612.551 1.816 1.49 3.735 2.368a.571.571 0 0 1 .306.346l.939 3.286a.484.484 0 0 0 .469.347h1.47a.479.479 0 0 0 .469-.367l.47-1.817a.262.262 0 0 1 .326-.183c.571.122 1.183.163 1.795.163.613 0 1.225-.061 1.796-.163.143-.02.286.06.327.183l.47 1.817a.502.502 0 0 0 .468.367h1.47a.484.484 0 0 0 .47-.347l1.224-4.245a.487.487 0 0 1 .122-.224c.919-.98 1.53-2.163 1.735-3.47h.49c.53 0 .959-.448.938-.979-.02-.51-.47-.918-.98-.918h-.448C18.06 4.673 14.632 2 10.489 2c-1.775 0-3.428.49-4.755 1.326-.591-.408-1.469-.734-2.693-.632-.49.04-.715.612-.388.959.408.429.796 1 .877 1.735L1.857 7.612zm3.122.98a.862.862 0 0 1-.857-.858c0-.469.388-.857.857-.857.47 0 .858.388.858.857 0 .47-.388.858-.858.858z"
fill="currentColor"
/>
</G>
<Defs>
<ClipPath id="piggy-bank_svg__clip0">
<Path fill="currentColor" d="M0 0h20v20H0z" />
</ClipPath>
</Defs>
</Svg>
)
Example #6
| 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 #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: 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 #9
| Source File: Success.native.js From blade with MIT License | 6 votes |
|
function Success(props) {
const theme = useTheme();
return (
<Icon viewBox="0 0 24 24" {...props}>
<G clipPath="url(#prefix__clip0)" fill={getColor(theme, props.fill)}>
<Path d="M4.158 7.147a9 9 0 0110.505-2.374 1 1 0 10.814-1.826A11 11 0 1022 13v-.93a1 1 0 10-2 0V13A9 9 0 114.158 7.146z" />
<Path d="M22.707 4.707a1 1 0 00-1.414-1.414L11 13.586l-2.293-2.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l11-11z" />
</G>
<Defs>
<ClipPath id="prefix__clip0">
<Path d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
</Icon>
);
}
Example #10
| Source File: UploadCloud.native.js From blade with MIT License | 6 votes |
|
function UploadCloud(props) {
const theme = useTheme();
return (
<Icon viewBox="0 0 24 24" {...props}>
<G clipPath="url(#prefix__clip0)" fill={getColor(theme, props.fill)}>
<Path d="M1.013 6.843A9 9 0 0117.48 8H18a6 6 0 012.869 11.268 1 1 0 01-.958-1.756A4 4 0 0018 10H16.74a1 1 0 01-.968-.75 7 7 0 10-12.023 6.388 1 1 0 11-1.498 1.324A9 9 0 011.013 6.843z" />
<Path d="M12.707 11.293a1 1 0 00-1.414 0l-4 4a1 1 0 101.414 1.414L11 14.414V21a1 1 0 102 0v-6.586l2.293 2.293a1 1 0 001.414-1.414l-4-4z" />
</G>
<Defs>
<ClipPath id="prefix__clip0">
<Path fill="#fff" d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
</Icon>
);
}
Example #11
| Source File: WiFiOn.native.js From blade with MIT License | 6 votes |
|
WiFiOn = ({ ...props }) => {
const theme = useTheme();
return (
<Icon viewBox="0 0 24 24" {...props}>
<G clipPath="url(#prefix__clip0)" fill={getColor(theme, props.fill)}>
<Path d="M1.661 10.748a15 15 0 0119.838 0 1 1 0 101.322-1.5C16.397 3.583 6.763 3.583.34 9.247a1 1 0 101.322 1.5z" />
<Path d="M5.22 14.316a10 10 0 0112.8 0 1 1 0 001.28-1.537 12 12 0 00-15.36 0 1 1 0 001.28 1.537z" />
<Path d="M14.48 17.922a5 5 0 00-5.79 0 1 1 0 11-1.16-1.63 7 7 0 018.11 0 1 1 0 11-1.16 1.63zM12 22a1 1 0 100-2 1 1 0 000 2z" />
</G>
<Defs>
<ClipPath id="prefix__clip0">
<Path d="M0 0h24v24H0z" />
</ClipPath>
</Defs>
</Icon>
);
}
Example #12
| 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 #13
| Source File: IconBluezone.js From bluezone-app with GNU General Public License v3.0 | 4 votes |
|
function SvgComponent(props) {
return (
<Svg width={164} height={164} viewBox="0 0 164 164" {...props}>
<Defs>
<LinearGradient
id="prefix__b"
x1={0.5}
x2={0.5}
y2={0.986}
gradientUnits="objectBoundingBox">
<Stop offset={0} stopColor="#459fe5" />
<Stop offset={1} stopColor="#1c74c4" />
</LinearGradient>
<ClipPath id="prefix__a">
<Path
d="M-861.42 175.542l-.005 42.156c-.162 3.194.04 12.662 2.885 18 5.937 11.63 28.067 24.978 38.1 30.229 6.744-3.572 31.552-17.359 38.1-30.172 2.869-5.4 3.072-14.871 2.909-18.068v-42.143c-5.978-2.615-23.511-9.617-40.991-10.189-17.525.573-35.029 7.571-40.998 10.187z"
transform="translate(861.466 -165.355)"
fill="none"
/>
</ClipPath>
</Defs>
<Circle cx={82} cy={82} r={82} fill="#015cd0" opacity={0.08} />
<G transform="translate(40.644 31.652)" clipPath="url(#prefix__a)">
<Path
d="M-827.2 111.815a33.011 33.011 0 00-18.331-19.19c-4.373-1.933-9.982-2.578-15.071-2.578h-72.683c-5.089 0-10.7.644-15.071 2.578a33.01 33.01 0 00-18.331 19.19c-1.426 3.839-2 9.3-2 13.639v72.684c0 4.335.579 9.8 2 13.639a33.012 33.012 0 0018.331 19.19c4.373 1.933 9.982 2.578 15.071 2.578h72.683c5.089 0 10.7-.645 15.071-2.578a33.012 33.012 0 0018.331-19.19c1.426-3.839 2-9.3 2-13.639v-72.684c0-4.335-.578-9.8-2-13.639z"
transform="translate(937.983 -111.617)"
fill="url(#prefix__b)"
/>
</G>
<G transform="translate(51.361 44.911)" opacity={0.8}>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
transform="rotate(-62.45 41.12 24.758)"
/>
<Path d="M63.34 29.344a2.708 2.708 0 00-3.769-.677 2.69 2.69 0 00-.9 1.075l-7.589.236a20.207 20.207 0 00-2.458-6.423l4.972-1.882a2.111 2.111 0 002.9.472 2.112 2.112 0 00.528-2.94 2.112 2.112 0 00-2.94-.528 2.107 2.107 0 00-.9 1.664l-5.176 2.23c-.059-.088-.114-.178-.174-.265a20.285 20.285 0 00-4.92-4.973l3.688-8.753a3.832 3.832 0 001.845-.672 3.859 3.859 0 00.966-5.371 3.859 3.859 0 00-5.371-.966 3.859 3.859 0 00-.966 5.371 3.867 3.867 0 00.435.516l-3.461 8.186a20.471 20.471 0 00-9.3-2.063l.354-8.419a2.733 2.733 0 00.406-.23 2.708 2.708 0 00.678-3.769 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.7 2.7 0 001.018.879l-.308 8.621a20.284 20.284 0 00-7.489 2.532l-5.918-8.28a3.814 3.814 0 00-.18-4.067 3.818 3.818 0 00-5.315-.955A3.818 3.818 0 008.595 8.3a3.815 3.815 0 003.755 1.584l5.9 8.262a20.355 20.355 0 00-3.306 3.374l-5.732-3.847a2.7 2.7 0 00-.391-2.247 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.359-.3l5.623 3.773a20.441 20.441 0 00-3.424 11.012l-5.329-.5a2.69 2.69 0 00-.448-1.116 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.678 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.422-.363l6.13.579a20.2 20.2 0 002.03 7.008l-6.927 3.66.883 1.656 6.958-3.676q.282.454.59.9a20.262 20.262 0 005.481 5.353l-4.851 5.161a2.7 2.7 0 00-2.433.332 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.707 2.707 0 001.005-3.124l5.376-5.555a20.4 20.4 0 004.1 1.5l-1.239 4.128a2.1 2.1 0 00-1.272.375 2.112 2.112 0 00-.529 2.94 2.112 2.112 0 002.94.528 2.112 2.112 0 00.528-2.94 2.1 2.1 0 00-.352-.389l1.3-4.343a20.389 20.389 0 009.668-.615l4.077 9.346a4.716 4.716 0 00-.5 5.992 4.717 4.717 0 006.566 1.18 4.717 4.717 0 001.18-6.565 4.711 4.711 0 00-4.267-2l-4.007-9.185a20.6 20.6 0 002.506-1.487 20.315 20.315 0 007.1-8.708l6.01 2.962a2.7 2.7 0 00.453 1.937 2.708 2.708 0 003.769.677 2.708 2.708 0 00.677-3.769 2.708 2.708 0 00-3.769-.677 2.683 2.683 0 00-.233.182l-6.246-3.078a20.468 20.468 0 00.927-7.871l7.3-.227a2.74 2.74 0 00.2.347 2.708 2.708 0 003.769.677 2.708 2.708 0 00.681-3.783z" />
</G>
<Path
fill="#bf0000"
d="M100.245 85.978l.83-1.684 6.965 3.432-.83 1.684zM57.866 92.706l-.883-1.656 7.963-4.207.883 1.656zM99.264 68.055l-.859-.859 6.111-2.633.544 1.3zM75.876 102.385l1.574-5.247 1.351.4-1.574 5.247zM59.343 63.064l.786-1.169 6.723 4.52-.785 1.17zM90.808 60.736l3.949-9.373 3.039 1.247-3.949 9.373zM92.752 108.091l-4.993-11.444 3.013-1.307 4.993 11.444zM69.76 63.08l-6.432-9 2.7-1.875 6.432 9zM101.531 76.681l-.081-2.345 8.31-.259.081 2.345zM65.969 100.52l5.089-5.413 2.429 1.019-5.809 6zM55.617 79.786l.278-2.329 6.9.652-.278 2.329zM79.505 58.889l.34-9.531 2.343.1-.36 8.565z"
/>
<Ellipse
cx={20.391}
cy={20.357}
rx={20.391}
ry={20.357}
transform="rotate(-34.811 143.666 -49.192)"
fill="#bf0000"
/>
<Circle
cx={3.859}
cy={3.859}
r={3.859}
fill="#bf0000"
transform="translate(93.449 45.219)"
/>
<Circle
cx={4.717}
cy={4.717}
r={4.717}
fill="#bf0000"
transform="translate(90.957 105.651)"
/>
<Circle
cx={3.818}
cy={3.818}
r={3.818}
fill="#bf0000"
transform="translate(58.989 46.638)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(54.972 58.599)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(51.075 75.232)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(52.17 90.245)"
/>
<G transform="translate(62.45 100.286)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(106.861 86.935)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(109.484 72.519)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(104.245 62.636)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(73.763 102.164)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(78.335 44.338)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G>
<Circle
cx={2.745}
cy={2.745}
r={2.745}
fill="#fff"
transform="translate(90.093 82.913)"
/>
<Circle
cx={3.365}
cy={3.365}
r={3.365}
fill="#fff"
transform="translate(76.458 62.413)"
/>
<Circle
cx={2.323}
cy={2.323}
r={2.323}
fill="#fff"
transform="translate(66.688 77.249)"
/>
</G>
<Path
d="M130.318 83.701V36.99l-2.146-1.048c-.938-.457-23.237-11.221-46.375-11.938h-.238c-23.133.717-45.434 11.481-46.372 11.938l-2.146 1.048v46.714c-.063 1.388-.5 13.866 3.745 21.832 8.693 17.03 41.777 33.715 43.18 34.417l1.71.854 1.711-.854c1.4-.7 34.485-17.387 43.159-34.361 4.266-8.027 3.835-20.507 3.772-21.891zm-86.749 18.3c-2.845-5.343-3.046-14.811-2.885-18l.006-42.156c5.97-2.616 23.473-9.614 40.989-10.187 14.656.479 29.347 5.478 37.236 8.623l-69.461 69.46A33.145 33.145 0 0143.569 102zm76.2.057c-6.548 12.813-31.356 26.6-38.1 30.172a165.625 165.625 0 01-26.715-17.463l67.716-67.716v36.942c.167 3.193-.036 12.662-2.904 18.067z"
fill="#fff"
/>
</Svg>
);
}
Example #14
| Source File: IconBluezone.js From bluezone-app with GNU General Public License v3.0 | 4 votes |
|
function SvgComponent(props) {
return (
<Svg width={164} height={164} viewBox="0 0 164 164" {...props}>
<Defs>
<LinearGradient
id="prefix__b"
x1={0.5}
x2={0.5}
y2={0.986}
gradientUnits="objectBoundingBox">
<Stop offset={0} stopColor="#459fe5" />
<Stop offset={1} stopColor="#1c74c4" />
</LinearGradient>
<ClipPath id="prefix__a">
<Path
d="M-861.42 175.542l-.005 42.156c-.162 3.194.04 12.662 2.885 18 5.937 11.63 28.067 24.978 38.1 30.229 6.744-3.572 31.552-17.359 38.1-30.172 2.869-5.4 3.072-14.871 2.909-18.068v-42.143c-5.978-2.615-23.511-9.617-40.991-10.189-17.525.573-35.029 7.571-40.998 10.187z"
transform="translate(861.466 -165.355)"
fill="none"
/>
</ClipPath>
</Defs>
<Circle cx={82} cy={82} r={82} fill="#2b77d8" opacity={1} />
<G transform="translate(40.644 31.652)" clipPath="url(#prefix__a)">
<Path
d="M-827.2 111.815a33.011 33.011 0 00-18.331-19.19c-4.373-1.933-9.982-2.578-15.071-2.578h-72.683c-5.089 0-10.7.644-15.071 2.578a33.01 33.01 0 00-18.331 19.19c-1.426 3.839-2 9.3-2 13.639v72.684c0 4.335.579 9.8 2 13.639a33.012 33.012 0 0018.331 19.19c4.373 1.933 9.982 2.578 15.071 2.578h72.683c5.089 0 10.7-.645 15.071-2.578a33.012 33.012 0 0018.331-19.19c1.426-3.839 2-9.3 2-13.639v-72.684c0-4.335-.578-9.8-2-13.639z"
transform="translate(937.983 -111.617)"
fill="url(#prefix__b)"
/>
</G>
<G transform="translate(51.361 44.911)" opacity={0.8}>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
transform="rotate(-62.45 41.12 24.758)"
/>
<Path d="M63.34 29.344a2.708 2.708 0 00-3.769-.677 2.69 2.69 0 00-.9 1.075l-7.589.236a20.207 20.207 0 00-2.458-6.423l4.972-1.882a2.111 2.111 0 002.9.472 2.112 2.112 0 00.528-2.94 2.112 2.112 0 00-2.94-.528 2.107 2.107 0 00-.9 1.664l-5.176 2.23c-.059-.088-.114-.178-.174-.265a20.285 20.285 0 00-4.92-4.973l3.688-8.753a3.832 3.832 0 001.845-.672 3.859 3.859 0 00.966-5.371 3.859 3.859 0 00-5.371-.966 3.859 3.859 0 00-.966 5.371 3.867 3.867 0 00.435.516l-3.461 8.186a20.471 20.471 0 00-9.3-2.063l.354-8.419a2.733 2.733 0 00.406-.23 2.708 2.708 0 00.678-3.769 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.7 2.7 0 001.018.879l-.308 8.621a20.284 20.284 0 00-7.489 2.532l-5.918-8.28a3.814 3.814 0 00-.18-4.067 3.818 3.818 0 00-5.315-.955A3.818 3.818 0 008.595 8.3a3.815 3.815 0 003.755 1.584l5.9 8.262a20.355 20.355 0 00-3.306 3.374l-5.732-3.847a2.7 2.7 0 00-.391-2.247 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.359-.3l5.623 3.773a20.441 20.441 0 00-3.424 11.012l-5.329-.5a2.69 2.69 0 00-.448-1.116 2.708 2.708 0 00-3.769-.677 2.708 2.708 0 00-.678 3.769 2.708 2.708 0 003.769.677 2.733 2.733 0 00.422-.363l6.13.579a20.2 20.2 0 002.03 7.008l-6.927 3.66.883 1.656 6.958-3.676q.282.454.59.9a20.262 20.262 0 005.481 5.353l-4.851 5.161a2.7 2.7 0 00-2.433.332 2.708 2.708 0 00-.677 3.769 2.708 2.708 0 003.769.677 2.707 2.707 0 001.005-3.124l5.376-5.555a20.4 20.4 0 004.1 1.5l-1.239 4.128a2.1 2.1 0 00-1.272.375 2.112 2.112 0 00-.529 2.94 2.112 2.112 0 002.94.528 2.112 2.112 0 00.528-2.94 2.1 2.1 0 00-.352-.389l1.3-4.343a20.389 20.389 0 009.668-.615l4.077 9.346a4.716 4.716 0 00-.5 5.992 4.717 4.717 0 006.566 1.18 4.717 4.717 0 001.18-6.565 4.711 4.711 0 00-4.267-2l-4.007-9.185a20.6 20.6 0 002.506-1.487 20.315 20.315 0 007.1-8.708l6.01 2.962a2.7 2.7 0 00.453 1.937 2.708 2.708 0 003.769.677 2.708 2.708 0 00.677-3.769 2.708 2.708 0 00-3.769-.677 2.683 2.683 0 00-.233.182l-6.246-3.078a20.468 20.468 0 00.927-7.871l7.3-.227a2.74 2.74 0 00.2.347 2.708 2.708 0 003.769.677 2.708 2.708 0 00.681-3.783z" />
</G>
<Path
fill="#bf0000"
d="M100.245 85.978l.83-1.684 6.965 3.432-.83 1.684zM57.866 92.706l-.883-1.656 7.963-4.207.883 1.656zM99.264 68.055l-.859-.859 6.111-2.633.544 1.3zM75.876 102.385l1.574-5.247 1.351.4-1.574 5.247zM59.343 63.064l.786-1.169 6.723 4.52-.785 1.17zM90.808 60.736l3.949-9.373 3.039 1.247-3.949 9.373zM92.752 108.091l-4.993-11.444 3.013-1.307 4.993 11.444zM69.76 63.08l-6.432-9 2.7-1.875 6.432 9zM101.531 76.681l-.081-2.345 8.31-.259.081 2.345zM65.969 100.52l5.089-5.413 2.429 1.019-5.809 6zM55.617 79.786l.278-2.329 6.9.652-.278 2.329zM79.505 58.889l.34-9.531 2.343.1-.36 8.565z"
/>
<Ellipse
cx={20.391}
cy={20.357}
rx={20.391}
ry={20.357}
transform="rotate(-34.811 143.666 -49.192)"
fill="#bf0000"
/>
<Circle
cx={3.859}
cy={3.859}
r={3.859}
fill="#bf0000"
transform="translate(93.449 45.219)"
/>
<Circle
cx={4.717}
cy={4.717}
r={4.717}
fill="#bf0000"
transform="translate(90.957 105.651)"
/>
<Circle
cx={3.818}
cy={3.818}
r={3.818}
fill="#bf0000"
transform="translate(58.989 46.638)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(54.972 58.599)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(51.075 75.232)"
/>
<Circle
cx={2.708}
cy={2.708}
r={2.708}
fill="#bf0000"
transform="translate(52.17 90.245)"
/>
<G transform="translate(62.45 100.286)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(106.861 86.935)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(109.484 72.519)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G transform="translate(104.245 62.636)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(73.763 102.164)">
<Circle cx={2.112} cy={2.112} r={2.112} fill="#bf0000" />
</G>
<G transform="translate(78.335 44.338)">
<Circle cx={2.708} cy={2.708} r={2.708} fill="#bf0000" />
</G>
<G>
<Circle
cx={2.745}
cy={2.745}
r={2.745}
fill="#fff"
transform="translate(90.093 82.913)"
/>
<Circle
cx={3.365}
cy={3.365}
r={3.365}
fill="#fff"
transform="translate(76.458 62.413)"
/>
<Circle
cx={2.323}
cy={2.323}
r={2.323}
fill="#fff"
transform="translate(66.688 77.249)"
/>
</G>
<Path
d="M130.318 83.701V36.99l-2.146-1.048c-.938-.457-23.237-11.221-46.375-11.938h-.238c-23.133.717-45.434 11.481-46.372 11.938l-2.146 1.048v46.714c-.063 1.388-.5 13.866 3.745 21.832 8.693 17.03 41.777 33.715 43.18 34.417l1.71.854 1.711-.854c1.4-.7 34.485-17.387 43.159-34.361 4.266-8.027 3.835-20.507 3.772-21.891zm-86.749 18.3c-2.845-5.343-3.046-14.811-2.885-18l.006-42.156c5.97-2.616 23.473-9.614 40.989-10.187 14.656.479 29.347 5.478 37.236 8.623l-69.461 69.46A33.145 33.145 0 0143.569 102zm76.2.057c-6.548 12.813-31.356 26.6-38.1 30.172a165.625 165.625 0 01-26.715-17.463l67.716-67.716v36.942c.167 3.193-.036 12.662-2.904 18.067z"
fill="#fff"
/>
</Svg>
);
}
