@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
289 lines (288 loc) • 11.7 kB
JSX
const React = require("react");
const BalloonIcon = ({ 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="M15.0245 20.7891L12.5479 19.6328C12.5361 19.097 12.8567 18.8534 13.0497 18.8019L15.3396 19.8633C15.5083 20.307 15.2068 20.6485 15.0245 20.7891Z"
fill="url(#paint0_radial_18_470)"
/>
<path
d="M14.1074 21.2615C14.3079 20.9309 14.2025 20.5004 13.8719 20.2999C13.5414 20.0994 13.1109 20.2049 12.9104 20.5354L14.1074 21.2615ZM12.6339 23.5547L13.3288 23.6391L12.6339 23.5547ZM11.8214 27.8203L11.2318 27.443L11.8214 27.8203ZM7.24616 28.544C6.86054 28.5165 6.52566 28.8068 6.49818 29.1924C6.47071 29.5781 6.76104 29.9129 7.14666 29.9404L7.24616 28.544ZM12.9104 20.5354C12.6828 20.9107 12.1168 22.0066 11.939 23.4703L13.3288 23.6391C13.476 22.4278 13.9496 21.5216 14.1074 21.2615L12.9104 20.5354ZM11.939 23.4703C11.8339 24.3354 11.7561 25.175 11.6408 25.9249C11.5215 26.7012 11.383 27.2068 11.2318 27.443L12.411 28.1976C12.7431 27.6788 12.9093 26.8875 13.0246 26.1377C13.1439 25.3615 13.2308 24.4458 13.3288 23.6391L11.939 23.4703ZM11.2318 27.443C10.9322 27.9111 10.6525 28.1899 10.1603 28.3664C9.61695 28.5612 8.75624 28.6515 7.24616 28.544L7.14666 29.9404C8.7069 30.0516 9.80709 29.9803 10.6329 29.6842C11.5098 29.3698 12.0074 28.8283 12.411 28.1976L11.2318 27.443Z"
fill="#1E86F5"
/>
<path
d="M14.1074 21.2615C14.3079 20.9309 14.2025 20.5004 13.8719 20.2999C13.5414 20.0994 13.1109 20.2049 12.9104 20.5354L14.1074 21.2615ZM12.6339 23.5547L13.3288 23.6391L12.6339 23.5547ZM11.8214 27.8203L11.2318 27.443L11.8214 27.8203ZM7.24616 28.544C6.86054 28.5165 6.52566 28.8068 6.49818 29.1924C6.47071 29.5781 6.76104 29.9129 7.14666 29.9404L7.24616 28.544ZM12.9104 20.5354C12.6828 20.9107 12.1168 22.0066 11.939 23.4703L13.3288 23.6391C13.476 22.4278 13.9496 21.5216 14.1074 21.2615L12.9104 20.5354ZM11.939 23.4703C11.8339 24.3354 11.7561 25.175 11.6408 25.9249C11.5215 26.7012 11.383 27.2068 11.2318 27.443L12.411 28.1976C12.7431 27.6788 12.9093 26.8875 13.0246 26.1377C13.1439 25.3615 13.2308 24.4458 13.3288 23.6391L11.939 23.4703ZM11.2318 27.443C10.9322 27.9111 10.6525 28.1899 10.1603 28.3664C9.61695 28.5612 8.75624 28.6515 7.24616 28.544L7.14666 29.9404C8.7069 30.0516 9.80709 29.9803 10.6329 29.6842C11.5098 29.3698 12.0074 28.8283 12.411 28.1976L11.2318 27.443Z"
fill="url(#paint1_linear_18_470)"
/>
<path
d="M14.1074 21.2615C14.3079 20.9309 14.2025 20.5004 13.8719 20.2999C13.5414 20.0994 13.1109 20.2049 12.9104 20.5354L14.1074 21.2615ZM12.6339 23.5547L13.3288 23.6391L12.6339 23.5547ZM11.8214 27.8203L11.2318 27.443L11.8214 27.8203ZM7.24616 28.544C6.86054 28.5165 6.52566 28.8068 6.49818 29.1924C6.47071 29.5781 6.76104 29.9129 7.14666 29.9404L7.24616 28.544ZM12.9104 20.5354C12.6828 20.9107 12.1168 22.0066 11.939 23.4703L13.3288 23.6391C13.476 22.4278 13.9496 21.5216 14.1074 21.2615L12.9104 20.5354ZM11.939 23.4703C11.8339 24.3354 11.7561 25.175 11.6408 25.9249C11.5215 26.7012 11.383 27.2068 11.2318 27.443L12.411 28.1976C12.7431 27.6788 12.9093 26.8875 13.0246 26.1377C13.1439 25.3615 13.2308 24.4458 13.3288 23.6391L11.939 23.4703ZM11.2318 27.443C10.9322 27.9111 10.6525 28.1899 10.1603 28.3664C9.61695 28.5612 8.75624 28.6515 7.24616 28.544L7.14666 29.9404C8.7069 30.0516 9.80709 29.9803 10.6329 29.6842C11.5098 29.3698 12.0074 28.8283 12.411 28.1976L11.2318 27.443Z"
fill="url(#paint2_linear_18_470)"
/>
<g filter="url(#filter0_i_18_470)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.6042 19.8069C11.8058 19.3677 12.3252 19.175 12.7645 19.3766L15.0457 20.4235C15.4849 20.625 15.6776 21.1445 15.476 21.5837C15.2745 22.0229 14.755 22.2155 14.3158 22.014L12.0346 20.9671C11.5953 20.7655 11.4027 20.2461 11.6042 19.8069Z"
fill="#A50641"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.6042 19.8069C11.8058 19.3677 12.3252 19.175 12.7645 19.3766L15.0457 20.4235C15.4849 20.625 15.6776 21.1445 15.476 21.5837C15.2745 22.0229 14.755 22.2155 14.3158 22.014L12.0346 20.9671C11.5953 20.7655 11.4027 20.2461 11.6042 19.8069Z"
fill="url(#paint3_linear_18_470)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.6042 19.8069C11.8058 19.3677 12.3252 19.175 12.7645 19.3766L15.0457 20.4235C15.4849 20.625 15.6776 21.1445 15.476 21.5837C15.2745 22.0229 14.755 22.2155 14.3158 22.014L12.0346 20.9671C11.5953 20.7655 11.4027 20.2461 11.6042 19.8069Z"
fill="url(#paint4_radial_18_470)"
/>
</g>
<circle
cx={17.8633}
cy={11.1367}
r={9.13672}
fill="url(#paint5_radial_18_470)"
/>
<circle
cx={17.8633}
cy={11.1367}
r={9.13672}
fill="url(#paint6_radial_18_470)"
/>
<circle
cx={17.8633}
cy={11.1367}
r={9.13672}
fill="url(#paint7_radial_18_470)"
/>
<circle
cx={17.8633}
cy={11.1367}
r={9.13672}
fill="url(#paint8_radial_18_470)"
/>
<circle
cx={17.8633}
cy={11.1367}
r={9.13672}
fill="url(#paint9_radial_18_470)"
/>
<ellipse
cx={23.3715}
cy={7.75461}
rx={1.68342}
ry={2.14006}
transform="rotate(-37.0863 23.3715 7.75461)"
fill="url(#paint10_radial_18_470)"
/>
<g filter="url(#filter1_f_18_470)">
<path
d="M13.087 22.3516C12.9516 22.737 12.662 23.8516 12.587 25.2266C12.4701 27.371 11.6808 29.6641 8.18079 29.3828"
stroke="url(#paint11_linear_18_470)"
strokeWidth={0.25}
/>
</g>
<defs>
<filter
id="filter0_i_18_470"
x={11.5243}
y={19.2966}
width={4.03162}
height={3.0473}
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 dy={0.25} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.576471 0 0 0 0 0.101961 0 0 0 0 0.294118 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_470"
/>
</filter>
<filter
id="filter1_f_18_470"
x={7.77078}
y={21.9101}
width={5.83418}
height={8.02119}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.2}
result="effect1_foregroundBlur_18_470"
/>
</filter>
<radialGradient
id="paint0_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(14.3455 20.44) rotate(-155.2) scale(1.33933 0.654553)"
>
<stop stopColor="#236FDE" />
<stop offset={1} stopColor="#245CAD" />
</radialGradient>
<linearGradient
id="paint1_linear_18_470"
x1={6.74329}
y1={29.29}
x2={8.55579}
y2={29.29}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1F67FF" />
<stop offset={1} stopColor="#1F67FF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint2_linear_18_470"
x1={12.837}
y1={21.2266}
x2={13.1183}
y2={22.5703}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1F67FF" />
<stop offset={1} stopColor="#1F67FF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint3_linear_18_470"
x1={12.6447}
y1={21.5087}
x2={13.0936}
y2={20.5179}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#994CA1" />
<stop offset={1} stopColor="#994CA1" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint4_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.914 20.6953) rotate(116.155) scale(0.526759 2.16327)"
>
<stop stopColor="#BE4369" />
<stop offset={0.702059} stopColor="#BE4369" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint5_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(24.3359 6.83984) rotate(140.847) scale(14.7492 15.9267)"
>
<stop stopColor="#FF3C47" />
<stop offset={1} stopColor="#AC2146" />
</radialGradient>
<radialGradient
id="paint6_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(19.1348 2.84783) rotate(99.1762) scale(18.8827)"
>
<stop offset={0.7186} stopColor="#8A4BB7" stopOpacity={0} />
<stop offset={0.946093} stopColor="#8A4BB7" />
</radialGradient>
<radialGradient
id="paint7_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(14.3551 21.6323) rotate(-84.6678) scale(10.8012 11.9865)"
>
<stop stopColor="#A52082" />
<stop offset={1} stopColor="#A52082" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint8_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(19.8995 11.8516) rotate(-164.672) scale(11.5851 15.2778)"
>
<stop offset={0.741249} stopColor="#8C4972" stopOpacity={0} />
<stop offset={1} stopColor="#8C4972" />
</radialGradient>
<radialGradient
id="paint9_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.6495 0.0390618) rotate(107.21) scale(11.6178 16.2817)"
>
<stop stopColor="#EE4952" />
<stop offset={1} stopColor="#EE4952" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint10_radial_18_470"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(24.1987 6.08393) rotate(117.542) scale(3.84319 8.42424)"
>
<stop offset={0.120792} stopColor="#FFFBFC" />
<stop offset={1} stopColor="#FFFBFC" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint11_linear_18_470"
x1={13.2745}
y1={23.2422}
x2={9.25891}
y2={29.8984}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB2FF" stopOpacity={0} />
<stop offset={0.297934} stopColor="#5CB2FF" />
<stop offset={0.812292} stopColor="#5CB2FF" />
<stop offset={1} stopColor="#5CB2FF" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
);
module.exports = BalloonIcon;