@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
223 lines (222 loc) • 8.34 kB
JSX
const React = require("react");
const FrowningFaceWithOpenMouthIcon = ({ 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}
<g clipPath="url(#clip0_31_1619)">
<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_1619)"
/>
<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_1619)"
/>
<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_1619)"
/>
<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_1619)"
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_1619)"
/>
<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_1619)"
/>
<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_1619)"
/>
<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_1619)"
/>
<circle cx={9} cy={15} r={5} fill="url(#paint8_radial_31_1619)" />
<circle cx={19.5} cy={15.5} r={4.5} fill="url(#paint9_radial_31_1619)" />
<path
d="M10.5 18C12.9853 18 15 15.9853 15 13.5C15 11.0147 12.9853 9 10.5 9C8.01472 9 6 11.0147 6 13.5C6 15.9853 8.01472 18 10.5 18Z"
fill="white"
/>
<path
d="M21.5 18C23.9853 18 26 15.9853 26 13.5C26 11.0147 23.9853 9 21.5 9C19.0147 9 17 11.0147 17 13.5C17 15.9853 19.0147 18 21.5 18Z"
fill="white"
/>
<path
d="M12 16C13.1046 16 14 15.1046 14 14C14 12.8954 13.1046 12 12 12C10.8954 12 10 12.8954 10 14C10 15.1046 10.8954 16 12 16Z"
fill="url(#paint10_linear_31_1619)"
/>
<path
d="M20 16C21.1046 16 22 15.1046 22 14C22 12.8954 21.1046 12 20 12C18.8954 12 18 12.8954 18 14C18 15.1046 18.8954 16 20 16Z"
fill="url(#paint11_linear_31_1619)"
/>
<path
d="M20.9013 25.0064C21.0104 25.5478 20.5516 26 19.9993 26C16.9301 26 14.7168 26 12.0002 26C11.448 26 10.9896 25.5478 11.0987 25.0064C11.5595 22.721 13.5788 21 16 21C18.4212 21 20.4405 22.721 20.9013 25.0064Z"
fill="url(#paint12_radial_31_1619)"
/>
</g>
<defs>
<radialGradient
id="paint0_radial_31_1619"
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_1619"
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_1619"
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_1619"
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_1619"
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_1619"
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_1619"
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_1619"
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_1619"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.8889 11.1111) rotate(135) scale(9.74236 5.04232)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_31_1619"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23 12) rotate(135) scale(8.13173 4.59049)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint10_linear_31_1619"
x1={20.6154}
y1={12}
x2={19.9265}
y2={16.0302}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<linearGradient
id="paint11_linear_31_1619"
x1={20.6154}
y1={12}
x2={19.9265}
y2={16.0302}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<radialGradient
id="paint12_radial_31_1619"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16 27.1111) rotate(-90) scale(7.61111 15.2222)"
>
<stop stopColor="#F70A8D" />
<stop offset={1} stopColor="#89029C" />
</radialGradient>
<clipPath id="clip0_31_1619">
<rect width={32} height={32} fill="white" />
</clipPath>
</defs>
</svg>
);
module.exports = FrowningFaceWithOpenMouthIcon;