@risemaxi/sigil
Version:
Icons and Signs for the Rise Design System
26 lines (25 loc) • 3.76 kB
JavaScript
import { memo } from 'react';
import { Svg, Circle as _Circle, G, Path, Rect, Defs, ClipPath, FeBlend, FeFlood, FeGaussianBlur, Filter, } from 'react-native-svg';
const Icon = (props) => {
const { color = 'black', size = 24, ...otherProps } = props;
return (<Svg viewBox="0 0 88 88" fill="none" height={size} width={size} {...otherProps}>
<G clipPath="url(#clip0_9040_38340)">
<Path d="M44 34C44.2652 34 44.5196 34.1054 44.7071 34.2929C44.8946 34.4804 45 34.7348 45 35C45 35.2652 44.8946 35.5196 44.7071 35.7071C44.5196 35.8946 44.2652 36 44 36H40C39.7348 36 39.4804 36.1054 39.2929 36.2929C39.1054 36.4804 39 36.7348 39 37V51C39 51.2652 39.1054 51.5196 39.2929 51.7071C39.4804 51.8946 39.7348 52 40 52H48C48.2652 52 48.5196 51.8946 48.7071 51.7071C48.8946 51.5196 49 51.2652 49 51V44C49 43.7348 49.1054 43.4804 49.2929 43.2929C49.4804 43.1054 49.7348 43 50 43C50.2652 43 50.5196 43.1054 50.7071 43.2929C50.8946 43.4804 51 43.7348 51 44V51C51 51.7956 50.6839 52.5587 50.1213 53.1213C49.5587 53.6839 48.7956 54 48 54H40C39.2044 54 38.4413 53.6839 37.8787 53.1213C37.3161 52.5587 37 51.7956 37 51V37C37 36.2044 37.3161 35.4413 37.8787 34.8787C38.4413 34.3161 39.2044 34 40 34H44ZM44 48C44.3978 48 44.7794 48.158 45.0607 48.4393C45.342 48.7206 45.5 49.1022 45.5 49.5C45.5 49.8978 45.342 50.2794 45.0607 50.5607C44.7794 50.842 44.3978 51 44 51C43.6022 51 43.2206 50.842 42.9393 50.5607C42.658 50.2794 42.5 49.8978 42.5 49.5C42.5 49.1022 42.658 48.7206 42.9393 48.4393C43.2206 48.158 43.6022 48 44 48ZM50 33C50.2086 33.0001 50.4119 33.0654 50.5816 33.1868C50.7512 33.3082 50.8786 33.4796 50.946 33.677L51.076 34.055C51.224 34.4888 51.4694 34.8828 51.7934 35.207C52.1174 35.5312 52.5113 35.7768 52.945 35.925L53.323 36.054C53.5202 36.1216 53.6913 36.2491 53.8125 36.4187C53.9337 36.5883 53.9988 36.7915 53.9988 37C53.9988 37.2085 53.9337 37.4117 53.8125 37.5813C53.6913 37.7509 53.5202 37.8784 53.323 37.946L52.945 38.076C52.5112 38.224 52.1172 38.4694 51.793 38.7934C51.4688 39.1174 51.2232 39.5113 51.075 39.945L50.946 40.323C50.8784 40.5202 50.7509 40.6913 50.5813 40.8125C50.4117 40.9337 50.2085 40.9988 50 40.9988C49.7915 40.9988 49.5883 40.9337 49.4187 40.8125C49.2491 40.6913 49.1216 40.5202 49.054 40.323L48.924 39.945C48.776 39.5112 48.5306 39.1172 48.2066 38.793C47.8826 38.4688 47.4887 38.2232 47.055 38.075L46.677 37.946C46.4798 37.8784 46.3087 37.7509 46.1875 37.5813C46.0663 37.4117 46.0012 37.2085 46.0012 37C46.0012 36.7915 46.0663 36.5883 46.1875 36.4187C46.3087 36.2491 46.4798 36.1216 46.677 36.054L47.055 35.924C47.4888 35.776 47.8828 35.5306 48.207 35.2066C48.5312 34.8826 48.7768 34.4887 48.925 34.055L49.054 33.677C49.1214 33.4796 49.2488 33.3082 49.4184 33.1868C49.5881 33.0654 49.7914 33.0001 50 33ZM50 36.196C49.7634 36.4937 49.4937 36.7634 49.196 37C49.494 37.236 49.763 37.506 50 37.804C50.236 37.506 50.506 37.236 50.804 37C50.5063 36.7634 50.2366 36.4937 50 36.196Z" fill={color} fillRule="evenodd" clipRule="evenodd"/>
</G>
<G filter="url(#filter0_f_9040_38340)">
<_Circle cx="44" cy="44" r="10" fill={color}/>
</G>
<Defs>
<Filter id="filter0_f_9040_38340" x="0.333508" y="0.333508" width="87.333" height="87.333" filterUnits="userSpaceOnUse">
<FeFlood result="BackgroundImageFix" floodOpacity="0"/>
<FeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<FeGaussianBlur stdDeviation="16.8332" result="effect1_foregroundBlur_9040_38340"/>
</Filter>
<ClipPath id="clip0_9040_38340">
<Rect width="24" height="24" fill={color} transform="translate(32 32)"/>
</ClipPath>
</Defs>
</Svg>);
};
Icon.displayName = 'MobilePhoneBlur';
export const MobilePhoneBlur = memo(Icon);