@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
443 lines (442 loc) • 15.8 kB
JSX
const React = require("react");
const HotFaceIcon = ({ 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 filter="url(#filter0_i_6808_5229)">
<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_6808_5229)"
/>
</g>
<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_6808_5229)"
/>
<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_6808_5229)"
/>
<g opacity={0.9} filter="url(#filter1_f_6808_5229)">
<rect
x={21.4658}
y={8.53613}
width={2.96651}
height={5.70654}
rx={1.48325}
transform="rotate(-45 21.4658 8.53613)"
fill="url(#paint3_radial_6808_5229)"
style={{
mixBlendMode: "multiply",
}}
/>
</g>
<rect
x={3}
y={20}
width={5}
height={7}
rx={2.5}
fill="url(#paint4_radial_6808_5229)"
/>
<rect
x={25}
y={4}
width={5}
height={7}
rx={2.5}
fill="url(#paint5_radial_6808_5229)"
/>
<g filter="url(#filter2_f_6808_5229)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.44878 11.9111C8.40731 11.5684 8.6515 11.257 8.99418 11.2155C10.2118 11.0682 10.8097 10.493 11.1217 9.99062C11.2843 9.72889 11.3762 9.47403 11.427 9.28526C11.4522 9.19155 11.4667 9.11626 11.4746 9.06753C11.4785 9.04323 11.4808 9.02578 11.4819 9.0162L11.4828 9.00816C11.5126 8.66627 11.8129 8.41203 12.1555 8.43957C12.4996 8.46723 12.7561 8.76857 12.7284 9.11264L12.1054 9.06256C12.7284 9.11264 12.7284 9.113 12.7284 9.11337L12.7283 9.11415L12.7282 9.1159L12.7278 9.12008L12.7267 9.13113C12.7259 9.13967 12.7247 9.15056 12.7232 9.16366C12.7201 9.18984 12.7154 9.22492 12.7084 9.26774C12.6946 9.35322 12.6716 9.47044 12.6341 9.60988C12.5595 9.88742 12.425 10.2615 12.1836 10.6501C11.6877 11.4485 10.7676 12.2601 9.14433 12.4565C8.80165 12.4979 8.49024 12.2538 8.44878 11.9111Z"
fill="url(#paint6_radial_6808_5229)"
fillOpacity={0.75}
style={{
mixBlendMode: "multiply",
}}
/>
</g>
<path
d="M11.3661 8.4375C11.3661 8.4375 11.3661 11.0781 8.44421 11.3281"
stroke="url(#paint7_radial_6808_5229)"
strokeWidth={1.25}
strokeLinecap="round"
strokeLinejoin="round"
/>
<g filter="url(#filter3_f_6808_5229)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M23.8129 11.9111C23.8544 11.5684 23.6102 11.257 23.2675 11.2155C22.05 11.0682 21.452 10.493 21.14 9.99062C20.9774 9.72889 20.8855 9.47403 20.8347 9.28526C20.8095 9.19155 20.7951 9.11626 20.7872 9.06753C20.7832 9.04323 20.7809 9.02578 20.7798 9.0162L20.7789 9.00816C20.7491 8.66627 20.4488 8.41203 20.1062 8.43957C19.7621 8.46723 19.5056 8.76857 19.5333 9.11264L20.1563 9.06256C19.5333 9.11264 19.5333 9.113 19.5334 9.11337L19.5334 9.11415L19.5336 9.1159L19.5339 9.12008L19.535 9.13113C19.5358 9.13967 19.537 9.15056 19.5385 9.16366C19.5416 9.18984 19.5463 9.22492 19.5533 9.26774C19.5672 9.35322 19.5901 9.47044 19.6276 9.60988C19.7023 9.88742 19.8367 10.2615 20.0781 10.6501C20.574 11.4485 21.4941 12.2601 23.1174 12.4565C23.4601 12.4979 23.7715 12.2538 23.8129 11.9111Z"
fill="url(#paint8_radial_6808_5229)"
fillOpacity={0.75}
style={{
mixBlendMode: "multiply",
}}
/>
</g>
<path
d="M20.6317 8.4375C20.6317 8.4375 20.6317 11.0781 23.5536 11.3281"
stroke="url(#paint9_radial_6808_5229)"
strokeWidth={1.25}
strokeLinecap="round"
strokeLinejoin="round"
/>
<g filter="url(#filter4_f_6808_5229)">
<path
d="M19.3697 13.4531C18.1157 14.1118 17.2617 15.4175 17.2617 16.9207C17.2617 19.0874 19.036 20.8437 21.2246 20.8437C23.4133 20.8437 25.1875 19.0874 25.1875 16.9207C25.1875 15.7652 24.6828 14.7264 23.8798 14.0084C23.358 14.1773 22.7995 14.2687 22.219 14.2687C21.1681 14.2687 20.1896 13.969 19.3697 13.4531Z"
fill="#FB6E27"
fillOpacity={0.75}
/>
</g>
<g filter="url(#filter5_f_6808_5229)">
<path
d="M11.9016 13.4531C13.1555 14.1118 14.0095 15.4175 14.0095 16.9207C14.0095 19.0874 12.2353 20.8437 10.0466 20.8437C7.85799 20.8437 6.08374 19.0874 6.08374 16.9207C6.08374 15.7652 6.58841 14.7264 7.39145 14.0084C7.91328 14.1773 8.47174 14.2687 9.05225 14.2687C10.1031 14.2687 11.0816 13.969 11.9016 13.4531Z"
fill="#B24B35"
/>
</g>
<path
d="M19.5141 12.4531C18.1742 13.1641 17.2617 14.5735 17.2617 16.1959C17.2617 18.5345 19.1575 20.4303 21.4961 20.4303C23.8347 20.4303 25.7305 18.5345 25.7305 16.1959C25.7305 14.9487 25.1912 13.8274 24.3332 13.0525C23.7756 13.2347 23.1789 13.3335 22.5586 13.3335C21.4358 13.3335 20.3902 13.01 19.5141 12.4531Z"
fill="white"
/>
<circle cx={19.9414} cy={16.2662} r={1.95312} fill="#402931" />
<path
d="M12.4837 12.4531C13.8236 13.1641 14.7361 14.5735 14.7361 16.1959C14.7361 18.5345 12.8403 20.4303 10.5017 20.4303C8.16313 20.4303 6.26733 18.5345 6.26733 16.1959C6.26733 14.9487 6.80657 13.8274 7.66463 13.0525C8.22221 13.2347 8.81892 13.3335 9.43921 13.3335C10.562 13.3335 11.6076 13.01 12.4837 12.4531Z"
fill="white"
/>
<circle
r={1.95312}
transform="matrix(-1 0 0 1 12.0564 16.2662)"
fill="#402931"
/>
<rect
x={12.0223}
y={20.9531}
width={7.95312}
height={5.6875}
rx={2.8}
fill="url(#paint10_linear_6808_5229)"
/>
<path
d="M15.9999 28.5C19.0481 28.5 19.5343 25.8558 19.6287 25.0937C19.7012 24.4768 19.3746 23.7608 19.019 23.5503C18.6634 23.3399 17.5966 23.1439 15.9999 23.1439C14.4033 23.1439 13.3437 23.3399 12.9808 23.5503C12.6179 23.7608 12.2913 24.4768 12.3711 25.0937C12.4655 25.8558 12.9517 28.5 15.9999 28.5Z"
fill="url(#paint11_radial_6808_5229)"
/>
<g opacity={0.5} filter="url(#filter6_f_6808_5229)">
<path
d="M17.4401 26.6857C18.1658 26.3228 18.8916 25.597 18.8916 24.5084"
stroke="white"
/>
</g>
<defs>
<filter
id="filter0_i_6808_5229"
x={2}
y={0}
width={29.9978}
height={29.9978}
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 dx={2} dy={-2} />
<feGaussianBlur stdDeviation={2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_6808_5229"
/>
</filter>
<filter
id="filter1_f_6808_5229"
x={21.0802}
y={6.05286}
width={6.90405}
height={6.90405}
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_6808_5229"
/>
</filter>
<filter
id="filter2_f_6808_5229"
x={7.94421}
y={7.9375}
width={5.28625}
height={5.02356}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.25}
result="effect1_foregroundBlur_6808_5229"
/>
</filter>
<filter
id="filter3_f_6808_5229"
x={19.0312}
y={7.9375}
width={5.28625}
height={5.02356}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.25}
result="effect1_foregroundBlur_6808_5229"
/>
</filter>
<filter
id="filter4_f_6808_5229"
x={15.2617}
y={11.4531}
width={11.9258}
height={11.3906}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_6808_5229"
/>
</filter>
<filter
id="filter5_f_6808_5229"
x={4.08374}
y={11.4531}
width={11.9258}
height={11.3906}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_6808_5229"
/>
</filter>
<filter
id="filter6_f_6808_5229"
x={16.2164}
y={23.5084}
width={4.17517}
height={4.62451}
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_6808_5229"
/>
</filter>
<radialGradient
id="paint0_radial_6808_5229"
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_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16 12.5) rotate(90) scale(17.8854)"
>
<stop offset={0.823911} stopColor="#F59639" stopOpacity={0} />
<stop offset={1} stopColor="#FF63C4" />
</radialGradient>
<radialGradient
id="paint2_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(15.9989 35.1875) rotate(-90) scale(30.6875 67.5153)"
>
<stop offset={0.34375} stopColor="#F59639" stopOpacity={0} />
<stop offset={1} stopColor="#E73550" />
</radialGradient>
<radialGradient
id="paint3_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(22.806 10.3696) rotate(95.5885) scale(6.42037 2.27261)"
>
<stop stopColor="#993D29" />
<stop offset={1} stopColor="#B14B35" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint4_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(7.16667 20.3182) rotate(108.861) scale(7.73342 3.61978)"
>
<stop stopColor="#5C98FF" />
<stop offset={0.805982} stopColor="#3D5BF1" />
<stop offset={0.962238} stopColor="#6065CA" />
</radialGradient>
<radialGradient
id="paint5_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(29.1667 4.31818) rotate(108.861) scale(7.73342 3.61978)"
>
<stop stopColor="#5C98FF" />
<stop offset={0.805982} stopColor="#3D5BF1" />
<stop offset={0.962238} stopColor="#6065CA" />
</radialGradient>
<radialGradient
id="paint6_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.7941 11.1683) rotate(-78.6614) scale(4.595 3.23495)"
>
<stop offset={0.255208} stopColor="#993D29" />
<stop offset={1} stopColor="#B14B35" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint7_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.06921 9.875) rotate(49.8812) scale(4.02522 9.57068)"
>
<stop offset={0.137915} stopColor="#694F62" />
<stop offset={0.398102} stopColor="#482641" />
</radialGradient>
<radialGradient
id="paint8_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.4677 11.1683) rotate(-101.339) scale(4.595 3.23495)"
>
<stop offset={0.255208} stopColor="#993D29" />
<stop offset={1} stopColor="#B14B35" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(22.9286 9.875) rotate(130.119) scale(4.02522 9.57068)"
>
<stop offset={0.137915} stopColor="#694F62" />
<stop offset={0.398102} stopColor="#482641" />
</radialGradient>
<linearGradient
id="paint10_linear_6808_5229"
x1={15.9989}
y1={20.9531}
x2={15.9989}
y2={26.6406}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#6D014D" />
<stop offset={1} stopColor="#750C3F" />
</linearGradient>
<radialGradient
id="paint11_radial_6808_5229"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(15.9887 29.4062) rotate(-90) scale(7.07513 12.2996)"
>
<stop offset={0.135417} stopColor="#FF1C4A" />
<stop offset={0.619792} stopColor="#FF2B8F" />
<stop offset={0.755208} stopColor="#BB0773" />
<stop offset={0.869792} stopColor="#9F0762" />
</radialGradient>
</defs>
</svg>
);
module.exports = HotFaceIcon;