@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
330 lines (329 loc) • 13.2 kB
JSX
const React = require("react");
const WindChimeIcon = ({ 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_18_1041)">
<path
d="M13.2 21.05V21.95C13.2 23.95 13.6199 25.92 14.4299 27.74L15.0499 29.13C15.1399 29.34 15.3499 29.47 15.5799 29.47H21.0499C21.4699 29.47 21.7499 29.04 21.5799 28.66L21.17 27.73C20.36 25.91 19.9399 23.93 19.9399 21.94V21.04C19.9399 20.72 19.6799 20.46 19.3599 20.46H13.7899C13.4599 20.48 13.2 20.74 13.2 21.05Z"
fill="url(#paint0_radial_18_1041)"
/>
<path
d="M13.2 21.05V21.95C13.2 23.95 13.6199 25.92 14.4299 27.74L15.0499 29.13C15.1399 29.34 15.3499 29.47 15.5799 29.47H21.0499C21.4699 29.47 21.7499 29.04 21.5799 28.66L21.17 27.73C20.36 25.91 19.9399 23.93 19.9399 21.94V21.04C19.9399 20.72 19.6799 20.46 19.3599 20.46H13.7899C13.4599 20.48 13.2 20.74 13.2 21.05Z"
fill="url(#paint1_linear_18_1041)"
/>
<path
d="M13.2 21.05V21.95C13.2 23.95 13.6199 25.92 14.4299 27.74L15.0499 29.13C15.1399 29.34 15.3499 29.47 15.5799 29.47H21.0499C21.4699 29.47 21.7499 29.04 21.5799 28.66L21.17 27.73C20.36 25.91 19.9399 23.93 19.9399 21.94V21.04C19.9399 20.72 19.6799 20.46 19.3599 20.46H13.7899C13.4599 20.48 13.2 20.74 13.2 21.05Z"
fill="url(#paint2_radial_18_1041)"
/>
</g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.49 1.5C16.7661 1.5 16.99 1.72386 16.99 2V20.9C16.99 21.1761 16.7661 21.4 16.49 21.4C16.2138 21.4 15.99 21.1761 15.99 20.9V2C15.99 1.72386 16.2138 1.5 16.49 1.5Z"
fill="#4999DF"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.49 1.5C16.7661 1.5 16.99 1.72386 16.99 2V20.9C16.99 21.1761 16.7661 21.4 16.49 21.4C16.2138 21.4 15.99 21.1761 15.99 20.9V2C15.99 1.72386 16.2138 1.5 16.49 1.5Z"
fill="url(#paint3_linear_18_1041)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.49 1.5C16.7661 1.5 16.99 1.72386 16.99 2V20.9C16.99 21.1761 16.7661 21.4 16.49 21.4C16.2138 21.4 15.99 21.1761 15.99 20.9V2C15.99 1.72386 16.2138 1.5 16.49 1.5Z"
fill="url(#paint4_radial_18_1041)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.49 1.5C16.7661 1.5 16.99 1.72386 16.99 2V20.9C16.99 21.1761 16.7661 21.4 16.49 21.4C16.2138 21.4 15.99 21.1761 15.99 20.9V2C15.99 1.72386 16.2138 1.5 16.49 1.5Z"
fill="url(#paint5_radial_18_1041)"
/>
<g opacity={0.8} filter="url(#filter1_i_18_1041)">
<path
d="M19.55 3.53999H13.44C10.44 3.53999 8 5.98 8 8.98C8 11.98 10.44 14.42 13.44 14.42H19.55C22.55 14.42 24.99 11.98 24.99 8.98C24.99 5.97 22.55 3.53999 19.55 3.53999Z"
fill="url(#paint6_linear_18_1041)"
/>
<path
d="M19.55 3.53999H13.44C10.44 3.53999 8 5.98 8 8.98C8 11.98 10.44 14.42 13.44 14.42H19.55C22.55 14.42 24.99 11.98 24.99 8.98C24.99 5.97 22.55 3.53999 19.55 3.53999Z"
fill="url(#paint7_radial_18_1041)"
/>
<path
d="M19.55 3.53999H13.44C10.44 3.53999 8 5.98 8 8.98C8 11.98 10.44 14.42 13.44 14.42H19.55C22.55 14.42 24.99 11.98 24.99 8.98C24.99 5.97 22.55 3.53999 19.55 3.53999Z"
fill="url(#paint8_radial_18_1041)"
/>
</g>
<g filter="url(#filter2_i_18_1041)">
<path
d="M16.49 18.46C17.3074 18.46 17.97 17.7974 17.97 16.98C17.97 16.1626 17.3074 15.5 16.49 15.5C15.6726 15.5 15.01 16.1626 15.01 16.98C15.01 17.7974 15.6726 18.46 16.49 18.46Z"
fill="url(#paint9_radial_18_1041)"
/>
<path
d="M16.49 18.46C17.3074 18.46 17.97 17.7974 17.97 16.98C17.97 16.1626 17.3074 15.5 16.49 15.5C15.6726 15.5 15.01 16.1626 15.01 16.98C15.01 17.7974 15.6726 18.46 16.49 18.46Z"
fill="url(#paint10_radial_18_1041)"
/>
</g>
<path
d="M21.2601 6.19C21.0201 6.19 20.83 5.99999 20.83 5.75999V5.75C20.83 5.6 20.71 5.47 20.55 5.47C20.4 5.47 20.2701 5.59 20.2701 5.75V5.75999C20.2701 5.99999 20.0801 6.19 19.8401 6.19C19.6901 6.19 19.56 6.30999 19.55 6.45999C19.55 6.61999 19.67 6.74001 19.83 6.74001H19.8401C20.0801 6.74001 20.2701 6.93 20.2701 7.17V7.17999C20.2701 7.32999 20.39 7.45999 20.55 7.45999C20.7 7.45999 20.83 7.33999 20.83 7.17999V7.17C20.83 6.93 21.0201 6.74001 21.2601 6.74001H21.2701C21.4201 6.74001 21.55 6.60999 21.55 6.45999C21.54 6.30999 21.4101 6.19 21.2601 6.19Z"
fill="#FF8585"
/>
<path
d="M21.2701 10.19C21.0301 10.19 20.8401 9.99999 20.8401 9.75999V9.75C20.8401 9.6 20.7201 9.47 20.5601 9.47C20.4101 9.47 20.2801 9.59 20.2801 9.75V9.75999C20.2801 9.99999 20.0901 10.19 19.8501 10.19C19.7001 10.19 19.5701 10.31 19.5601 10.46C19.5601 10.62 19.6801 10.74 19.8401 10.74H19.8501C20.0901 10.74 20.2801 10.93 20.2801 11.17V11.18C20.2801 11.33 20.4001 11.46 20.5601 11.46C20.7101 11.46 20.8401 11.34 20.8401 11.18V11.17C20.8401 10.93 21.0301 10.74 21.2701 10.74H21.2801C21.4301 10.74 21.5601 10.61 21.5601 10.46C21.5501 10.31 21.4201 10.19 21.2701 10.19Z"
fill="#FF8585"
/>
<path
d="M23.69 8.2C23.45 8.2 23.26 8.01 23.26 7.77V7.75999C23.26 7.60999 23.14 7.48 22.98 7.48C22.83 7.48 22.7 7.59999 22.7 7.75999V7.77C22.7 8.01 22.51 8.2 22.27 8.2C22.12 8.2 21.99 8.32 21.98 8.47C21.98 8.63 22.1 8.75 22.26 8.75H22.27C22.51 8.75 22.7 8.93999 22.7 9.17999V9.19C22.7 9.34 22.82 9.47 22.98 9.47C23.13 9.47 23.26 9.35 23.26 9.19V9.17999C23.26 8.93999 23.45 8.75 23.69 8.75H23.7C23.85 8.75 23.98 8.62 23.98 8.47C23.97 8.32 23.84 8.2 23.69 8.2Z"
fill="#FF8585"
/>
<path
d="M16.58 23.68C16.9501 23.68 17.25 23.38 17.25 23.01C17.25 22.64 16.9501 22.34 16.58 22.34C16.21 22.34 15.91 22.64 15.91 23.01C15.91 23.38 16.21 23.68 16.58 23.68Z"
fill="#FF7578"
/>
<path
d="M17.15 25.98C17.52 25.98 17.82 25.68 17.82 25.31C17.82 24.94 17.52 24.64 17.15 24.64C16.7799 24.64 16.48 24.94 16.48 25.31C16.48 25.68 16.7799 25.98 17.15 25.98Z"
fill="#FF7578"
/>
<path
d="M17.92 28.26C18.29 28.26 18.59 27.96 18.59 27.59C18.59 27.22 18.29 26.92 17.92 26.92C17.55 26.92 17.25 27.22 17.25 27.59C17.25 27.96 17.55 28.26 17.92 28.26Z"
fill="#FF7578"
/>
<defs>
<filter
id="filter0_i_18_1041"
x={13.2}
y={20.21}
width={8.68048}
height={9.26001}
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.4} />
<feGaussianBlur stdDeviation={0.125} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.858824 0 0 0 0 0.807843 0 0 0 0 0.917647 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_1041"
/>
</filter>
<filter
id="filter1_i_18_1041"
x={8}
y={3.53999}
width={16.99}
height={10.88}
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 />
<feGaussianBlur stdDeviation={0.75} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.481771 0 0 0 0 0.630317 0 0 0 0 0.770833 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_1041"
/>
</filter>
<filter
id="filter2_i_18_1041"
x={15.01}
y={15.5}
width={2.95996}
height={2.95999}
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 />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.870588 0 0 0 0 0.721569 0 0 0 0 0.356863 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_1041"
/>
</filter>
<radialGradient
id="paint0_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(19.8124 23.5) rotate(180) scale(6.21875 5.81876)"
>
<stop stopColor="#F4EFFC" />
<stop offset={1} stopColor="#E8E0F2" />
</radialGradient>
<linearGradient
id="paint1_linear_18_1041"
x1={17.4152}
y1={20.46}
x2={17.4152}
y2={20.9063}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D3D2E1" />
<stop offset={1} stopColor="#D3D2E1" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint2_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(20.9687 23.4063) rotate(-179.782) scale(8.21881 18.2767)"
>
<stop offset={0.839974} stopColor="#D4D0DC" stopOpacity={0} />
<stop offset={1} stopColor="#D4D0DC" />
</radialGradient>
<linearGradient
id="paint3_linear_18_1041"
x1={17.8125}
y1={22.5}
x2={17.8125}
y2={10}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#52D6FF" />
<stop offset={1} stopColor="#52D6FF" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint4_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.99 1.78125) rotate(90) scale(9 0.677506)"
>
<stop stopColor="#60C5FF" />
<stop offset={1} stopColor="#60C5FF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint5_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.2187 19.875) rotate(-180) scale(0.728744 3.65625)"
>
<stop stopColor="#70E6FF" />
<stop offset={1} stopColor="#70E6FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint6_linear_18_1041"
x1={23.6875}
y1={7.625}
x2={8.3125}
y2={7.625}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#94CBFF" />
<stop offset={1} stopColor="#8CC5FD" />
</linearGradient>
<radialGradient
id="paint7_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(22.5625 7.5625) rotate(150.255) scale(3.52724 3.27187)"
>
<stop stopColor="#CEF8FF" />
<stop offset={1} stopColor="#CEF8FF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint8_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(7.6875 13.625) rotate(-32.9052) scale(7.59317 4.72876)"
>
<stop stopColor="#CEF8FF" />
<stop offset={1} stopColor="#CEF8FF" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.7813 16.3125) rotate(145.923) scale(2.56555 2.8183)"
>
<stop stopColor="#FFF366" />
<stop offset={1} stopColor="#EFBE44" />
</radialGradient>
<radialGradient
id="paint10_radial_18_1041"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(15.01 16.98) rotate(78.4683) scale(1.20049 1.14795)"
>
<stop stopColor="#FFD561" />
<stop offset={1} stopColor="#FFD561" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
module.exports = WindChimeIcon;