@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
362 lines (361 loc) • 10.1 kB
JSX
const React = require("react");
const WatchIcon = ({ 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}
<rect
x={26.3347}
y={13.7197}
width={2.8659}
height={3.81166}
rx={0.6}
fill="url(#paint0_radial_18_13286)"
/>
<rect
x={26.3347}
y={13.7197}
width={2.8659}
height={3.81166}
rx={0.6}
fill="url(#paint1_radial_18_13286)"
/>
<rect
x={26.3347}
y={13.7197}
width={2.8659}
height={3.81166}
rx={0.6}
fill="url(#paint2_linear_18_13286)"
/>
<rect
x={9}
y={2}
width={14}
height={28}
rx={1}
fill="url(#paint3_linear_18_13286)"
/>
<rect
x={9}
y={2}
width={14}
height={28}
rx={1}
fill="url(#paint4_linear_18_13286)"
/>
<rect
x={9}
y={2}
width={14}
height={28}
rx={1}
fill="url(#paint5_linear_18_13286)"
/>
<rect
x={9}
y={2}
width={14}
height={28}
rx={1}
fill="url(#paint6_linear_18_13286)"
/>
<rect
x={9}
y={2}
width={14}
height={28}
rx={1}
fill="url(#paint7_linear_18_13286)"
/>
<rect
x={9}
y={2}
width={14}
height={28}
rx={1}
fill="url(#paint8_linear_18_13286)"
/>
<circle cx={16} cy={16} r={9} fill="url(#paint9_radial_18_13286)" />
<g filter="url(#filter0_f_18_13286)">
<path
d="M14.6594 9.51221C14.6594 9.13818 14.9626 8.83496 15.3366 8.83496C15.7106 8.83496 16.0138 9.13818 16.0138 9.51221V14.9243C16.5812 15.182 16.9758 15.7537 16.9758 16.4174C16.9758 17.3228 16.2419 18.0566 15.3366 18.0566C15.0643 18.0566 14.8074 17.9902 14.5814 17.8727L11.7991 20.2068C11.5125 20.4472 11.0854 20.4098 10.845 20.1233C10.6046 19.8367 10.642 19.4095 10.9285 19.1692L13.744 16.8072C13.7136 16.6823 13.6974 16.5518 13.6974 16.4174C13.6974 15.7537 14.092 15.182 14.6594 14.9243V9.51221Z"
fill="url(#paint10_linear_18_13286)"
/>
</g>
<g filter="url(#filter1_ii_18_13286)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37259 22.6274 4 16 4C9.37258 4 4 9.37259 4 16C4 22.6274 9.37258 28 16 28ZM16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25Z"
fill="url(#paint11_linear_18_13286)"
/>
</g>
<rect
x={15.3228}
y={8.41748}
width={1.35449}
height={7.23298}
rx={0.677244}
fill="url(#paint12_linear_18_13286)"
/>
<rect
x={16}
y={15.0537}
width={1.35449}
height={6.43102}
rx={0.677244}
transform="rotate(50.0064 16 15.0537)"
fill="url(#paint13_linear_18_13286)"
/>
<circle cx={16} cy={16} r={1.63919} fill="url(#paint14_radial_18_13286)" />
<defs>
<filter
id="filter0_f_18_13286"
x={9.93655}
y={8.08496}
width={7.78925}
height={13.0303}
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_13286"
/>
</filter>
<filter
id="filter1_ii_18_13286"
x={3.85}
y={4}
width={24.35}
height={24.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.2} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.607843 0 0 0 0 0.615686 0 0 0 0 0.729412 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_13286"
/>
<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.15} dy={0.15} />
<feGaussianBlur stdDeviation={0.15} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.968627 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_13286"
result="effect2_innerShadow_18_13286"
/>
</filter>
<radialGradient
id="paint0_radial_18_13286"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(29.6209 14.9521) rotate(130.179) scale(3.37593 4.67504)"
>
<stop stopColor="#28A1FA" />
<stop offset={1} stopColor="#1F6DFF" />
</radialGradient>
<radialGradient
id="paint1_radial_18_13286"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(29.1051 14.8183) rotate(90) scale(2.21629 0.38212)"
>
<stop stopColor="#5CC2FF" />
<stop offset={1} stopColor="#5CC2FF" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_18_13286"
x1={27.4063}
y1={13.7197}
x2={28.4531}
y2={14.4527}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5190D7" />
<stop offset={1} stopColor="#5190D7" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint3_linear_18_13286"
x1={16}
y1={2}
x2={16}
y2={30}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3B96E6" />
<stop offset={1} stopColor="#256AFF" />
</linearGradient>
<linearGradient
id="paint4_linear_18_13286"
x1={23.5625}
y1={14.5465}
x2={20.75}
y2={14.5465}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#4CB2FF" />
<stop offset={1} stopColor="#4CB2FF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint5_linear_18_13286"
x1={9.3125}
y1={0.671509}
x2={14.6875}
y2={5.79651}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#596FC7" />
<stop offset={1} stopColor="#596FC7" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint6_linear_18_13286"
x1={9}
y1={18.4215}
x2={10.625}
y2={18.4215}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#444A9E" />
<stop offset={1} stopColor="#444A9E" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint7_linear_18_13286"
x1={9.9375}
y1={31.4215}
x2={11.625}
y2={25.859}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2845FF" />
<stop offset={1} stopColor="#2845FF" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint8_linear_18_13286"
x1={17.0492}
y1={30.2751}
x2={17.0492}
y2={29.358}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#5D7AFF" />
<stop offset={1} stopColor="#5D7AFF" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint9_radial_18_13286"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16 16) rotate(90) scale(9)"
>
<stop offset={0.9009} stopColor="#50369C" />
<stop offset={1} stopColor="#3B2862" />
</radialGradient>
<linearGradient
id="paint10_linear_18_13286"
x1={16.9758}
y1={8.83496}
x2={12.2741}
y2={19.589}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#352260" />
<stop offset={1} stopColor="#39268E" />
</linearGradient>
<linearGradient
id="paint11_linear_18_13286"
x1={23.75}
y1={6.79651}
x2={10.375}
y2={22.234}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#CCCFF7" />
<stop offset={1} stopColor="#BDC2FF" />
</linearGradient>
<linearGradient
id="paint12_linear_18_13286"
x1={15.3228}
y1={12.034}
x2={16.8811}
y2={12.034}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D6D8FF" />
<stop offset={1} stopColor="#E7EAFF" />
</linearGradient>
<linearGradient
id="paint13_linear_18_13286"
x1={16.8498}
y1={16.8325}
x2={16.8064}
y2={21.605}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D6D8FF" />
<stop offset={1} stopColor="#E7EAFF" />
</linearGradient>
<radialGradient
id="paint14_radial_18_13286"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16.9894 15.0782) rotate(111.124) scale(2.7455)"
>
<stop offset={0.701421} stopColor="#DDBD3D" />
<stop offset={1} stopColor="#CAA742" />
</radialGradient>
</defs>
</svg>
);
module.exports = WatchIcon;