@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
277 lines (276 loc) • 9.01 kB
JSX
const React = require("react");
const Keycap6Icon = ({ 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_3342)">
<rect
x={1.65088}
y={2.1875}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_3342)"
/>
<rect
x={1.65088}
y={2.1875}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_3342)"
/>
</g>
<g filter="url(#filter1_f_18590_3342)">
<path
d="M27.8384 4.6875V27.5625"
stroke="url(#paint2_linear_18590_3342)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_3342)">
<path
d="M5.11475 4H26.896"
stroke="url(#paint3_linear_18590_3342)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_3342)">
<path
d="M18.5455 10.7195C19.0507 9.89556 18.7923 8.81808 17.9683 8.3129C17.1443 7.80772 16.0669 8.06615 15.5617 8.89011L11.0304 16.2807C10.9556 16.4027 10.8976 16.5302 10.8556 16.6606C10.8542 16.6652 10.8524 16.6696 10.8504 16.6738C10.52 17.3613 10.3348 18.1317 10.3348 18.9454C10.3348 21.8449 12.6853 24.1954 15.5848 24.1954C18.4843 24.1954 20.8348 21.8449 20.8348 18.9454C20.8348 16.4618 19.1103 14.381 16.7933 13.8352C16.7259 13.8193 16.6923 13.7421 16.7285 13.6831L18.5455 10.7195ZM13.8348 18.9454C13.8348 17.9789 14.6183 17.1954 15.5848 17.1954C16.5513 17.1954 17.3348 17.9789 17.3348 18.9454C17.3348 19.9119 16.5513 20.6954 15.5848 20.6954C14.6183 20.6954 13.8348 19.9119 13.8348 18.9454Z"
fill="#579FFF"
/>
</g>
<g filter="url(#filter4_ii_18590_3342)">
<path
d="M18.5455 10.7195C19.0507 9.89556 18.7923 8.81808 17.9683 8.3129C17.1443 7.80772 16.0669 8.06615 15.5617 8.89011L11.0304 16.2807C10.9556 16.4027 10.8976 16.5302 10.8556 16.6606C10.8542 16.6652 10.8524 16.6696 10.8504 16.6738C10.52 17.3613 10.3348 18.1317 10.3348 18.9454C10.3348 21.8449 12.6853 24.1954 15.5848 24.1954C18.4843 24.1954 20.8348 21.8449 20.8348 18.9454C20.8348 16.4618 19.1103 14.381 16.7933 13.8352C16.7259 13.8193 16.6923 13.7421 16.7285 13.6831L18.5455 10.7195ZM13.8348 18.9454C13.8348 17.9789 14.6183 17.1954 15.5848 17.1954C16.5513 17.1954 17.3348 17.9789 17.3348 18.9454C17.3348 19.9119 16.5513 20.6954 15.5848 20.6954C14.6183 20.6954 13.8348 19.9119 13.8348 18.9454Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_ii_18590_3342"
x={1.65088}
y={1.1875}
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_3342"
/>
<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_3342"
result="effect2_innerShadow_18590_3342"
/>
</filter>
<filter
id="filter1_f_18590_3342"
x={25.0884}
y={1.9375}
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_3342"
/>
</filter>
<filter
id="filter2_f_18590_3342"
x={2.36475}
y={1.25}
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_3342"
/>
</filter>
<filter
id="filter3_f_18590_3342"
x={9.33484}
y={7.05457}
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_3342"
/>
</filter>
<filter
id="filter4_ii_18590_3342"
x={9.33484}
y={7.65457}
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_3342"
/>
<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_3342"
result="effect2_innerShadow_18590_3342"
/>
</filter>
<linearGradient
id="paint0_linear_18590_3342"
x1={15.5884}
y1={5.76201}
x2={15.5884}
y2={39.0147}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5CB7FF" />
<stop offset={1} stopColor="#4878DD" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_3342"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.3071 4.28125) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#7BD7FF" />
<stop offset={1} stopColor="#7BD7FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_3342"
x1={28.3384}
y1={4.6875}
x2={28.3384}
y2={27.5625}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7FD9FF" />
<stop offset={1} stopColor="#639DF4" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_3342"
x1={28.0522}
y1={4.25002}
x2={2.521}
y2={4.25002}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7DD8FF" />
<stop offset={1} stopColor="#5DB6FF" />
</linearGradient>
</defs>
</svg>
);
module.exports = Keycap6Icon;