@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
289 lines (288 loc) • 9.21 kB
JSX
const React = require("react");
const CrayonIcon = ({ 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}
<path
d="M5.79685 19.8359L12.25 26.2891L11.0468 27.4141L3.82058 29.5254C3.06117 29.7473 2.35705 29.0412 2.58104 28.2824L4.56247 21.5703L5.79685 19.8359Z"
fill="url(#paint0_linear_18_22399)"
/>
<path
d="M5.79685 19.8359L12.25 26.2891L11.0468 27.4141L3.82058 29.5254C3.06117 29.7473 2.35705 29.0412 2.58104 28.2824L4.56247 21.5703L5.79685 19.8359Z"
fill="url(#paint1_linear_18_22399)"
/>
<path
d="M5.79685 19.8359L12.25 26.2891L11.0468 27.4141L3.82058 29.5254C3.06117 29.7473 2.35705 29.0412 2.58104 28.2824L4.56247 21.5703L5.79685 19.8359Z"
fill="url(#paint2_radial_18_22399)"
/>
<rect
x={24.1875}
y={1.44531}
width={9.1261}
height={28.3506}
rx={0.75}
transform="rotate(45 24.1875 1.44531)"
fill="url(#paint3_radial_18_22399)"
/>
<rect
x={24.1875}
y={1.44531}
width={9.1261}
height={28.3506}
rx={0.75}
transform="rotate(45 24.1875 1.44531)"
fill="url(#paint4_linear_18_22399)"
/>
<rect
x={24.1875}
y={1.44531}
width={9.1261}
height={28.3506}
rx={0.75}
transform="rotate(45 24.1875 1.44531)"
fill="url(#paint5_linear_18_22399)"
/>
<path
d="M29.1406 9.39845L22.6875 2.94533L23.6572 1.97566C23.9501 1.68275 24.4249 1.68275 24.7178 1.97566L30.1103 7.36812C30.4032 7.66103 30.4032 8.13588 30.1103 8.42879L29.1406 9.39845Z"
fill="url(#paint6_linear_18_22399)"
/>
<path
d="M29.1406 9.39845L22.6875 2.94533L23.6572 1.97566C23.9501 1.68275 24.4249 1.68275 24.7178 1.97566L30.1103 7.36812C30.4032 7.66103 30.4032 8.13588 30.1103 8.42879L29.1406 9.39845Z"
fill="url(#paint7_radial_18_22399)"
/>
<path
d="M29.1406 9.39845L22.6875 2.94533L23.6572 1.97566C23.9501 1.68275 24.4249 1.68275 24.7178 1.97566L30.1103 7.36812C30.4032 7.66103 30.4032 8.13588 30.1103 8.42879L29.1406 9.39845Z"
fill="url(#paint8_linear_18_22399)"
/>
<path
d="M20.9844 4.64838L21.8525 3.78027L28.3056 10.2334L27.4375 11.1015L20.9844 4.64838Z"
fill="url(#paint9_radial_18_22399)"
/>
<path
d="M6.35278 19.2801L7.22089 18.412L13.674 24.8651L12.8059 25.7332L6.35278 19.2801Z"
fill="url(#paint10_radial_18_22399)"
/>
<g filter="url(#filter0_i_18_22399)">
<path
d="M11.9453 26.5938L11.1241 27.415C10.8312 27.7079 10.3563 27.7079 10.0634 27.415L4.67097 22.0225C4.37807 21.7296 4.37807 21.2547 4.67097 20.9619L5.4922 20.1406L11.9453 26.5938Z"
fill="url(#paint11_radial_18_22399)"
/>
</g>
<ellipse
cx={17.328}
cy={14.9531}
rx={6.99919}
ry={2.08256}
transform="rotate(-45.082 17.328 14.9531)"
fill="url(#paint12_radial_18_22399)"
/>
<ellipse
cx={17.328}
cy={14.9531}
rx={6.99919}
ry={2.08256}
transform="rotate(-45.082 17.328 14.9531)"
fill="url(#paint13_radial_18_22399)"
/>
<defs>
<filter
id="filter0_i_18_22399"
x={4.45129}
y={19.9906}
width={7.64403}
height={7.64402}
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.15} dy={-0.15} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.215686 0 0 0 0 0.737255 0 0 0 0 0.556863 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_22399"
/>
</filter>
<linearGradient
id="paint0_linear_18_22399"
x1={4.07973}
y1={24.7014}
x2={6.02575}
y2={29.0221}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3FB171" />
<stop offset={1} stopColor="#449B8E" />
</linearGradient>
<linearGradient
id="paint1_linear_18_22399"
x1={7.79687}
y1={24.7014}
x2={7.07813}
y2={25.5547}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.245571} stopColor="#35B27D" />
<stop offset={1} stopColor="#35B27D" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint2_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(2.53882 28.8203) rotate(5.2935) scale(2.03235 2.06882)"
>
<stop stopColor="#4AB480" />
<stop offset={1} stopColor="#4AB480" stopOpacity={0} />
</radialGradient>
<radialGradient
id="paint3_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(28.6511 13.8639) rotate(89.6424) scale(15.9323 4.11632)"
>
<stop offset={0.185967} stopColor="#DEF352" />
<stop offset={1} stopColor="#D4DB4A" />
</radialGradient>
<linearGradient
id="paint4_linear_18_22399"
x1={23.9223}
y1={16.3829}
x2={27.7672}
y2={16.0736}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#B7D44E" />
<stop offset={1} stopColor="#B7D44E" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint5_linear_18_22399"
x1={33.6672}
y1={15.7863}
x2={32.2971}
y2={15.8305}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C1CF60" />
<stop offset={1} stopColor="#C1CF60" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint6_linear_18_22399"
x1={23.125}
y1={2.38281}
x2={29.7813}
y2={8.82031}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2DDE77" />
<stop offset={0.653995} stopColor="#42E994" />
<stop offset={1} stopColor="#4FCB88" />
</linearGradient>
<radialGradient
id="paint7_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(27.8438 5.75781) rotate(133.364) scale(0.386857 2.89607)"
>
<stop stopColor="#6AFDA4" />
<stop offset={1} stopColor="#6AFDA4" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint8_linear_18_22399"
x1={23.25}
y1={2.25781}
x2={24.1562}
y2={3.13281}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#56C675" />
<stop offset={1} stopColor="#56C675" stopOpacity={0} />
</linearGradient>
<radialGradient
id="paint9_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(25 6.4765) rotate(137.07) scale(1.83526 4.66524)"
>
<stop stopColor="#554962" />
<stop offset={1} stopColor="#4F4659" />
</radialGradient>
<radialGradient
id="paint10_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.3684 21.1082) rotate(136.744) scale(2.17928 4.83397)"
>
<stop stopColor="#6E518D" />
<stop offset={1} stopColor="#593E74" />
</radialGradient>
<radialGradient
id="paint11_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.28125 23.8876) rotate(134.49) scale(2.09588 3.87398)"
>
<stop stopColor="#50D89F" />
<stop offset={1} stopColor="#41BE77" />
</radialGradient>
<radialGradient
id="paint12_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(17.328 14.9531) rotate(90) scale(2.08256 6.99919)"
>
<stop offset={0.215071} stopColor="#594A69" />
<stop offset={1} stopColor="#473F51" />
</radialGradient>
<radialGradient
id="paint13_radial_18_22399"
cx={0}
cy={0}
r={1}
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.9566 16.2976) rotate(6.42215) scale(5.60273 2.70376)"
>
<stop offset={0.221254} stopColor="#6C508B" />
<stop offset={1} stopColor="#6C508B" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
module.exports = CrayonIcon;