@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
277 lines (276 loc) • 8.47 kB
JSX
const React = require("react");
const RightArrowIcon = ({ 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_722)">
<rect
x={2.0658}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_722)"
/>
<rect
x={2.0658}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_722)"
/>
</g>
<g filter="url(#filter1_f_18590_722)">
<path
d="M28.2533 4.3125V27.1875"
stroke="url(#paint2_linear_18590_722)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_722)">
<path
d="M5.52966 3.625H27.3109"
stroke="url(#paint3_linear_18590_722)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_722)">
<path
d="M25.1969 16.4433C25.5695 16.0562 25.5695 15.4438 25.1969 15.0566L20.0847 9.74382C19.4605 9.09515 18.3641 9.53698 18.3641 10.4372L18.3641 13.5C18.3641 13.638 18.2522 13.75 18.1141 13.75L8.36414 13.75C7.81185 13.75 7.36414 14.1977 7.36414 14.75V16.75C7.36414 17.3023 7.81185 17.75 8.36414 17.75L18.1141 17.75C18.2522 17.75 18.3641 17.8619 18.3641 18V21.0627C18.3641 21.963 19.4605 22.4048 20.0847 21.7561L25.1969 16.4433Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_722)">
<path
d="M25.1969 16.4433C25.5695 16.0562 25.5695 15.4438 25.1969 15.0566L20.0847 9.74382C19.4605 9.09515 18.3641 9.53698 18.3641 10.4372L18.3641 13.5C18.3641 13.638 18.2522 13.75 18.1141 13.75L8.36414 13.75C7.81185 13.75 7.36414 14.1977 7.36414 14.75V16.75C7.36414 17.3023 7.81185 17.75 8.36414 17.75L18.1141 17.75C18.2522 17.75 18.3641 17.8619 18.3641 18V21.0627C18.3641 21.963 19.4605 22.4048 20.0847 21.7561L25.1969 16.4433Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_722"
x={2.0658}
y={0.8125}
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_722"
/>
<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_722"
result="effect2_innerShadow_18590_722"
/>
</filter>
<filter
id="filter1_f_18590_722"
x={25.5033}
y={1.5625}
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_722"
/>
</filter>
<filter
id="filter2_f_18590_722"
x={2.77966}
y={0.875}
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_722"
/>
</filter>
<filter
id="filter3_f_18590_722"
x={6.36414}
y={8.43518}
width={20.1122}
height={14.6295}
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_722"
/>
</filter>
<filter
id="filter4_ii_18590_722"
x={6.76414}
y={9.03518}
width={19.1122}
height={13.6295}
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.6} dy={0.6} />
<feGaussianBlur stdDeviation={0.5} />
<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_722"
/>
<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_722"
result="effect2_innerShadow_18590_722"
/>
</filter>
<linearGradient
id="paint0_linear_18590_722"
x1={16.0033}
y1={5.38701}
x2={16.0033}
y2={38.6397}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_722"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.722 3.90625) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#7BD7FF" />
<stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_722"
x1={28.7533}
y1={4.3125}
x2={28.7533}
y2={27.1875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_722"
x1={28.4672}
y1={3.87502}
x2={2.93591}
y2={3.87502}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = RightArrowIcon;