@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
277 lines (276 loc) • 8.5 kB
JSX
const React = require("react");
const DownArrowIcon = ({ 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_750)">
<rect
x={2.0658}
y={1.5625}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_750)"
/>
<rect
x={2.0658}
y={1.5625}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_750)"
/>
</g>
<g filter="url(#filter1_f_18590_750)">
<path
d="M28.2533 4.0625V26.9375"
stroke="url(#paint2_linear_18590_750)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_750)">
<path
d="M5.52966 3.375H27.3109"
stroke="url(#paint3_linear_18590_750)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_750)">
<path
d="M14.9997 6.44385C14.4474 6.44385 13.9997 6.89156 13.9997 7.44385V17.1938C13.9997 17.3319 13.8878 17.4438 13.7497 17.4438H10.6869C9.78674 17.4438 9.3449 18.5402 9.99357 19.1644L15.3063 24.2766C15.6935 24.6492 16.3059 24.6492 16.6931 24.2766L22.0059 19.1644C22.6545 18.5402 22.2127 17.4438 21.3125 17.4438L18.2497 17.4438C18.1117 17.4438 17.9997 17.3319 17.9997 17.1938V7.44385C17.9997 6.89156 17.552 6.44385 16.9997 6.44385H14.9997Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_750)">
<path
d="M14.9997 6.44385C14.4474 6.44385 13.9997 6.89156 13.9997 7.44385V17.1938C13.9997 17.3319 13.8878 17.4438 13.7497 17.4438H10.6869C9.78674 17.4438 9.3449 18.5402 9.99357 19.1644L15.3063 24.2766C15.6935 24.6492 16.3059 24.6492 16.6931 24.2766L22.0059 19.1644C22.6545 18.5402 22.2127 17.4438 21.3125 17.4438L18.2497 17.4438C18.1117 17.4438 17.9997 17.3319 17.9997 17.1938V7.44385C17.9997 6.89156 17.552 6.44385 16.9997 6.44385H14.9997Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_750"
x={2.0658}
y={0.5625}
width={28.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={1} dy={-1} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.188235 0 0 0 0 0.470588 0 0 0 0 0.843137 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_750"
/>
<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.27451 0 0 0 0 0.34902 0 0 0 0 0.8 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18590_750"
result="effect2_innerShadow_18590_750"
/>
</filter>
<filter
id="filter1_f_18590_750"
x={25.5033}
y={1.3125}
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_750"
/>
</filter>
<filter
id="filter2_f_18590_750"
x={2.77966}
y={0.625}
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_750"
/>
</filter>
<filter
id="filter3_f_18590_750"
x={8.68494}
y={5.44385}
width={14.6295}
height={20.1122}
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_18590_750"
/>
</filter>
<filter
id="filter4_ii_18590_750"
x={9.28494}
y={6.04385}
width={13.4295}
height={18.9122}
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.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.901961 0 0 0 0 0.854902 0 0 0 0 0.980392 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_750"
/>
<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.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.988235 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18590_750"
result="effect2_innerShadow_18590_750"
/>
</filter>
<linearGradient
id="paint0_linear_18590_750"
x1={16.0033}
y1={5.13701}
x2={16.0033}
y2={38.3897}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_750"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.722 3.65625) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#7BD7FF" />
<stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_750"
x1={28.7533}
y1={4.0625}
x2={28.7533}
y2={26.9375}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_750"
x1={28.4672}
y1={3.62502}
x2={2.93591}
y2={3.62502}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = DownArrowIcon;