@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
195 lines (194 loc) • 7.24 kB
JSX
const React = require("react");
const YinYangIcon = ({ 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_ii_18590_1039)">
<rect
x={2.51233}
y={2.0625}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_1039)"
/>
<rect
x={2.51233}
y={2.0625}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_1039)"
/>
</g>
<g filter="url(#filter1_f_18590_1039)">
<path
d="M28.6998 4.5625V27.4375"
stroke="url(#paint2_linear_18590_1039)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_1039)">
<path
d="M5.9762 3.875H27.7574"
stroke="url(#paint3_linear_18590_1039)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<path
d="M16.8668 24.5H16.8358C17.963 24.5 19.044 24.0522 19.841 23.2552C20.6381 22.4582 21.0858 21.3772 21.0858 20.25C21.0858 19.1228 20.6381 18.0418 19.841 17.2448C19.044 16.4478 17.963 16 16.8358 16C15.7087 16.0101 14.6236 15.572 13.8195 14.7821C13.0153 13.9922 12.5579 12.9152 12.5478 11.788C12.5377 10.6608 12.9758 9.57583 13.7657 8.77167C14.5557 7.96752 15.6327 7.51008 16.7598 7.5H16.8668C19.1212 7.5 21.2832 8.39554 22.8772 9.9896C24.4713 11.5837 25.3668 13.7457 25.3668 16C25.3668 18.2543 24.4713 20.4164 22.8772 22.0104C21.2832 23.6045 19.1212 24.5 16.8668 24.5ZM16.8668 26C18.8446 26 20.778 25.4135 22.4225 24.3147C24.067 23.2159 25.3487 21.6541 26.1056 19.8268C26.8625 17.9996 27.0605 15.9889 26.6747 14.0491C26.2888 12.1093 25.3364 10.3275 23.9379 8.92894C22.5394 7.53041 20.7575 6.578 18.8177 6.19215C16.8779 5.8063 14.8672 6.00433 13.04 6.76121C11.2127 7.51809 9.65094 8.79981 8.55212 10.4443C7.45331 12.0888 6.86682 14.0222 6.86682 16C6.86682 18.6522 7.92039 21.1957 9.79575 23.0711C11.6711 24.9464 14.2147 26 16.8668 26ZM16.8358 22.375C16.2722 22.375 15.7317 22.1511 15.3332 21.7526C14.9347 21.3541 14.7108 20.8136 14.7108 20.25C14.7108 19.8297 14.8355 19.4189 15.0689 19.0694C15.3024 18.72 15.6343 18.4476 16.0226 18.2868C16.4109 18.1259 16.8382 18.0838 17.2504 18.1658C17.6626 18.2478 18.0412 18.4502 18.3384 18.7474C18.6356 19.0446 18.838 19.4232 18.92 19.8354C19.002 20.2476 18.9599 20.6749 18.7991 21.0632C18.6382 21.4515 18.3659 21.7834 18.0164 22.0169C17.667 22.2504 17.2561 22.375 16.8358 22.375ZM16.8668 14C17.2624 14 17.6491 13.8827 17.978 13.6629C18.3069 13.4432 18.5632 13.1308 18.7146 12.7654C18.866 12.3999 18.9056 11.9978 18.8284 11.6098C18.7512 11.2219 18.5607 10.8655 18.281 10.5858C18.0013 10.3061 17.645 10.1156 17.257 10.0384C16.869 9.96126 16.4669 10.0009 16.1015 10.1522C15.736 10.3036 15.4236 10.56 15.2039 10.8889C14.9841 11.2178 14.8668 11.6044 14.8668 12C14.8668 12.5304 15.0775 13.0391 15.4526 13.4142C15.8277 13.7893 16.3364 14 16.8668 14Z"
fill="white"
/>
<defs>
<filter
id="filter0_ii_18590_1039"
x={2.51233}
y={1.0625}
width={29.875}
height={28.875}
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={-1} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.298039 0 0 0 0 0.235294 0 0 0 0 0.6 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_1039"
/>
<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 dy={-1} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.352941 0 0 0 0 0.211765 0 0 0 0 0.709804 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18590_1039"
result="effect2_innerShadow_18590_1039"
/>
</filter>
<filter
id="filter1_f_18590_1039"
x={25.9498}
y={1.8125}
width={5.5}
height={28.375}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_18590_1039"
/>
</filter>
<filter
id="filter2_f_18590_1039"
x={3.2262}
y={1.125}
width={27.2812}
height={5.5}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_18590_1039"
/>
</filter>
<linearGradient
id="paint0_linear_18590_1039"
x1={16.4498}
y1={5.63701}
x2={16.4498}
y2={38.8897}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#9865EE" />
<stop offset={1} stopColor="#7764C6" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_1039"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(28.1686 4.15625) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#BB8DFF" />
<stop offset={1} stopColor="#BB8DFF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_1039"
x1={29.1998}
y1={4.5625}
x2={29.1998}
y2={27.4375}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#AE7EFF" />
<stop offset={1} stopColor="#8777D6" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_1039"
x1={28.9137}
y1={4.12502}
x2={3.38245}
y2={4.12502}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#A672FF" />
<stop offset={1} stopColor="#9A6CEB" />
</linearGradient>
</defs>
</svg>
);
module.exports = YinYangIcon;