@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
295 lines (294 loc) • 9.33 kB
JSX
const React = require("react");
const SparkleIcon = ({ 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_18590_2119)">
<rect
x={1.87933}
y={1.9375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint0_linear_18590_2119)"
/>
<rect
x={1.87933}
y={1.9375}
width={27.875}
height={27.875}
rx={3.6}
fill="url(#paint1_radial_18590_2119)"
/>
</g>
<g filter="url(#filter1_f_18590_2119)">
<path
d="M28.0668 4.4375V27.3125"
stroke="url(#paint2_linear_18590_2119)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter2_f_18590_2119)">
<path
d="M5.3432 3.75H27.1245"
stroke="url(#paint3_linear_18590_2119)"
strokeWidth={1.5}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter3_f_18590_2119)">
<path
d="M17.0008 7.92201L16.2965 5.52946C16.1557 5.05105 15.478 5.05105 15.3372 5.52946L14.6329 7.92201C13.6732 11.1819 11.1238 13.7314 7.86384 14.6911L5.47129 15.3954C4.99289 15.5362 4.99289 16.2138 5.47129 16.3547L7.86384 17.059C11.1238 18.0186 13.6732 20.5681 14.6329 23.828L15.3372 26.2206C15.478 26.699 16.1557 26.699 16.2965 26.2206L17.0008 23.828C17.9604 20.5681 20.5099 18.0186 23.7698 17.059L26.1624 16.3547C26.6408 16.2138 26.6408 15.5362 26.1624 15.3954L23.7698 14.691C20.5099 13.7314 17.9604 11.1819 17.0008 7.92201Z"
fill="#53BB7D"
/>
</g>
<g filter="url(#filter4_ii_18590_2119)">
<path
d="M17.0008 7.92201L16.2965 5.52946C16.1557 5.05105 15.478 5.05105 15.3372 5.52946L14.6329 7.92201C13.6732 11.1819 11.1238 13.7314 7.86384 14.6911L5.47129 15.3954C4.99289 15.5362 4.99289 16.2138 5.47129 16.3547L7.86384 17.059C11.1238 18.0186 13.6732 20.5681 14.6329 23.828L15.3372 26.2206C15.478 26.699 16.1557 26.699 16.2965 26.2206L17.0008 23.828C17.9604 20.5681 20.5099 18.0186 23.7698 17.059L26.1624 16.3547C26.6408 16.2138 26.6408 15.5362 26.1624 15.3954L23.7698 14.691C20.5099 13.7314 17.9604 11.1819 17.0008 7.92201Z"
fill="#FCF2FF"
/>
</g>
<defs>
<filter
id="filter0_iii_18590_2119"
x={1.37933}
y={0.9375}
width={30.375}
height={29.375}
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={2} dy={-1} />
<feGaussianBlur stdDeviation={1.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.176471 0 0 0 0 0.521569 0 0 0 0 0.309804 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_2119"
/>
<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.25098 0 0 0 0 0.490196 0 0 0 0 0.462745 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18590_2119"
result="effect2_innerShadow_18590_2119"
/>
<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.5} dy={0.5} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.356863 0 0 0 0 0.905882 0 0 0 0 0.560784 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect2_innerShadow_18590_2119"
result="effect3_innerShadow_18590_2119"
/>
</filter>
<filter
id="filter1_f_18590_2119"
x={25.3168}
y={1.6875}
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_2119"
/>
</filter>
<filter
id="filter2_f_18590_2119"
x={2.5932}
y={1}
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_2119"
/>
</filter>
<filter
id="filter3_f_18590_2119"
x={4.11249}
y={4.17065}
width={23.4087}
height={23.4087}
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_2119"
/>
</filter>
<filter
id="filter4_ii_18590_2119"
x={4.71249}
y={4.77065}
width={22.2087}
height={22.2087}
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.4} dy={0.4} />
<feGaussianBlur stdDeviation={0.375} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.913725 0 0 0 0 0.886275 0 0 0 0 0.968627 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18590_2119"
/>
<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 1 0 0 0 0 0.988235 0 0 0 0 1 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18590_2119"
result="effect2_innerShadow_18590_2119"
/>
</filter>
<linearGradient
id="paint0_linear_18590_2119"
x1={15.8168}
y1={5.51201}
x2={15.8168}
y2={38.7647}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5AD98F" />
<stop offset={1} stopColor="#51C685" />
</linearGradient>
<radialGradient
id="paint1_radial_18590_2119"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.5356 4.03125) rotate(136.771) scale(2.14444 2.50466)"
>
<stop stopColor="#80FFB3" />
<stop offset={1} stopColor="#80FFB3" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18590_2119"
x1={28.5668}
y1={4.4375}
x2={28.5668}
y2={27.3125}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#74FCA8" />
<stop offset={1} stopColor="#61DB90" />
</linearGradient>
<linearGradient
id="paint3_linear_18590_2119"
x1={28.2807}
y1={4.00002}
x2={2.74945}
y2={4.00002}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#66F39D" />
<stop offset={1} stopColor="#60E496" />
</linearGradient>
</defs>
</svg>
);
module.exports = SparkleIcon;