@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
285 lines (284 loc) • 9.73 kB
JSX
const React = require("react");
const ClButtonIcon = ({ 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_2326)">
<rect
x={2.09033}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_2326)"
/>
<rect
x={2.09033}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_2326)"
/>
</g>
<g filter="url(#filter1_f_18590_2326)">
<path
d="M28.2778 4.3125V27.1875"
stroke="url(#paint2_linear_18590_2326)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_2326)">
<path
d="M5.5542 3.625H27.3354"
stroke="url(#paint3_linear_18590_2326)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_2326)">
<path
d="M11.728 9.09375C8.81882 9.09375 6.46045 11.4521 6.46045 14.3613V17.1206C6.46045 20.0398 8.82693 22.4062 11.7461 22.4062C13.5696 22.4062 15.2644 21.4663 16.23 19.9194L16.2519 19.8843C16.654 19.2401 16.4577 18.3919 15.8135 17.9898C15.1693 17.5877 14.3211 17.784 13.919 18.4282L13.8971 18.4633C13.4339 19.2053 12.6209 19.6562 11.7461 19.6562C10.3457 19.6562 9.21045 18.521 9.21045 17.1206V14.3613C9.21045 12.9709 10.3376 11.8438 11.728 11.8438C12.6064 11.8438 13.4213 12.3016 13.8782 13.0519L13.9111 13.1058C14.3061 13.7544 15.152 13.96 15.8006 13.565C16.4492 13.17 16.6548 12.324 16.2598 11.6754L16.227 11.6215C15.271 10.0517 13.566 9.09375 11.728 9.09375Z"
fill="#EF2B54"
/>
<path
d="M21.1479 10.4688C21.1479 9.70936 20.5323 9.09375 19.7729 9.09375C19.0136 9.09375 18.3979 9.70936 18.3979 10.4688V21C18.3979 21.7594 19.0136 22.375 19.7729 22.375H25.0542C25.8136 22.375 26.4292 21.7594 26.4292 21C26.4292 20.2406 25.8136 19.625 25.0542 19.625H21.2479C21.1927 19.625 21.1479 19.5802 21.1479 19.525V10.4688Z"
fill="#EF2B54"
/>
</g>
<g filter="url(#filter4_ii_18590_2326)">
<path
d="M11.728 9.09375C8.81882 9.09375 6.46045 11.4521 6.46045 14.3613V17.1206C6.46045 20.0398 8.82693 22.4062 11.7461 22.4062C13.5696 22.4062 15.2644 21.4663 16.23 19.9194L16.2519 19.8843C16.654 19.2401 16.4577 18.3919 15.8135 17.9898C15.1693 17.5877 14.3211 17.784 13.919 18.4282L13.8971 18.4633C13.4339 19.2053 12.6209 19.6562 11.7461 19.6562C10.3457 19.6562 9.21045 18.521 9.21045 17.1206V14.3613C9.21045 12.9709 10.3376 11.8438 11.728 11.8438C12.6064 11.8438 13.4213 12.3016 13.8782 13.0519L13.9111 13.1058C14.3061 13.7544 15.152 13.96 15.8006 13.565C16.4492 13.17 16.6548 12.324 16.2598 11.6754L16.227 11.6215C15.271 10.0517 13.566 9.09375 11.728 9.09375Z"
fill="#FCF2FF"
/>
<path
d="M21.1479 10.4688C21.1479 9.70936 20.5323 9.09375 19.7729 9.09375C19.0136 9.09375 18.3979 9.70936 18.3979 10.4688V21C18.3979 21.7594 19.0136 22.375 19.7729 22.375H25.0542C25.8136 22.375 26.4292 21.7594 26.4292 21C26.4292 20.2406 25.8136 19.625 25.0542 19.625H21.2479C21.1927 19.625 21.1479 19.5802 21.1479 19.525V10.4688Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_2326"
x={2.09033}
y={0.8125}
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.901961 0 0 0 0 0.133333 0 0 0 0 0.337255 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_2326"
/>
<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.85098 0 0 0 0 0.168627 0 0 0 0 0.231373 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18590_2326"
result="effect2_innerShadow_18590_2326"
/>
</filter>
<filter
id="filter1_f_18590_2326"
x={25.5278}
y={1.5625}
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_2326"
/>
</filter>
<filter
id="filter2_f_18590_2326"
x={2.8042}
y={0.875}
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_2326"
/>
</filter>
<filter
id="filter3_f_18590_2326"
x={5.46045}
y={8.09375}
width={21.9688}
height={15.3125}
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_2326"
/>
</filter>
<filter
id="filter4_ii_18590_2326"
x={6.06045}
y={8.69375}
width={20.7688}
height={14.1125}
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_2326"
/>
<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_2326"
result="effect2_innerShadow_18590_2326"
/>
</filter>
<linearGradient
id="paint0_linear_18590_2326"
x1={16.0278}
y1={5.38701}
x2={16.0278}
y2={38.6397}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF4D91" />
<stop offset={1} stopColor="#F34A5F" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_2326"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.7466 3.90625) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#FF77B1" />
<stop offset={1} stopColor="#FF77B1" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_2326"
x1={28.7778}
y1={4.3125}
x2={28.7778}
y2={27.1875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF66A5" />
<stop offset={1} stopColor="#FF5B6B" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_2326"
x1={28.4917}
y1={3.87502}
x2={2.96045}
y2={3.87502}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF60A3" />
<stop offset={1} stopColor="#FF5495" />
</linearGradient>
</defs>
</svg>
);
module.exports = ClButtonIcon;