@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
232 lines (231 loc) • 7.95 kB
JSX
const React = require("react");
const PoutingFaceIcon = ({ 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_1427)">
<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_1427)"
/>
<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_linear_31_1427)"
/>
<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_1427)"
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(#paint3_radial_31_1427)"
fillOpacity={0.5}
/>
<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_1427)"
/>
<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_1427)"
/>
<circle cx={9} cy={18} r={5} fill="url(#paint6_radial_31_1427)" />
<circle cx={19.5} cy={18.5} r={4.5} fill="url(#paint7_radial_31_1427)" />
<path
d="M10.5 21C12.9853 21 15 18.9853 15 16.5C15 14.0147 12.9853 12 10.5 12C8.01472 12 6 14.0147 6 16.5C6 18.9853 8.01472 21 10.5 21Z"
fill="white"
/>
<path
d="M21.5 21C23.9853 21 26 18.9853 26 16.5C26 14.0147 23.9853 12 21.5 12C19.0147 12 17 14.0147 17 16.5C17 18.9853 19.0147 21 21.5 21Z"
fill="white"
/>
<path
d="M12 19C13.1046 19 14 18.1046 14 17C14 15.8954 13.1046 15 12 15C10.8954 15 10 15.8954 10 17C10 18.1046 10.8954 19 12 19Z"
fill="url(#paint8_linear_31_1427)"
/>
<path
d="M20 19C21.1046 19 22 18.1046 22 17C22 15.8954 21.1046 15 20 15C18.8954 15 18 15.8954 18 17C18 18.1046 18.8954 19 20 19Z"
fill="url(#paint9_linear_31_1427)"
/>
<path
d="M10.25 10.25C10.25 10.25 11 13.25 14.25 13.25"
stroke="url(#paint10_linear_31_1427)"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21.75 10.25C21.75 10.25 21 13.25 17.75 13.25"
stroke="url(#paint11_linear_31_1427)"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 25C12.3333 24.3333 13.6 23 16 23C18.4 23 19.6667 24.3333 20 25"
stroke="url(#paint12_linear_31_1427)"
strokeWidth={2}
strokeLinecap="round"
/>
</g>
<defs>
<radialGradient
id="paint0_radial_31_1427"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.5 10) rotate(94.5739) scale(25.0799)"
>
<stop stopColor="#FF7961" />
<stop offset={0.514303} stopColor="#F23E53" />
<stop offset={0.71368} stopColor="#E33248" />
<stop offset={0.888763} stopColor="#E72D5C" />
</radialGradient>
<linearGradient
id="paint1_linear_31_1427"
x1={14.5}
y1={1.5}
x2={19}
y2={17}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#DA502D" />
<stop offset={1} stopColor="#DA502D" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint2_radial_31_1427"
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="paint3_radial_31_1427"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23 11) rotate(52.125) scale(17.1026 13.4126)"
>
<stop stopColor="#FF7961" />
<stop offset={0.514303} stopColor="#FF7961" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint4_radial_31_1427"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16 12.5) rotate(90) scale(18)"
>
<stop offset={0.88336} stopColor="#F70A8D" stopOpacity={0} />
<stop offset={1} stopColor="#FF73CA" />
</radialGradient>
<radialGradient
id="paint5_radial_31_1427"
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="paint6_radial_31_1427"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.8889 14.1111) rotate(135) scale(9.74236 5.04232)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint7_radial_31_1427"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23 15) rotate(135) scale(8.13173 4.59049)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint8_linear_31_1427"
x1={20.6154}
y1={15}
x2={19.9265}
y2={19.0302}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<linearGradient
id="paint9_linear_31_1427"
x1={20.6154}
y1={15}
x2={19.9265}
y2={19.0302}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<linearGradient
id="paint10_linear_31_1427"
x1={11.5}
y1={10}
x2={11.5}
y2={11.5}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.0299084} stopColor="#524049" />
<stop offset={1} stopColor="#4A2C42" />
</linearGradient>
<linearGradient
id="paint11_linear_31_1427"
x1={20.5}
y1={10}
x2={20.5}
y2={11.5}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.0299084} stopColor="#524049" />
<stop offset={1} stopColor="#4A2C42" />
</linearGradient>
<linearGradient
id="paint12_linear_31_1427"
x1={16}
y1={22}
x2={16}
y2={24}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4F3C43" />
<stop offset={1} stopColor="#512756" />
</linearGradient>
<clipPath id="clip0_31_1427">
<rect width={32} height={32} fill="white" />
</clipPath>
</defs>
</svg>
);
module.exports = PoutingFaceIcon;