@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
323 lines (322 loc) • 12.6 kB
JSX
const React = require("react");
const CloudWithLightningIcon = ({ title, titleId, ...props }) => (
<svg
width="1em"
height="1em"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M12.9876 12.461C15.3067 12.461 17.1868 10.5809 17.1868 8.26177C17.1868 5.94261 15.3067 4.06259 12.9876 4.06259C10.6684 4.06259 8.78839 5.94261 8.78839 8.26177C8.78839 10.5809 10.6684 12.461 12.9876 12.461Z"
fill="url(#paint0_radial_18_15216)"
/>
<path
d="M12.9876 12.461C15.3067 12.461 17.1868 10.5809 17.1868 8.26177C17.1868 5.94261 15.3067 4.06259 12.9876 4.06259C10.6684 4.06259 8.78839 5.94261 8.78839 8.26177C8.78839 10.5809 10.6684 12.461 12.9876 12.461Z"
fill="url(#paint1_radial_18_15216)"
/>
<g filter="url(#filter0_i_18_15216)">
<path
d="M30 11.0483C30 15.9736 26.011 19.9663 21.0904 19.9663H8.81868C5.20801 19.9663 2.28125 16.9256 2.28125 13.5256C2.28125 10.1255 5.11507 7.32914 8.72574 7.32914C9.45141 7.32914 10.4203 7.51521 11.3125 7.85938C12.2047 8.20354 12.8697 7.48946 13.187 6.85453C14.5593 4.10881 17.5635 2 21.125 2C26.0456 2 30 6.12307 30 11.0483Z"
fill="#3124C5"
/>
<path
d="M30 11.0483C30 15.9736 26.011 19.9663 21.0904 19.9663H8.81868C5.20801 19.9663 2.28125 16.9256 2.28125 13.5256C2.28125 10.1255 5.11507 7.32914 8.72574 7.32914C9.45141 7.32914 10.4203 7.51521 11.3125 7.85938C12.2047 8.20354 12.8697 7.48946 13.187 6.85453C14.5593 4.10881 17.5635 2 21.125 2C26.0456 2 30 6.12307 30 11.0483Z"
fill="url(#paint2_radial_18_15216)"
/>
<path
d="M30 11.0483C30 15.9736 26.011 19.9663 21.0904 19.9663H8.81868C5.20801 19.9663 2.28125 16.9256 2.28125 13.5256C2.28125 10.1255 5.11507 7.32914 8.72574 7.32914C9.45141 7.32914 10.4203 7.51521 11.3125 7.85938C12.2047 8.20354 12.8697 7.48946 13.187 6.85453C14.5593 4.10881 17.5635 2 21.125 2C26.0456 2 30 6.12307 30 11.0483Z"
fill="url(#paint3_radial_18_15216)"
/>
</g>
<path
d="M30 11.0483C30 15.9736 26.011 19.9663 21.0904 19.9663H8.81868C5.20801 19.9663 2.28125 16.9256 2.28125 13.5256C2.28125 10.1255 5.11507 7.32914 8.72574 7.32914C9.45141 7.32914 10.4203 7.51521 11.3125 7.85938C12.2047 8.20354 12.8697 7.48946 13.187 6.85453C14.5593 4.10881 17.5635 2 21.125 2C26.0456 2 30 6.12307 30 11.0483Z"
fill="url(#paint4_radial_18_15216)"
/>
<path
d="M30 11.0483C30 15.9736 26.011 19.9663 21.0904 19.9663H8.81868C5.20801 19.9663 2.28125 16.9256 2.28125 13.5256C2.28125 10.1255 5.11507 7.32914 8.72574 7.32914C9.45141 7.32914 10.4203 7.51521 11.3125 7.85938C12.2047 8.20354 12.8697 7.48946 13.187 6.85453C14.5593 4.10881 17.5635 2 21.125 2C26.0456 2 30 6.12307 30 11.0483Z"
fill="url(#paint5_radial_18_15216)"
/>
<g filter="url(#filter1_f_18_15216)">
<path
d="M12.8574 8.93408C13.4635 9.63838 14.6853 11.6366 14.7247 13.9952"
stroke="url(#paint6_linear_18_15216)"
strokeWidth={0.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_i_18_15216)">
<path
d="M16.5902 13.9661L12.1975 21.2514C12.0971 21.418 12.2171 21.6304 12.4117 21.6304L14.6338 21.6304C14.7995 21.6304 14.9338 21.7647 14.9338 21.9304V26.5815H14.6696V27.8419H15.0745C15.1258 27.8456 15.1791 27.8234 15.2118 27.7698L20.0979 19.7646C20.1589 19.6647 20.0869 19.5365 19.9698 19.5365H17.4343C17.2962 19.5365 17.1843 19.4246 17.1843 19.2865V13.52C17.1843 13.4311 17.1158 13.3752 17.0433 13.3701L16.5902 13.3698V13.9661Z"
fill="url(#paint7_linear_18_15216)"
/>
</g>
<g filter="url(#filter3_i_18_15216)">
<path
d="M16.4655 13.4426L11.7572 21.2513C11.6568 21.418 11.7768 21.6304 11.9713 21.6304L14.1935 21.6304C14.3592 21.6304 14.4935 21.7647 14.4935 21.9304V27.6917C14.4935 27.8432 14.6926 27.8992 14.7715 27.7698L19.6575 19.7646C19.7186 19.6647 19.6466 19.5365 19.5295 19.5365H16.9939C16.8559 19.5365 16.7439 19.4246 16.7439 19.2865V13.52C16.7439 13.368 16.544 13.3124 16.4655 13.4426Z"
fill="url(#paint8_linear_18_15216)"
/>
</g>
<path
d="M16.4655 13.4426L11.7572 21.2513C11.6568 21.418 11.7768 21.6304 11.9713 21.6304L14.1935 21.6304C14.3592 21.6304 14.4935 21.7647 14.4935 21.9304V27.6917C14.4935 27.8432 14.6926 27.8992 14.7715 27.7698L19.6575 19.7646C19.7186 19.6647 19.6466 19.5365 19.5295 19.5365H16.9939C16.8559 19.5365 16.7439 19.4246 16.7439 19.2865V13.52C16.7439 13.368 16.544 13.3124 16.4655 13.4426Z"
fill="url(#paint9_linear_18_15216)"
/>
<path
d="M16.4655 13.4426L11.7572 21.2513C11.6568 21.418 11.7768 21.6304 11.9713 21.6304L14.1935 21.6304C14.3592 21.6304 14.4935 21.7647 14.4935 21.9304V27.6917C14.4935 27.8432 14.6926 27.8992 14.7715 27.7698L19.6575 19.7646C19.7186 19.6647 19.6466 19.5365 19.5295 19.5365H16.9939C16.8559 19.5365 16.7439 19.4246 16.7439 19.2865V13.52C16.7439 13.368 16.544 13.3124 16.4655 13.4426Z"
fill="url(#paint10_radial_18_15216)"
/>
<defs>
<filter
id="filter0_i_18_15216"
x={2.28125}
y={0}
width={28.7188}
height={19.9663}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx={1} dy={-2} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.207843 0 0 0 0 0.12549 0 0 0 0 0.596078 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_15216"
/>
</filter>
<filter
id="filter1_f_18_15216"
x={11.6074}
y={7.68408}
width={4.36725}
height={7.56114}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.5}
result="effect1_foregroundBlur_18_15216"
/>
</filter>
<filter
id="filter2_i_18_15216"
x={12.0613}
y={13.3698}
width={8.0588}
height={14.4726}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx={-0.1} />
<feGaussianBlur stdDeviation={0.15} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.890196 0 0 0 0 0.478431 0 0 0 0 0.431373 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_15216"
/>
</filter>
<filter
id="filter3_i_18_15216"
x={11.7209}
y={13.3698}
width={7.9588}
height={14.4722}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.741176 0 0 0 0 0.203922 0 0 0 0 0.345098 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_15216"
/>
</filter>
<radialGradient
id="paint0_radial_18_15216"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(14.2882 5.61807) rotate(153.208) scale(4.20461 3.59222)"
>
<stop stopColor="#5347D7" />
<stop offset={1} stopColor="#3831B0" />
</radialGradient>
<radialGradient
id="paint1_radial_18_15216"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.7559 8.0916) rotate(-58.1906) scale(3.56509 3.46861)"
>
<stop offset={0.185678} stopColor="#281EA4" />
<stop offset={1} stopColor="#281EA4" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint2_radial_18_15216"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(15.0206 18.0156) rotate(111.609) scale(10.3526 6.47339)"
>
<stop offset={0.362507} stopColor="#381B90" />
<stop offset={1} stopColor="#381B90" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint3_radial_18_15216"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.6198 10.9832) rotate(137.466) scale(4.74976 4.48072)"
>
<stop stopColor="#534ADD" />
<stop offset={1} stopColor="#574ADF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint4_radial_18_15216"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(24.7278 7.22033) rotate(142.503) scale(10.8234 11.8782)"
>
<stop offset={0.141507} stopColor="#6051FF" />
<stop offset={1} stopColor="#6051FF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint5_radial_18_15216"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(20.935 10.3925) rotate(170.656) scale(18.9046 16.1511)"
>
<stop offset={0.799468} stopColor="#35209A" stopOpacity={0} />
<stop offset={1} stopColor="#35209A" />
</radialGradient>
<linearGradient
id="paint6_linear_18_15216"
x1={13.1891}
y1={10.1625}
x2={15.0563}
y2={15.7642}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#554BD3" />
<stop offset={1} stopColor="#554BD3" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint7_linear_18_15216"
x1={17.4964}
y1={17.5756}
x2={17.4964}
y2={24.6866}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EA9B4C" />
<stop offset={1} stopColor="#EB5C74" />
</linearGradient>
<linearGradient
id="paint8_linear_18_15216"
x1={15.7003}
y1={14.8281}
x2={15.7003}
y2={26.2344}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F39445" />
<stop offset={1} stopColor="#F14B49" />
</linearGradient>
<linearGradient
id="paint9_linear_18_15216"
x1={15.7003}
y1={13.3698}
x2={15.7003}
y2={19.3281}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#DF9844" />
<stop offset={1} stopColor="#DF9844" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint10_radial_18_15216"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.7919 16.1849) rotate(90) scale(3.47652 0.758514)"
>
<stop stopColor="#FE9052" />
<stop offset={1} stopColor="#FE9052" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
module.exports = CloudWithLightningIcon;