@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
277 lines (276 loc) • 9.24 kB
JSX
const React = require("react");
const Keycap4Icon = ({ 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_3314)">
<rect
x={2.28931}
y={2.4375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_3314)"
/>
<rect
x={2.28931}
y={2.4375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_3314)"
/>
</g>
<g filter="url(#filter1_f_18590_3314)">
<path
d="M28.4768 4.9375V27.8125"
stroke="url(#paint2_linear_18590_3314)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_3314)">
<path
d="M5.75317 4.25H27.5344"
stroke="url(#paint3_linear_18590_3314)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_3314)">
<path
d="M14.84 8.23745C15.7778 8.47126 16.3485 9.42103 16.1147 10.3588L14.8537 15.4163C14.838 15.4794 14.8857 15.5405 14.9508 15.5405H16.622C16.6773 15.5405 16.722 15.4957 16.722 15.4405V14.4354C16.722 13.4689 17.5055 12.6854 18.472 12.6854C19.4385 12.6854 20.222 13.4689 20.222 14.4354V15.4941C20.222 15.5416 20.2556 15.5823 20.3017 15.5939C21.0599 15.7859 21.6209 16.4727 21.6209 17.2905C21.6209 18.1083 21.0599 18.7951 20.3017 18.9871C20.2556 18.9987 20.222 19.0394 20.222 19.0869V22.8149C20.222 23.7814 19.4385 24.5649 18.472 24.5649C17.5055 24.5649 16.722 23.7814 16.722 22.8149V19.1405C16.722 19.0853 16.6773 19.0405 16.622 19.0405H12.5829C12.0442 19.0405 11.5355 18.7924 11.2039 18.3679C10.8722 17.9434 10.7546 17.3898 10.8849 16.8671L12.7186 9.51212C12.9524 8.57433 13.9022 8.00364 14.84 8.23745Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_3314)">
<path
d="M14.84 8.23745C15.7778 8.47126 16.3485 9.42103 16.1147 10.3588L14.8537 15.4163C14.838 15.4794 14.8857 15.5405 14.9508 15.5405H16.622C16.6773 15.5405 16.722 15.4957 16.722 15.4405V14.4354C16.722 13.4689 17.5055 12.6854 18.472 12.6854C19.4385 12.6854 20.222 13.4689 20.222 14.4354V15.4941C20.222 15.5416 20.2556 15.5823 20.3017 15.5939C21.0599 15.7859 21.6209 16.4727 21.6209 17.2905C21.6209 18.1083 21.0599 18.7951 20.3017 18.9871C20.2556 18.9987 20.222 19.0394 20.222 19.0869V22.8149C20.222 23.7814 19.4385 24.5649 18.472 24.5649C17.5055 24.5649 16.722 23.7814 16.722 22.8149V19.1405C16.722 19.0853 16.6773 19.0405 16.622 19.0405H12.5829C12.0442 19.0405 11.5355 18.7924 11.2039 18.3679C10.8722 17.9434 10.7546 17.3898 10.8849 16.8671L12.7186 9.51212C12.9524 8.57433 13.9022 8.00364 14.84 8.23745Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_3314"
x={2.28931}
y={1.4375}
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_3314"
/>
<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_3314"
result="effect2_innerShadow_18590_3314"
/>
</filter>
<filter
id="filter1_f_18590_3314"
x={25.7268}
y={2.1875}
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_3314"
/>
</filter>
<filter
id="filter2_f_18590_3314"
x={3.00317}
y={1.5}
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_3314"
/>
</filter>
<filter
id="filter3_f_18590_3314"
x={9.83289}
y={7.18506}
width={12.788}
height={18.3799}
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_3314"
/>
</filter>
<filter
id="filter4_ii_18590_3314"
x={9.83289}
y={7.78506}
width={12.188}
height={17.7799}
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_3314"
/>
<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_3314"
result="effect2_innerShadow_18590_3314"
/>
</filter>
<linearGradient
id="paint0_linear_18590_3314"
x1={16.2268}
y1={6.01201}
x2={16.2268}
y2={39.2647}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_3314"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.9456 4.53125) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#7BD7FF" />
<stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_3314"
x1={28.9768}
y1={4.9375}
x2={28.9768}
y2={27.8125}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_3314"
x1={28.6907}
y1={4.50002}
x2={3.15942}
y2={4.50002}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = Keycap4Icon;