@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
566 lines (565 loc) • 18.7 kB
JSX
const React = require("react");
const BackpackIcon = ({ 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}
<rect
x={11.7344}
y={2.875}
width={8.1875}
height={12.375}
rx={4.09375}
stroke="url(#paint0_radial_18_17138)"
strokeWidth={1.65}
/>
<g filter="url(#filter0_f_18_17138)">
<rect
x={12.0625}
y={2.875}
width={8.1875}
height={12.375}
rx={4.09375}
stroke="url(#paint1_linear_18_17138)"
strokeWidth={0.65}
/>
</g>
<path
d="M4.75 16.0938C4.75 10.0186 9.67487 5.09375 15.75 5.09375C21.8251 5.09375 26.75 10.0186 26.75 16.0938V25.9453C26.75 28.1545 24.9591 29.9453 22.75 29.9453H8.75C6.54086 29.9453 4.75 28.1545 4.75 25.9453V16.0938Z"
fill="#C4C4C4"
fillOpacity={0.5}
/>
<g filter="url(#filter1_i_18_17138)">
<path
d="M4.75 16.0938C4.75 10.0186 9.67487 5.09375 15.75 5.09375C21.8251 5.09375 26.75 10.0186 26.75 16.0938V25.9453C26.75 28.1545 24.9591 29.9453 22.75 29.9453H8.75C6.54086 29.9453 4.75 28.1545 4.75 25.9453V16.0938Z"
fill="url(#paint2_radial_18_17138)"
/>
<path
d="M4.75 16.0938C4.75 10.0186 9.67487 5.09375 15.75 5.09375C21.8251 5.09375 26.75 10.0186 26.75 16.0938V25.9453C26.75 28.1545 24.9591 29.9453 22.75 29.9453H8.75C6.54086 29.9453 4.75 28.1545 4.75 25.9453V16.0938Z"
fill="url(#paint3_linear_18_17138)"
/>
<path
d="M4.75 16.0938C4.75 10.0186 9.67487 5.09375 15.75 5.09375C21.8251 5.09375 26.75 10.0186 26.75 16.0938V25.9453C26.75 28.1545 24.9591 29.9453 22.75 29.9453H8.75C6.54086 29.9453 4.75 28.1545 4.75 25.9453V16.0938Z"
fill="url(#paint4_linear_18_17138)"
/>
</g>
<g filter="url(#filter2_f_18_17138)">
<path
d="M7.08203 12.0877C8.66121 9.01079 11.8599 6.90625 15.5489 6.90625C19.2378 6.90625 22.4365 9.01079 24.0157 12.0877"
stroke="url(#paint5_linear_18_17138)"
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_i_18_17138)">
<path
d="M7.08203 12.0877C8.69874 8.94584 11.9735 6.79688 15.7501 6.79688C19.5267 6.79688 22.8014 8.94584 24.4181 12.0877"
stroke="url(#paint6_linear_18_17138)"
strokeLinecap="round"
/>
<path
d="M7.08203 12.0877C8.69874 8.94584 11.9735 6.79688 15.7501 6.79688C19.5267 6.79688 22.8014 8.94584 24.4181 12.0877"
stroke="url(#paint7_linear_18_17138)"
strokeLinecap="round"
/>
</g>
<g filter="url(#filter4_f_18_17138)">
<path
d="M7.33203 12.0877C8.94874 8.94584 12.2235 6.79688 16.0001 6.79688C19.7767 6.79688 23.0514 8.94584 24.6681 12.0877"
stroke="url(#paint8_linear_18_17138)"
strokeWidth={0.25}
strokeLinecap="round"
/>
<path
d="M7.33203 12.0877C8.94874 8.94584 12.2235 6.79688 16.0001 6.79688C19.7767 6.79688 23.0514 8.94584 24.6681 12.0877"
stroke="url(#paint9_linear_18_17138)"
strokeWidth={0.25}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter5_di_18_17138)">
<rect
x={12.7969}
y={9.10938}
width={5.95312}
height={2.9783}
rx={1.25}
fill="#FFC442"
/>
<rect
x={12.7969}
y={9.10938}
width={5.95312}
height={2.9783}
rx={1.25}
fill="url(#paint10_radial_18_17138)"
/>
</g>
<g filter="url(#filter6_i_18_17138)">
<path
d="M21.5729 29.9453C22.6505 29.9453 23.6857 29.3789 24.0215 28.355C24.3016 27.5009 24.4531 26.5884 24.4531 25.6406C24.4531 20.834 20.5566 16.9375 15.75 16.9375C10.9434 16.9375 7.04688 20.834 7.04688 25.6406C7.04688 26.5884 7.19838 27.5009 7.4785 28.355C7.8143 29.3789 8.84953 29.9453 9.9271 29.9453H21.5729Z"
fill="url(#paint11_radial_18_17138)"
/>
<path
d="M21.5729 29.9453C22.6505 29.9453 23.6857 29.3789 24.0215 28.355C24.3016 27.5009 24.4531 26.5884 24.4531 25.6406C24.4531 20.834 20.5566 16.9375 15.75 16.9375C10.9434 16.9375 7.04688 20.834 7.04688 25.6406C7.04688 26.5884 7.19838 27.5009 7.4785 28.355C7.8143 29.3789 8.84953 29.9453 9.9271 29.9453H21.5729Z"
fill="url(#paint12_linear_18_17138)"
/>
<path
d="M21.5729 29.9453C22.6505 29.9453 23.6857 29.3789 24.0215 28.355C24.3016 27.5009 24.4531 26.5884 24.4531 25.6406C24.4531 20.834 20.5566 16.9375 15.75 16.9375C10.9434 16.9375 7.04688 20.834 7.04688 25.6406C7.04688 26.5884 7.19838 27.5009 7.4785 28.355C7.8143 29.3789 8.84953 29.9453 9.9271 29.9453H21.5729Z"
fill="url(#paint13_radial_18_17138)"
/>
</g>
<path
d="M7.05692 25.2188C7.27698 20.6081 11.0848 16.9375 15.75 16.9375C20.4152 16.9375 24.223 20.6081 24.4431 25.2188C24.4498 25.0789 24.4531 24.9383 24.4531 24.7969C24.4531 19.9903 20.5566 16.0938 15.75 16.0938C10.9434 16.0938 7.04688 19.9903 7.04688 24.7969C7.04688 24.9383 7.05023 25.0789 7.05692 25.2188Z"
fill="url(#paint14_radial_18_17138)"
/>
<g filter="url(#filter7_i_18_17138)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.5231 22.7684C7.10227 22.7684 6.75791 23.0914 6.7312 23.4996L6.45487 25.3901C6.39759 25.7819 6.70587 26.1328 7.10745 26.1328H7.92658C8.32688 26.1328 8.6348 25.7841 8.57962 25.3932L8.31632 23.528C8.27988 23.1016 7.95362 22.7684 7.5231 22.7684ZM7.50791 24.0039C7.75815 24.0039 7.96103 23.801 7.96103 23.5508C7.96103 23.3005 7.75815 23.0977 7.50791 23.0977C7.25766 23.0977 7.05478 23.3005 7.05478 23.5508C7.05478 23.801 7.25766 24.0039 7.50791 24.0039Z"
fill="url(#paint15_radial_18_17138)"
/>
</g>
<defs>
<filter
id="filter0_f_18_17138"
x={11.3375}
y={2.15}
width={9.6374}
height={13.825}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.2}
result="effect1_foregroundBlur_18_17138"
/>
</filter>
<filter
id="filter1_i_18_17138"
x={4.75}
y={5.09375}
width={22.25}
height={25.1016}
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={0.25} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.784314 0 0 0 0 0.329412 0 0 0 0 0.498039 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17138"
/>
</filter>
<filter
id="filter2_f_18_17138"
x={6.08203}
y={5.90625}
width={18.9338}
height={7.18153}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.25}
result="effect1_foregroundBlur_18_17138"
/>
</filter>
<filter
id="filter3_i_18_17138"
x={6.58203}
y={6.19687}
width={18.3362}
height={6.39091}
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.1} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.909804 0 0 0 0 0.380392 0 0 0 0 0.141176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17138"
/>
</filter>
<filter
id="filter4_f_18_17138"
x={6.80703}
y={6.27187}
width={18.3862}
height={6.34082}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.2}
result="effect1_foregroundBlur_18_17138"
/>
</filter>
<filter
id="filter5_di_18_17138"
x={11.6969}
y={8.20938}
width={7.95312}
height={4.9783}
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.5} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.890196 0 0 0 0 0.176471 0 0 0 0 0.447059 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_18_17138"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_18_17138"
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={-0.25} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.945098 0 0 0 0 0.521569 0 0 0 0 0.188235 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_18_17138"
/>
</filter>
<filter
id="filter6_i_18_17138"
x={7.04688}
y={16.9375}
width={17.6063}
height={13.0078}
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.2} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.894969 0 0 0 0 0.370192 0 0 0 0 0.466334 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17138"
/>
</filter>
<filter
id="filter7_i_18_17138"
x={6.348}
y={22.7684}
width={2.23794}
height={3.36438}
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.1} />
<feGaussianBlur stdDeviation={0.05} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.694118 0 0 0 0 0.270588 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_17138"
/>
</filter>
<radialGradient
id="paint0_radial_18_17138"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(19.3125 2.875) rotate(141.554) scale(5.22698 8.81171)"
>
<stop stopColor="#CE4767" />
<stop offset={1} stopColor="#AF3349" />
</radialGradient>
<linearGradient
id="paint1_linear_18_17138"
x1={19.9531}
y1={5.28125}
x2={14.6094}
y2={3.40625}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D85773" />
<stop offset={1} stopColor="#BD385C" />
</linearGradient>
<radialGradient
id="paint2_radial_18_17138"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(19.6875 10.5) rotate(112.419) scale(15.077 14.1797)"
>
<stop offset={0.216088} stopColor="#FF5AAC" />
<stop offset={1} stopColor="#E02E7A" />
</radialGradient>
<linearGradient
id="paint3_linear_18_17138"
x1={26.0625}
y1={30.5625}
x2={15.4375}
y2={23.1875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F63659" />
<stop offset={1} stopColor="#F63659" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint4_linear_18_17138"
x1={5.375}
y1={29.5625}
x2={11.375}
y2={21.1875}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.0351833} stopColor="#D64456" />
<stop offset={1} stopColor="#D64456" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint5_linear_18_17138"
x1={24.0157}
y1={10.288}
x2={12.008}
y2={10.288}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF2274" />
<stop offset={1} stopColor="#DA2D56" />
</linearGradient>
<linearGradient
id="paint6_linear_18_17138"
x1={7.08203}
y1={11.4687}
x2={15.3126}
y2={11.4687}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E98832" />
<stop offset={1} stopColor="#FFC349" />
</linearGradient>
<linearGradient
id="paint7_linear_18_17138"
x1={24.4182}
y1={11.8125}
x2={18.8751}
y2={6.79687}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFC74B" />
<stop offset={1} stopColor="#FFC24C" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint8_linear_18_17138"
x1={25.3438}
y1={11.625}
x2={16.9376}
y2={5.6875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFEF6F" />
<stop offset={1} stopColor="#FFEF6F" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint9_linear_18_17138"
x1={7.50009}
y1={11.9063}
x2={11.1876}
y2={8.21875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F78843" />
<stop offset={1} stopColor="#F78843" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint10_radial_18_17138"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.8125 10.5985) scale(5.09375 4.62022)"
>
<stop offset={0.791411} stopColor="#FFEB6D" stopOpacity={0} />
<stop offset={1} stopColor="#FFEB6D" />
</radialGradient>
<radialGradient
id="paint11_radial_18_17138"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.875 20.5625) rotate(131.779) scale(10.225 10.5218)"
>
<stop stopColor="#FF56A6" />
<stop offset={1} stopColor="#F02779" />
</radialGradient>
<linearGradient
id="paint12_linear_18_17138"
x1={16.6875}
y1={30.4375}
x2={16.6875}
y2={26.5625}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E41863" />
<stop offset={1} stopColor="#E41863" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint13_radial_18_17138"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.75 24.4375) rotate(15.4456) scale(15.254 15.6227)"
>
<stop offset={0.903867} stopColor="#F55178" stopOpacity={0} />
<stop offset={1} stopColor="#F55178" />
</radialGradient>
<radialGradient
id="paint14_radial_18_17138"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.5938 17.5) rotate(127.129) scale(9.68135 18.4675)"
>
<stop offset={0.522193} stopColor="#CB184D" />
<stop offset={1} stopColor="#AA2743" />
</radialGradient>
<radialGradient
id="paint15_radial_18_17138"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(7.51701 25.1562) rotate(-90) scale(1.64062 1.0426)"
>
<stop stopColor="#FFB54E" />
<stop offset={1} stopColor="#FFAF4D" />
</radialGradient>
</defs>
</svg>
);
module.exports = BackpackIcon;