@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
277 lines (276 loc) • 9.02 kB
JSX
const React = require("react");
const Keycap9Icon = ({ 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_3386)">
<rect
x={1.65088}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_3386)"
/>
<rect
x={1.65088}
y={1.8125}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_3386)"
/>
</g>
<g filter="url(#filter1_f_18590_3386)">
<path
d="M27.8384 4.3125V27.1875"
stroke="url(#paint2_linear_18590_3386)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_3386)">
<path
d="M5.11475 3.625H26.896"
stroke="url(#paint3_linear_18590_3386)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_3386)">
<path
d="M20.3045 15.2143C20.306 15.2098 20.3077 15.2054 20.3098 15.2011C20.6402 14.5137 20.8253 13.7433 20.8253 12.9296C20.8253 10.0301 18.4748 7.67957 15.5753 7.67957C12.6758 7.67957 10.3253 10.0301 10.3253 12.9296C10.3253 15.4132 12.0499 17.494 14.3669 18.0398C14.4343 18.0557 14.4678 18.1329 14.4316 18.1919L12.6146 21.1555C12.1095 21.9794 12.3679 23.0569 13.1919 23.5621C14.0158 24.0673 15.0933 23.8089 15.5985 22.9849L20.1297 15.5943C20.2045 15.4723 20.2626 15.3448 20.3045 15.2143ZM17.3253 12.9296C17.3253 13.8961 16.5418 14.6796 15.5753 14.6796C14.6088 14.6796 13.8253 13.8961 13.8253 12.9296C13.8253 11.9631 14.6088 11.1796 15.5753 11.1796C16.5418 11.1796 17.3253 11.9631 17.3253 12.9296Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_3386)">
<path
d="M20.3045 15.2143C20.306 15.2098 20.3077 15.2054 20.3098 15.2011C20.6402 14.5137 20.8253 13.7433 20.8253 12.9296C20.8253 10.0301 18.4748 7.67957 15.5753 7.67957C12.6758 7.67957 10.3253 10.0301 10.3253 12.9296C10.3253 15.4132 12.0499 17.494 14.3669 18.0398C14.4343 18.0557 14.4678 18.1329 14.4316 18.1919L12.6146 21.1555C12.1095 21.9794 12.3679 23.0569 13.1919 23.5621C14.0158 24.0673 15.0933 23.8089 15.5985 22.9849L20.1297 15.5943C20.2045 15.4723 20.2626 15.3448 20.3045 15.2143ZM17.3253 12.9296C17.3253 13.8961 16.5418 14.6796 15.5753 14.6796C14.6088 14.6796 13.8253 13.8961 13.8253 12.9296C13.8253 11.9631 14.6088 11.1796 15.5753 11.1796C16.5418 11.1796 17.3253 11.9631 17.3253 12.9296Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_3386"
x={1.65088}
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_3386"
/>
<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_3386"
result="effect2_innerShadow_18590_3386"
/>
</filter>
<filter
id="filter1_f_18590_3386"
x={25.0884}
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_3386"
/>
</filter>
<filter
id="filter2_f_18590_3386"
x={2.36475}
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_3386"
/>
</filter>
<filter
id="filter3_f_18590_3386"
x={9.32532}
y={6.67957}
width={12.5}
height={18.1409}
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_3386"
/>
</filter>
<filter
id="filter4_ii_18590_3386"
x={9.32532}
y={7.27957}
width={11.9}
height={17.5409}
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_3386"
/>
<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_3386"
result="effect2_innerShadow_18590_3386"
/>
</filter>
<linearGradient
id="paint0_linear_18590_3386"
x1={15.5884}
y1={5.38701}
x2={15.5884}
y2={38.6397}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_3386"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.3071 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_3386"
x1={28.3384}
y1={4.3125}
x2={28.3384}
y2={27.1875}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_3386"
x1={28.0522}
y1={3.87502}
x2={2.521}
y2={3.87502}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = Keycap9Icon;