@jstnmthw/react-fluentui-emoji
Version:
Fluent Emoji SVG icons for UI react development.
566 lines (565 loc) • 18.5 kB
JSX
const React = require("react");
const KaabaIcon = ({ 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="M30 7.72031C30 7.61758 29.9372 7.5253 29.8416 7.48768L16 2.04004V29.96L29.8414 24.5223C29.9371 24.4848 30 24.3924 30 24.2897V7.72031Z"
fill="url(#paint0_linear_18_7454)"
/>
<path
d="M30 7.72031C30 7.61758 29.9372 7.5253 29.8416 7.48768L16 2.04004V29.96L29.8414 24.5223C29.9371 24.4848 30 24.3924 30 24.2897V7.72031Z"
fill="url(#paint1_linear_18_7454)"
/>
<path
d="M2 7.72031C2 7.61758 2.06285 7.5253 2.15844 7.48768L16 2.04004V29.96L2.15859 24.5223C2.06292 24.4848 2 24.3924 2 24.2897V7.72031Z"
fill="url(#paint2_linear_18_7454)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 14.45L16 14.33H16.21L30 14.04V12.04L17.28 10.45C16.86 10.4 16.43 10.37 16 10.37C15.57 10.37 15.14 10.4 14.72 10.45L2 12.04V14.45Z"
fill="url(#paint3_linear_18_7454)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 14.45L16 14.33H16.21L30 14.04V12.04L17.28 10.45C16.86 10.4 16.43 10.37 16 10.37C15.57 10.37 15.14 10.4 14.72 10.45L2 12.04V14.45Z"
fill="url(#paint4_linear_18_7454)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 14.45L16 14.33H16.21L30 14.04V12.04L17.28 10.45C16.86 10.4 16.43 10.37 16 10.37C15.57 10.37 15.14 10.4 14.72 10.45L2 12.04V14.45Z"
fill="url(#paint5_linear_18_7454)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 14.45L16 14.33H16.21L30 14.04V12.04L17.28 10.45C16.86 10.4 16.43 10.37 16 10.37C15.57 10.37 15.14 10.4 14.72 10.45L2 12.04V14.45Z"
fill="url(#paint6_linear_18_7454)"
/>
<g filter="url(#filter0_i_18_7454)">
<path
d="M28.45 18.04L28.94 17.26C29.02 17.13 29.02 16.95 28.94 16.84L28.45 16.18C28.37 16.07 28.23 16.08 28.15 16.21L27.63 16.99C27.54 17.12 27.54 17.32 27.63 17.43L28.15 18.09C28.23 18.19 28.37 18.17 28.45 18.04Z"
fill="#FFCD56"
/>
<path
d="M28.45 18.04L28.94 17.26C29.02 17.13 29.02 16.95 28.94 16.84L28.45 16.18C28.37 16.07 28.23 16.08 28.15 16.21L27.63 16.99C27.54 17.12 27.54 17.32 27.63 17.43L28.15 18.09C28.23 18.19 28.37 18.17 28.45 18.04Z"
fill="url(#paint7_linear_18_7454)"
/>
</g>
<g filter="url(#filter1_ii_18_7454)">
<path
d="M26.8 17.76V16.86C26.8 16.51 26.59 16.25 26.33 16.27L23.82 16.47C23.51 16.5 23.25 16.83 23.25 17.22V18.23C23.25 18.62 23.51 18.9 23.82 18.85L26.33 18.47C26.59 18.42 26.8 18.11 26.8 17.76Z"
fill="url(#paint8_linear_18_7454)"
/>
</g>
<g filter="url(#filter2_ii_18_7454)">
<path
d="M20.9 19.18L20.08 18.37C19.94 18.23 19.94 17.98 20.08 17.81L20.9 16.81C21.03 16.65 21.24 16.63 21.37 16.77L22.13 17.58C22.25 17.71 22.25 17.95 22.13 18.11L21.37 19.1C21.24 19.28 21.03 19.31 20.9 19.18Z"
fill="#FFCF60"
/>
</g>
<g filter="url(#filter3_i_18_7454)">
<path
d="M3.85 18.08L4.37 17.42C4.46 17.31 4.46 17.11 4.37 16.98L3.85 16.2C3.77 16.07 3.63 16.06 3.55 16.17L3.06 16.84C2.98 16.95 2.98 17.14 3.06 17.26L3.55 18.04C3.63 18.17 3.77 18.19 3.85 18.08Z"
fill="url(#paint9_linear_18_7454)"
/>
</g>
<g filter="url(#filter4_ii_18_7454)">
<path
d="M5.68006 18.46L8.19006 18.84C8.50006 18.89 8.76006 18.61 8.76006 18.22V17.21C8.76006 16.82 8.50006 16.48 8.19006 16.46L5.68006 16.26C5.42006 16.24 5.21006 16.5 5.21006 16.85V17.75C5.20006 18.11 5.41006 18.42 5.68006 18.46Z"
fill="url(#paint10_linear_18_7454)"
/>
</g>
<g filter="url(#filter5_ii_18_7454)">
<path
d="M16 20.04L14.02 19.72C13.6 19.65 13.26 19.24 13.26 18.8V17.66C13.26 17.22 13.6 16.89 14.02 16.92L16 17.1L17.98 16.92C18.4 16.89 18.74 17.22 18.74 17.66V18.8C18.74 19.24 18.4 19.65 17.98 19.72L16 20.04Z"
fill="url(#paint11_linear_18_7454)"
/>
</g>
<g filter="url(#filter6_i_18_7454)">
<path
d="M10.63 19.11L9.87003 18.12C9.75003 17.96 9.75003 17.73 9.87003 17.59L10.63 16.78C10.76 16.64 10.97 16.66 11.1 16.82L11.92 17.82C12.06 17.99 12.06 18.24 11.92 18.38L11.1 19.18C10.97 19.31 10.76 19.28 10.63 19.11Z"
fill="url(#paint12_linear_18_7454)"
/>
</g>
<defs>
<filter
id="filter0_i_18_7454"
x={27.1625}
y={16.1044}
width={1.8375}
height={2.04883}
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} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.780392 0 0 0 0 0.482353 0 0 0 0 0.117647 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_7454"
/>
</filter>
<filter
id="filter1_ii_18_7454"
x={22.85}
y={15.8689}
width={4.09999}
height={3.28691}
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.4} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.87451 0 0 0 0 0.164706 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_7454"
/>
<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.3} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.780392 0 0 0 0 0.482353 0 0 0 0 0.117647 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_7454"
result="effect2_innerShadow_18_7454"
/>
</filter>
<filter
id="filter2_ii_18_7454"
x={19.575}
y={16.5264}
width={2.795}
height={2.7335}
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.125} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.921569 0 0 0 0 0.435294 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_7454"
/>
<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} />
<feGaussianBlur stdDeviation={0.2} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.780392 0 0 0 0 0.482353 0 0 0 0 0.117647 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_7454"
result="effect2_innerShadow_18_7454"
/>
</filter>
<filter
id="filter3_i_18_7454"
x={3}
y={16.0944}
width={1.6875}
height={2.05701}
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} />
<feGaussianBlur stdDeviation={0.125} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.745098 0 0 0 0 0.439216 0 0 0 0 0.0901961 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_7454"
/>
</filter>
<filter
id="filter4_ii_18_7454"
x={4.95972}
y={16.1089}
width={4.05029}
height={2.88691}
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.25} dy={0.15} />
<feGaussianBlur stdDeviation={0.275} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.54902 0 0 0 0 0.317647 0 0 0 0 0.117647 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_7454"
/>
<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.25} 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.921569 0 0 0 0 0.607843 0 0 0 0 0.164706 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_7454"
result="effect2_innerShadow_18_7454"
/>
</filter>
<filter
id="filter5_ii_18_7454"
x={13.01}
y={16.6681}
width={5.97998}
height={3.62195}
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.25} dy={-0.25} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.960784 0 0 0 0 0.709804 0 0 0 0 0.141176 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_7454"
/>
<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.25} dy={0.25} />
<feGaussianBlur stdDeviation={0.25} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.780392 0 0 0 0 0.482353 0 0 0 0 0.117647 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="effect1_innerShadow_18_7454"
result="effect2_innerShadow_18_7454"
/>
</filter>
<filter
id="filter6_i_18_7454"
x={9.78003}
y={16.6864}
width={2.545}
height={2.57422}
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.3} />
<feGaussianBlur stdDeviation={0.3} />
<feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.960784 0 0 0 0 0.647059 0 0 0 0 0.145098 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_18_7454"
/>
</filter>
<linearGradient
id="paint0_linear_18_7454"
x1={16}
y1={16.0017}
x2={30}
y2={16.0017}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#525054" />
<stop offset={1} stopColor="#655B6F" />
</linearGradient>
<linearGradient
id="paint1_linear_18_7454"
x1={25.2813}
y1={26.4775}
x2={25.1758}
y2={26.2002}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.200591} stopColor="#382C43" />
<stop offset={1} stopColor="#382C43" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint2_linear_18_7454"
x1={14.7096}
y1={14.3577}
x2={4.53051}
y2={17.3151}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2D292F" />
<stop offset={1} stopColor="#34293B" />
</linearGradient>
<linearGradient
id="paint3_linear_18_7454"
x1={2}
y1={12.4133}
x2={30}
y2={12.4133}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.0965955} stopColor="#BD7A28" />
<stop offset={0.493659} stopColor="#DC9F36" />
<stop offset={0.513222} stopColor="#FFD060" />
<stop offset={0.996509} stopColor="#FFEB61" />
</linearGradient>
<linearGradient
id="paint4_linear_18_7454"
x1={16}
y1={10.1015}
x2={16}
y2={11.4405}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#AD672D" />
<stop offset={1} stopColor="#AD672D" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint5_linear_18_7454"
x1={18.7033}
y1={10.1015}
x2={18.5816}
y2={11.3594}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#AD672D" />
<stop offset={1} stopColor="#AD672D" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint6_linear_18_7454"
x1={13.2256}
y1={10.37}
x2={13.3067}
y2={11.1971}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#AD672D" />
<stop offset={1} stopColor="#AD672D" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint7_linear_18_7454"
x1={27.9375}
y1={17.9619}
x2={28.2813}
y2={17.6025}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFED64" />
<stop offset={1} stopColor="#FFED64" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint8_linear_18_7454"
x1={23.5938}
y1={18.8558}
x2={27.4688}
y2={17.7587}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFE964" />
<stop offset={1} stopColor="#FFCE5B" />
</linearGradient>
<linearGradient
id="paint9_linear_18_7454"
x1={4.4375}
y1={16.5852}
x2={3.34903}
y2={17.7354}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#79350B" />
<stop offset={1} stopColor="#A76226" />
</linearGradient>
<linearGradient
id="paint10_linear_18_7454"
x1={5.20972}
y1={17.5523}
x2={9.50663}
y2={17.9084}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C87D26" />
<stop offset={1} stopColor="#A66826" />
</linearGradient>
<linearGradient
id="paint11_linear_18_7454"
x1={13.26}
y1={18.066}
x2={18.74}
y2={18.066}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFC463" />
<stop offset={0.134403} stopColor="#D59430" />
<stop offset={0.471302} stopColor="#DA9C32" />
<stop offset={0.541643} stopColor="#FFD465" />
<stop offset={0.87484} stopColor="#FFC15E" />
<stop offset={1} stopColor="#E5A645" />
</linearGradient>
<linearGradient
id="paint12_linear_18_7454"
x1={10.4688}
y1={18.54}
x2={12.025}
y2={17.2275}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#BF7B2A" />
<stop offset={1} stopColor="#A35F28" />
</linearGradient>
</defs>
</svg>
);
module.exports = KaabaIcon;