@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
556 lines (555 loc) • 18.6 kB
JSX
const React = require("react");
const VerticalTrafficLightIcon = ({ 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_236_134)">
<path
d="M16.022 2C19.332 2 22.022 4.69289 22.022 8.00644L22.022 23.9936C22.022 27.3071 19.332 30 16.022 30C12.712 30 10.022 27.3071 10.022 23.9936L10.022 8.00643C10.022 4.69288 12.712 2 16.022 2Z"
fill="url(#paint0_linear_236_134)"
/>
</g>
<g filter="url(#filter1_di_236_134)">
<path
d="M16.022 27C17.6789 27 19.022 25.6569 19.022 24C19.022 22.3431 17.6789 21 16.022 21C14.3652 21 13.022 22.3431 13.022 24C13.022 25.6569 14.3652 27 16.022 27Z"
fill="url(#paint1_linear_236_134)"
/>
<path
d="M16.022 27C17.6789 27 19.022 25.6569 19.022 24C19.022 22.3431 17.6789 21 16.022 21C14.3652 21 13.022 22.3431 13.022 24C13.022 25.6569 14.3652 27 16.022 27Z"
fill="url(#paint2_radial_236_134)"
/>
</g>
<path
d="M17.022 24C17.5743 24 18.022 23.5523 18.022 23C18.022 22.4477 17.5743 22 17.022 22C16.4697 22 16.022 22.4477 16.022 23C16.022 23.5523 16.4697 24 17.022 24Z"
fill="url(#paint3_radial_236_134)"
/>
<g filter="url(#filter2_di_236_134)">
<path
d="M16.022 11C17.6789 11 19.022 9.65685 19.022 8C19.022 6.34315 17.6789 5 16.022 5C14.3652 5 13.022 6.34315 13.022 8C13.022 9.65685 14.3652 11 16.022 11Z"
fill="url(#paint4_linear_236_134)"
/>
<path
d="M16.022 11C17.6789 11 19.022 9.65685 19.022 8C19.022 6.34315 17.6789 5 16.022 5C14.3652 5 13.022 6.34315 13.022 8C13.022 9.65685 14.3652 11 16.022 11Z"
fill="url(#paint5_radial_236_134)"
/>
</g>
<g filter="url(#filter3_di_236_134)">
<path
d="M16.022 19C17.6789 19 19.022 17.6569 19.022 16C19.022 14.3431 17.6789 13 16.022 13C14.3652 13 13.022 14.3431 13.022 16C13.022 17.6569 14.3652 19 16.022 19Z"
fill="url(#paint6_linear_236_134)"
/>
<path
d="M16.022 19C17.6789 19 19.022 17.6569 19.022 16C19.022 14.3431 17.6789 13 16.022 13C14.3652 13 13.022 14.3431 13.022 16C13.022 17.6569 14.3652 19 16.022 19Z"
fill="url(#paint7_radial_236_134)"
/>
</g>
<path
d="M17.022 8C17.5743 8 18.022 7.55228 18.022 7C18.022 6.44772 17.5743 6 17.022 6C16.4697 6 16.022 6.44772 16.022 7C16.022 7.55228 16.4697 8 17.022 8Z"
fill="url(#paint8_radial_236_134)"
/>
<path
d="M17.022 16C17.5743 16 18.022 15.5523 18.022 15C18.022 14.4477 17.5743 14 17.022 14C16.4697 14 16.022 14.4477 16.022 15C16.022 15.5523 16.4697 16 17.022 16Z"
fill="url(#paint9_radial_236_134)"
/>
<path
d="M12.3699 22.3639C12.2299 22.6757 12.48 23 12.8218 23C13.0435 23 13.2371 22.858 13.3363 22.6597C13.8285 21.6757 14.8459 21 16.021 21C17.1962 21 18.2135 21.6757 18.7057 22.6597C18.8049 22.858 18.9985 23 19.2202 23C19.562 23 19.8121 22.6757 19.6722 22.3639C19.0468 20.9705 17.6473 20 16.021 20C14.3948 20 12.9952 20.9705 12.3699 22.3639Z"
fill="url(#paint10_linear_236_134)"
/>
<path
d="M12.3709 14.3639C12.2309 14.6757 12.481 15 12.8228 15C13.0445 15 13.2382 14.858 13.3374 14.6597C13.8296 13.6757 14.8469 13 16.0221 13C17.1972 13 18.2145 13.6757 18.7068 14.6597C18.8059 14.858 18.9996 15 19.2213 15C19.5631 15 19.8132 14.6757 19.6732 14.3639C19.0479 12.9705 17.6483 12 16.0221 12C14.3958 12 12.9962 12.9705 12.3709 14.3639Z"
fill="url(#paint11_linear_236_134)"
/>
<path
d="M12.3709 6.36387C12.2309 6.67571 12.481 7 12.8228 7C13.0445 7 13.2382 6.858 13.3374 6.65972C13.8296 5.67567 14.8469 5 16.0221 5C17.1972 5 18.2145 5.67567 18.7068 6.65972C18.8059 6.858 18.9996 7 19.2213 7C19.5631 7 19.8132 6.67571 19.6732 6.36387C19.0479 4.97047 17.6483 4 16.0221 4C14.3958 4 12.9962 4.97047 12.3709 6.36387Z"
fill="url(#paint12_linear_236_134)"
/>
<g filter="url(#filter4_f_236_134)">
<path
d="M12.8554 6.50232C13.1233 5.84819 14.1132 4.53992 15.929 4.53992C17.7448 4.53992 18.8293 5.72209 19.1445 6.31318"
stroke="url(#paint13_linear_236_134)"
strokeWidth={0.4}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter5_f_236_134)">
<path
d="M12.8554 14.5405C13.1233 13.8864 14.1132 12.5781 15.929 12.5781C17.7448 12.5781 18.8293 13.7603 19.1445 14.3514"
stroke="url(#paint14_linear_236_134)"
strokeWidth={0.4}
strokeLinecap="round"
/>
</g>
<g filter="url(#filter6_f_236_134)">
<path
d="M12.8554 22.5787C13.1233 21.9246 14.1132 20.6163 15.929 20.6163C17.7448 20.6163 18.8293 21.7985 19.1445 22.3896"
stroke="url(#paint15_linear_236_134)"
strokeWidth={0.4}
strokeLinecap="round"
/>
</g>
<defs>
<filter
id="filter0_ii_236_134"
x={9.37203}
y={1.5}
width={13.15}
height={29.15}
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.65} dy={0.65} />
<feGaussianBlur stdDeviation={0.325} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.419608 0 0 0 0 0.356863 0 0 0 0 0.482353 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_236_134"
/>
<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.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.176471 0 0 0 0 0.129412 0 0 0 0 0.203922 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_236_134"
result="effect2_innerShadow_236_134"
/>
</filter>
<filter
id="filter1_di_236_134"
x={12.222}
y={20.6}
width={7.2}
height={7.2}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<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.2} dy={0.2} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.121569 0 0 0 0 0.121569 0 0 0 0 0.14902 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_236_134"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_236_134"
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.5} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.0431373 0 0 0 0 0.34902 0 0 0 0 0.176471 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_236_134"
/>
</filter>
<filter
id="filter2_di_236_134"
x={12.222}
y={4.6}
width={7.2}
height={7.2}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<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.2} dy={0.2} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.121569 0 0 0 0 0.121569 0 0 0 0 0.14902 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_236_134"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_236_134"
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.5} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.313726 0 0 0 0 0.0352941 0 0 0 0 0.12549 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_236_134"
/>
</filter>
<filter
id="filter3_di_236_134"
x={12.222}
y={12.6}
width={7.2}
height={7.2}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<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.2} dy={0.2} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.121569 0 0 0 0 0.121569 0 0 0 0 0.14902 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_236_134"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_236_134"
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.5} />
<feGaussianBlur stdDeviation={0.5} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.439216 0 0 0 0 0.235294 0 0 0 0 0.0431373 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_236_134"
/>
</filter>
<filter
id="filter4_f_236_134"
x={12.2553}
y={3.93997}
width={7.48927}
height={3.16243}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.2}
result="effect1_foregroundBlur_236_134"
/>
</filter>
<filter
id="filter5_f_236_134"
x={12.2553}
y={11.9782}
width={7.48927}
height={3.16243}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.2}
result="effect1_foregroundBlur_236_134"
/>
</filter>
<filter
id="filter6_f_236_134"
x={12.2553}
y={20.0164}
width={7.48927}
height={3.16243}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={0.2}
result="effect1_foregroundBlur_236_134"
/>
</filter>
<linearGradient
id="paint0_linear_236_134"
x1={20.9283}
y1={16}
x2={11.3033}
y2={16}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#51435E" />
<stop offset={1} stopColor="#39343B" />
</linearGradient>
<linearGradient
id="paint1_linear_236_134"
x1={19.022}
y1={21}
x2={15.2227}
y2={25.373}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3F995F" />
<stop offset={1} stopColor="#00D26A" />
</linearGradient>
<radialGradient
id="paint2_radial_236_134"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.0732 22.5896) rotate(124.524) scale(4.77986)"
>
<stop offset={0.776196} stopColor="#1B9D5F" stopOpacity={0} />
<stop offset={1} stopColor="#1B9D5F" />
</radialGradient>
<radialGradient
id="paint3_radial_236_134"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.5374 23.4696) rotate(-50.371) scale(1.63061 3.01633)"
>
<stop stopColor="#F2F7F7" />
<stop offset={1} stopColor="#F2F7F7" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint4_linear_236_134"
x1={19.022}
y1={5}
x2={15.2227}
y2={9.37302}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E94489" />
<stop offset={1} stopColor="#FA2F47" />
</linearGradient>
<radialGradient
id="paint5_radial_236_134"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.0732 6.58964) rotate(124.524) scale(4.77986)"
>
<stop offset={0.776196} stopColor="#B50F2F" stopOpacity={0} />
<stop offset={1} stopColor="#B50F2F" />
</radialGradient>
<linearGradient
id="paint6_linear_236_134"
x1={19.022}
y1={13}
x2={15.2227}
y2={17.373}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FE9142" />
<stop offset={1} stopColor="#FFE67B" />
</linearGradient>
<radialGradient
id="paint7_radial_236_134"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.0732 14.5896) rotate(124.524) scale(4.77986)"
>
<stop offset={0.776196} stopColor="#C39A59" stopOpacity={0} />
<stop offset={1} stopColor="#C39A59" />
</radialGradient>
<radialGradient
id="paint8_radial_236_134"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.5374 7.46958) rotate(-50.371) scale(1.63061 3.01633)"
>
<stop stopColor="#F2F7F7" />
<stop offset={1} stopColor="#F2F7F7" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint9_radial_236_134"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.5374 15.4696) rotate(-50.371) scale(1.63061 3.01633)"
>
<stop stopColor="#F2F7F7" />
<stop offset={1} stopColor="#F2F7F7" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint10_linear_236_134"
x1={12.6147}
y1={22.2041}
x2={19.4116}
y2={22.2041}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#291C32" />
<stop offset={1} stopColor="#2A2630" />
</linearGradient>
<linearGradient
id="paint11_linear_236_134"
x1={12.6158}
y1={14.2041}
x2={19.4127}
y2={14.2041}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#291C32" />
<stop offset={1} stopColor="#2A2630" />
</linearGradient>
<linearGradient
id="paint12_linear_236_134"
x1={12.6158}
y1={6.20409}
x2={19.4127}
y2={6.20409}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#291C32" />
<stop offset={1} stopColor="#2A2630" />
</linearGradient>
<linearGradient
id="paint13_linear_236_134"
x1={12.9697}
y1={5.38479}
x2={19.2902}
y2={5.38479}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4D4B4E" />
<stop offset={0.456989} stopColor="#4D4B4E" stopOpacity={0.5} />
<stop offset={1} stopColor="#4D4B4E" />
</linearGradient>
<linearGradient
id="paint14_linear_236_134"
x1={12.9697}
y1={13.423}
x2={19.2902}
y2={13.423}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4D4B4E" />
<stop offset={0.456989} stopColor="#4D4B4E" stopOpacity={0.5} />
<stop offset={1} stopColor="#4D4B4E" />
</linearGradient>
<linearGradient
id="paint15_linear_236_134"
x1={12.9697}
y1={21.4612}
x2={19.2902}
y2={21.4612}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4D4B4E" />
<stop offset={0.456989} stopColor="#4D4B4E" stopOpacity={0.5} />
<stop offset={1} stopColor="#4D4B4E" />
</linearGradient>
</defs>
</svg>
);
module.exports = VerticalTrafficLightIcon;