@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
125 lines (124 loc) • 5.62 kB
JSX
const React = require("react");
const KeyIcon = ({ 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_iii_18_23714)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.0644 17.3934C21.935 18.5564 25.3474 17.9739 27.6753 15.646C30.78 12.5413 30.78 7.50754 27.6753 4.40278C24.5705 1.29802 19.5368 1.29805 16.432 4.40278C14.0968 6.73798 13.518 10.1644 14.6956 13.0406L11.2476 16.4886C10.9957 16.7405 10.8516 17.0804 10.8457 17.4366L10.8285 18.4695C10.823 18.8037 10.6817 19.1211 10.4371 19.3488C10.2396 19.5327 9.98705 19.6465 9.71845 19.6726L9.18177 19.7248C8.91395 19.7509 8.66343 19.8691 8.47313 20.0594C8.28629 20.2462 8.1688 20.4913 8.14002 20.7539L8.08167 21.2861C8.05 21.5748 7.92085 21.8441 7.71549 22.0494C7.46444 22.3005 7.12017 22.4356 6.76538 22.4223L5.96496 22.3923C5.58326 22.378 5.21287 22.5234 4.94278 22.7934L3.08423 24.652C1.88004 25.8562 1.88005 27.8086 3.08423 29.0128C4.28841 30.2169 6.24082 30.217 7.44502 29.0128L19.0644 17.3934ZM26.2248 8.37489C25.5285 9.07123 24.3995 9.07122 23.7032 8.37489C23.0068 7.67855 23.0068 6.54956 23.7032 5.85322C24.3995 5.15687 25.5285 5.15688 26.2248 5.85322C26.9212 6.54955 26.9212 7.67854 26.2248 8.37489Z"
fill="url(#paint0_linear_18_23714)"
/>
</g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.0644 17.3934C21.935 18.5564 25.3474 17.9739 27.6753 15.646C30.78 12.5413 30.78 7.50754 27.6753 4.40278C24.5705 1.29802 19.5368 1.29805 16.432 4.40278C14.0968 6.73798 13.518 10.1644 14.6956 13.0406L11.2476 16.4886C10.9957 16.7405 10.8516 17.0804 10.8457 17.4366L10.8285 18.4695C10.823 18.8037 10.6817 19.1211 10.4371 19.3488C10.2396 19.5327 9.98705 19.6465 9.71845 19.6726L9.18177 19.7248C8.91395 19.7509 8.66343 19.8691 8.47313 20.0594C8.28629 20.2462 8.1688 20.4913 8.14002 20.7539L8.08167 21.2861C8.05 21.5748 7.92085 21.8441 7.71549 22.0494C7.46444 22.3005 7.12017 22.4356 6.76538 22.4223L5.96496 22.3923C5.58326 22.378 5.21287 22.5234 4.94278 22.7934L3.08423 24.652C1.88004 25.8562 1.88005 27.8086 3.08423 29.0128C4.28841 30.2169 6.24082 30.217 7.44502 29.0128L19.0644 17.3934ZM26.2248 8.37489C25.5285 9.07123 24.3995 9.07122 23.7032 8.37489C23.0068 7.67855 23.0068 6.54956 23.7032 5.85322C24.3995 5.15687 25.5285 5.15688 26.2248 5.85322C26.9212 6.54955 26.9212 7.67854 26.2248 8.37489Z"
fill="url(#paint1_radial_18_23714)"
/>
<defs>
<filter
id="filter0_iii_18_23714"
x={1.78109}
y={1.92422}
width={28.5727}
height={28.3917}
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.35} dy={-0.1} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.803922 0 0 0 0 0.623529 0 0 0 0 0.294118 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_23714"
/>
<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={-0.15} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.796078 0 0 0 0 0.505882 0 0 0 0 0.411765 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_23714"
result="effect2_innerShadow_18_23714"
/>
<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 0.996078 0 0 0 0 0.996078 0 0 0 0 0.423529 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_23714"
result="effect3_innerShadow_18_23714"
/>
</filter>
<linearGradient
id="paint0_linear_18_23714"
x1={17.8641}
y1={7.45709}
x2={17.4931}
y2={29.939}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFDC46" />
<stop offset={1} stopColor="#F38E4A" />
</linearGradient>
<radialGradient
id="paint1_radial_18_23714"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(19.3281 13.7187) rotate(136.353) scale(22.4569 11.4358)"
>
<stop offset={0.934938} stopColor="#F18849" stopOpacity={0} />
<stop offset={1} stopColor="#CC6946" />
</radialGradient>
</defs>
</svg>
);
module.exports = KeyIcon;