@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
586 lines (585 loc) • 20.8 kB
JSX
const React = require("react");
const PagerIcon = ({ 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_18_19194)">
<path
d="M2.02344 11.5313C2.02344 10.1505 3.14273 9.03125 4.52344 9.03125H27.4766C28.8573 9.03125 29.9766 10.1505 29.9766 11.5312V27.4531C29.9766 28.8338 28.8573 29.9531 27.4766 29.9531H4.52344C3.14273 29.9531 2.02344 28.8338 2.02344 27.4531V11.5313Z"
fill="url(#paint0_linear_18_19194)"
/>
<path
d="M2.02344 11.5313C2.02344 10.1505 3.14273 9.03125 4.52344 9.03125H27.4766C28.8573 9.03125 29.9766 10.1505 29.9766 11.5312V27.4531C29.9766 28.8338 28.8573 29.9531 27.4766 29.9531H4.52344C3.14273 29.9531 2.02344 28.8338 2.02344 27.4531V11.5313Z"
fill="url(#paint1_radial_18_19194)"
/>
</g>
<g filter="url(#filter1_f_18_19194)">
<path
d="M4.27344 12.0562C4.27344 11.5592 4.67638 11.1562 5.17344 11.1562H26.9672C27.4642 11.1562 27.8672 11.5592 27.8672 12.0562V21.9438C27.8672 22.4408 27.4642 22.8438 26.9672 22.8438H5.17344C4.67638 22.8438 4.27344 22.4408 4.27344 21.9438V12.0562Z"
stroke="url(#paint2_linear_18_19194)"
strokeWidth={0.8}
/>
<path
d="M4.27344 12.0562C4.27344 11.5592 4.67638 11.1562 5.17344 11.1562H26.9672C27.4642 11.1562 27.8672 11.5592 27.8672 12.0562V21.9438C27.8672 22.4408 27.4642 22.8438 26.9672 22.8438H5.17344C4.67638 22.8438 4.27344 22.4408 4.27344 21.9438V12.0562Z"
stroke="url(#paint3_linear_18_19194)"
strokeWidth={0.8}
/>
<path
d="M4.27344 12.0562C4.27344 11.5592 4.67638 11.1562 5.17344 11.1562H26.9672C27.4642 11.1562 27.8672 11.5592 27.8672 12.0562V21.9438C27.8672 22.4408 27.4642 22.8438 26.9672 22.8438H5.17344C4.67638 22.8438 4.27344 22.4408 4.27344 21.9438V12.0562Z"
stroke="url(#paint4_linear_18_19194)"
strokeWidth={0.8}
/>
</g>
<g filter="url(#filter2_f_18_19194)">
<path
d="M4.27344 12.0562C4.27344 11.5592 4.67638 11.1562 5.17344 11.1562H26.9672C27.4642 11.1562 27.8672 11.5592 27.8672 12.0562V21.9438C27.8672 22.4408 27.4642 22.8438 26.9672 22.8438H5.17344C4.67638 22.8438 4.27344 22.4408 4.27344 21.9438V12.0562Z"
stroke="#2E5D4B"
strokeWidth={0.2}
/>
</g>
<g filter="url(#filter3_i_18_19194)">
<path
d="M4.27344 12.0562C4.27344 11.5592 4.67638 11.1562 5.17344 11.1562H26.9672C27.4642 11.1562 27.8672 11.5592 27.8672 12.0562V21.9438C27.8672 22.4408 27.4642 22.8438 26.9672 22.8438H5.17344C4.67638 22.8438 4.27344 22.4408 4.27344 21.9438V12.0562Z"
fill="url(#paint5_linear_18_19194)"
/>
<path
d="M4.27344 12.0562C4.27344 11.5592 4.67638 11.1562 5.17344 11.1562H26.9672C27.4642 11.1562 27.8672 11.5592 27.8672 12.0562V21.9438C27.8672 22.4408 27.4642 22.8438 26.9672 22.8438H5.17344C4.67638 22.8438 4.27344 22.4408 4.27344 21.9438V12.0562Z"
fill="url(#paint6_linear_18_19194)"
/>
</g>
<path
d="M8.58594 14.4844C8.58594 13.9407 9.02666 13.5 9.57031 13.5C10.114 13.5 10.5547 13.9407 10.5547 14.4844V15.5C10.5547 16.0437 10.114 16.4844 9.57031 16.4844C9.02666 16.4844 8.58594 16.0437 8.58594 15.5V14.4844Z"
fill="#3A887A"
/>
<path
d="M8.58594 18.5C8.58594 17.9563 9.02666 17.5156 9.57031 17.5156C10.114 17.5156 10.5547 17.9563 10.5547 18.5V19.5156C10.5547 20.0593 10.114 20.5 9.57031 20.5C9.02666 20.5 8.58594 20.0593 8.58594 19.5156V18.5Z"
fill="#3B897C"
/>
<path
d="M12.6172 14.4844C12.6172 13.9407 13.0579 13.5 13.6016 13.5C14.1452 13.5 14.5859 13.9407 14.5859 14.4844V15.5C14.5859 16.0437 14.1452 16.4844 13.6016 16.4844C13.0579 16.4844 12.6172 16.0437 12.6172 15.5V14.4844Z"
fill="#3B897B"
/>
<path
d="M12.6172 18.5C12.6172 17.9563 13.0579 17.5156 13.6016 17.5156C14.1452 17.5156 14.5859 17.9563 14.5859 18.5V19.5156C14.5859 20.0593 14.1452 20.5 13.6016 20.5C13.0579 20.5 12.6172 20.0593 12.6172 19.5156V18.5Z"
fill="#3C897C"
/>
<path
d="M17.5664 14.4844C17.5664 13.9407 18.0071 13.5 18.5508 13.5C19.0944 13.5 19.5352 13.9407 19.5352 14.4844V15.5C19.5352 16.0437 19.0944 16.4844 18.5508 16.4844C18.0071 16.4844 17.5664 16.0437 17.5664 15.5V14.4844Z"
fill="#3B897B"
/>
<path
d="M17.5664 18.5C17.5664 17.9563 18.0071 17.5156 18.5508 17.5156C19.0944 17.5156 19.5352 17.9563 19.5352 18.5V19.5156C19.5352 20.0593 19.0944 20.5 18.5508 20.5C18.0071 20.5 17.5664 20.0593 17.5664 19.5156V18.5Z"
fill="#3B897C"
/>
<path
d="M21.5977 14.4844C21.5977 13.9407 22.0384 13.5 22.582 13.5C23.1257 13.5 23.5664 13.9407 23.5664 14.4844V15.5C23.5664 16.0437 23.1257 16.4844 22.582 16.4844C22.0384 16.4844 21.5977 16.0437 21.5977 15.5V14.4844Z"
fill="#3B897B"
/>
<path
d="M21.5977 18.5C21.5977 17.9563 22.0384 17.5156 22.582 17.5156C23.1257 17.5156 23.5664 17.9563 23.5664 18.5V19.5156C23.5664 20.0593 23.1257 20.5 22.582 20.5C22.0384 20.5 21.5977 20.0593 21.5977 19.5156V18.5Z"
fill="#3C897C"
/>
<g filter="url(#filter4_dii_18_19194)">
<path
d="M4.03125 26.4688C4.03125 25.6576 4.68883 25 5.5 25H10.4609C11.2721 25 11.9297 25.6576 11.9297 26.4688C11.9297 27.2799 11.2721 27.9375 10.4609 27.9375H5.5C4.68883 27.9375 4.03125 27.2799 4.03125 26.4688Z"
fill="#E1D9EA"
/>
</g>
<g filter="url(#filter5_dii_18_19194)">
<path
d="M13.5312 26.4688C13.5312 25.6576 14.1888 25 15 25H19.9609C20.7721 25 21.4297 25.6576 21.4297 26.4688C21.4297 27.2799 20.7721 27.9375 19.9609 27.9375H15C14.1888 27.9375 13.5312 27.2799 13.5312 26.4688Z"
fill="#E1D9EA"
/>
</g>
<g filter="url(#filter6_dii_18_19194)">
<path
d="M23.0312 26.4688C23.0312 25.6576 23.6888 25 24.5 25H26.4766C27.2877 25 27.9453 25.6576 27.9453 26.4688C27.9453 27.2799 27.2877 27.9375 26.4766 27.9375H24.5C23.6888 27.9375 23.0312 27.2799 23.0312 26.4688Z"
fill="#F53D67"
/>
<path
d="M23.0312 26.4688C23.0312 25.6576 23.6888 25 24.5 25H26.4766C27.2877 25 27.9453 25.6576 27.9453 26.4688C27.9453 27.2799 27.2877 27.9375 26.4766 27.9375H24.5C23.6888 27.9375 23.0312 27.2799 23.0312 26.4688Z"
fill="url(#paint7_radial_18_19194)"
/>
</g>
<g filter="url(#filter7_f_18_19194)">
<path
d="M4.03125 10.1875H27.5857C28.4141 10.1875 29.0857 10.8591 29.0857 11.6875V27.4923C29.0936 27.8074 28.9257 28.4375 28.1909 28.4375"
stroke="url(#paint8_linear_18_19194)"
strokeWidth={0.75}
/>
</g>
<defs>
<filter
id="filter0_ii_18_19194"
x={2.02344}
y={8.03125}
width={28.9531}
height={22.4219}
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={0.5} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.372549 0 0 0 0 0.27451 0 0 0 0 0.458824 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_19194"
/>
<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={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.231373 0 0 0 0 0.192157 0 0 0 0 0.254902 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_19194"
result="effect2_innerShadow_18_19194"
/>
</filter>
<filter
id="filter1_f_18_19194"
x={3.57341}
y={10.4562}
width={24.9938}
height={13.0875}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.15}
result="effect1_foregroundBlur_18_19194"
/>
</filter>
<filter
id="filter2_f_18_19194"
x={3.97346}
y={10.8563}
width={24.1937}
height={12.2875}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.1}
result="effect1_foregroundBlur_18_19194"
/>
</filter>
<filter
id="filter3_i_18_19194"
x={3.77344}
y={11.1562}
width={24.0938}
height={12.1875}
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={0.5} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.262745 0 0 0 0 0.764706 0 0 0 0 0.486275 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_19194"
/>
</filter>
<filter
id="filter4_dii_18_19194"
x={3.53125}
y={24.4}
width={8.69844}
height={4.0375}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<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.1} dy={0.1} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.211765 0 0 0 0 0.156863 0 0 0 0 0.262745 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_18_19194"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_18_19194"
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={0.3} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.960784 0 0 0 0 0.929412 0 0 0 0 0.996078 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_18_19194"
/>
<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={-0.6} />
<feGaussianBlur stdDeviation={0.6} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.780392 0 0 0 0 0.670588 0 0 0 0 0.878431 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_19194"
result="effect3_innerShadow_18_19194"
/>
</filter>
<filter
id="filter5_dii_18_19194"
x={13.0312}
y={24.4}
width={8.69844}
height={4.0375}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<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.1} dy={0.1} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.211765 0 0 0 0 0.156863 0 0 0 0 0.262745 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_18_19194"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_18_19194"
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={0.3} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.960784 0 0 0 0 0.929412 0 0 0 0 0.996078 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_18_19194"
/>
<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={-0.6} />
<feGaussianBlur stdDeviation={0.6} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.780392 0 0 0 0 0.670588 0 0 0 0 0.878431 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_19194"
result="effect3_innerShadow_18_19194"
/>
</filter>
<filter
id="filter6_dii_18_19194"
x={22.5312}
y={24.4}
width={5.71406}
height={4.0375}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<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.1} dy={0.1} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.211765 0 0 0 0 0.156863 0 0 0 0 0.262745 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_18_19194"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_18_19194"
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={0.3} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.94902 0 0 0 0 0.192157 0 0 0 0 0.478431 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_18_19194"
/>
<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={-0.6} />
<feGaussianBlur stdDeviation={0.6} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.862745 0 0 0 0 0.101961 0 0 0 0 0.286275 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_19194"
result="effect3_innerShadow_18_19194"
/>
</filter>
<filter
id="filter7_f_18_19194"
x={3.28125}
y={9.0625}
width={26.9297}
height={20.5}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.375}
result="effect1_foregroundBlur_18_19194"
/>
</filter>
<linearGradient
id="paint0_linear_18_19194"
x1={16}
y1={9.03125}
x2={16}
y2={29.9531}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5F4675" />
<stop offset={1} stopColor="#50425D" />
</linearGradient>
<radialGradient
id="paint1_radial_18_19194"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(29.6027 9.82704) rotate(138.468) scale(1.69894 2.96575)"
>
<stop offset={0.303294} stopColor="#847297" />
<stop offset={1} stopColor="#847297" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18_19194"
x1={16.0703}
y1={11.1562}
x2={16.0703}
y2={22.8438}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#543576" />
<stop offset={1} stopColor="#42384F" />
</linearGradient>
<linearGradient
id="paint3_linear_18_19194"
x1={3.92969}
y1={19.3125}
x2={18.3984}
y2={15.9687}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.0654642} stopColor="#6E6479" />
<stop offset={0.341784} stopColor="#6E6479" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint4_linear_18_19194"
x1={14.9609}
y1={23.4063}
x2={14.9609}
y2={22.9531}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.194446} stopColor="#6E6479" />
<stop offset={1} stopColor="#6E6479" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint5_linear_18_19194"
x1={12.2422}
y1={22.1875}
x2={25.4965}
y2={7.90117}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4DE399" />
<stop offset={1} stopColor="#47C282" />
</linearGradient>
<linearGradient
id="paint6_linear_18_19194"
x1={18.2422}
y1={24.0313}
x2={18.2422}
y2={20.6875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4BE18C" />
<stop offset={1} stopColor="#4DE299" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint7_radial_18_19194"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.6484 25.7188) rotate(144.782) scale(1.30054 2.29322)"
>
<stop offset={0.213626} stopColor="#FF6588" />
<stop offset={1} stopColor="#FF6588" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint8_linear_18_19194"
x1={29.0857}
y1={9.59676}
x2={16.6516}
y2={28.7108}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#837196" />
<stop offset={0.873349} stopColor="#837196" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
);
module.exports = PagerIcon;