@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
261 lines (260 loc) • 7.91 kB
JSX
const React = require("react");
const LoudspeakerIcon = ({ 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={26.2812}
cy={15.9459}
r={3.78125}
fill="url(#paint0_radial_18_17873)"
/>
<circle
cx={26.2812}
cy={15.9459}
r={3.78125}
fill="url(#paint1_linear_18_17873)"
/>
<path
d="M5.25 21.0397H10.0938V28.3209C10.0938 28.5971 9.86989 28.8209 9.59375 28.8209H5.75C5.47386 28.8209 5.25 28.5971 5.25 28.3209V21.0397Z"
fill="url(#paint2_radial_18_17873)"
/>
<path
d="M5.25 21.0397H10.0938V28.3209C10.0938 28.5971 9.86989 28.8209 9.59375 28.8209H5.75C5.47386 28.8209 5.25 28.5971 5.25 28.3209V21.0397Z"
fill="url(#paint3_linear_18_17873)"
/>
<g filter="url(#filter0_i_18_17873)">
<path
d="M2.14331 10.8104C2.14331 10.3962 2.4791 10.0604 2.89331 10.0604H12.1502V21.9395H2.89331C2.4791 21.9395 2.14331 21.6037 2.14331 21.1895V10.8104Z"
fill="url(#paint4_linear_18_17873)"
/>
</g>
<g filter="url(#filter1_i_18_17873)">
<path
d="M22.2187 5.75842C19.0156 7.75842 15.7031 9.7428 12.1501 10.0553V21.9396H12.3057C15.7998 22.2953 19.0624 24.2509 22.2187 26.2217L23.3513 26.0676V21.9395C23.7621 21.9355 24.0938 21.6013 24.0938 21.1896V10.8105C24.0938 10.3988 23.7621 10.0646 23.3513 10.0605V5.91248L22.2187 5.75842Z"
fill="url(#paint5_radial_18_17873)"
/>
</g>
<g filter="url(#filter2_i_18_17873)">
<rect
x={21.75}
y={3.07092}
width={6.125}
height={25.75}
rx={3.0625}
fill="url(#paint6_linear_18_17873)"
/>
<rect
x={21.75}
y={3.07092}
width={6.125}
height={25.75}
rx={3.0625}
fill="url(#paint7_radial_18_17873)"
/>
</g>
<defs>
<filter
id="filter0_i_18_17873"
x={2.14331}
y={8.06042}
width={10.2568}
height={13.879}
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={-2} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.698039 0 0 0 0 0.160784 0 0 0 0 0.352941 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17873"
/>
</filter>
<filter
id="filter1_i_18_17873"
x={12.1501}
y={2.75842}
width={11.9436}
height={23.4633}
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 dy={-4} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.717647 0 0 0 0 0.65098 0 0 0 0 0.827451 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17873"
/>
</filter>
<filter
id="filter2_i_18_17873"
x={21.75}
y={2.07092}
width={6.625}
height={26.75}
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.5} dy={-1} />
<feGaussianBlur stdDeviation={1} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.698039 0 0 0 0 0.164706 0 0 0 0 0.372549 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17873"
/>
</filter>
<radialGradient
id="paint0_radial_18_17873"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(29.6874 14.6647) rotate(143.556) scale(2.52507 2.43774)"
>
<stop offset={0.363271} stopColor="#6E6279" />
<stop offset={1} stopColor="#5A4C67" />
</radialGradient>
<linearGradient
id="paint1_linear_18_17873"
x1={27.7499}
y1={19.7272}
x2={28.2499}
y2={16.2272}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.30625} stopColor="#3A3141" />
<stop offset={1} stopColor="#3A3141" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint2_radial_18_17873"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(7.67187 28.2897) rotate(-90) scale(6.5 7.23214)"
>
<stop offset={0.428571} stopColor="#C0B2D4" />
<stop offset={1} stopColor="#B4A0BC" />
</radialGradient>
<linearGradient
id="paint3_linear_18_17873"
x1={7.67187}
y1={28.8209}
x2={7.67187}
y2={27.1647}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#B5A4D2" />
<stop offset={1} stopColor="#B5A4D2" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint4_linear_18_17873"
x1={2.56247}
y1={17.6646}
x2={12.875}
y2={17.6646}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F44065" />
<stop offset={1} stopColor="#D52E84" />
</linearGradient>
<radialGradient
id="paint5_radial_18_17873"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.375 7.41467) rotate(69.2417) scale(16.5761 17.5776)"
>
<stop offset={0.253085} stopColor="#CFCCD5" />
<stop offset={1} stopColor="#C1B6D2" />
</radialGradient>
<linearGradient
id="paint6_linear_18_17873"
x1={24.8125}
y1={3.07092}
x2={24.8125}
y2={28.8209}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F94E87" />
<stop offset={1} stopColor="#D21F6B" />
</linearGradient>
<radialGradient
id="paint7_radial_18_17873"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27 8.53967) rotate(90) scale(14.125 3.375)"
>
<stop offset={0.283186} stopColor="#FF4F8A" />
<stop offset={1} stopColor="#FF4F8A" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
module.exports = LoudspeakerIcon;