@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
277 lines (276 loc) • 8.41 kB
JSX
const React = require("react");
const Keycap1Icon = ({ 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_3272)">
<rect
x={2.28931}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_3272)"
/>
<rect
x={2.28931}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_3272)"
/>
</g>
<g filter="url(#filter1_f_18590_3272)">
<path
d="M28.4768 4.3125V27.1875"
stroke="url(#paint2_linear_18590_3272)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_3272)">
<path
d="M5.75317 3.625H27.5344"
stroke="url(#paint3_linear_18590_3272)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_3272)">
<path
d="M17.5889 7.7535C18.2533 8.01925 18.689 8.66276 18.689 9.37836V22.3784C18.689 23.3449 17.9055 24.1284 16.939 24.1284C15.9725 24.1284 15.189 23.3449 15.189 22.3784V13.9813C15.189 13.8991 15.0887 13.859 15.032 13.9185V13.9185C14.3655 14.6184 13.2578 14.6455 12.5579 13.979C11.858 13.3125 11.8309 12.2048 12.4974 11.5049L15.6717 8.17153C16.1651 7.65331 16.9244 7.48776 17.5889 7.7535Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_3272)">
<path
d="M17.5889 7.7535C18.2533 8.01925 18.689 8.66276 18.689 9.37836V22.3784C18.689 23.3449 17.9055 24.1284 16.939 24.1284C15.9725 24.1284 15.189 23.3449 15.189 22.3784V13.9813C15.189 13.8991 15.0887 13.859 15.032 13.9185V13.9185C14.3655 14.6184 13.2578 14.6455 12.5579 13.979C11.858 13.3125 11.8309 12.2048 12.4974 11.5049L15.6717 8.17153C16.1651 7.65331 16.9244 7.48776 17.5889 7.7535Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_3272"
x={2.28931}
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.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_3272"
/>
<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_3272"
result="effect2_innerShadow_18590_3272"
/>
</filter>
<filter
id="filter1_f_18590_3272"
x={25.7268}
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_3272"
/>
</filter>
<filter
id="filter2_f_18590_3272"
x={3.00317}
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_3272"
/>
</filter>
<filter
id="filter3_f_18590_3272"
x={11.0147}
y={6.6283}
width={8.67426}
height={18.5001}
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_3272"
/>
</filter>
<filter
id="filter4_ii_18590_3272"
x={11.0147}
y={7.2283}
width={8.07426}
height={17.9001}
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_3272"
/>
<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_3272"
result="effect2_innerShadow_18590_3272"
/>
</filter>
<linearGradient
id="paint0_linear_18590_3272"
x1={16.2268}
y1={5.38701}
x2={16.2268}
y2={38.6397}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_3272"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.9456 3.90625) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#7BD7FF" />
<stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_3272"
x1={28.9768}
y1={4.3125}
x2={28.9768}
y2={27.1875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_3272"
x1={28.6907}
y1={3.87502}
x2={3.15942}
y2={3.87502}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = Keycap1Icon;