@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
277 lines (276 loc) • 9.04 kB
JSX
const React = require("react");
const LastTrackButtonIcon = ({ 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_1447)">
<rect
x={2.50034}
y={1.9375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_1447)"
/>
<rect
x={2.50034}
y={1.9375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_1447)"
/>
</g>
<g filter="url(#filter1_f_18590_1447)">
<path
d="M28.6878 4.4375V27.3125"
stroke="url(#paint2_linear_18590_1447)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_1447)">
<path
d="M5.9642 3.75H27.7455"
stroke="url(#paint3_linear_18590_1447)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_1447)">
<path
d="M9.60363 14.7498C9.5401 14.811 9.4343 14.7659 9.4343 14.6778V9.37502C9.4343 9.09888 9.21044 8.87502 8.9343 8.87502H7.9343C7.65815 8.87502 7.4343 9.09888 7.4343 9.37502V22.375C7.4343 22.6512 7.65815 22.875 7.9343 22.875H8.9343C9.21044 22.875 9.4343 22.6512 9.4343 22.375V17.0723C9.4343 16.9841 9.5401 16.9391 9.60363 17.0002L15.7409 22.9058C16.3762 23.5172 17.4343 23.0669 17.4343 22.1853V17.0723C17.4343 16.9841 17.5401 16.9391 17.6036 17.0002L23.7409 22.9058C24.3762 23.5172 25.4343 23.0669 25.4343 22.1853V9.5648C25.4343 8.68314 24.3762 8.2329 23.7409 8.84422L17.6036 14.7498C17.5401 14.811 17.4343 14.7659 17.4343 14.6778V9.5648C17.4343 8.68314 16.3762 8.2329 15.7409 8.84422L9.60363 14.7498Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_1447)">
<path
d="M9.60363 14.7498C9.5401 14.811 9.4343 14.7659 9.4343 14.6778V9.37502C9.4343 9.09888 9.21044 8.87502 8.9343 8.87502H7.9343C7.65815 8.87502 7.4343 9.09888 7.4343 9.37502V22.375C7.4343 22.6512 7.65815 22.875 7.9343 22.875H8.9343C9.21044 22.875 9.4343 22.6512 9.4343 22.375V17.0723C9.4343 16.9841 9.5401 16.9391 9.60363 17.0002L15.7409 22.9058C16.3762 23.5172 17.4343 23.0669 17.4343 22.1853V17.0723C17.4343 16.9841 17.5401 16.9391 17.6036 17.0002L23.7409 22.9058C24.3762 23.5172 25.4343 23.0669 25.4343 22.1853V9.5648C25.4343 8.68314 24.3762 8.2329 23.7409 8.84422L17.6036 14.7498C17.5401 14.811 17.4343 14.7659 17.4343 14.6778V9.5648C17.4343 8.68314 16.3762 8.2329 15.7409 8.84422L9.60363 14.7498Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_1447"
x={2.50034}
y={0.9375}
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_1447"
/>
<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_1447"
result="effect2_innerShadow_18590_1447"
/>
</filter>
<filter
id="filter1_f_18590_1447"
x={25.9378}
y={1.6875}
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_1447"
/>
</filter>
<filter
id="filter2_f_18590_1447"
x={3.2142}
y={1}
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_1447"
/>
</filter>
<filter
id="filter3_f_18590_1447"
x={6.4343}
y={7.56281}
width={20}
height={16.6245}
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_1447"
/>
</filter>
<filter
id="filter4_ii_18590_1447"
x={6.4343}
y={8.16281}
width={19.4}
height={16.0245}
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} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.866667 0 0 0 0 0.819608 0 0 0 0 0.941176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_1447"
/>
<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.5} />
<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_1447"
result="effect2_innerShadow_18590_1447"
/>
</filter>
<linearGradient
id="paint0_linear_18590_1447"
x1={16.4378}
y1={5.51201}
x2={16.4378}
y2={38.7647}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_1447"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(28.1566 4.03125) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#7BD7FF" />
<stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_1447"
x1={29.1878}
y1={4.4375}
x2={29.1878}
y2={27.3125}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_1447"
x1={28.9017}
y1={4.00002}
x2={3.37045}
y2={4.00002}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = LastTrackButtonIcon;