@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
387 lines (386 loc) • 12.5 kB
JSX
const React = require("react");
const UnlockedIcon = ({ 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_i_18_23558)">
<path
d="M19.4453 14.0703V8.50781C19.4453 5.73776 21.6524 3.49219 24.375 3.49219C27.0976 3.49219 29.3047 5.73776 29.3047 8.50781V9.59369"
stroke="#C2C2C6"
strokeWidth={2.75}
strokeLinecap="round"
/>
</g>
<path
d="M19.4453 14.0703V8.50781C19.4453 5.73776 21.6524 3.49219 24.375 3.49219C27.0976 3.49219 29.3047 5.73776 29.3047 8.50781V9.59369"
stroke="url(#paint0_radial_18_23558)"
strokeWidth={2.75}
strokeLinecap="round"
/>
<path
d="M19.4453 14.0703V8.50781C19.4453 5.73776 21.6524 3.49219 24.375 3.49219C27.0976 3.49219 29.3047 5.73776 29.3047 8.50781V9.59369"
stroke="url(#paint1_radial_18_23558)"
strokeWidth={2.75}
strokeLinecap="round"
/>
<g filter="url(#filter1_f_18_23558)">
<path
d="M19.8828 13.7578V8.19531C19.8828 5.42526 22.0899 3.17969 24.8125 3.17969C27.5351 3.17969 29.7422 5.42526 29.7422 8.19531V9.28119"
stroke="url(#paint2_radial_18_23558)"
strokeLinecap="round"
/>
<path
d="M19.8828 13.7578V8.19531C19.8828 5.42526 22.0899 3.17969 24.8125 3.17969C27.5351 3.17969 29.7422 5.42526 29.7422 8.19531V9.28119"
stroke="url(#paint3_radial_18_23558)"
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_iiii_18_23558)">
<rect
x={2.4375}
y={11.0547}
width={21.9375}
height={18.8438}
rx={3}
fill="url(#paint4_linear_18_23558)"
/>
</g>
<rect
x={2.4375}
y={11.0547}
width={21.9375}
height={18.8438}
rx={3}
fill="url(#paint5_radial_18_23558)"
/>
<rect
x={2.4375}
y={11.0547}
width={21.9375}
height={18.8438}
rx={3}
fill="url(#paint6_linear_18_23558)"
/>
<rect
x={2.4375}
y={11.0547}
width={21.9375}
height={18.8438}
rx={3}
fill="url(#paint7_radial_18_23558)"
/>
<g filter="url(#filter3_f_18_23558)">
<path
d="M14.8047 20.3915C15.5239 19.9273 16 19.1189 16 18.1992C16 16.7592 14.8326 15.5918 13.3926 15.5918C11.9525 15.5918 10.7852 16.7592 10.7852 18.1992C10.7852 19.1305 11.2734 19.9477 12.0078 20.409V23.7032C12.0078 24.4755 12.6339 25.1016 13.4062 25.1016C14.1786 25.1016 14.8047 24.4755 14.8047 23.7032V20.3915Z"
stroke="url(#paint8_linear_18_23558)"
strokeWidth={1.75}
/>
<path
d="M14.8047 20.3915C15.5239 19.9273 16 19.1189 16 18.1992C16 16.7592 14.8326 15.5918 13.3926 15.5918C11.9525 15.5918 10.7852 16.7592 10.7852 18.1992C10.7852 19.1305 11.2734 19.9477 12.0078 20.409V23.7032C12.0078 24.4755 12.6339 25.1016 13.4062 25.1016C14.1786 25.1016 14.8047 24.4755 14.8047 23.7032V20.3915Z"
stroke="url(#paint9_linear_18_23558)"
strokeWidth={1.75}
/>
</g>
<path
d="M14.8047 20.3915C15.5239 19.9273 16 19.1189 16 18.1992C16 16.7592 14.8326 15.5918 13.3926 15.5918C11.9525 15.5918 10.7852 16.7592 10.7852 18.1992C10.7852 19.1305 11.2734 19.9477 12.0078 20.409V23.7032C12.0078 24.4755 12.6339 25.1016 13.4062 25.1016C14.1786 25.1016 14.8047 24.4755 14.8047 23.7032V20.3915Z"
fill="url(#paint10_radial_18_23558)"
/>
<defs>
<filter
id="filter0_i_18_23558"
x={18.0703}
y={2.11719}
width={13.6094}
height={13.3281}
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} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.560784 0 0 0 0 0.556863 0 0 0 0 0.576471 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_23558"
/>
</filter>
<filter
id="filter1_f_18_23558"
x={18.6328}
y={1.92969}
width={12.3594}
height={13.0781}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.375}
result="effect1_foregroundBlur_18_23558"
/>
</filter>
<filter
id="filter2_iiii_18_23558"
x={1.6875}
y={10.3047}
width={23.4375}
height={20.3438}
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 dy={-0.75} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.898039 0 0 0 0 0.364706 0 0 0 0 0.423529 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_23558"
/>
<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} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.772549 0 0 0 0 0.364706 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_23558"
result="effect2_innerShadow_18_23558"
/>
<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={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.266667 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18_23558"
result="effect3_innerShadow_18_23558"
/>
<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.75} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.729412 0 0 0 0 0.478431 0 0 0 0 0.207843 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect3_innerShadow_18_23558"
result="effect4_innerShadow_18_23558"
/>
</filter>
<filter
id="filter3_f_18_23558"
x={9.41016}
y={14.2168}
width={7.96484}
height={12.2598}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.25}
result="effect1_foregroundBlur_18_23558"
/>
</filter>
<radialGradient
id="paint0_radial_18_23558"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(24.5312 8.15619) rotate(-91.6531) scale(5.41626 5.81234)"
>
<stop offset={0.556487} stopColor="#AB83C0" />
<stop offset={1} stopColor="#CBBBDC" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint1_radial_18_23558"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(29.3047 11.4062) rotate(-90) scale(2.21875 8.81238)"
>
<stop offset={0.110772} stopColor="#B57FD6" />
<stop offset={1} stopColor="#B57FD6" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint2_radial_18_23558"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(30.0361 4.53779) rotate(136.625) scale(5.05367 6.94355)"
>
<stop offset={0.215771} stopColor="#EDECF3" />
<stop offset={1} stopColor="#EDECF3" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint3_radial_18_23558"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(18.7188 16.8124) rotate(-80.1017) scale(9.45321 6.82288)"
>
<stop stopColor="#EDECF3" />
<stop offset={1} stopColor="#EDECF3" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint4_linear_18_23558"
x1={7.5625}
y1={14.1172}
x2={14.5}
y2={29.8984}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFC74E" />
<stop offset={1} stopColor="#F7864E" />
</linearGradient>
<radialGradient
id="paint5_radial_18_23558"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.8125 29.8984) rotate(-132.274) scale(3.25195 7.57598)"
>
<stop stopColor="#FF8650" />
<stop offset={1} stopColor="#FF8650" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint6_linear_18_23558"
x1={13.4063}
y1={10.7422}
x2={13.4062}
y2={12.2422}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F3D04E" />
<stop offset={1} stopColor="#F3D04E" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint7_radial_18_23558"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(24.0625 11.0547) rotate(126.254) scale(2.32513 5.25171)"
>
<stop stopColor="#FFF760" />
<stop offset={1} stopColor="#FFF760" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint8_linear_18_23558"
x1={16.5312}
y1={21.6797}
x2={12.6562}
y2={21.6797}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.330645} stopColor="#D98A40" />
<stop offset={1} stopColor="#D98A40" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint9_linear_18_23558"
x1={10.2812}
y1={20.7422}
x2={13}
y2={20.7422}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFCD63" />
<stop offset={1} stopColor="#FFCD63" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint10_radial_18_23558"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.7852 18.6172) rotate(34.0609) scale(5.69121 7.82719)"
>
<stop offset={0.21669} stopColor="#564F80" />
<stop offset={1} stopColor="#473154" />
</radialGradient>
</defs>
</svg>
);
module.exports = UnlockedIcon;