UNPKG

@jstnmthw/react-fluentui-emoji

Version:

Fluent Emoji SVG icons for UI react development.

301 lines (300 loc) 11.7 kB
const React = require("react"); const CoolButtonIcon = ({ 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_18590_2340)"> <rect x={1.93433} y={2.1875} width={27.875} height={27.875} rx={3.6} fill="url(#paint0_linear_18590_2340)" /> <rect x={1.93433} y={2.1875} width={27.875} height={27.875} rx={3.6} fill="url(#paint1_radial_18590_2340)" /> </g> <g filter="url(#filter1_f_18590_2340)"> <path d="M28.1218 4.6875V27.5625" stroke="url(#paint2_linear_18590_2340)" strokeWidth={1.5} strokeLinecap="round" /> </g> <g filter="url(#filter2_f_18590_2340)"> <path d="M5.39819 4H27.1794" stroke="url(#paint3_linear_18590_2340)" strokeWidth={1.5} strokeLinecap="round" /> </g> <g filter="url(#filter3_f_18590_2340)"> <path d="M7.38221 12.3694C5.94419 12.3694 4.77844 13.5351 4.77844 14.9732V17.337C4.77844 18.7356 5.91223 19.8694 7.31083 19.8694C8.31091 19.8694 9.21732 19.2808 9.62418 18.3673L9.71926 18.1538C9.88778 17.7754 9.71765 17.332 9.33926 17.1635C8.96087 16.995 8.51752 17.1651 8.34901 17.5435L8.25393 17.757C8.08806 18.1294 7.71854 18.3694 7.31083 18.3694C6.74066 18.3694 6.27844 17.9072 6.27844 17.337V14.9732C6.27844 14.3636 6.77262 13.8694 7.38221 13.8694C7.78155 13.8694 8.14975 14.0851 8.34502 14.4334L8.37992 14.4957C8.58247 14.857 9.03957 14.9857 9.40088 14.7831C9.76219 14.5806 9.8909 14.1235 9.68835 13.7622L9.65345 13.6999C9.19281 12.8782 8.32424 12.3694 7.38221 12.3694Z" fill="#579FFF" /> <path d="M13.425 12.3807C11.9753 12.3807 10.8 13.5559 10.8 15.0057V17.2557C10.8 18.7054 11.9753 19.8807 13.425 19.8807C14.8748 19.8807 16.05 18.7054 16.05 17.2557V15.0057C16.05 13.5559 14.8748 12.3807 13.425 12.3807ZM12.3 15.0057C12.3 14.3844 12.8037 13.8807 13.425 13.8807C14.0464 13.8807 14.55 14.3844 14.55 15.0057V17.2557C14.55 17.877 14.0464 18.3807 13.425 18.3807C12.8037 18.3807 12.3 17.877 12.3 17.2557V15.0057Z" fill="#579FFF" /> <path d="M17.0594 15.0057C17.0594 13.5559 18.2347 12.3807 19.6844 12.3807C21.1342 12.3807 22.3094 13.5559 22.3094 15.0057V17.2557C22.3094 18.7054 21.1342 19.8807 19.6844 19.8807C18.2347 19.8807 17.0594 18.7054 17.0594 17.2557V15.0057ZM19.6844 13.8807C19.0631 13.8807 18.5594 14.3844 18.5594 15.0057V17.2557C18.5594 17.877 19.0631 18.3807 19.6844 18.3807C20.3058 18.3807 20.8094 17.877 20.8094 17.2557V15.0057C20.8094 14.3844 20.3058 13.8807 19.6844 13.8807Z" fill="#579FFF" /> <path d="M24.7943 13.2031C24.7943 12.7889 24.4585 12.4531 24.0443 12.4531C23.6301 12.4531 23.2943 12.7889 23.2943 13.2031V19.13C23.2943 19.5442 23.6301 19.88 24.0443 19.88H27.0492C27.4634 19.88 27.7992 19.5442 27.7992 19.13C27.7992 18.7158 27.4634 18.38 27.0492 18.38H24.8943C24.8391 18.38 24.7943 18.3352 24.7943 18.28V13.2031Z" fill="#579FFF" /> </g> <g filter="url(#filter4_ii_18590_2340)"> <path d="M7.38221 12.3694C5.94419 12.3694 4.77844 13.5351 4.77844 14.9732V17.337C4.77844 18.7356 5.91223 19.8694 7.31083 19.8694C8.31091 19.8694 9.21732 19.2808 9.62418 18.3673L9.71926 18.1538C9.88778 17.7754 9.71765 17.332 9.33926 17.1635C8.96087 16.995 8.51752 17.1651 8.34901 17.5435L8.25393 17.757C8.08806 18.1294 7.71854 18.3694 7.31083 18.3694C6.74066 18.3694 6.27844 17.9072 6.27844 17.337V14.9732C6.27844 14.3636 6.77262 13.8694 7.38221 13.8694C7.78155 13.8694 8.14975 14.0851 8.34502 14.4334L8.37992 14.4957C8.58247 14.857 9.03957 14.9857 9.40088 14.7831C9.76219 14.5806 9.8909 14.1235 9.68835 13.7622L9.65345 13.6999C9.19281 12.8782 8.32424 12.3694 7.38221 12.3694Z" fill="#FCF2FF" /> <path d="M13.425 12.3807C11.9753 12.3807 10.8 13.5559 10.8 15.0057V17.2557C10.8 18.7054 11.9753 19.8807 13.425 19.8807C14.8748 19.8807 16.05 18.7054 16.05 17.2557V15.0057C16.05 13.5559 14.8748 12.3807 13.425 12.3807ZM12.3 15.0057C12.3 14.3844 12.8037 13.8807 13.425 13.8807C14.0464 13.8807 14.55 14.3844 14.55 15.0057V17.2557C14.55 17.877 14.0464 18.3807 13.425 18.3807C12.8037 18.3807 12.3 17.877 12.3 17.2557V15.0057Z" fill="#FCF2FF" /> <path d="M17.0594 15.0057C17.0594 13.5559 18.2347 12.3807 19.6844 12.3807C21.1342 12.3807 22.3094 13.5559 22.3094 15.0057V17.2557C22.3094 18.7054 21.1342 19.8807 19.6844 19.8807C18.2347 19.8807 17.0594 18.7054 17.0594 17.2557V15.0057ZM19.6844 13.8807C19.0631 13.8807 18.5594 14.3844 18.5594 15.0057V17.2557C18.5594 17.877 19.0631 18.3807 19.6844 18.3807C20.3058 18.3807 20.8094 17.877 20.8094 17.2557V15.0057C20.8094 14.3844 20.3058 13.8807 19.6844 13.8807Z" fill="#FCF2FF" /> <path d="M24.7943 13.2031C24.7943 12.7889 24.4585 12.4531 24.0443 12.4531C23.6301 12.4531 23.2943 12.7889 23.2943 13.2031V19.13C23.2943 19.5442 23.6301 19.88 24.0443 19.88H27.0492C27.4634 19.88 27.7992 19.5442 27.7992 19.13C27.7992 18.7158 27.4634 18.38 27.0492 18.38H24.8943C24.8391 18.38 24.7943 18.3352 24.7943 18.28V13.2031Z" fill="#FCF2FF" /> </g> <defs> <filter id="filter0_ii_18590_2340" x={1.93433} y={1.1875} width={28.875} height={28.875} 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={1} dy={-1} /> <feGaussianBlur stdDeviation={1.5} /> <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} /> <feColorMatrix type="matrix" values="0 0 0 0 0.188235 0 0 0 0 0.470588 0 0 0 0 0.843137 0 0 0 1 0" /> <feBlend mode="normal" in2="shape" result="effect1_innerShadow_18590_2340" /> <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={-1} /> <feGaussianBlur stdDeviation={1.5} /> <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} /> <feColorMatrix type="matrix" values="0 0 0 0 0.27451 0 0 0 0 0.34902 0 0 0 0 0.8 0 0 0 1 0" /> <feBlend mode="normal" in2="effect1_innerShadow_18590_2340" result="effect2_innerShadow_18590_2340" /> </filter> <filter id="filter1_f_18590_2340" x={25.3718} y={1.9375} width={5.5} height={28.375} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={1} result="effect1_foregroundBlur_18590_2340" /> </filter> <filter id="filter2_f_18590_2340" x={2.64819} y={1.25} width={27.2812} height={5.5} filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> <feGaussianBlur stdDeviation={1} result="effect1_foregroundBlur_18590_2340" /> </filter> <filter id="filter3_f_18590_2340" x={3.77844} y={11.3694} width={25.0208} height={9.51129} 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_18590_2340" /> </filter> <filter id="filter4_ii_18590_2340" x={3.77844} y={11.9694} width={24.4208} height={8.91129} 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={-1} dy={1} /> <feGaussianBlur stdDeviation={1} /> <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} /> <feColorMatrix type="matrix" values="0 0 0 0 0.866667 0 0 0 0 0.819608 0 0 0 0 0.941176 0 0 0 1 0" /> <feBlend mode="normal" in2="shape" result="effect1_innerShadow_18590_2340" /> <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.4} /> <feGaussianBlur stdDeviation={0.5} /> <feComposite in2="hardAlpha" operator="arithmetic" k2={-1} k3={1} /> <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.988235 0 0 0 0 1 0 0 0 1 0" /> <feBlend mode="normal" in2="effect1_innerShadow_18590_2340" result="effect2_innerShadow_18590_2340" /> </filter> <linearGradient id="paint0_linear_18590_2340" x1={15.8718} y1={5.76201} x2={15.8718} y2={39.0147} gradientUnits="userSpaceOnUse" > <stop stopColor="#5CB7FF" /> <stop offset={1} stopColor="#4878DD" /> </linearGradient> <radialGradient id="paint1_radial_18590_2340" cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" gradientTransform="translate(27.5906 4.28125) rotate(136.771) scale(2.14444 2.50466)" > <stop stopColor="#7BD7FF" /> <stop offset={1} stopColor="#7BD7FF" stopOpacity={0} /> </radialGradient> <linearGradient id="paint2_linear_18590_2340" x1={28.6218} y1={4.6875} x2={28.6218} y2={27.5625} gradientUnits="userSpaceOnUse" > <stop stopColor="#7FD9FF" /> <stop offset={1} stopColor="#639DF4" /> </linearGradient> <linearGradient id="paint3_linear_18590_2340" x1={28.3357} y1={4.25002} x2={2.80444} y2={4.25002} gradientUnits="userSpaceOnUse" > <stop stopColor="#7DD8FF" /> <stop offset={1} stopColor="#5DB6FF" /> </linearGradient> </defs> </svg> ); module.exports = CoolButtonIcon;