@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
490 lines (489 loc) • 17.8 kB
JSX
const React = require("react");
const YoYoIcon = ({ 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="M17.875 29.7432C22.9836 29.7432 27.125 25.6018 27.125 20.4932C27.125 15.3845 22.9836 11.2432 17.875 11.2432H13.125V12.5543C10.4293 14.1707 8.625 17.1212 8.625 20.4932C8.625 23.8651 10.4293 26.8157 13.125 28.4321V29.7432H17.875Z"
fill="url(#paint0_radial_18_3277)"
/>
<path
d="M17.875 29.7432C22.9836 29.7432 27.125 25.6018 27.125 20.4932C27.125 15.3845 22.9836 11.2432 17.875 11.2432H13.125V12.5543C10.4293 14.1707 8.625 17.1212 8.625 20.4932C8.625 23.8651 10.4293 26.8157 13.125 28.4321V29.7432H17.875Z"
fill="url(#paint1_radial_18_3277)"
/>
<path
d="M16.2031 29.4618C21.3118 29.4618 25.4531 25.4464 25.4531 20.4933C25.4531 15.5402 21.3118 11.5249 16.2031 11.5249H13.125V12.7961C10.4293 14.3633 8.625 17.224 8.625 20.4933C8.625 23.7626 10.4293 26.6234 13.125 28.1906V29.4618H16.2031Z"
fill="url(#paint2_radial_18_3277)"
/>
<g filter="url(#filter0_i_18_3277)">
<path
d="M18.7188 5.26659C19.6562 5.13117 21.8484 5.29626 23.1484 7.07126C24.7734 9.29001 23.6094 12.3681 20.3906 13.8369"
stroke="#EBB240"
/>
<path
d="M18.7188 5.26659C19.6562 5.13117 21.8484 5.29626 23.1484 7.07126C24.7734 9.29001 23.6094 12.3681 20.3906 13.8369"
stroke="url(#paint3_radial_18_3277)"
/>
</g>
<path
d="M15 29.7432C20.1086 29.7432 24.25 25.6018 24.25 20.4932C24.25 15.3845 20.1086 11.2432 15 11.2432H13.125V11.4333C8.91532 12.3 5.75 16.0269 5.75 20.4932C5.75 24.9594 8.91532 28.6863 13.125 29.553V29.7432H15Z"
fill="url(#paint4_radial_18_3277)"
/>
<path
d="M15 29.7432C20.1086 29.7432 24.25 25.6018 24.25 20.4932C24.25 15.3845 20.1086 11.2432 15 11.2432H13.125V11.4333C8.91532 12.3 5.75 16.0269 5.75 20.4932C5.75 24.9594 8.91532 28.6863 13.125 29.553V29.7432H15Z"
fill="url(#paint5_radial_18_3277)"
/>
<circle
cx={13.125}
cy={20.4932}
r={9.15625}
fill="#FF8A8A"
fillOpacity={0.5}
/>
<g filter="url(#filter1_i_18_3277)">
<circle cx={16.418} cy={4.86426} r={2.46484} stroke="#EBB240" />
<circle
cx={16.418}
cy={4.86426}
r={2.46484}
stroke="url(#paint6_radial_18_3277)"
/>
</g>
<g filter="url(#filter2_f_18_3277)">
<circle
cx={16.5786}
cy={4.72168}
r={2.46484}
stroke="url(#paint7_linear_18_3277)"
strokeWidth={0.25}
/>
</g>
<circle
cx={13.125}
cy={20.4932}
r={9.25}
fill="url(#paint8_radial_18_3277)"
/>
<circle
cx={13.125}
cy={20.4932}
r={9.25}
fill="url(#paint9_radial_18_3277)"
/>
<circle
cx={13.125}
cy={20.4932}
r={9.25}
fill="url(#paint10_radial_18_3277)"
/>
<g filter="url(#filter3_ii_18_3277)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.8672 27.1729C16.5563 27.1729 19.5469 24.1823 19.5469 20.4932C19.5469 16.8041 16.5563 13.8135 12.8672 13.8135C9.1781 13.8135 6.1875 16.8041 6.1875 20.4932C6.1875 24.1823 9.1781 27.1729 12.8672 27.1729ZM12.8672 25.8291C15.8141 25.8291 18.2031 23.4401 18.2031 20.4932C18.2031 17.5462 15.8141 15.1572 12.8672 15.1572C9.92023 15.1572 7.53125 17.5462 7.53125 20.4932C7.53125 23.4401 9.92023 25.8291 12.8672 25.8291Z"
fill="#C78EFF"
/>
</g>
<g filter="url(#filter4_i_18_3277)">
<circle cx={12.8665} cy={20.4933} r={5.3336} fill="#9369D3" />
</g>
<g filter="url(#filter5_f_18_3277)">
<path
d="M11.2789 18.7251C11.4201 18.7046 11.5404 18.6168 11.6132 18.4941C11.8186 18.1479 12.1168 17.6637 12.4023 17.2246C12.6248 16.8825 13.1096 16.8825 13.3321 17.2246C13.6139 17.6579 13.908 18.1353 14.1131 18.4805C14.1906 18.6109 14.3217 18.701 14.4721 18.7199C14.8982 18.7736 15.3982 18.8167 15.8432 18.9117C16.2735 19.0037 16.4436 19.4892 16.1614 19.8305C15.9199 20.1226 15.6491 20.4362 15.4151 20.7071C15.3069 20.8323 15.2066 20.9485 15.1207 21.0492C15.013 21.1755 14.979 21.3478 15.0244 21.5075C15.1858 22.0749 15.2998 22.5779 15.3714 22.9722C15.453 23.4215 15.0787 23.7008 14.6583 23.5339C14.0607 23.2967 13.4591 23.0239 13.0801 22.8478C12.945 22.7851 12.7894 22.7851 12.6543 22.8478C12.2753 23.0239 11.6737 23.2967 11.0761 23.5339C10.6556 23.7008 10.2814 23.4215 10.363 22.9722C10.4346 22.5779 10.5486 22.0749 10.71 21.5075C10.7554 21.3478 10.7214 21.1755 10.6136 21.0492C10.5277 20.9485 10.4275 20.8323 10.3193 20.7071C10.0853 20.4362 9.8145 20.1226 9.573 19.8305C9.29082 19.4892 9.46088 19.0037 9.89121 18.9117C10.3367 18.8166 10.8688 18.7845 11.2789 18.7251Z"
fill="#8B60D0"
/>
</g>
<g filter="url(#filter6_ii_18_3277)">
<path
d="M11.2789 18.7251C11.4201 18.7046 11.5404 18.6168 11.6132 18.4941C11.8186 18.1479 12.1168 17.6637 12.4023 17.2246C12.6248 16.8825 13.1096 16.8825 13.3321 17.2246C13.6139 17.6579 13.908 18.1353 14.1131 18.4805C14.1906 18.6109 14.3217 18.701 14.4721 18.7199C14.8982 18.7736 15.3982 18.8167 15.8432 18.9117C16.2735 19.0037 16.4436 19.4892 16.1614 19.8305C15.9199 20.1226 15.6491 20.4362 15.4151 20.7071C15.3069 20.8323 15.2066 20.9485 15.1207 21.0492C15.013 21.1755 14.979 21.3478 15.0244 21.5075C15.1858 22.0749 15.2998 22.5779 15.3714 22.9722C15.453 23.4215 15.0787 23.7008 14.6583 23.5339C14.0607 23.2967 13.4591 23.0239 13.0801 22.8478C12.945 22.7851 12.7894 22.7851 12.6543 22.8478C12.2753 23.0239 11.6737 23.2967 11.0761 23.5339C10.6556 23.7008 10.2814 23.4215 10.363 22.9722C10.4346 22.5779 10.5486 22.0749 10.71 21.5075C10.7554 21.3478 10.7214 21.1755 10.6136 21.0492C10.5277 20.9485 10.4275 20.8323 10.3193 20.7071C10.0853 20.4362 9.8145 20.1226 9.573 19.8305C9.29082 19.4892 9.46088 19.0037 9.89121 18.9117C10.3367 18.8166 10.8688 18.7845 11.2789 18.7251Z"
fill="#C08BF9"
/>
</g>
<defs>
<filter
id="filter0_i_18_3277"
x={18.6473}
y={4.73059}
width={5.88044}
height={9.56116}
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.15} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.85098 0 0 0 0 0.631373 0 0 0 0 0.266667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_3277"
/>
</filter>
<filter
id="filter1_i_18_3277"
x={13.4531}
y={1.64941}
width={6.17969}
height={6.17969}
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.25} dy={-0.25} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.85098 0 0 0 0 0.631373 0 0 0 0 0.266667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_3277"
/>
</filter>
<filter
id="filter2_f_18_3277"
x={13.7387}
y={1.88184}
width={5.67969}
height={5.67969}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.125}
result="effect1_foregroundBlur_18_3277"
/>
</filter>
<filter
id="filter3_ii_18_3277"
x={5.7875}
y={13.8135}
width={14.1594}
height={13.3594}
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.6} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.74902 0 0 0 0 0.509804 0 0 0 0 0.980392 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_3277"
/>
<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} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.819608 0 0 0 0 0.619608 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_3277"
result="effect2_innerShadow_18_3277"
/>
</filter>
<filter
id="filter4_i_18_3277"
x={7.53293}
y={14.9097}
width={10.9172}
height={10.9172}
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.25} dy={-0.25} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.556863 0 0 0 0 0.388235 0 0 0 0 0.815686 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_3277"
/>
</filter>
<filter
id="filter5_f_18_3277"
x={8.43445}
y={15.968}
width={8.86548}
height={8.61462}
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_18_3277"
/>
</filter>
<filter
id="filter6_ii_18_3277"
x={8.93445}
y={16.668}
width={7.66548}
height={7.41462}
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} dy={-0.3} />
<feGaussianBlur stdDeviation={0.4} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.823529 0 0 0 0 0.631373 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_3277"
/>
<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.5} dy={0.5} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.713726 0 0 0 0 0.47451 0 0 0 0 0.956863 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_3277"
result="effect2_innerShadow_18_3277"
/>
</filter>
<radialGradient
id="paint0_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(26.5469 16.3369) rotate(145.355) scale(13.0404 13.1312)"
>
<stop stopColor="#A28ACF" />
<stop offset={1} stopColor="#744EB1" />
</radialGradient>
<radialGradient
id="paint1_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.875 20.7001) rotate(0.654505) scale(7.93784 9.05561)"
>
<stop offset={0.957057} stopColor="#734BAD" />
<stop offset={0.98848} stopColor="#734BAD" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint2_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(18.6587 27.7386) rotate(-48.4079) scale(11.9659 40.8915)"
>
<stop stopColor="#543A6E" />
<stop offset={1} stopColor="#442662" />
</radialGradient>
<radialGradient
id="paint3_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(20.6136 9.36575) rotate(-34.7788) scale(3.97411 6.23057)"
>
<stop offset={0.782148} stopColor="#FCCA60" stopOpacity={0} />
<stop offset={1} stopColor="#FCCA60" />
</radialGradient>
<radialGradient
id="paint4_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.6719 16.3369) rotate(144.794) scale(15.0689 13.7361)"
>
<stop stopColor="#B090E1" />
<stop offset={1} stopColor="#8357C5" />
</radialGradient>
<radialGradient
id="paint5_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(14.3594 20.4932) scale(8.34375 8.92433)"
>
<stop offset={0.89662} stopColor="#AF8CE6" />
<stop offset={0.976143} stopColor="#AF8CE6" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint6_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.679 7.0131) rotate(-22.1955) scale(4.8174 5.53739)"
>
<stop stopColor="#E9B443" />
<stop offset={1} stopColor="#E9B443" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint7_linear_18_3277"
x1={18.6738}
y1={2.98102}
x2={15.2482}
y2={7.18652}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FDCD63" />
<stop offset={0.185883} stopColor="#FDCD63" stopOpacity={0} />
<stop offset={0.860358} stopColor="#FDCD63" stopOpacity={0} />
<stop offset={1} stopColor="#FDCD63" />
</linearGradient>
<radialGradient
id="paint8_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.7969 28.9619) rotate(-60.7143) scale(20.3152)"
>
<stop stopColor="#9268D7" />
<stop offset={1} stopColor="#9469D5" />
</radialGradient>
<radialGradient
id="paint9_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.7642 20.4932) scale(9.61084)"
>
<stop offset={0.966763} stopColor="#AB87E5" stopOpacity={0} />
<stop offset={1} stopColor="#AB87E5" />
</radialGradient>
<radialGradient
id="paint10_radial_18_3277"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.125 20.1494) rotate(90) scale(9.59375)"
>
<stop offset={0.964984} stopColor="#8653D0" stopOpacity={0} />
<stop offset={1} stopColor="#8653D0" />
</radialGradient>
</defs>
</svg>
);
module.exports = YoYoIcon;