@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
239 lines (238 loc) • 8.78 kB
JSX
const React = require("react");
const SkullIcon = ({ 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_31_1452)">
<path
d="M16 2C8.27 2 2 8.26776 2 15.995C2 21.1732 4.82 22.5627 9 22.9125V28.0007C9 29.1003 9.9 30 11 30C12.1 30 13 29.1003 13 28.0007V25.4918C13 25.2156 13.2239 24.9918 13.5 24.9918V24.9918C13.7761 24.9918 14 25.2156 14 25.4918V28.0007C14 29.1003 14.9 30 16 30C17.1 30 18 29.1003 18 28.0007V25.4918C18 25.2156 18.2239 24.9918 18.5 24.9918V24.9918C18.7761 24.9918 19 25.2156 19 25.4918V28.0007C19 29.1003 19.9 30 21 30C22.1 30 23 29.1003 23 28.0007V22.9125C27.18 22.5527 30 21.1732 30 15.995C30 8.26776 23.73 2 16 2Z"
fill="url(#paint0_radial_31_1452)"
/>
</g>
<path
d="M16 2C8.27 2 2 8.26776 2 15.995C2 21.1732 4.82 22.5627 9 22.9125V28.0007C9 29.1003 9.9 30 11 30C12.1 30 13 29.1003 13 28.0007V25.4918C13 25.2156 13.2239 24.9918 13.5 24.9918V24.9918C13.7761 24.9918 14 25.2156 14 25.4918V28.0007C14 29.1003 14.9 30 16 30C17.1 30 18 29.1003 18 28.0007V25.4918C18 25.2156 18.2239 24.9918 18.5 24.9918V24.9918C18.7761 24.9918 19 25.2156 19 25.4918V28.0007C19 29.1003 19.9 30 21 30C22.1 30 23 29.1003 23 28.0007V22.9125C27.18 22.5527 30 21.1732 30 15.995C30 8.26776 23.73 2 16 2Z"
fill="url(#paint1_linear_31_1452)"
/>
<path
d="M14 16.7617C14 19.3928 11.9866 20 9.5 20C7.01342 20 5 19.3928 5 16.7617C5 14.1305 7.01342 12 9.5 12C11.9866 12 14 14.1305 14 16.7617Z"
fill="url(#paint2_radial_31_1452)"
/>
<path
d="M27 16.7617C27 19.3928 24.9866 20 22.5 20C20.0134 20 18 19.3928 18 16.7617C18 14.1305 20.0134 12 22.5 12C24.9866 12 27 14.1305 27 16.7617Z"
fill="url(#paint3_radial_31_1452)"
/>
<path
d="M16.98 21.97H15.01C14.51 21.97 14.16 21.48 14.32 21.01L14.68 19.93C14.87 19.38 15.4 19 15.99 19C16.58 19 17.1 19.37 17.29 19.93L17.66 21.01C17.83 21.48 17.48 21.97 16.98 21.97Z"
fill="url(#paint4_radial_31_1452)"
/>
<g opacity={0.32} filter="url(#filter1_f_31_1452)">
<rect x={11} y={25} width={1.5} height={4} rx={0.75} fill="white" />
</g>
<g opacity={0.38} filter="url(#filter2_f_31_1452)">
<rect x={16} y={24} width={1.5} height={5} rx={0.75} fill="white" />
</g>
<g opacity={0.8} filter="url(#filter3_f_31_1452)">
<path
d="M19.75 23H22.25V28.25C22.25 28.6642 21.9142 29 21.5 29V29C21.0858 29 20.75 28.6642 20.75 28.25V25.5458C20.75 24.8639 20.5481 24.1972 20.1699 23.6298L19.75 23Z"
fill="white"
/>
</g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.4713 29.2862C14.7948 28.736 15 27.9159 15 27C15 25.3431 14.3284 24 13.5 24C12.6716 24 12 25.3431 12 27C12 27.9159 12.2052 28.736 12.5287 29.2862C12.8225 28.938 13 28.4891 13 28.0007V25.4918C13 25.2156 13.2239 24.9918 13.5 24.9918C13.7761 24.9918 14 25.2156 14 25.4918V28.0007C14 28.4891 14.1775 28.938 14.4713 29.2862Z"
fill="url(#paint5_radial_31_1452)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.4713 29.2862C19.7948 28.736 20 27.9159 20 27C20 25.3431 19.3284 24 18.5 24C17.6716 24 17 25.3431 17 27C17 27.9159 17.2052 28.7359 17.5287 29.2862C17.8225 28.938 18 28.4891 18 28.0007V25.4918C18 25.2156 18.2238 24.9918 18.5 24.9918C18.7761 24.9918 19 25.2156 19 25.4918V28.0007C19 28.4891 19.1775 28.938 19.4713 29.2862Z"
fill="url(#paint6_radial_31_1452)"
/>
<defs>
<filter
id="filter0_i_31_1452"
x={2}
y={1}
width={29}
height={29}
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.801456 0 0 0 0 0.658291 0 0 0 0 0.911898 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_31_1452"
/>
</filter>
<filter
id="filter1_f_31_1452"
x={10}
y={24}
width={3.5}
height={6}
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_31_1452"
/>
</filter>
<filter
id="filter2_f_31_1452"
x={15}
y={23}
width={3.5}
height={7}
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_31_1452"
/>
</filter>
<filter
id="filter3_f_31_1452"
x={17.75}
y={21}
width={6.5}
height={10}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={1}
result="effect1_foregroundBlur_31_1452"
/>
</filter>
<radialGradient
id="paint0_radial_31_1452"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(20.5 8.49768) rotate(125.547) scale(25.8009 25.8039)"
>
<stop offset={0.212753} stopColor="#F2F0F4" />
<stop offset={0.742622} stopColor="#D1BBE0" />
</radialGradient>
<linearGradient
id="paint1_linear_31_1452"
x1={8.5}
y1={15}
x2={-1}
y2={10}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E5C9C5" stopOpacity={0} />
<stop offset={1} stopColor="#FFD099" />
</linearGradient>
<radialGradient
id="paint2_radial_31_1452"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.13086 16.9959) rotate(-49.9682) scale(6.26052 7.3918)"
>
<stop offset={0.444517} stopColor="#3D2C36" />
<stop offset={1} stopColor="#1A1016" />
</radialGradient>
<radialGradient
id="paint3_radial_31_1452"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(21.1309 16.9959) rotate(-49.9682) scale(6.26052 7.3918)"
>
<stop offset={0.444517} stopColor="#3D2C36" />
<stop offset={1} stopColor="#1A1016" />
</radialGradient>
<radialGradient
id="paint4_radial_31_1452"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(15.4715 20.8547) rotate(-49.2879) scale(2.3478 2.7828)"
>
<stop offset={0.444517} stopColor="#3D2C36" />
<stop offset={1} stopColor="#1A1016" />
</radialGradient>
<radialGradient
id="paint5_radial_31_1452"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(13.5 26.5) rotate(90) scale(2.5 1.12061)"
>
<stop stopColor="#7A6E85" />
<stop offset={1} stopColor="#B29EC2" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint6_radial_31_1452"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(18.5 26.5) rotate(90) scale(2.5 1.12061)"
>
<stop stopColor="#7A6E85" />
<stop offset={1} stopColor="#B29EC2" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
module.exports = SkullIcon;