@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
488 lines (487 loc) • 17.6 kB
JSX
const React = require("react");
const ZipperMouthFaceIcon = ({ 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_30_9)"
/>
<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_30_9)"
/>
<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_30_9)"
/>
<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_30_9)"
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_30_9)"
/>
<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_30_9)"
/>
<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_30_9)"
/>
<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_30_9)"
/>
<circle cx={9} cy={13} r={5} fill="url(#paint8_radial_30_9)" />
<circle cx={19.5} cy={13.5} r={4.5} fill="url(#paint9_radial_30_9)" />
<path
d="M10.5 16C12.9853 16 15 13.9853 15 11.5C15 9.01472 12.9853 7 10.5 7C8.01472 7 6 9.01472 6 11.5C6 13.9853 8.01472 16 10.5 16Z"
fill="white"
/>
<path
d="M21.5 16C23.9853 16 26 13.9853 26 11.5C26 9.01472 23.9853 7 21.5 7C19.0147 7 17 9.01472 17 11.5C17 13.9853 19.0147 16 21.5 16Z"
fill="white"
/>
<path
d="M10.5 13.5C11.6046 13.5 12.5 12.6046 12.5 11.5C12.5 10.3954 11.6046 9.5 10.5 9.5C9.39543 9.5 8.5 10.3954 8.5 11.5C8.5 12.6046 9.39543 13.5 10.5 13.5Z"
fill="url(#paint10_linear_30_9)"
/>
<path
d="M21.5 13.5C22.6046 13.5 23.5 12.6046 23.5 11.5C23.5 10.3954 22.6046 9.5 21.5 9.5C20.3954 9.5 19.5 10.3954 19.5 11.5C19.5 12.6046 20.3954 13.5 21.5 13.5Z"
fill="url(#paint11_linear_30_9)"
/>
<g filter="url(#filter0_f_30_9)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M27.0165 23.5261L26.612 22.7277C26.1087 21.743 24.9433 21.3127 23.9196 21.7423C22.9097 22.166 22.3873 23.3044 22.7383 24.353L23.6272 26.9768C25.0328 26.0717 26.1625 24.8976 27.0165 23.5261ZM23.7088 23.6611C23.9064 24.1313 24.4565 24.3561 24.9269 24.1587C25.4071 23.9654 25.6317 23.4156 25.4243 22.9413C25.2267 22.4711 24.6766 22.2463 24.2062 22.4437C23.7358 22.641 23.5112 23.1908 23.7088 23.6611Z"
fill="#CC532D"
/>
</g>
<g opacity={0.4} filter="url(#filter1_f_30_9)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.5 19.75C6.5 19.0596 7.05964 18.5 7.75 18.5C8.44036 18.5 9 19.0596 9 19.75V20.5H11.5V19.75C11.5 19.0596 12.0596 18.5 12.75 18.5C13.4404 18.5 14 19.0596 14 19.75V20.5H16.5V19.75C16.5 19.0596 17.0596 18.5 17.75 18.5C18.4404 18.5 19 19.0596 19 19.75V20.5H21.5V19.75C21.5 19.0596 22.0596 18.5 22.75 18.5C23.4404 18.5 24 19.0596 24 19.75V22.5H21.5V23.25C21.5 23.9404 20.9404 24.5 20.25 24.5C19.5596 24.5 19 23.9404 19 23.25V22.5H16.5V23.25C16.5 23.9404 15.9404 24.5 15.25 24.5C14.5596 24.5 14 23.9404 14 23.25V22.5H11.5V23.25C11.5 23.9404 10.9404 24.5 10.25 24.5C9.55964 24.5 9 23.9404 9 23.25V22.5H6.5V19.75Z"
fill="#E4694E"
/>
</g>
<path
d="M9.375 19.25V21.875H7.125V19.25C7.125 18.6287 7.62868 18.125 8.25 18.125C8.87132 18.125 9.375 18.6287 9.375 19.25Z"
fill="url(#paint12_linear_30_9)"
stroke="url(#paint13_radial_30_9)"
strokeWidth={0.25}
/>
<path
d="M14.375 19.25V21.875H12.125V19.25C12.125 18.6287 12.6287 18.125 13.25 18.125C13.8713 18.125 14.375 18.6287 14.375 19.25Z"
fill="url(#paint14_linear_30_9)"
stroke="url(#paint15_radial_30_9)"
strokeWidth={0.25}
/>
<path
d="M19.375 19.25V21.875H17.125V19.25C17.125 18.6287 17.6287 18.125 18.25 18.125C18.8713 18.125 19.375 18.6287 19.375 19.25Z"
fill="url(#paint16_linear_30_9)"
stroke="url(#paint17_radial_30_9)"
strokeWidth={0.25}
/>
<path
d="M24.375 19.25V21.875H22.125V19.25C22.125 18.6287 22.6287 18.125 23.25 18.125C23.8713 18.125 24.375 18.6287 24.375 19.25Z"
fill="url(#paint18_linear_30_9)"
stroke="url(#paint19_radial_30_9)"
strokeWidth={0.25}
/>
<path
d="M9.625 20.125H11.875V22.75C11.875 23.3713 11.3713 23.875 10.75 23.875C10.1287 23.875 9.625 23.3713 9.625 22.75V20.125Z"
fill="url(#paint20_linear_30_9)"
stroke="url(#paint21_radial_30_9)"
strokeWidth={0.25}
/>
<path
d="M14.625 20.125H16.875V22.75C16.875 23.3713 16.3713 23.875 15.75 23.875C15.1287 23.875 14.625 23.3713 14.625 22.75V20.125Z"
fill="url(#paint22_linear_30_9)"
stroke="url(#paint23_radial_30_9)"
strokeWidth={0.25}
/>
<path
d="M19.625 20.125H21.875V22.75C21.875 23.3713 21.3713 23.875 20.75 23.875C20.1287 23.875 19.625 23.3713 19.625 22.75V20.125Z"
fill="url(#paint24_linear_30_9)"
stroke="url(#paint25_radial_30_9)"
strokeWidth={0.25}
/>
<path
d="M29.1897 24.0257L29.19 24.0259C30.0583 24.774 30.1079 26.1109 29.3 26.9184L28.918 27.3002C28.1099 28.1078 26.7722 28.0582 26.0237 27.1904L26.0234 27.1901L23.6043 24.4011C23.6043 24.4011 23.6042 24.401 23.6042 24.4009C22.9257 23.6129 22.9756 22.4357 23.7041 21.7076C24.4428 20.9692 25.6102 20.9291 26.3991 21.6077C26.3992 21.6078 26.3992 21.6078 26.3993 21.6079L29.1897 24.0257ZM24.0579 23.5636C24.4673 23.9727 25.1402 23.9729 25.5498 23.5642C25.9709 23.1547 25.9709 22.4805 25.5498 22.071C25.1402 21.6623 24.4673 21.6625 24.0579 22.0716C23.6483 22.481 23.6483 23.1541 24.0579 23.5636Z"
fill="url(#paint26_linear_30_9)"
stroke="url(#paint27_radial_30_9)"
strokeWidth={0.25}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.25 22V20H9.5L9.5 22H9.25ZM14.25 22V20H14.5V22H14.25ZM19.25 20V22H19.5V20H19.25Z"
fill="#D6A5F5"
/>
<defs>
<filter
id="filter0_f_30_9"
x={20.6292}
y={19.5762}
width={8.38745}
height={9.40051}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur stdDeviation={1} result="effect1_foregroundBlur_30_9" />
</filter>
<filter
id="filter1_f_30_9"
x={5.5}
y={17.5}
width={19.5}
height={8}
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_30_9"
/>
</filter>
<radialGradient
id="paint0_radial_30_9"
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_30_9"
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_30_9"
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_30_9"
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_30_9"
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_30_9"
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_30_9"
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_30_9"
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_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.8889 9.11111) rotate(135) scale(9.74236 5.04232)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23 10) rotate(135) scale(8.13173 4.59049)"
>
<stop stopColor="#392108" />
<stop offset={1} stopColor="#C87928" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint10_linear_30_9"
x1={19.1154}
y1={9.5}
x2={18.4265}
y2={13.5302}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<linearGradient
id="paint11_linear_30_9"
x1={22.1154}
y1={9.5}
x2={21.4265}
y2={13.5302}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#553B3E" />
<stop offset={1} stopColor="#3D2432" />
</linearGradient>
<linearGradient
id="paint12_linear_30_9"
x1={9}
y1={18.5}
x2={7.5}
y2={22}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint13_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.5 18.5) rotate(135) scale(2.12132 1.32583)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint14_linear_30_9"
x1={14}
y1={18.5}
x2={12.5}
y2={22}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint15_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(14.5 18.5) rotate(135) scale(2.12132 1.32583)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint16_linear_30_9"
x1={19}
y1={18.5}
x2={17.5}
y2={22}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint17_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(19.5 18.5) rotate(135) scale(2.12132 1.32583)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint18_linear_30_9"
x1={24}
y1={18.5}
x2={22.5}
y2={22}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint19_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(24.5 18.5) rotate(135) scale(2.12132 1.32583)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint20_linear_30_9"
x1={11.5}
y1={20.5}
x2={10}
y2={24}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint21_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12 20.5) rotate(135) scale(2.12132 1.32583)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint22_linear_30_9"
x1={16.5}
y1={20.5}
x2={15}
y2={24}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint23_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17 20.5) rotate(135) scale(2.12132 1.32583)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint24_linear_30_9"
x1={21.5}
y1={20.5}
x2={20}
y2={24}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint25_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(22 20.5) rotate(135) scale(2.12132 1.32583)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint26_linear_30_9"
x1={28.6}
y1={21.875}
x2={26.788}
y2={28.6397}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E9C9FF" />
<stop offset={1} stopColor="#E3B9FF" />
</linearGradient>
<radialGradient
id="paint27_radial_30_9"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(30 21.875) rotate(147.995) scale(4.95284 2.78249)"
>
<stop stopColor="#FFEFFF" />
<stop offset={1} stopColor="#FFF2FF" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
module.exports = ZipperMouthFaceIcon;