UNPKG

@jstnmthw/react-fluentui-emoji

Version:

Fluent Emoji SVG icons for UI react development.

597 lines (596 loc) 21.8 kB
const React = require("react"); const FaceWithMonocleIcon = ({ 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="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint0_radial_6815_5229)" /> <path d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint1_radial_6815_5229)" /> <path d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint2_radial_6815_5229)" /> <path d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint3_radial_6815_5229)" fillOpacity={0.6} /> <path d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint4_radial_6815_5229)" /> <path d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint5_radial_6815_5229)" /> <path d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint6_radial_6815_5229)" /> <path d="M15.9989 29.9978C25.3333 29.9978 29.9978 23.7303 29.9978 15.9989C29.9978 8.26751 25.3333 2 15.9989 2C6.66443 2 2 8.26751 2 15.9989C2 23.7303 6.66443 29.9978 15.9989 29.9978Z" fill="url(#paint7_radial_6815_5229)" /> <g filter="url(#filter0_f_6815_5229)"> <path d="M26.6843 25.5211L27.0149 25.1972L24.1986 21.528L22.797 23.8684L26.6843 25.5211Z" fill="url(#paint8_linear_6815_5229)" /> </g> <g filter="url(#filter1_f_6815_5229)"> <path d="M17.7911 5.78665C17.7911 5.78665 18.7696 5.00653 20.2637 5.00653C21.7578 5.00653 22.9743 5.91887 22.9743 5.91887" stroke="#D46A37" strokeOpacity={0.6} strokeWidth={1.3} strokeLinecap="round" strokeLinejoin="round" /> </g> <g filter="url(#filter2_f_6815_5229)"> <path d="M7.0011 7.82229C7.0011 7.82229 7.97955 7.04218 9.47365 7.04218C10.9677 7.04218 12.1842 7.95452 12.1842 7.95452" stroke="#AC552B" strokeOpacity={0.6} strokeWidth={1.3} strokeLinecap="round" strokeLinejoin="round" /> </g> <g filter="url(#filter3_f_6815_5229)"> <circle cx={20.3827} cy={13.0139} r={5.26279} fill="#CD6330" fillOpacity={0.6} /> </g> <g filter="url(#filter4_f_6815_5229)"> <circle cx={9.75259} cy={12.3578} r={4.10489} fill="#D56A37" fillOpacity={0.6} /> </g> <g filter="url(#filter5_f_6815_5229)"> <path fillRule="evenodd" clipRule="evenodd" d="M25.3542 11.3761C25.5119 11.3761 25.6397 11.6447 25.6397 11.9761V25.4136C25.6397 25.745 25.5119 26.0136 25.3542 26.0136C25.1965 26.0136 25.0687 25.745 25.0687 25.4136V11.9761C25.0687 11.6447 25.1965 11.3761 25.3542 11.3761Z" fill="#DF7644" /> </g> <circle cx={21.4542} cy={11.923} r={4.45312} fill="white" /> <circle cx={10.2198} cy={11.9698} r={4.21875} fill="white" /> <path fillRule="evenodd" clipRule="evenodd" d="M21.0011 8.2511C19.3438 8.2511 18.0011 9.59384 18.0011 11.2511C18.0011 12.9084 19.3438 14.2511 21.0011 14.2511C22.6584 14.2511 24.0011 12.9084 24.0011 11.2511C24.0011 9.59384 22.6584 8.2511 21.0011 8.2511ZM10.0011 8.5011C8.34384 8.5011 7.0011 9.84384 7.0011 11.5011C7.0011 13.1584 8.34384 14.5011 10.0011 14.5011C11.6584 14.5011 13.0011 13.1584 13.0011 11.5011C13.0011 9.84384 11.6584 8.5011 10.0011 8.5011Z" fill="#402A32" /> <path d="M7.9624 6.61327C7.9624 6.61327 8.83507 5.85687 10.3962 5.85687C12.0613 5.85687 13.0398 6.74549 13.0398 6.74549" stroke="url(#paint9_radial_6815_5229)" strokeWidth={1.3} strokeLinecap="round" strokeLinejoin="round" /> <path d="M18.9095 4.36892C18.9095 4.36892 19.888 3.58881 21.3821 3.58881C22.8762 3.58881 24.0927 4.50115 24.0927 4.50115" stroke="url(#paint10_radial_6815_5229)" strokeWidth={1.3} strokeLinecap="round" strokeLinejoin="round" /> <path d="M13.0977 18.6191C13.0977 18.6191 14.4487 17.5582 16.4561 18.0638C18.1286 18.485 18.9023 20.0075 18.9023 20.0075" stroke="url(#paint11_radial_6815_5229)" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" /> <path fillRule="evenodd" clipRule="evenodd" d="M27.3543 11.3761C27.6856 11.3761 27.9543 11.6447 27.9543 11.9761V25.4136C27.9543 25.745 27.6856 26.0136 27.3543 26.0136C27.0229 26.0136 26.7543 25.745 26.7543 25.4136V11.9761C26.7543 11.6447 27.0229 11.3761 27.3543 11.3761Z" fill="url(#paint12_linear_6815_5229)" /> <path fillRule="evenodd" clipRule="evenodd" d="M27.3543 11.3761C27.6856 11.3761 27.9543 11.6447 27.9543 11.9761V25.4136C27.9543 25.745 27.6856 26.0136 27.3543 26.0136C27.0229 26.0136 26.7543 25.745 26.7543 25.4136V11.9761C26.7543 11.6447 27.0229 11.3761 27.3543 11.3761Z" fill="url(#paint13_linear_6815_5229)" /> <path fillRule="evenodd" clipRule="evenodd" d="M27.3543 11.3761C27.6856 11.3761 27.9543 11.6447 27.9543 11.9761V25.4136C27.9543 25.745 27.6856 26.0136 27.3543 26.0136C27.0229 26.0136 26.7543 25.745 26.7543 25.4136V11.9761C26.7543 11.6447 27.0229 11.3761 27.3543 11.3761Z" fill="url(#paint14_linear_6815_5229)" /> <path fillRule="evenodd" clipRule="evenodd" d="M27.3573 12.9581C27.1482 13.0792 26.9557 13.2518 26.8891 13.484C26.2117 15.847 24.0349 17.5761 21.4543 17.5761C18.3321 17.5761 15.8011 15.0452 15.8011 11.923C15.8011 8.80089 18.3321 6.2699 21.4543 6.2699C24.0349 6.2699 26.2117 7.99908 26.8891 10.362C26.9557 10.5943 27.1482 10.7669 27.3573 10.888C27.7142 11.0948 27.9543 11.4809 27.9543 11.923C27.9543 12.3652 27.7142 12.7513 27.3573 12.9581ZM25.9074 11.923C25.9074 14.3824 23.9137 16.3761 21.4543 16.3761C18.9949 16.3761 17.0011 14.3824 17.0011 11.923C17.0011 9.46363 18.9949 7.4699 21.4543 7.4699C23.9137 7.4699 25.9074 9.46363 25.9074 11.923Z" fill="url(#paint15_radial_6815_5229)" /> <path fillRule="evenodd" clipRule="evenodd" d="M27.3573 12.9581C27.1482 13.0792 26.9557 13.2518 26.8891 13.484C26.2117 15.847 24.0349 17.5761 21.4543 17.5761C18.3321 17.5761 15.8011 15.0452 15.8011 11.923C15.8011 8.80089 18.3321 6.2699 21.4543 6.2699C24.0349 6.2699 26.2117 7.99908 26.8891 10.362C26.9557 10.5943 27.1482 10.7669 27.3573 10.888C27.7142 11.0948 27.9543 11.4809 27.9543 11.923C27.9543 12.3652 27.7142 12.7513 27.3573 12.9581ZM25.9074 11.923C25.9074 14.3824 23.9137 16.3761 21.4543 16.3761C18.9949 16.3761 17.0011 14.3824 17.0011 11.923C17.0011 9.46363 18.9949 7.4699 21.4543 7.4699C23.9137 7.4699 25.9074 9.46363 25.9074 11.923Z" fill="url(#paint16_linear_6815_5229)" /> <path fillRule="evenodd" clipRule="evenodd" d="M27.3573 12.9581C27.1482 13.0792 26.9557 13.2518 26.8891 13.484C26.2117 15.847 24.0349 17.5761 21.4543 17.5761C18.3321 17.5761 15.8011 15.0452 15.8011 11.923C15.8011 8.80089 18.3321 6.2699 21.4543 6.2699C24.0349 6.2699 26.2117 7.99908 26.8891 10.362C26.9557 10.5943 27.1482 10.7669 27.3573 10.888C27.7142 11.0948 27.9543 11.4809 27.9543 11.923C27.9543 12.3652 27.7142 12.7513 27.3573 12.9581ZM25.9074 11.923C25.9074 14.3824 23.9137 16.3761 21.4543 16.3761C18.9949 16.3761 17.0011 14.3824 17.0011 11.923C17.0011 9.46363 18.9949 7.4699 21.4543 7.4699C23.9137 7.4699 25.9074 9.46363 25.9074 11.923Z" fill="url(#paint17_radial_6815_5229)" /> <path fillRule="evenodd" clipRule="evenodd" d="M27.3573 12.9581C27.1482 13.0792 26.9557 13.2518 26.8891 13.484C26.2117 15.847 24.0349 17.5761 21.4543 17.5761C18.3321 17.5761 15.8011 15.0452 15.8011 11.923C15.8011 8.80089 18.3321 6.2699 21.4543 6.2699C24.0349 6.2699 26.2117 7.99908 26.8891 10.362C26.9557 10.5943 27.1482 10.7669 27.3573 10.888C27.7142 11.0948 27.9543 11.4809 27.9543 11.923C27.9543 12.3652 27.7142 12.7513 27.3573 12.9581ZM25.9074 11.923C25.9074 14.3824 23.9137 16.3761 21.4543 16.3761C18.9949 16.3761 17.0011 14.3824 17.0011 11.923C17.0011 9.46363 18.9949 7.4699 21.4543 7.4699C23.9137 7.4699 25.9074 9.46363 25.9074 11.923Z" fill="url(#paint18_radial_6815_5229)" /> <g filter="url(#filter6_f_6815_5229)"> <circle cx={21.4542} cy={11.923} r={5.19375} stroke="url(#paint19_linear_6815_5229)" strokeWidth={0.2} /> </g> <g filter="url(#filter7_f_6815_5229)"> <ellipse cx={27.1136} cy={11.5714} rx={0.58125} ry={0.53125} transform="rotate(44.538 27.1136 11.5714)" fill="url(#paint20_linear_6815_5229)" /> </g> <defs> <filter id="filter0_f_6815_5229" x={22.297} y={21.028} width={5.2179} height={4.9931} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={0.25} result="effect1_foregroundBlur_6815_5229" /> </filter> <filter id="filter1_f_6815_5229" x={15.1411} y={2.35651} width={10.4832} height={6.2124} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={1} result="effect1_foregroundBlur_6815_5229" /> </filter> <filter id="filter2_f_6815_5229" x={4.35107} y={4.39215} width={10.4832} height={6.2124} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={1} result="effect1_foregroundBlur_6815_5229" /> </filter> <filter id="filter3_f_6815_5229" x={14.1199} y={6.7511} width={12.5256} height={12.5256} 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_6815_5229" /> </filter> <filter id="filter4_f_6815_5229" x={4.64771} y={7.25287} width={10.2098} height={10.2098} 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_6815_5229" /> </filter> <filter id="filter5_f_6815_5229" x={23.0687} y={9.3761} width={4.57104} height={18.6375} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={1} result="effect1_foregroundBlur_6815_5229" /> </filter> <filter id="filter6_f_6815_5229" x={15.8605} y={6.32921} width={11.1874} height={11.1875} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={0.15} result="effect1_foregroundBlur_6815_5229" /> </filter> <filter id="filter7_f_6815_5229" x={26.3064} y={10.765} width={1.61438} height={1.61285} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={0.125} result="effect1_foregroundBlur_6815_5229" /> </filter> <radialGradient id="paint0_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(25.5 9) rotate(132.839) scale(37.5033)" > <stop stopColor="#FFF478" /> <stop offset={0.474827} stopColor="#FFB02E" /> <stop offset={1} stopColor="#F70A8D" /> </radialGradient> <radialGradient id="paint1_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(25.5 9) rotate(131.878) scale(38.9487)" > <stop stopColor="#FFF478" /> <stop offset={0.474827} stopColor="#FFB02E" /> <stop offset={1} stopColor="#F70A8D" /> </radialGradient> <radialGradient id="paint2_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(16 12.5) rotate(101.31) scale(17.8466 22.8581)" > <stop offset={0.787821} stopColor="#F59639" stopOpacity={0} /> <stop offset={0.972509} stopColor="#FF7DCE" /> </radialGradient> <radialGradient id="paint3_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(18 14) rotate(135) scale(41.0122)" > <stop offset={0.314853} stopOpacity={0} /> <stop offset={1} /> </radialGradient> <radialGradient id="paint4_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(16 17) rotate(77.692) scale(28.1469)" > <stop offset={0.507903} stopColor="#7D6133" stopOpacity={0} /> <stop offset={1} stopColor="#715B32" /> </radialGradient> <radialGradient id="paint5_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(16.5 16.5) rotate(55.7131) scale(13.3135 9.65032)" > <stop stopColor="#FFB849" /> <stop offset={1} stopColor="#FFB847" stopOpacity={0} /> </radialGradient> <radialGradient id="paint6_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(20.5 18) rotate(9.86581) scale(11.6726)" > <stop stopColor="#FFA64B" /> <stop offset={0.900412} stopColor="#FFAE46" stopOpacity={0} /> </radialGradient> <radialGradient id="paint7_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(17.5 15) rotate(43.9708) scale(59.0529)" > <stop offset={0.185425} stopOpacity={0} /> <stop offset={1} stopOpacity={0.4} /> </radialGradient> <linearGradient id="paint8_linear_6815_5229" x1={26.486} y1={26.4996} x2={24.8464} y2={24.9923} gradientUnits="userSpaceOnUse" > <stop stopColor="#B95A2D" /> <stop offset={1} stopColor="#D46A37" stopOpacity={0} /> </linearGradient> <radialGradient id="paint9_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(11.3067 8.06772) rotate(-82.5602) scale(7.7607 15.5933)" > <stop offset={0.069602} stopColor="#2E1529" /> <stop offset={0.29711} stopColor="#5F4357" /> <stop offset={0.437882} stopColor="#4B2744" /> </radialGradient> <radialGradient id="paint10_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(21.1706 5.37043) rotate(-90.9301) scale(6.55912 12.1858)" > <stop offset={0.069602} stopColor="#2E1529" /> <stop offset={0.29711} stopColor="#5F4357" /> <stop offset={0.437882} stopColor="#4B2744" /> </radialGradient> <radialGradient id="paint11_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(15.5106 22.1285) rotate(-79.2045) scale(15.0157 16.295)" > <stop offset={0.069602} stopColor="#2E1529" /> <stop offset={0.29711} stopColor="#5F4357" /> <stop offset={0.437882} stopColor="#4B2744" /> </radialGradient> <linearGradient id="paint12_linear_6815_5229" x1={27.2924} y1={12.3761} x2={23.6799} y2={13.0773} gradientUnits="userSpaceOnUse" > <stop stopColor="#CAC6D5" /> <stop offset={1} stopColor="#B9B2C1" /> </linearGradient> <linearGradient id="paint13_linear_6815_5229" x1={27.9543} y1={19.4698} x2={26.1261} y2={19.4698} gradientUnits="userSpaceOnUse" > <stop stopColor="#8C8693" stopOpacity={0} /> <stop offset={1} stopColor="#8C8693" /> </linearGradient> <linearGradient id="paint14_linear_6815_5229" x1={28.4386} y1={8.1886} x2={24.3078} y2={9.03854} gradientUnits="userSpaceOnUse" > <stop offset={0.67927} stopColor="#B08CD2" stopOpacity={0} /> <stop offset={1} stopColor="#BB96DE" /> </linearGradient> <radialGradient id="paint15_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(24.6886 10.5636) rotate(116.114) scale(7.80971 8.39468)" > <stop stopColor="#A09DA8" /> <stop offset={1} stopColor="#938D9A" /> </radialGradient> <linearGradient id="paint16_linear_6815_5229" x1={22.8136} y1={13.0949} x2={27.9543} y2={19.0011} gradientUnits="userSpaceOnUse" > <stop stopColor="#8C8693" stopOpacity={0} /> <stop offset={1} stopColor="#8C8693" /> </linearGradient> <radialGradient id="paint17_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(22.5324 7.8449) rotate(106.682) scale(9.68901 9.47937)" > <stop offset={0.67927} stopColor="#987AB5" stopOpacity={0} /> <stop offset={1} stopColor="#987AB5" /> </radialGradient> <radialGradient id="paint18_radial_6815_5229" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(21.1886 15.7511) rotate(-62.4364) scale(6.41569 11.6401)" > <stop stopColor="#837890" /> <stop offset={0.208333} stopColor="#837890" stopOpacity={0} /> </radialGradient> <linearGradient id="paint19_linear_6815_5229" x1={24.6358} y1={6.43359} x2={21.7015} y2={14.3132} gradientUnits="userSpaceOnUse" > <stop stopColor="#B5AEBE" /> <stop offset={1} stopColor="#B5AEBE" stopOpacity={0} /> </linearGradient> <linearGradient id="paint20_linear_6815_5229" x1={26.9228} y1={10.981} x2={27.0199} y2={12.1826} gradientUnits="userSpaceOnUse" > <stop stopColor="#B5AEBE" /> <stop offset={1} stopColor="#B5AEBE" stopOpacity={0} /> </linearGradient> </defs> </svg> ); module.exports = FaceWithMonocleIcon;