@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
362 lines (361 loc) • 11.9 kB
JSX
const React = require("react");
const SmilingFaceIcon = ({ 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_23_476)">
<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_23_476)"
/>
<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_23_476)"
/>
<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_23_476)"
/>
<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_23_476)"
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_23_476)"
/>
<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_23_476)"
/>
<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_23_476)"
/>
<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_23_476)"
/>
<path
opacity={0.5}
d="M7.5 23C11.0899 23 14 20.0899 14 16.5C14 12.9101 11.0899 10 7.5 10C3.91015 10 1 12.9101 1 16.5C1 20.0899 3.91015 23 7.5 23Z"
fill="url(#paint8_radial_23_476)"
/>
<path
opacity={0.5}
d="M24.5 23C28.0899 23 31 20.0899 31 16.5C31 12.9101 28.0899 10 24.5 10C20.9101 10 18 12.9101 18 16.5C18 20.0899 20.9101 23 24.5 23Z"
fill="url(#paint9_radial_23_476)"
/>
<g opacity={0.5} filter="url(#filter0_f_23_476)">
<path
d="M7.5 13.5C7.5 13.5 7.75 11.5 10 11.5C12.25 11.5 12.5 13.5 12.5 13.5"
stroke="#9A4609"
strokeWidth={2}
strokeLinecap="round"
/>
</g>
<g opacity={0.5} filter="url(#filter1_f_23_476)">
<path
d="M18.5 13.5C18.5 13.5 19 11.5 21 11.5C23 11.5 23.5 13.5 23.5 13.5"
stroke="#9A4609"
strokeWidth={2}
strokeLinecap="round"
/>
</g>
<path
d="M8 13C8 13 8.25 11 10.5 11C12.75 11 13 13 13 13"
stroke="#43273B"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<g opacity={0.26} filter="url(#filter2_f_23_476)">
<path
d="M8.25 12.75C8.25 12.75 8.5 10.75 10.75 10.75C13 10.75 13.25 12.75 13.25 12.75"
stroke="white"
strokeWidth={0.75}
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<path
d="M19 13C19 13 19.5 11 21.5 11C23.5 11 24 13 24 13"
stroke="#43273B"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<g opacity={0.26} filter="url(#filter3_f_23_476)">
<path
d="M19.25 12.75C19.25 12.75 19.5 10.75 21.75 10.75C24 10.75 24.25 12.75 24.25 12.75"
stroke="white"
strokeWidth={0.75}
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<path
d="M6.5 9.5C6.83333 8.5 8.1 6.5 10.5 6.5"
stroke="url(#paint10_linear_23_476)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M25.5 9.5C25.1667 8.5 23.9 6.5 21.5 6.5"
stroke="url(#paint11_linear_23_476)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 19C10.5 19.6667 12.5 21.5 16 21.5C19.5 21.5 21.5 19.6667 22 19"
stroke="url(#paint12_radial_23_476)"
strokeWidth={2}
strokeLinecap="round"
/>
</g>
<defs>
<filter
id="filter0_f_23_476"
x={5}
y={9}
width={10}
height={7.00012}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.75}
result="effect1_foregroundBlur_23_476"
/>
</filter>
<filter
id="filter1_f_23_476"
x={15.9998}
y={9}
width={10.0005}
height={7.00024}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.75}
result="effect1_foregroundBlur_23_476"
/>
</filter>
<filter
id="filter2_f_23_476"
x={6.375}
y={8.875}
width={8.75}
height={5.75}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.75}
result="effect1_foregroundBlur_23_476"
/>
</filter>
<filter
id="filter3_f_23_476"
x={17.375}
y={8.875}
width={8.75}
height={5.75}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.75}
result="effect1_foregroundBlur_23_476"
/>
</filter>
<radialGradient
id="paint0_radial_23_476"
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_23_476"
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_23_476"
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_23_476"
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_23_476"
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_23_476"
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_23_476"
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_23_476"
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_23_476"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(7.50513 16.5012) scale(6.49487)"
>
<stop stopColor="#F70A8D" stopOpacity={0.59} />
<stop offset={1} stopColor="#FF6DC6" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_23_476"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(24.5051 16.5012) scale(6.49487)"
>
<stop stopColor="#F70A8D" stopOpacity={0.59} />
<stop offset={1} stopColor="#FF6DC6" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint10_linear_23_476"
x1={6.83333}
y1={10.4}
x2={6.83333}
y2={8.6}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.0299084} stopColor="#524049" />
<stop offset={1} stopColor="#4A2C42" />
</linearGradient>
<linearGradient
id="paint11_linear_23_476"
x1={25.1667}
y1={10.4}
x2={25.1667}
y2={8.6}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.0299084} stopColor="#524049" />
<stop offset={1} stopColor="#4A2C42" />
</linearGradient>
<radialGradient
id="paint12_radial_23_476"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.8737 16.9194) rotate(90) scale(11.4895)"
>
<stop offset={0.10265} stopColor="#482641" />
<stop offset={0.298574} stopColor="#503A4A" />
<stop offset={0.555606} stopColor="#483637" />
</radialGradient>
<clipPath id="clip0_23_476">
<rect width={32} height={32} fill="white" />
</clipPath>
</defs>
</svg>
);
module.exports = SmilingFaceIcon;