@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
319 lines (318 loc) • 10.9 kB
JSX
const React = require("react");
const BellIcon = ({ 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={16.0018}
cy={26.2662}
r={3.6607}
fill="url(#paint0_radial_18_17986)"
/>
<circle
cx={16.0018}
cy={26.2662}
r={3.6607}
fill="url(#paint1_linear_18_17986)"
/>
<circle
cx={16.0018}
cy={26.2662}
r={3.6607}
fill="url(#paint2_radial_18_17986)"
/>
<g filter="url(#filter0_i_18_17986)">
<rect
x={14.7959}
y={2.06006}
width={2.40835}
height={4.36131}
rx={1.20418}
fill="url(#paint3_radial_18_17986)"
/>
</g>
<g filter="url(#filter1_iii_18_17986)">
<path
d="M7.97823 10.6736C8.72019 6.95946 11.9635 4.27794 15.7436 4.24083C15.7701 4.24059 15.7967 4.24083 15.8233 4.24083H16.1765C16.2031 4.24083 16.2296 4.24059 16.2562 4.24083C20.0363 4.27794 23.2796 6.95946 24.0216 10.6736L25.8827 19.9904C26.0166 20.6603 26.3197 21.2847 26.7633 21.8042L28.0024 23.2553C28.6208 23.9795 28.9605 24.9005 28.9605 25.8528V27.1788C28.9605 27.593 28.6247 27.9288 28.2105 27.9288H3.78931C3.37509 27.9288 3.03931 27.593 3.03931 27.1788V25.8528C3.03931 24.9005 3.37904 23.9795 3.99741 23.2553L5.23646 21.8042C5.68007 21.2847 5.98323 20.6603 6.11706 19.9904L7.97823 10.6736Z"
fill="url(#paint4_linear_18_17986)"
/>
</g>
<path
d="M7.97823 10.6736C8.72019 6.95946 11.9635 4.27794 15.7436 4.24083C15.7701 4.24059 15.7967 4.24083 15.8233 4.24083H16.1765C16.2031 4.24083 16.2296 4.24059 16.2562 4.24083C20.0363 4.27794 23.2796 6.95946 24.0216 10.6736L25.8827 19.9904C26.0166 20.6603 26.3197 21.2847 26.7633 21.8042L28.0024 23.2553C28.6208 23.9795 28.9605 24.9005 28.9605 25.8528V27.1788C28.9605 27.593 28.6247 27.9288 28.2105 27.9288H3.78931C3.37509 27.9288 3.03931 27.593 3.03931 27.1788V25.8528C3.03931 24.9005 3.37904 23.9795 3.99741 23.2553L5.23646 21.8042C5.68007 21.2847 5.98323 20.6603 6.11706 19.9904L7.97823 10.6736Z"
fill="url(#paint5_linear_18_17986)"
/>
<path
d="M7.97823 10.6736C8.72019 6.95946 11.9635 4.27794 15.7436 4.24083C15.7701 4.24059 15.7967 4.24083 15.8233 4.24083H16.1765C16.2031 4.24083 16.2296 4.24059 16.2562 4.24083C20.0363 4.27794 23.2796 6.95946 24.0216 10.6736L25.8827 19.9904C26.0166 20.6603 26.3197 21.2847 26.7633 21.8042L28.0024 23.2553C28.6208 23.9795 28.9605 24.9005 28.9605 25.8528V27.1788C28.9605 27.593 28.6247 27.9288 28.2105 27.9288H3.78931C3.37509 27.9288 3.03931 27.593 3.03931 27.1788V25.8528C3.03931 24.9005 3.37904 23.9795 3.99741 23.2553L5.23646 21.8042C5.68007 21.2847 5.98323 20.6603 6.11706 19.9904L7.97823 10.6736Z"
fill="url(#paint6_radial_18_17986)"
/>
<g filter="url(#filter2_f_18_17986)">
<path
d="M7.47876 21.3125L5.91626 23.4375H26.9163L25.2288 21.3125H7.47876Z"
fill="url(#paint7_linear_18_17986)"
/>
</g>
<g filter="url(#filter3_f_18_17986)">
<path
d="M16.7913 9.32625C16.7913 8.07602 17.8048 7.0625 19.055 7.0625V7.0625C20.0997 7.0625 21.0088 7.77743 21.255 8.79271L24.2913 21.3125H16.7913V9.32625Z"
fill="url(#paint8_linear_18_17986)"
/>
</g>
<defs>
<filter
id="filter0_i_18_17986"
x={14.7959}
y={2.06006}
width={2.60845}
height={4.36133}
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.2} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.87451 0 0 0 0 0.564706 0 0 0 0 0.341176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17986"
/>
</filter>
<filter
id="filter1_iii_18_17986"
x={-0.960693}
y={4.24072}
width={30.9211}
height={23.6881}
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={-4} />
<feGaussianBlur stdDeviation={2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.905882 0 0 0 0 0.392157 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17986"
/>
<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} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.996078 0 0 0 0 0.866667 0 0 0 0 0.462745 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_17986"
result="effect2_innerShadow_18_17986"
/>
<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={1} />
<feGaussianBlur stdDeviation={1} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.917647 0 0 0 0 0.572549 0 0 0 0 0.32549 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_17986"
result="effect3_innerShadow_18_17986"
/>
</filter>
<filter
id="filter2_f_18_17986"
x={3.91626}
y={19.3125}
width={25}
height={6.125}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_18_17986"
/>
</filter>
<filter
id="filter3_f_18_17986"
x={14.7913}
y={5.0625}
width={11.5}
height={18.25}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_18_17986"
/>
</filter>
<radialGradient
id="paint0_radial_18_17986"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.7599 29.5625) rotate(-126.512) scale(2.95496 4.08094)"
>
<stop stopColor="#FFC26D" />
<stop offset={1} stopColor="#F68D61" />
</radialGradient>
<linearGradient
id="paint1_linear_18_17986"
x1={15.2599}
y1={27.1562}
x2={15.5099}
y2={28.9375}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.186236} stopColor="#E57356" />
<stop offset={1} stopColor="#E57356" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint2_radial_18_17986"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.8849 26.7187) rotate(135) scale(4.06586 6.70906)"
>
<stop offset={0.441043} stopColor="#EA8059" stopOpacity={0} />
<stop offset={1} stopColor="#C27068" />
</radialGradient>
<radialGradient
id="paint3_radial_18_17986"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.7913 4.24072) rotate(-90) scale(2.18066 1.3125)"
>
<stop stopColor="#FFE957" />
<stop offset={1} stopColor="#F7A630" />
</radialGradient>
<linearGradient
id="paint4_linear_18_17986"
x1={18.4674}
y1={26.0929}
x2={4.94556}
y2={26.0929}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FCB949" />
<stop offset={1} stopColor="#E28C37" />
</linearGradient>
<linearGradient
id="paint5_linear_18_17986"
x1={18.1036}
y1={28.1875}
x2={18.1036}
y2={25.1875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D7737D" />
<stop offset={0.302084} stopColor="#FCA162" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint6_radial_18_17986"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(22.0411 14.625) rotate(146.139) scale(22.883 21.9517)"
>
<stop offset={0.670378} stopColor="#E69136" stopOpacity={0} />
<stop offset={0.977283} stopColor="#CF7D44" />
</radialGradient>
<linearGradient
id="paint7_linear_18_17986"
x1={6.22876}
y1={23.4375}
x2={26.2913}
y2={23.4375}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.277259} stopColor="#F5A43C" />
<stop offset={1} stopColor="#FFE154" />
</linearGradient>
<linearGradient
id="paint8_linear_18_17986"
x1={25.1736}
y1={18.5721}
x2={15.5413}
y2={18.5721}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.117557} stopColor="#FFEF6D" />
<stop offset={1} stopColor="#FFEF6D" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
);
module.exports = BellIcon;