@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
204 lines (203 loc) • 7.14 kB
JSX
const React = require("react");
const MagnetIcon = ({ 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_iii_18_24792)">
<path
d="M3.01343 15.0367C3.01343 7.86441 8.82776 2.05014 16 2.05014C23.1722 2.05014 28.9866 7.86441 28.9866 15.0367V28.9486C28.9866 29.5009 28.5389 29.9486 27.9866 29.9486H22.0084C21.4561 29.9486 21.0084 29.5009 21.0084 28.9486V14.9737C21.0084 12.2077 18.7661 9.96539 16 9.96539C13.234 9.96539 10.9917 12.2077 10.9917 14.9737V28.9486C10.9917 29.5009 10.544 29.9486 9.9917 29.9486H4.01343C3.46114 29.9486 3.01343 29.5009 3.01343 28.9486V15.0367Z"
fill="url(#paint0_linear_18_24792)"
/>
</g>
<path
d="M28.9866 23.0023H21.0084V28.9486C21.0084 29.5009 21.4562 29.9486 22.0084 29.9486H27.9866C28.5388 29.9486 28.9866 29.5009 28.9866 28.9486V23.0023Z"
fill="#C8BED1"
/>
<path
d="M28.9866 23.0023H21.0084V28.9486C21.0084 29.5009 21.4562 29.9486 22.0084 29.9486H27.9866C28.5388 29.9486 28.9866 29.5009 28.9866 28.9486V23.0023Z"
fill="url(#paint1_linear_18_24792)"
/>
<path
d="M28.9866 23.0023H21.0084V28.9486C21.0084 29.5009 21.4562 29.9486 22.0084 29.9486H27.9866C28.5388 29.9486 28.9866 29.5009 28.9866 28.9486V23.0023Z"
fill="url(#paint2_linear_18_24792)"
/>
<path
d="M28.9866 23.0023H21.0084V28.9486C21.0084 29.5009 21.4562 29.9486 22.0084 29.9486H27.9866C28.5388 29.9486 28.9866 29.5009 28.9866 28.9486V23.0023Z"
fill="url(#paint3_linear_18_24792)"
/>
<path
d="M10.9917 23.0023V28.9486C10.9917 29.5009 10.5439 29.9486 9.9917 29.9486H4.01343C3.46118 29.9486 3.01343 29.5009 3.01343 28.9486V23.0023H10.9917Z"
fill="#C8BED1"
/>
<path
d="M10.9917 23.0023V28.9486C10.9917 29.5009 10.5439 29.9486 9.9917 29.9486H4.01343C3.46118 29.9486 3.01343 29.5009 3.01343 28.9486V23.0023H10.9917Z"
fill="url(#paint4_linear_18_24792)"
/>
<path
d="M10.9917 23.0023V28.9486C10.9917 29.5009 10.5439 29.9486 9.9917 29.9486H4.01343C3.46118 29.9486 3.01343 29.5009 3.01343 28.9486V23.0023H10.9917Z"
fill="url(#paint5_linear_18_24792)"
/>
<path
d="M10.9917 23.0023V28.9486C10.9917 29.5009 10.5439 29.9486 9.9917 29.9486H4.01343C3.46118 29.9486 3.01343 29.5009 3.01343 28.9486V23.0023H10.9917Z"
fill="url(#paint6_linear_18_24792)"
/>
<defs>
<filter
id="filter0_iii_18_24792"
x={2.26343}
y={1.55014}
width={27.4731}
height={28.8985}
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={-0.5} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.854902 0 0 0 0 0.188235 0 0 0 0 0.243137 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_24792"
/>
<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={0.5} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.403922 0 0 0 0 0.564706 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_24792"
result="effect2_innerShadow_18_24792"
/>
<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={0.5} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.862745 0 0 0 0 0.192157 0 0 0 0 0.411765 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_24792"
result="effect3_innerShadow_18_24792"
/>
</filter>
<linearGradient
id="paint0_linear_18_24792"
x1={16}
y1={2.05014}
x2={16}
y2={29.9486}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F03B7D" />
<stop offset={1} stopColor="#F33E50" />
</linearGradient>
<linearGradient
id="paint1_linear_18_24792"
x1={21.0084}
y1={27.9855}
x2={23.1484}
y2={28.0313}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.145322} stopColor="#AFA1A8" />
<stop offset={1} stopColor="#C9BFD2" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint2_linear_18_24792"
x1={28.9866}
y1={27.7087}
x2={27.7029}
y2={27.7087}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.15696} stopColor="#DAD0E2" />
<stop offset={1} stopColor="#DAD0E2" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint3_linear_18_24792"
x1={26.6459}
y1={29.9486}
x2={26.6459}
y2={28.2372}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#B183D6" />
<stop offset={1} stopColor="#BBA6CF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint4_linear_18_24792"
x1={3.01343}
y1={27.9855}
x2={5.15348}
y2={28.0313}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.145322} stopColor="#AFA1A8" />
<stop offset={1} stopColor="#C9BFD2" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint5_linear_18_24792"
x1={10.9917}
y1={27.7087}
x2={9.70799}
y2={27.7087}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.15696} stopColor="#DAD0E2" />
<stop offset={1} stopColor="#DAD0E2" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint6_linear_18_24792"
x1={8.65095}
y1={29.9486}
x2={8.65095}
y2={28.2372}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#B183D6" />
<stop offset={1} stopColor="#BBA6CF" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
);
module.exports = MagnetIcon;