@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
629 lines (628 loc) • 20.4 kB
JSX
const React = require("react");
const SoapIcon = ({ 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}
<circle
cx={7.55469}
cy={9.96588}
r={2.21875}
fill="url(#paint0_radial_18_26261)"
/>
<circle
cx={7.55469}
cy={9.96588}
r={2.21875}
fill="url(#paint1_radial_18_26261)"
/>
<g filter="url(#filter0_i_18_26261)">
<circle
cx={4.07031}
cy={6.11432}
r={1.16406}
fill="url(#paint2_radial_18_26261)"
/>
<circle
cx={4.07031}
cy={6.11432}
r={1.16406}
fill="url(#paint3_radial_18_26261)"
/>
</g>
<g filter="url(#filter1_i_18_26261)">
<path
d="M13.5449 4.08512C16.0442 1.58577 20.0965 1.58576 22.5958 4.08512L28.0449 9.53415C30.5442 12.0335 30.5442 16.0858 28.0449 18.5851L18.4552 28.1748C15.9559 30.6741 11.9036 30.6741 9.40424 28.1748L3.9552 22.7258C1.45585 20.2264 1.45585 16.1741 3.95521 13.6748L13.5449 4.08512Z"
fill="url(#paint4_linear_18_26261)"
/>
<path
d="M13.5449 4.08512C16.0442 1.58577 20.0965 1.58576 22.5958 4.08512L28.0449 9.53415C30.5442 12.0335 30.5442 16.0858 28.0449 18.5851L18.4552 28.1748C15.9559 30.6741 11.9036 30.6741 9.40424 28.1748L3.9552 22.7258C1.45585 20.2264 1.45585 16.1741 3.95521 13.6748L13.5449 4.08512Z"
fill="url(#paint5_radial_18_26261)"
/>
<path
d="M13.5449 4.08512C16.0442 1.58577 20.0965 1.58576 22.5958 4.08512L28.0449 9.53415C30.5442 12.0335 30.5442 16.0858 28.0449 18.5851L18.4552 28.1748C15.9559 30.6741 11.9036 30.6741 9.40424 28.1748L3.9552 22.7258C1.45585 20.2264 1.45585 16.1741 3.95521 13.6748L13.5449 4.08512Z"
fill="url(#paint6_radial_18_26261)"
/>
<path
d="M13.5449 4.08512C16.0442 1.58577 20.0965 1.58576 22.5958 4.08512L28.0449 9.53415C30.5442 12.0335 30.5442 16.0858 28.0449 18.5851L18.4552 28.1748C15.9559 30.6741 11.9036 30.6741 9.40424 28.1748L3.9552 22.7258C1.45585 20.2264 1.45585 16.1741 3.95521 13.6748L13.5449 4.08512Z"
fill="url(#paint7_radial_18_26261)"
/>
<path
d="M13.5449 4.08512C16.0442 1.58577 20.0965 1.58576 22.5958 4.08512L28.0449 9.53415C30.5442 12.0335 30.5442 16.0858 28.0449 18.5851L18.4552 28.1748C15.9559 30.6741 11.9036 30.6741 9.40424 28.1748L3.9552 22.7258C1.45585 20.2264 1.45585 16.1741 3.95521 13.6748L13.5449 4.08512Z"
fill="url(#paint8_radial_18_26261)"
/>
<path
d="M13.5449 4.08512C16.0442 1.58577 20.0965 1.58576 22.5958 4.08512L28.0449 9.53415C30.5442 12.0335 30.5442 16.0858 28.0449 18.5851L18.4552 28.1748C15.9559 30.6741 11.9036 30.6741 9.40424 28.1748L3.9552 22.7258C1.45585 20.2264 1.45585 16.1741 3.95521 13.6748L13.5449 4.08512Z"
fill="url(#paint9_radial_18_26261)"
/>
<path
d="M13.5449 4.08512C16.0442 1.58577 20.0965 1.58576 22.5958 4.08512L28.0449 9.53415C30.5442 12.0335 30.5442 16.0858 28.0449 18.5851L18.4552 28.1748C15.9559 30.6741 11.9036 30.6741 9.40424 28.1748L3.9552 22.7258C1.45585 20.2264 1.45585 16.1741 3.95521 13.6748L13.5449 4.08512Z"
fill="url(#paint10_radial_18_26261)"
/>
</g>
<g filter="url(#filter2_f_18_26261)">
<rect
x={17.8359}
y={4.51276}
width={13.8328}
height={19.0256}
rx={3}
transform="rotate(45 17.8359 4.51276)"
fill="url(#paint11_linear_18_26261)"
/>
<rect
x={17.8359}
y={4.51276}
width={13.8328}
height={19.0256}
rx={3}
transform="rotate(45 17.8359 4.51276)"
fill="url(#paint12_linear_18_26261)"
/>
<rect
x={17.8359}
y={4.33598}
width={14.0828}
height={19.2756}
rx={3.125}
transform="rotate(45 17.8359 4.33598)"
stroke="url(#paint13_linear_18_26261)"
strokeWidth={0.25}
/>
</g>
<g filter="url(#filter3_i_18_26261)">
<circle
cx={5.33594}
cy={13.6534}
r={3.21875}
fill="url(#paint14_radial_18_26261)"
/>
<circle
cx={5.33594}
cy={13.6534}
r={3.21875}
fill="url(#paint15_radial_18_26261)"
/>
<circle
cx={5.33594}
cy={13.6534}
r={3.21875}
fill="url(#paint16_radial_18_26261)"
/>
</g>
<g filter="url(#filter4_f_18_26261)">
<path
d="M15.3875 26.2446L16.8389 5.92522C17.8936 5.55449 19.1139 5.79077 19.9573 6.63408L25.4958 12.1727C26.6675 13.3443 26.6675 15.2438 25.4958 16.4153L16.2854 25.6258C16.0182 25.893 15.7131 26.0993 15.3875 26.2446Z"
fill="url(#paint17_linear_18_26261)"
/>
<path
d="M15.3875 26.2446L16.8389 5.92522C17.8936 5.55449 19.1139 5.79077 19.9573 6.63408L25.4958 12.1727C26.6675 13.3443 26.6675 15.2438 25.4958 16.4153L16.2854 25.6258C16.0182 25.893 15.7131 26.0993 15.3875 26.2446Z"
fill="url(#paint18_radial_18_26261)"
/>
</g>
<circle
cx={21.6484}
cy={26.544}
r={2.73438}
fill="url(#paint19_radial_18_26261)"
/>
<circle
cx={21.6484}
cy={26.544}
r={2.73438}
fill="url(#paint20_radial_18_26261)"
/>
<g filter="url(#filter5_i_18_26261)">
<circle
cx={25.2344}
cy={22.419}
r={4.67969}
fill="url(#paint21_radial_18_26261)"
/>
<circle
cx={25.2344}
cy={22.419}
r={4.67969}
fill="url(#paint22_radial_18_26261)"
/>
<circle
cx={25.2344}
cy={22.419}
r={4.67969}
fill="url(#paint23_radial_18_26261)"
/>
</g>
<circle
cx={25.2344}
cy={22.419}
r={4.67969}
fill="url(#paint24_radial_18_26261)"
/>
<defs>
<filter
id="filter0_i_18_26261"
x={2.90625}
y={4.85026}
width={2.42813}
height={2.42813}
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={0.1} dy={-0.1} />
<feGaussianBlur stdDeviation={0.4} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.85098 0 0 0 0 0.737255 0 0 0 0 0.92549 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_26261"
/>
</filter>
<filter
id="filter1_i_18_26261"
x={2.08069}
y={2.2106}
width={28.1387}
height={27.8387}
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={0.3} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.94902 0 0 0 0 0.564706 0 0 0 0 0.811765 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_26261"
/>
</filter>
<filter
id="filter2_f_18_26261"
x={4.62549}
y={4.7554}
width={22.749}
height={22.7491}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.375}
result="effect1_foregroundBlur_18_26261"
/>
</filter>
<filter
id="filter3_i_18_26261"
x={2.11719}
y={10.3346}
width={6.5375}
height={6.5375}
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={0.1} dy={-0.1} />
<feGaussianBlur stdDeviation={0.4} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.909804 0 0 0 0 0.843137 0 0 0 0 0.980392 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_26261"
/>
</filter>
<filter
id="filter4_f_18_26261"
x={14.6375}
y={5.0054}
width={12.4871}
height={21.9892}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.375}
result="effect1_foregroundBlur_18_26261"
/>
</filter>
<filter
id="filter5_i_18_26261"
x={20.5547}
y={17.6393}
width={9.75938}
height={9.45938}
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={0.4} dy={-0.1} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.792157 0 0 0 0 0.54902 0 0 0 0 0.894118 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_26261"
/>
</filter>
<radialGradient
id="paint0_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(5.33594 9.96588) rotate(-8.07867) scale(4.21168)"
>
<stop stopColor="#CEC4D1" />
<stop offset={1} stopColor="#C8C1C9" />
</radialGradient>
<radialGradient
id="paint1_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.47592 9.96588) rotate(180) scale(3.13998)"
>
<stop offset={0.529025} stopColor="#CEC5D1" stopOpacity={0} />
<stop offset={1} stopColor="#E4DFE8" />
</radialGradient>
<radialGradient
id="paint2_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(4.78588 5.83) rotate(168.14) scale(1.92063 1.81766)"
>
<stop offset={0.134889} stopColor="#FFEDFF" />
<stop offset={0.911455} stopColor="#DBCBEA" />
</radialGradient>
<radialGradient
id="paint3_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(4.30477 6.78945) rotate(-100.366) scale(1.86971)"
>
<stop offset={0.818135} stopColor="#DAD4E0" stopOpacity={0} />
<stop offset={1} stopColor="#DAD4E0" />
</radialGradient>
<linearGradient
id="paint4_linear_18_26261"
x1={26.8672}
y1={7.80963}
x2={7.42969}
y2={25.6846}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFABBD" />
<stop offset={1} stopColor="#F756E5" />
</linearGradient>
<radialGradient
id="paint5_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.2897 17.7284) rotate(-111.029) scale(18.5947 25.5852)"
>
<stop offset={0.712824} stopColor="#E082A1" stopOpacity={0} />
<stop offset={0.964808} stopColor="#E1959A" />
</radialGradient>
<radialGradient
id="paint6_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(6.36719 12.8721) rotate(-46.1412) scale(11.0949 7.85755)"
>
<stop stopColor="#E775AB" />
<stop offset={1} stopColor="#E775AB" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint7_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(4.42969 16.4971) rotate(119.055) scale(2.57391 1.92148)"
>
<stop stopColor="#E551C0" />
<stop offset={1} stopColor="#E551C0" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint8_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.6797 24.3096) rotate(158.405) scale(6.45295 6.86055)"
>
<stop offset={0.187255} stopColor="#D24BB4" />
<stop offset={1} stopColor="#D24BB4" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.9922 19.8721) rotate(-103.241) scale(5.45758 5.04909)"
>
<stop offset={0.329015} stopColor="#E588A9" />
<stop offset={1} stopColor="#E588A9" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint10_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(25.2422 11.3096) rotate(-4.5839) scale(4.69225 6.39851)"
>
<stop stopColor="#FFA7C0" />
<stop offset={1} stopColor="#FFA7C0" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint11_linear_18_26261"
x1={24.7523}
y1={4.51276}
x2={24.7523}
y2={23.0964}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EE7BBE" />
<stop offset={1} stopColor="#FF7BE6" />
</linearGradient>
<linearGradient
id="paint12_linear_18_26261"
x1={25.5699}
y1={23.8035}
x2={25.5257}
y2={19.5167}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.178321} stopColor="#FF83E6" />
<stop offset={1} stopColor="#FF83E6" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint13_linear_18_26261"
x1={15.9469}
y1={13.3236}
x2={20.2694}
y2={13.5116}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.493396} stopColor="#F89BB9" />
<stop offset={1} stopColor="#F89BB9" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint14_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(6.48257 13.3275) rotate(171.772) scale(4.41078 4.17429)"
>
<stop offset={0.134889} stopColor="#FFEDFF" />
<stop offset={1} stopColor="#ECAEFF" />
</radialGradient>
<radialGradient
id="paint15_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(2.11719 15.7195) rotate(-25.398) scale(3.56313 5.11774)"
>
<stop offset={0.181651} stopColor="#DBB6FF" />
<stop offset={1} stopColor="#DBB6FF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint16_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(5.98423 15.5202) rotate(-100.366) scale(5.16993)"
>
<stop offset={0.818135} stopColor="#DAD4E0" stopOpacity={0} />
<stop offset={1} stopColor="#DAD4E0" />
</radialGradient>
<linearGradient
id="paint17_linear_18_26261"
x1={15.3875}
y1={23.8096}
x2={24.4141}
y2={15.4971}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F068CB" />
<stop offset={1} stopColor="#F068CB" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint18_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(22.0585 20.5793) rotate(131.285) scale(3.87831 2.9553)"
>
<stop offset={0.0695329} stopColor="#D35F9E" />
<stop offset={1} stopColor="#D35F9E" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint19_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.3477 28.0428) rotate(-99.4623) scale(3.45895)"
>
<stop stopColor="#EDA5FF" />
<stop offset={1} stopColor="#C28CDD" />
</radialGradient>
<radialGradient
id="paint20_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.7289 25.4839) rotate(129.237) scale(2.75318 3.79157)"
>
<stop offset={0.38113} stopColor="#D89AFF" />
<stop offset={1} stopColor="#D89AFF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint21_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(28.3847 21.1479) rotate(167.646) scale(8.01567 7.5859)"
>
<stop offset={0.218084} stopColor="#FFEDFF" />
<stop offset={1} stopColor="#ECAEFF" />
</radialGradient>
<radialGradient
id="paint22_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(20.5547 25.4229) rotate(-29.4773) scale(4.59591 6.60113)"
>
<stop offset={0.181651} stopColor="#DBB6FF" />
<stop offset={1} stopColor="#DBB6FF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint23_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(26.1769 25.1331) rotate(-100.366) scale(7.51647)"
>
<stop offset={0.818135} stopColor="#DAD4E0" stopOpacity={0} />
<stop offset={1} stopColor="#DAD4E0" />
</radialGradient>
<radialGradient
id="paint24_radial_18_26261"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(26.3945 19.3354) rotate(98.499) scale(7.84952 9.63202)"
>
<stop offset={0.681325} stopColor="#F3B7FF" stopOpacity={0} />
<stop offset={1} stopColor="#E697FF" />
</radialGradient>
</defs>
</svg>
);
module.exports = SoapIcon;