@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
285 lines (284 loc) • 9.18 kB
JSX
const React = require("react");
const IdButtonIcon = ({ 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_2382)">
<rect
x={2.30127}
y={1.9375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_2382)"
/>
<rect
x={2.30127}
y={1.9375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_2382)"
/>
</g>
<g filter="url(#filter1_f_18590_2382)">
<path
d="M28.4888 4.4375V27.3125"
stroke="url(#paint2_linear_18590_2382)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_2382)">
<path
d="M5.76514 3.75H27.5464"
stroke="url(#paint3_linear_18590_2382)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_2382)">
<path
d="M14.0491 7.70551C13.2897 7.70551 12.6741 8.32111 12.6741 9.08051V22.6695C12.6741 23.4289 13.2897 24.0445 14.0491 24.0445H17.3535C21.9048 24.0445 25.6319 20.4074 25.6319 15.875C25.6319 11.3426 21.9048 7.70551 17.3535 7.70551H14.0491ZM15.5241 21.2945C15.4688 21.2945 15.4241 21.2497 15.4241 21.1945V10.5555C15.4241 10.5003 15.4688 10.4555 15.5241 10.4555H17.3535C20.4274 10.4555 22.8819 12.9024 22.8819 15.875C22.8819 18.8476 20.4274 21.2945 17.3535 21.2945H15.5241Z"
fill="#6A4EBE"
/>
<path
d="M10.4297 9.18064C10.4289 8.42125 9.81259 7.80631 9.0532 7.80713C8.29381 7.80795 7.67887 8.42423 7.67969 9.18362L7.6942 22.5694C7.69502 23.3288 8.3113 23.9437 9.07069 23.9429C9.83008 23.942 10.445 23.3258 10.4442 22.5664L10.4297 9.18064Z"
fill="#6A4EBE"
/>
</g>
<g filter="url(#filter4_ii_18590_2382)">
<path
d="M14.0491 7.70551C13.2897 7.70551 12.6741 8.32111 12.6741 9.08051V22.6695C12.6741 23.4289 13.2897 24.0445 14.0491 24.0445H17.3535C21.9048 24.0445 25.6319 20.4074 25.6319 15.875C25.6319 11.3426 21.9048 7.70551 17.3535 7.70551H14.0491ZM15.5241 21.2945C15.4688 21.2945 15.4241 21.2497 15.4241 21.1945V10.5555C15.4241 10.5003 15.4688 10.4555 15.5241 10.4555H17.3535C20.4274 10.4555 22.8819 12.9024 22.8819 15.875C22.8819 18.8476 20.4274 21.2945 17.3535 21.2945H15.5241Z"
fill="#FCF2FF"
/>
<path
d="M10.4297 9.18064C10.4289 8.42125 9.81259 7.80631 9.0532 7.80713C8.29381 7.80795 7.67887 8.42423 7.67969 9.18362L7.6942 22.5694C7.69502 23.3288 8.3113 23.9437 9.07069 23.9429C9.83008 23.942 10.445 23.3258 10.4442 22.5664L10.4297 9.18064Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_2382"
x={2.30127}
y={0.9375}
width={29.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={2} dy={-1} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.298039 0 0 0 0 0.235294 0 0 0 0 0.6 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_2382"
/>
<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.352941 0 0 0 0 0.211765 0 0 0 0 0.709804 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18590_2382"
result="effect2_innerShadow_18590_2382"
/>
</filter>
<filter
id="filter1_f_18590_2382"
x={25.7388}
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_2382"
/>
</filter>
<filter
id="filter2_f_18590_2382"
x={3.01514}
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_2382"
/>
</filter>
<filter
id="filter3_f_18590_2382"
x={6.67969}
y={6.70551}
width={19.9521}
height={18.339}
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_2382"
/>
</filter>
<filter
id="filter4_ii_18590_2382"
x={7.27969}
y={7.30551}
width={18.7521}
height={17.139}
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.4} dy={0.4} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.913725 0 0 0 0 0.886275 0 0 0 0 0.968627 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_2382"
/>
<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_2382"
result="effect2_innerShadow_18590_2382"
/>
</filter>
<linearGradient
id="paint0_linear_18590_2382"
x1={16.2388}
y1={5.51201}
x2={16.2388}
y2={38.7647}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#9865EE" />
<stop offset={1} stopColor="#7764C6" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_2382"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.9575 4.03125) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#BB8DFF" />
<stop offset={1} stopColor="#BB8DFF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_2382"
x1={28.9888}
y1={4.4375}
x2={28.9888}
y2={27.3125}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#AE7EFF" />
<stop offset={1} stopColor="#8777D6" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_2382"
x1={28.7026}
y1={4.00002}
x2={3.17139}
y2={4.00002}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#A672FF" />
<stop offset={1} stopColor="#9A6CEB" />
</linearGradient>
</defs>
</svg>
);
module.exports = IdButtonIcon;