@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
285 lines (284 loc) • 10.6 kB
JSX
const React = require("react");
const NgButtonIcon = ({ 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_2422)">
<rect
x={1.93433}
y={1.6875}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_2422)"
/>
<rect
x={1.93433}
y={1.6875}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_2422)"
/>
</g>
<g filter="url(#filter1_f_18590_2422)">
<path
d="M28.1218 4.1875V27.0625"
stroke="url(#paint2_linear_18590_2422)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_2422)">
<path
d="M5.39819 3.5H27.1794"
stroke="url(#paint3_linear_18590_2422)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_2422)">
<path
d="M8.44266 9.39032C8.13682 8.84456 7.50112 8.57406 6.8958 8.7321C6.29049 8.89015 5.86816 9.4369 5.86816 10.0625V21.1875C5.86816 21.9469 6.48377 22.5625 7.24316 22.5625C8.00256 22.5625 8.61816 21.9469 8.61816 21.1875V15.8075C8.61816 15.6788 8.78927 15.6341 8.85221 15.7464L12.278 21.8597C12.5839 22.4055 13.2196 22.676 13.8249 22.5179C14.4302 22.3599 14.8525 21.8131 14.8525 21.1875V10.0625C14.8525 9.30311 14.2369 8.6875 13.4775 8.6875C12.7181 8.6875 12.1025 9.30311 12.1025 10.0625V15.4425C12.1025 15.5712 11.9314 15.6159 11.8685 15.5036L8.44266 9.39032Z"
fill="#579FFF"
/>
<path
d="M21.2629 8.6875C18.5251 8.6875 16.3057 10.9069 16.3057 13.6447V17.5894C16.3057 20.336 18.5322 22.5625 21.2787 22.5625H21.8256C23.2923 22.5625 24.6439 21.7681 25.3574 20.4868C25.6924 19.8854 25.8682 19.2084 25.8682 18.52V16.2656C25.8682 15.5062 25.2526 14.8906 24.4932 14.8906H22.1864C21.4271 14.8906 20.8114 15.5062 20.8114 16.2656C20.8114 17.025 21.4271 17.6406 22.1864 17.6406H22.9932C23.0622 17.6406 23.1182 17.6966 23.1182 17.7656V18.52C23.1182 18.7401 23.062 18.9565 22.9549 19.1488C22.7267 19.5585 22.2946 19.8125 21.8256 19.8125H21.2787C20.051 19.8125 19.0557 18.8172 19.0557 17.5894V13.6447C19.0557 12.4257 20.0439 11.4375 21.2629 11.4375C22.0719 11.4375 22.8161 11.8801 23.2023 12.591L23.285 12.7431C23.6475 13.4104 24.4823 13.6575 25.1496 13.2949C25.8169 12.9324 26.0639 12.0976 25.7014 11.4303L25.6187 11.2782C24.7513 9.68157 23.0799 8.6875 21.2629 8.6875Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_2422)">
<path
d="M8.44266 9.39032C8.13682 8.84456 7.50112 8.57406 6.8958 8.7321C6.29049 8.89015 5.86816 9.4369 5.86816 10.0625V21.1875C5.86816 21.9469 6.48377 22.5625 7.24316 22.5625C8.00256 22.5625 8.61816 21.9469 8.61816 21.1875V15.8075C8.61816 15.6788 8.78927 15.6341 8.85221 15.7464L12.278 21.8597C12.5839 22.4055 13.2196 22.676 13.8249 22.5179C14.4302 22.3599 14.8525 21.8131 14.8525 21.1875V10.0625C14.8525 9.30311 14.2369 8.6875 13.4775 8.6875C12.7181 8.6875 12.1025 9.30311 12.1025 10.0625V15.4425C12.1025 15.5712 11.9314 15.6159 11.8685 15.5036L8.44266 9.39032Z"
fill="#FCF2FF"
/>
<path
d="M21.2629 8.6875C18.5251 8.6875 16.3057 10.9069 16.3057 13.6447V17.5894C16.3057 20.336 18.5322 22.5625 21.2787 22.5625H21.8256C23.2923 22.5625 24.6439 21.7681 25.3574 20.4868C25.6924 19.8854 25.8682 19.2084 25.8682 18.52V16.2656C25.8682 15.5062 25.2526 14.8906 24.4932 14.8906H22.1864C21.4271 14.8906 20.8114 15.5062 20.8114 16.2656C20.8114 17.025 21.4271 17.6406 22.1864 17.6406H22.9932C23.0622 17.6406 23.1182 17.6966 23.1182 17.7656V18.52C23.1182 18.7401 23.062 18.9565 22.9549 19.1488C22.7267 19.5585 22.2946 19.8125 21.8256 19.8125H21.2787C20.051 19.8125 19.0557 18.8172 19.0557 17.5894V13.6447C19.0557 12.4257 20.0439 11.4375 21.2629 11.4375C22.0719 11.4375 22.8161 11.8801 23.2023 12.591L23.285 12.7431C23.6475 13.4104 24.4823 13.6575 25.1496 13.2949C25.8169 12.9324 26.0639 12.0976 25.7014 11.4303L25.6187 11.2782C24.7513 9.68157 23.0799 8.6875 21.2629 8.6875Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_2422"
x={1.93433}
y={0.6875}
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_2422"
/>
<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_2422"
result="effect2_innerShadow_18590_2422"
/>
</filter>
<filter
id="filter1_f_18590_2422"
x={25.3718}
y={1.4375}
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_2422"
/>
</filter>
<filter
id="filter2_f_18590_2422"
x={2.64819}
y={0.75}
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_2422"
/>
</filter>
<filter
id="filter3_f_18590_2422"
x={4.86816}
y={7.68738}
width={22.0002}
height={15.8752}
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_2422"
/>
</filter>
<filter
id="filter4_ii_18590_2422"
x={4.86816}
y={8.28738}
width={21.4002}
height={15.2752}
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_2422"
/>
<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_2422"
result="effect2_innerShadow_18590_2422"
/>
</filter>
<linearGradient
id="paint0_linear_18590_2422"
x1={15.8718}
y1={5.26201}
x2={15.8718}
y2={38.5147}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_2422"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.5906 3.78125) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#7BD7FF" />
<stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_2422"
x1={28.6218}
y1={4.1875}
x2={28.6218}
y2={27.0625}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_2422"
x1={28.3357}
y1={3.75002}
x2={2.80444}
y2={3.75002}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = NgButtonIcon;