@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
284 lines (283 loc) • 10.1 kB
JSX
const React = require("react");
const FaceWithTongueIcon = ({ 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.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint0_radial_31_20)"
/>
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint1_radial_31_20)"
/>
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint2_radial_31_20)"
/>
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint3_radial_31_20)"
fillOpacity={0.6}
/>
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint4_radial_31_20)"
/>
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint5_radial_31_20)"
/>
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint6_radial_31_20)"
/>
<path
d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z"
fill="url(#paint7_radial_31_20)"
/>
<circle
cx={9.01705}
cy={13.4205}
r={4.6733}
fill="url(#paint8_radial_31_20)"
/>
<circle
cx={19.2443}
cy={13.9432}
r={4.24431}
fill="url(#paint9_radial_31_20)"
/>
<path
d="M10.4191 16.2244C12.742 16.2244 14.6251 14.3414 14.6251 12.0185C14.6251 9.69557 12.742 7.8125 10.4191 7.8125C8.09621 7.8125 6.21313 9.69557 6.21313 12.0185C6.21313 14.3414 8.09621 16.2244 10.4191 16.2244Z"
fill="white"
/>
<path
d="M21.5683 16.3011C23.9123 16.3011 25.8126 14.4009 25.8126 12.0568C25.8126 9.71274 23.9123 7.8125 21.5683 7.8125C19.2242 7.8125 17.324 9.71274 17.324 12.0568C17.324 14.4009 19.2242 16.3011 21.5683 16.3011Z"
fill="white"
/>
<path
d="M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z"
fill="url(#paint10_linear_31_20)"
/>
<path
d="M21 15C22.6569 15 24 13.6569 24 12C24 10.3431 22.6569 9 21 9C19.3431 9 18 10.3431 18 12C18 13.6569 19.3431 15 21 15Z"
fill="url(#paint11_linear_31_20)"
/>
<path
d="M15.9988 26C8.99878 26 8.99878 19 8.99878 19H22.9988C22.9988 19 22.9988 26 15.9988 26Z"
fill="url(#paint12_radial_31_20)"
/>
<path
d="M16.0155 29C20.2155 29 20.8855 24.8 21.0155 23.75C21.1155 22.9 20.6655 22.47 20.1755 22.18C19.6855 21.89 18.2155 21.62 16.0155 21.62C13.8155 21.62 12.3555 21.89 11.8555 22.18C11.3555 22.47 10.9055 22.9 11.0155 23.75C11.1455 24.8 11.8155 29 16.0155 29Z"
fill="url(#paint13_radial_31_20)"
/>
<g opacity={0.5} filter="url(#filter0_f_31_20)">
<path d="M18 26.5C19 26 20 25 20 23.5" stroke="white" />
</g>
<path
d="M22.8588 20.43C22.9488 19.97 22.9988 19.49 22.9988 19C18.3388 19 11.8388 19 8.99878 19C8.99878 19.49 9.04878 19.96 9.13878 20.43H22.8588Z"
fill="url(#paint14_linear_31_20)"
/>
<defs>
<filter
id="filter0_f_31_20"
x={16.7764}
y={22.5}
width={4.72363}
height={5.4472}
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_31_20"
/>
</filter>
<radialGradient
id="paint0_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(25.5 9) rotate(132.839) scale(37.5033)"
>
<stop stopColor="#FFF478" />
<stop offset={0.474827} stopColor="#FFB02E" />
<stop offset={1} stopColor="#F70A8D" />
</radialGradient>
<radialGradient
id="paint1_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(25.5 9) rotate(131.878) scale(38.9487)"
>
<stop stopColor="#FFF478" />
<stop offset={0.474827} stopColor="#FFB02E" />
<stop offset={1} stopColor="#F70A8D" />
</radialGradient>
<radialGradient
id="paint2_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16 12.5) rotate(101.31) scale(17.8466 22.8581)"
>
<stop offset={0.787821} stopColor="#F59639" stopOpacity={0} />
<stop offset={0.972509} stopColor="#FF7DCE" />
</radialGradient>
<radialGradient
id="paint3_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(18 14) rotate(135) scale(41.0122)"
>
<stop offset={0.314853} stopOpacity={0} />
<stop offset={1} />
</radialGradient>
<radialGradient
id="paint4_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16 17) rotate(77.692) scale(28.1469)"
>
<stop offset={0.507903} stopColor="#7D6133" stopOpacity={0} />
<stop offset={1} stopColor="#715B32" />
</radialGradient>
<radialGradient
id="paint5_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.5 16.5) rotate(55.7131) scale(13.3135 9.65032)"
>
<stop stopColor="#FFB849" />
<stop offset={1} stopColor="#FFB847" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint6_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(20.5 18) rotate(9.86581) scale(11.6726)"
>
<stop stopColor="#FFA64B" />
<stop offset={0.900412} stopColor="#FFAE46" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint7_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.5 15) rotate(43.9708) scale(59.0529)"
>
<stop offset={0.185425} stopOpacity={0} />
<stop offset={1} stopOpacity={0.4} />
</radialGradient>
<radialGradient
id="paint8_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.6518 9.7857) rotate(135) scale(9.10579 4.71285)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(22.5454 10.642) rotate(135) scale(7.66968 4.32966)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint10_linear_31_20"
x1={16.5}
y1={8}
x2={15.5}
y2={15}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<linearGradient
id="paint11_linear_31_20"
x1={16.5}
y1={8}
x2={15.5}
y2={15}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<radialGradient
id="paint12_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(15.9988 27.5556) rotate(-90) scale(8.55556 17.1111)"
>
<stop stopColor="#F70A8D" />
<stop offset={1} stopColor="#89029C" />
</radialGradient>
<radialGradient
id="paint13_radial_31_20"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.5 30) rotate(-93.0128) scale(9.51315 16.5379)"
>
<stop stopColor="#FF1C4A" />
<stop offset={0.765733} stopColor="#FF2B8F" />
<stop offset={0.864496} stopColor="#BB0773" />
<stop offset={0.886239} stopColor="#9F0762" />
</radialGradient>
<linearGradient
id="paint14_linear_31_20"
x1={15.9988}
y1={19}
x2={15.9988}
y2={20.43}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#ECCDFF" />
<stop offset={1} stopColor="white" />
</linearGradient>
</defs>
</svg>
);
module.exports = FaceWithTongueIcon;