diff --git a/src/chat/components/ChatHeader/styles.tsx b/src/chat/components/ChatHeader/styles.tsx index 72a502e90..ccc2e6f97 100644 --- a/src/chat/components/ChatHeader/styles.tsx +++ b/src/chat/components/ChatHeader/styles.tsx @@ -1,14 +1,11 @@ import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faBars } from '@fortawesome/free-solid-svg-icons'; import { ReactNode } from 'react'; +import { BarsIcon } from '~/icons'; -export const DetailsIcon = styled(FaIcon).attrs<{ icon?: ReactNode }>({ - icon: faBars, - width: 16, - height: 16, +export const DetailsIcon = styled(BarsIcon).attrs<{ icon?: ReactNode }>({ + width: 24, + height: 24, })` - font-size: 16px; cursor: pointer; fill: ${({ theme }) => theme.palette.neutral.main}; align-self: center; diff --git a/src/icons/Add.tsx b/src/icons/Add.tsx new file mode 100644 index 000000000..d57eca5e2 --- /dev/null +++ b/src/icons/Add.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + + ); +} + +export default Icon; diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx index c2eb4f9c5..0ae9ad501 100644 --- a/src/icons/ArrowLeft.tsx +++ b/src/icons/ArrowLeft.tsx @@ -1,9 +1,22 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ArrowLeft = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faArrowLeft })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default ArrowLeft; diff --git a/src/icons/ArrowLeftCircle.tsx b/src/icons/ArrowLeftCircle.tsx new file mode 100644 index 000000000..107cff7fd --- /dev/null +++ b/src/icons/ArrowLeftCircle.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/ArrowLeftCircle2.tsx b/src/icons/ArrowLeftCircle2.tsx new file mode 100644 index 000000000..71c6cc047 --- /dev/null +++ b/src/icons/ArrowLeftCircle2.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + + ); +} + +export default Icon; diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx index f2fe8cb77..88ce670aa 100644 --- a/src/icons/ArrowRight.tsx +++ b/src/icons/ArrowRight.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const ArrowRight = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default ArrowRight; export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.46094 6.33203C1.63281 6.33203 1.77344 6.26172 1.97656 6.16406L6.82422 3.82812C7.18359 3.65234 7.33594 3.45312 7.33594 3.18359C7.33594 2.91406 7.18359 2.71484 6.82422 2.53906L1.97656 0.203125C1.77344 0.105469 1.62891 0.0351562 1.45703 0.0351562C1.12109 0.0351562 0.863281 0.292969 0.863281 0.714844L0.867188 5.65625C0.867188 6.07422 1.125 6.33203 1.46094 6.33203Z' fill='%23636878' /%3E%3C/svg%3E");`; diff --git a/src/icons/ArrowRightCircle.tsx b/src/icons/ArrowRightCircle.tsx new file mode 100644 index 000000000..82408ea6a --- /dev/null +++ b/src/icons/ArrowRightCircle.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/Balloon.tsx b/src/icons/Balloon.tsx index d3c2427f2..1b84a0e1a 100644 --- a/src/icons/Balloon.tsx +++ b/src/icons/Balloon.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Balloon = (props: React.SVGProps) => ( @@ -30,6 +30,6 @@ const Svg = (props: React.SVGProps) => ( ); -export default Svg; +export default Balloon; export const backgroundImage = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='262' height='243' fill='none' viewBox='0 0 262 243'%3E%3Cg rel='balloon'%3E%3Cpath fill='%23BCF7FC' d='M104 149l-11 4 10 32 17 17-16-53z'/%3E%3Cpath fill='%2397E4FD' d='M162 174l5 11-31 15-24-2 50-24z'/%3E%3Cpath fill='%23E8F7F4' d='M190 32a78 78 0 00-109 76l43 45 66-121z'/%3E%3Cpath fill='%23231F20' d='M190 32l-45 131 62 1a78 78 0 00-17-132z'/%3E%3Cpath fill='%23EC95AD' d='M190 32l-66 121 52-3c7-9 13-20 18-31 17-39 16-78-4-87z'/%3E%3Cpath fill='%234A82F2' d='M190 32c-20-9-50 16-67 56-5 11-9 23-10 34l21 36 56-126z'/%3E%3Cpath fill='%234CBEFF' d='M130 169l37 16 25-11 15-10-63-28-22 10 8 23z'/%3E%3Cpath fill='%2371D1FE' d='M81 108l3 18 9 27 37 16 14-33-63-28z'/%3E%3Cpath fill='%23231F20' d='M136 200l-17-8-13 10 2 16 16 7 12-25z'/%3E%3Cpath fill='%23EC95AD' d='M103 185l16 7-11 26-16-7 11-26z'/%3E%3C/g%3E%3Cg rel='heart'%3E%3Cpath fill='%23D9E5FC' fill-rule='evenodd' d='M54 89c4-5 6-11 6-17 0-15-13-28-29-28C16 44 3 57 3 72s13 28 28 28c7 0 13-2 17-5l12 3-6-9z' clip-rule='evenodd'/%3E%3Cpath fill='%231054DE' d='M24 61c3 0 6 2 7 4 2-2 4-4 7-4 5 0 9 4 9 8 0 11-16 17-16 17s-15-6-15-17c0-4 4-8 8-8z'/%3E%3C/g%3E%3C/svg%3E")`; diff --git a/src/icons/Ban.tsx b/src/icons/Ban.tsx index 5a3670de2..475f3989f 100644 --- a/src/icons/Ban.tsx +++ b/src/icons/Ban.tsx @@ -1,10 +1,24 @@ +import React from 'react'; import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faBan } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Ban = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faBan })` - color: ${({ theme }) => theme.palette.base.shade3}; - font-size: ${({ height = 'inherit' }) => height}; +export default styled(Ban)` + fill: ${({ theme }) => theme.palette.base.shade3}; `; diff --git a/src/icons/Bars.tsx b/src/icons/Bars.tsx new file mode 100644 index 000000000..90b4fcc9d --- /dev/null +++ b/src/icons/Bars.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/Camera.tsx b/src/icons/Camera.tsx index e840da02f..a226cad7d 100644 --- a/src/icons/Camera.tsx +++ b/src/icons/Camera.tsx @@ -1,8 +1,21 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faCamera } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faCamera })` - font-size: '${({ height = 'inherit' }) => height}'; -`; +const Camera = (props: React.SVGProps) => ( + + + +); + +export default Camera; diff --git a/src/icons/Category.tsx b/src/icons/Category.tsx index 3a19154c9..baac694a5 100644 --- a/src/icons/Category.tsx +++ b/src/icons/Category.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Category = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default Category; export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M28 21C28 20.4688 27.5312 20 27 20H22C21.4375 20 21 20.4688 21 21V26C21 26.5625 21.4375 27 22 27H27C27.5312 27 28 26.5625 28 26V21ZM14 19C11.7812 19 10 20.8125 10 23C10 25.2188 11.7812 27 14 27C16.1875 27 18 25.2188 18 23C18 20.8125 16.1875 19 14 19ZM26.9688 17C27.75 17 28.25 16.1875 27.8438 15.5L24.875 10.5C24.4688 9.84375 23.5 9.84375 23.0938 10.5L20.125 15.5C19.7188 16.1875 20.2188 17 21 17H26.9688Z' fill='white'/%3E%3C/svg%3E%0A");`; diff --git a/src/icons/Check.tsx b/src/icons/Check.tsx index b81afa3e8..fc6dd8749 100644 --- a/src/icons/Check.tsx +++ b/src/icons/Check.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCheck } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Check = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheck })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Check; diff --git a/src/icons/CheckCircle.tsx b/src/icons/CheckCircle.tsx index 717046026..59cf42207 100644 --- a/src/icons/CheckCircle.tsx +++ b/src/icons/CheckCircle.tsx @@ -1,9 +1,24 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCheckCircle } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const CheckCircle = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheckCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default CheckCircle; diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx index 3cb4a2647..4c50049e9 100644 --- a/src/icons/ChevronDown.tsx +++ b/src/icons/ChevronDown.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronDown } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ChevronDown = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronDown })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default ChevronDown; diff --git a/src/icons/ChevronLeft.tsx b/src/icons/ChevronLeft.tsx index 156fc85fb..0f999d8a5 100644 --- a/src/icons/ChevronLeft.tsx +++ b/src/icons/ChevronLeft.tsx @@ -1,11 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ChevronLeft = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronLeft })` - && { - font-size: ${({ height = 'inherit' }) => height}; - } -`; +export default ChevronLeft; diff --git a/src/icons/ChevronRight.tsx b/src/icons/ChevronRight.tsx index 6e85c2fb6..8b82059ab 100644 --- a/src/icons/ChevronRight.tsx +++ b/src/icons/ChevronRight.tsx @@ -1,11 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronRight } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ChevronRight = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronRight })` - && { - font-size: ${({ height = 'inherit' }) => height}; - } -`; +export default ChevronRight; diff --git a/src/icons/CircleRemove.tsx b/src/icons/CircleRemove.tsx index 6fae1c287..5a5a36c8a 100644 --- a/src/icons/CircleRemove.tsx +++ b/src/icons/CircleRemove.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const CircleRemove = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default CircleRemove; diff --git a/src/icons/Close.tsx b/src/icons/Close.tsx index 18da7a2e5..ae74d4095 100644 --- a/src/icons/Close.tsx +++ b/src/icons/Close.tsx @@ -1,3 +1,23 @@ -import Remove from './Remove'; +import React from 'react'; -export default Remove; +const Close = (props: React.SVGProps) => ( + + + +); + +export default Close; diff --git a/src/icons/Comment.tsx b/src/icons/Comment.tsx index c1315c9e7..4ac797e1e 100644 --- a/src/icons/Comment.tsx +++ b/src/icons/Comment.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCommentAlt } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Comment = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCommentAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Comment; diff --git a/src/icons/Community.tsx b/src/icons/Community.tsx index 16a02fec4..ced2fc1b7 100644 --- a/src/icons/Community.tsx +++ b/src/icons/Community.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Community = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default Community; export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M19.8462 12C20.7625 12 21.6413 12.356 22.2893 12.9898C22.9373 13.6235 23.3013 14.4831 23.3013 15.3793C23.3013 16.2756 22.9373 17.1351 22.2893 17.7688C21.6413 18.4026 20.7625 18.7586 19.8462 18.7586C18.9298 18.7586 18.051 18.4026 17.403 17.7688C16.755 17.1351 16.391 16.2756 16.391 15.3793C16.391 14.4831 16.755 13.6235 17.403 12.9898C18.051 12.356 18.9298 12 19.8462 12ZM12.9359 14.4138C13.4887 14.4138 14.0021 14.5586 14.4463 14.8193C14.2982 16.2 14.7128 17.571 15.5618 18.6428C15.0682 19.5697 14.081 20.2069 12.9359 20.2069C12.1504 20.2069 11.3972 19.9017 10.8418 19.3585C10.2864 18.8153 9.97436 18.0786 9.97436 17.3103C9.97436 16.5421 10.2864 15.8054 10.8418 15.2622C11.3972 14.719 12.1504 14.4138 12.9359 14.4138ZM26.7564 14.4138C27.5419 14.4138 28.2951 14.719 28.8505 15.2622C29.4059 15.8054 29.7179 16.5421 29.7179 17.3103C29.7179 18.0786 29.4059 18.8153 28.8505 19.3585C28.2951 19.9017 27.5419 20.2069 26.7564 20.2069C25.6113 20.2069 24.6241 19.5697 24.1305 18.6428C24.9795 17.571 25.3941 16.2 25.246 14.8193C25.6903 14.5586 26.2036 14.4138 26.7564 14.4138ZM13.4295 24.3103C13.4295 22.3117 16.3022 20.6897 19.8462 20.6897C23.3901 20.6897 26.2628 22.3117 26.2628 24.3103V26H13.4295V24.3103ZM8 26V24.5517C8 23.2097 9.86577 22.08 12.3929 21.7517C11.8105 22.4083 11.4551 23.3159 11.4551 24.3103V26H8ZM31.6923 26H28.2372V24.3103C28.2372 23.3159 27.8818 22.4083 27.2994 21.7517C29.8265 22.08 31.6923 23.2097 31.6923 24.5517V26Z' fill='white'/%3E%3C/svg%3E%0A");`; diff --git a/src/icons/CommunityAlt.tsx b/src/icons/CommunityAlt.tsx index 62947ba72..9c8eff6d5 100644 --- a/src/icons/CommunityAlt.tsx +++ b/src/icons/CommunityAlt.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const CommunityAlt = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default CommunityAlt; export const backgroundImage = `url("data:image/svg+xml, %3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http%3A//www.w3.org/2000/svg'%3E%3Ccircle cx='7.82443' cy='18.04' r='2.48767' fill='%231054DE'/%3E%3Ccircle r='2.48767' transform='matrix%28-1 0 0 1 22.4188 18.04%29' fill='%231054DE'/%3E%3Cpath d='M7.82334 21.5221C5.35031 21.5221 3.34553 23.5269 3.34553 25.9999H8.90133C8.90133 24.2088 9.45415 22.5787 9.81348 21.9876C9.21397 21.6896 8.53822 21.5221 7.82334 21.5221Z' fill='%231054DE'/%3E%3Cpath d='M22.4183 21.5221C24.8914 21.5221 26.8961 23.5269 26.8961 25.9999H21.3403C21.3403 24.2088 20.7875 22.5787 20.4282 21.9875C21.0277 21.6896 21.7034 21.5221 22.4183 21.5221Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1099 20.4352C18.1087 19.7843 18.7689 18.6574 18.7689 17.3764C18.7689 15.3613 17.1354 13.7278 15.1203 13.7278C13.1052 13.7278 11.4717 15.3613 11.4717 17.3764C11.4717 18.7266 12.2052 19.9056 13.2955 20.5365V20.9179C11.4476 21.708 10.1452 23.6116 10.1452 25.8344H20.2617C20.2617 23.611 18.9586 21.707 17.1099 20.9172V20.4352ZM17.2773 17.3765C17.2773 18.5672 16.3121 19.5325 15.1214 19.5325C13.9306 19.5325 12.9654 18.5672 12.9654 17.3765C12.9654 16.9838 13.0704 16.6156 13.2538 16.2985C13.6828 16.879 15.0882 17.9072 17.2773 17.3765Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8429 8.62622C15.3935 8.62622 15.8398 9.07253 15.8398 9.62308V11.9686C15.8398 12.5192 15.3935 12.9655 14.8429 12.9655C14.2924 12.9655 13.8461 12.5192 13.8461 11.9686V9.62308C13.8461 9.07253 14.2924 8.62622 14.8429 8.62622Z' fill='%231054DE'/%3E%3Cpath d='M3.73594 7.50087C4.05829 8.13364 4.9647 8.1268 5.27746 7.48924V7.48924C5.52678 6.98102 5.93601 6.56868 6.44232 6.31553L6.48079 6.29629C7.1152 5.97909 7.10843 5.07141 6.46935 4.7637V4.7637C5.94653 4.51198 5.52471 4.09015 5.27298 3.56733V3.56733C4.96528 2.92826 4.0576 2.92148 3.74039 3.55589L3.72116 3.59436C3.468 4.10068 3.05566 4.5099 2.54745 4.75922V4.75922C1.90989 5.07198 1.90304 5.97839 2.53581 6.30074L2.56702 6.31664C3.06349 6.56956 3.46712 6.97319 3.72004 7.46966L3.73594 7.50087Z' fill='%231054DE'/%3E%3Cpath d='M14.2909 6.58406C14.5595 7.11136 15.3149 7.10566 15.5755 6.57436V6.57436C15.7832 6.15085 16.1243 5.80723 16.5462 5.59627L16.5783 5.58024C17.1069 5.3159 17.1013 4.5595 16.5687 4.30309V4.30309C16.133 4.09331 15.7815 3.74179 15.5717 3.30611V3.30611C15.3153 2.77355 14.5589 2.7679 14.2946 3.29658L14.2786 3.32864C14.0676 3.75056 13.724 4.09159 13.3005 4.29935V4.29935C12.7692 4.55998 12.7635 5.31532 13.2908 5.58395L13.3168 5.5972C13.7305 5.80797 14.0669 6.14432 14.2776 6.55805L14.2909 6.58406Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.27084 7.81208C7.62329 7.38913 8.25188 7.33199 8.67483 7.68445C9.9614 8.75659 10.6121 9.63667 11.798 11.4156C12.1034 11.8737 11.9797 12.4927 11.5216 12.798C11.0635 13.1034 10.4446 12.9797 10.1392 12.5216C8.97958 10.7822 8.45747 10.0986 7.39847 9.21607C6.97553 8.86362 6.91838 8.23503 7.27084 7.81208Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.2895 7.81208C21.937 7.38913 21.3084 7.33199 20.8855 7.68445C19.5989 8.75659 18.9483 9.63667 17.7623 11.4156C17.4569 11.8737 17.5807 12.4927 18.0388 12.798C18.4969 13.1034 19.1158 12.9797 19.4212 12.5216C20.5807 10.7822 21.1029 10.0986 22.1619 9.21607C22.5848 8.86362 22.6419 8.23503 22.2895 7.81208Z' fill='%231054DE'/%3E%3C/svg%3E")`; diff --git a/src/icons/CommunityCoverPicture.tsx b/src/icons/CommunityCoverPicture.tsx index 737803b64..33998f781 100644 --- a/src/icons/CommunityCoverPicture.tsx +++ b/src/icons/CommunityCoverPicture.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const CommunityCoverPicture = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default CommunityCoverPicture; export const backgroundImage = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUwIiBoZWlnaHQ9IjMxMSIgdmlld0JveD0iMCAwIDU1MCAzMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8yMTU6MzI3NjEpIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzIxNTozMjc2MSkiPgo8cGF0aCBkPSJNLTIgMTQuODA5Nkg0MjUuMTk4VjMxMUgtMlYxNC44MDk2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+CjxyZWN0IHg9Ii04OC41Nzg2IiB5PSItMjUwLjYyMyIgd2lkdGg9IjY1MC40OCIgaGVpZ2h0PSI1ODIuMTI4IiBmaWxsPSIjMzk1MkVFIi8+CjxwYXRoIG9wYWNpdHk9IjAuMTIiIGQ9Ik01OTMuNzE5IDIxNy43NDJDNTk3LjY5IDE0Ni42OTEgNTQzLjAwNyA2NS4xNTg4IDQ2OS43NjkgNTUuOTE5MkM0NjguNDgxIDU1LjczNjYgNDY3LjE4OCA1NS41OTQgNDY1Ljg1MiA1NS40NDU2QzM2MC43NjMgNDMuOTc4IDM0NS41NDggMTcyLjIyMiAyNDkuMzkgMTgwLjg1M0MxNTMuMjggMTg5LjQ1MSA4NC41OTEyIDExMS42NTMgLTMyLjE0MjEgMTUyLjQxOEMtMTM2Ljk3MSAxODkuMDMgLTE3OC4yMzQgNDI4LjY2MiAxMjIuMTcyIDQ1Ni45OTVDMzYyLjYxIDQ3OS42NDQgNTgxLjg4OSA0MjkuNzIzIDU5My43MTkgMjE3Ljc0MloiIGZpbGw9IiNFM0U4RkYiLz4KPHJlY3QgeD0iLTg4LjU3ODYiIHk9IjI5Ni4xOSIgd2lkdGg9IjU5NC42NTkiIGhlaWdodD0iODguODU3MSIgZmlsbD0iI0ZCQUNDMiIvPgo8cGF0aCBkPSJNMjcxLjM3NiAzMDIuOTUxQzI3Mi4xMjEgMzAwLjU3MSAyNzIuNTQ2IDI5OC4wNzIgMjcyLjU0NiAyOTUuNTE0QzI3Mi41NDYgMjc3LjY0NyAyNTMuMTQyIDI2My4xNzEgMjI5LjE5MyAyNjMuMTcxQzIyMy40NzggMjYzLjE3MSAyMTguMDI5IDI2NC4wMDQgMjEzLjAzMiAyNjUuNTExQzIwOC40MDcgMjU1LjIxOSAxOTUuMzgzIDI0Ny44MjIgMTgwLjAxOSAyNDcuODIyQzE3OC41MDQgMjQ3LjgyMiAxNzcuMDQyIDI0Ny45MDEgMTc1LjU4IDI0OC4wNEMxNzIuMTI1IDIxOC43OSAxMzkuMjQ1IDE5NS44NjYgOTkuMTYxNSAxOTUuODY2QzU3LjMyMzkgMTk1Ljg2NiAyMy4zMjc0IDIyMC44NTMgMjIuNDc2OCAyNTEuOTI3QzMuOTUwMjUgMjU4LjYxIC04LjgzNDk2IDI3Mi43NjkgLTguODM0OTYgMjg5LjE2OEMtOC44MzQ5NiAyOTQuMDA3IC03LjcxODU4IDI5OC42NDcgLTUuNjcxODggMzAyLjk1MUgyNzEuMzc2WiIgZmlsbD0iI0ZCQUNDMiIvPgo8cGF0aCBkPSJNMjQyLjUzMSAyOTguMzk0QzI0Mi4wNTggMjk2Ljg3NSAyNDEuNzg4IDI5NS4yOCAyNDEuNzg4IDI5My42NDdDMjQxLjc4OCAyODIuMjQzIDI1NC4xMjEgMjczLjAwMiAyNjkuMzQ0IDI3My4wMDJDMjcyLjk3NiAyNzMuMDAyIDI3Ni40NCAyNzMuNTM0IDI3OS42MTYgMjc0LjQ5NkMyODIuNTU2IDI2Ny45MjcgMjkwLjgzNSAyNjMuMjA1IDMwMC42IDI2My4yMDVDMzAxLjU2MyAyNjMuMjA1IDMwMi40OTIgMjYzLjI1NiAzMDMuNDIyIDI2My4zNDVDMzA1LjYxOCAyNDQuNjc0IDMyNi41MTcgMjMwLjA0MiAzNTEuOTk2IDIzMC4wNDJDMzc4LjU4OSAyMzAuMDQyIDQwMC4xOTggMjQ1Ljk5MSA0MDAuNzM4IDI2NS44MjVDNDEyLjUxNCAyNzAuMDkxIDQyMC42NDEgMjc5LjEyOSA0MjAuNjQxIDI4OS41OTdDNDIwLjY0MSAyOTIuNjg1IDQxOS45MzIgMjk1LjY0NyA0MTguNjMxIDI5OC4zOTRIMjQyLjUzMVoiIGZpbGw9IiNGQkFDQzIiLz4KPHBhdGggZD0iTS0wLjIyNjU2MiAzMzEuNTA2QzIuOTkxIDMyNy40NTQgNC44MzQ5OCAzMjIuNzk4IDQuODM0OTggMzE3LjgzOUM0LjgzNDk4IDMwMi4yOTEgLTEzLjE5MDkgMjg5LjY5IC0zNS40MzE2IDI4OS42OUMtMzkuMDI1NSAyODkuNjkgLTQyLjUwNjUgMjkwLjAxOSAtNDUuODE4MiAyOTAuNjM3Qy01Mi44OTMgMjc3LjI2IC03MS4zMTQxIDI2Ny43MTEgLTkyLjkzMzkgMjY3LjcxMUMtMTE3LjQxNCAyNjcuNzExIC0xMzcuNzkyIDI3OS45NTcgLTE0Mi4yNTEgMjk2LjE0OUMtMTQ1LjM3NSAyOTUuNjA5IC0xNDguNjMgMjk1LjMyIC0xNTEuOTc5IDI5NS4zMkMtMTc0LjIyIDI5NS4zMiAtMTkyLjI0NiAzMDcuOTIxIC0xOTIuMjQ2IDMyMy40NjlDLTE5Mi4yNDYgMzI2LjI1NyAtMTkxLjY2MiAzMjguOTY3IC0xOTAuNTcxIDMzMS41MDZILTAuMjI2NTYyWiIgZmlsbD0iI0ZCQUNDMiIvPgo8cGF0aCBkPSJNNTkyLjE1NSAzMjEuMjUzQzU5NS4zNzIgMzE3LjIwMSA1OTcuMjE2IDMxMi41NDUgNTk3LjIxNiAzMDcuNTg2QzU5Ny4yMTYgMjkyLjAzOSA1NzkuMTkgMjc5LjQzOCA1NTYuOTUgMjc5LjQzOEM1NTMuMzU2IDI3OS40MzggNTQ5Ljg3NSAyNzkuNzY2IDU0Ni41NjMgMjgwLjM4NUM1MzkuNDg4IDI2Ny4wMDcgNTIxLjA2NyAyNTcuNDU4IDQ5OS40NDcgMjU3LjQ1OEM0NzQuOTY4IDI1Ny40NTggNDU0LjU5IDI2OS43MDQgNDUwLjEzIDI4NS44OTZDNDQ3LjAwNyAyODUuMzU3IDQ0My43NTIgMjg1LjA2NyA0NDAuNDAyIDI4NS4wNjdDNDE4LjE2MiAyODUuMDY3IDQwMC4xMzYgMjk3LjY2OCA0MDAuMTM2IDMxMy4yMTZDNDAwLjEzNiAzMTYuMDA0IDQwMC43MTkgMzE4LjcxNCA0MDEuODEgMzIxLjI1M0g1OTIuMTU1WiIgZmlsbD0iI0ZCQUNDMiIvPgo8ZyBvcGFjaXR5PSIwLjUiIGNsaXAtcGF0aD0idXJsKCNjbGlwMl8yMTU6MzI3NjEpIj4KPHBhdGggZD0iTTIwOS4wMSAxOTAuNzM4QzIxMS4wODkgMTkyLjgzMyAyMTQuNjY5IDE5NC4yMiAyMTcuODE5IDE5My41NThDMjE4LjA4OSAxOTMuNDk4IDIxOC4zNTggMTkzLjQyOCAyMTguNjI3IDE5My4zMzZDMjE5Ljk0OSAxOTIuODg5IDIyMS4xNjQgMTkyLjA0MSAyMjIuMTE3IDE5MC42NzhDMjIzLjU3MyAxODguNjAzIDIyNC40MTMgMTg1LjMyIDIyNC4wOTcgMTgwLjQ2M0MyMjMuNTcyIDE3Mi40MzQgMjIwLjIwMSAxNjkuMDAxIDIxNi45NjcgMTY3LjU3M0MyMTMuNzMzIDE2Ni4xNDUgMjEwLjYyNSAxNjYuNzMyIDIxMC42MjUgMTY2LjczMkMxOTguMDgxIDE2OS44MjcgMjA0LjQ3MyAxODYuMTg3IDIwOS4wMSAxOTAuNzM4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIxNy44MDMgMTkzLjIxQzIxNy44MDMgMTkzLjIxIDIxNi44MzQgMTk0LjcwMiAyMTcuMTMzIDE5NC44MjRDMjE3LjQzMiAxOTQuOTQ2IDIxNy40NDUgMTk0LjYwOCAyMTguMjE3IDE5NC43MDFDMjE4Ljk4OSAxOTQuNzk1IDIxOC44ODEgMTk0Ljc4OCAyMTkuMjczIDE5NC42MzVDMjE5LjY2NSAxOTQuNDgyIDIxOS43MTIgMTk0LjA1OCAyMTkuNzEyIDE5NC4wNThMMjE4LjYwNyAxOTIuOTE1TDIxNy44MDMgMTkzLjIxWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIxOC42OTkgMTkzLjc3NEMyMTYuNjQ1IDE5NS44NTIgMjE1Ljg0NiAxOTkuMTAxIDIxNy4yMjQgMjAxLjUzNEMyMTcuOTQ4IDIwMi44MTggMjE5LjE3IDIwMy43NjggMjIwLjQwOCAyMDQuNjM3QzIyMS42NDUgMjA1LjUwNiAyMjIuOTMyIDIwNi4zNCAyMjMuODU3IDIwNy40OTdDMjI0Ljc5MyAyMDguNjUxIDIyNS4zMjcgMjEwLjIwMyAyMjQuODIzIDIxMS42MjRDMjI0LjMyOCAyMTMuMDMxIDIyMi41NjIgMjE0LjA4MyAyMjEuMTI3IDIxMy41MzhDMjIwLjg1NCAyMTMuNDMyIDIyMC42MDcgMjEzLjI4NiAyMjAuNDM0IDIxMy4wNjdDMjE5LjkwOSAyMTIuNDIzIDIyMC4yNTIgMjExLjM4MiAyMjAuOTY5IDIxMC44OTNDMjIyLjExNiAyMTAuMTIgMjIzLjgwNCAyMTAuNjAxIDIyNC42MzcgMjExLjYyN0MyMjUuNDkyIDIxMi42NDggMjI1LjY1OSAyMTQuMDQxIDIyNS42NDEgMjE1LjM1QzIyNS42MjYgMjE2LjY2OCAyMjUuNDYyIDIxOC4wMDMgMjI1Ljc1MSAyMTkuMjc3QzIyNi40NDUgMjIyLjM3NyAyMjkuNjIxIDIyNC40ODUgMjMwLjQzOSAyMjcuNTY1QzIzMC45MjEgMjI5LjM3MSAyMzAuNTQ3IDIzMS4zOTQgMjMxLjM0IDIzMy4wODgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMC40NTU2NzgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L2c+CjxnIG9wYWNpdHk9IjAuNSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAzXzIxNTozMjc2MSkiPgo8cGF0aCBkPSJNMzM1Ljc1MiAxMjYuNTUyQzMzNS4zOTcgMTI3LjI3MSAzMzUuMDM3IDEyNy45NjYgMzM0LjY3MiAxMjguNjM5QzMzMi43NTUgMTMyLjA4NiAzMzAuNTAyIDEzNC45NjMgMzI4LjU3MSAxMzYuNTk3QzMyNS4yNSAxMzkuNDE0IDMxOS44NjUgMTQwLjk5IDMxNS4zNyAxMzkuNTY5QzMxNS4yNjggMTM5LjU0NyAzMTUuMTYgMTM5LjUwMSAzMTUuMDY2IDEzOS40NjRDMzE0Ljc4OSAxMzkuMzc1IDMxNC41MTYgMTM5LjI1IDMxNC4yNDMgMTM5LjEyNEwzMTQuMjI4IDEzOS4xMTZDMzEzLjQ3OSAxMzguNzgyIDMxMi43NjIgMTM4LjMzMiAzMTIuMDk2IDEzNy43OTVDMzA4LjYwNyAxMzQuOTYxIDMwNi41MjkgMTI5LjIyOSAzMDguMTIyIDExOS4yNkMzMDkuNDM5IDExMS4xMDUgMzEyLjQxMyAxMDYuMzUyIDMxNS43MzkgMTAzLjY1NUMzMjIuMDY3IDk4LjUxMTUgMzI5LjY3NCAxMDAuNzE3IDMyOS42NzQgMTAwLjcxN0MzNDEuNzY3IDEwNS4wMzUgMzQwLjIzNiAxMTcuMjU0IDMzNS43NTIgMTI2LjU1MloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMTQuMjExIDEzOS4xNDRDMzE0LjIxMSAxMzkuMTQ0IDMxMS43MiAxMzkuOTM3IDMxMS45MzMgMTQwLjM1NkMzMTIuMTUxIDE0MC43OTggMzEyLjQ4OCAxNDAuMzk5IDMxMy4yNTYgMTQxLjI0OUMzMTQuMDI0IDE0Mi4wOTggMzEzLjkxMyAxNDEuOTkzIDMxNC41MDMgMTQyLjE3M0MzMTUuMDg0IDE0Mi4zNjcgMzE1LjUzNSAxNDEuOTM5IDMxNS41MzUgMTQxLjkzOUwzMTUuMzcgMTM5LjU2OUwzMTQuMjExIDEzOS4xNDRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzEzLjIxOSAxNDEuMjQ2QzMwOC45MzMgMTQzLjYzNyAzMDYuMTM3IDE1MC4wMyAzMDUuODU2IDE1NC43NTJDMzA1LjcyMiAxNTcuMDM5IDMwNi40MTYgMTU5LjQ5NCAzMDguMjA0IDE2MC45MzdDMzA5LjEgMTYxLjY3IDMxMC4yMjIgMTYyLjA5MiAzMTEuMzcgMTYyLjI3OEMzMTIuNzU1IDE2Mi40ODkgMzE0LjQ2NSAxNjIuMTU5IDMxNS4wMjggMTYwLjg2N0MzMTUuNDU0IDE1OS45IDMxNS4wMiAxNTguNjg4IDMxNC4yIDE1OC4wMjFDMzEzLjM4MSAxNTcuMzU0IDMxMi4yNTUgMTU3LjE2MiAzMTEuMTk4IDE1Ny4yNDVDMzA1LjI0MiAxNTcuNzQgMzAyLjUxNiAxNjUuMDQ5IDMwMi4wNDQgMTcwLjEyMUMzMDEuNjkxIDE3My45NjUgMzAyLjE1MiAxNzguMTYzIDMwMy40NDkgMTgxLjc3NkMzMDUuODM2IDE4OC40MTEgMzA2LjE0NCAxOTMuNjA0IDMwMi4zNjggMTk5Ljc1N0MzMDEuMTYzIDIwMS43MyAyOTkuODgzIDIwMy42OTcgMjk5LjE0NSAyMDUuODkzQzI5OC40MjEgMjA4LjA5NyAyOTguMzA2IDIxMC42MDkgMjk5LjQxNSAyMTIuNjM0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuNDU1Njc4IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPC9nPgo8cGF0aCBkPSJNMTM2LjAyNCA1MS40NDc1QzEzNi40MDIgNTMuMzQ2MSAxMzUuMTQ2IDU1LjE5OTQgMTMzLjIyMyA1NS41ODE5QzEzMS4zIDU1Ljk2NDQgMTI5LjQzMSA1NC43MzI2IDEyOS4wNTMgNTIuODM0QzEyOC42NzUgNTAuOTM1NCAxMjkuOTMxIDQ5LjA4MjEgMTMxLjg1NCA0OC42OTk2QzEzMy43NzcgNDguMzE3MSAxMzUuNjQ2IDQ5LjU0ODkgMTM2LjAyNCA1MS40NDc1WiIgZmlsbD0iI0ZERTVERSIvPgo8cGF0aCBkPSJNNDQuMzI5NiAxOTkuMzg4QzQ0LjY0NDUgMjAwLjk3MiA0My41OTc0IDIwMi41MzEgNDEuOTc2MSAyMDIuODUzQzQwLjM1NDkgMjAzLjE3NSAzOC43OTA5IDIwMi4xMzYgMzguNDc2IDIwMC41NTNDMzguMTYxMSAxOTguOTY5IDM5LjIwODMgMTk3LjQxIDQwLjgyOTUgMTk3LjA4OEM0Mi40NTA3IDE5Ni43NjUgNDQuMDE0NyAxOTcuODA1IDQ0LjMyOTYgMTk5LjM4OFoiIHN0cm9rZT0iI0ZERTVERSIgc3Ryb2tlLXdpZHRoPSIxLjEzOTE5Ii8+CjxwYXRoIGQ9Ik0xNjUuMDAyIDE4My40MThMMTY1LjAwNSAxODMuNDE3QzE2Ni42MiAxODMuMDg2IDE2OC4xODUgMTg0LjEyMiAxNjguNTAyIDE4NS43MThDMTY4LjgxNyAxODcuMzAxIDE2Ny43NyAxODguODYgMTY2LjE0OSAxODkuMTgzQzE2NC41MjcgMTg5LjUwNSAxNjIuOTYzIDE4OC40NjYgMTYyLjY0OCAxODYuODgyQzE2Mi4zMzMgMTg1LjI5OSAxNjMuMzgxIDE4My43NCAxNjUuMDAyIDE4My40MThaIiBzdHJva2U9IiNGREU1REUiIHN0cm9rZS13aWR0aD0iMS4xMzkxOSIvPgo8cGF0aCBkPSJNMjc2LjY0MyA2OC40MzQzTDI3Ni42NDYgNjguNDMzN0MyNzguMjYxIDY4LjEwMyAyNzkuODI2IDY5LjEzODkgMjgwLjE0MyA3MC43MzQ3QzI4MC40NTggNzIuMzE4IDI3OS40MTEgNzMuODc2OSAyNzcuNzkgNzQuMTk5M0MyNzYuMTY4IDc0LjUyMTggMjc0LjYwNCA3My40ODIzIDI3NC4yODkgNzEuODk5QzI3My45NzUgNzAuMzE1NiAyNzUuMDIyIDY4Ljc1NjggMjc2LjY0MyA2OC40MzQzWiIgc3Ryb2tlPSIjRkRFNURFIiBzdHJva2Utd2lkdGg9IjEuMTM5MTkiLz4KPHBhdGggb3BhY2l0eT0iMC40IiBkPSJNMzg3LjA4MyAxMzEuNjQ3TDM5MS42MTggMTM0Ljg2MUMzOTEuNjE4IDEzNC44NjEgMzkyLjMwMSAxMzguMjkxIDM4OC45ODMgMTM5Ljc3QzM4NS42NjUgMTQxLjI0OCAzODMuNTI1IDE0My4wNTMgMzg0LjI1OSAxNDUuMzc0QzM4NC4yNTkgMTQ1LjM3NCAzODAuMTk2IDE0NC41MzQgMzc5Ljg5MiAxNDEuNTc4QzM3OS41NzcgMTM4LjYyNCAzODMuNTM1IDEzOC45MzYgMzg1LjQ2NyAxMzYuMDg1QzM4Ny4zOTkgMTMzLjIzMyAzODcuMDgzIDEzMS42NDcgMzg3LjA4MyAxMzEuNjQ3WiIgZmlsbD0iI0Y2RjVGMyIvPgo8cGF0aCBkPSJNNTkuMjAyNiAyMzkuNTgyTDU2Ljg1MzYgMjQ0LjYxQzU2Ljg1MzYgMjQ0LjYxIDUzLjU3NjYgMjQ1Ljk0NyA1MS40ODAxIDI0My4wMjJDNDkuMzk0NCAyNDAuMDk0IDQ3LjIwNjIgMjM4LjM2NiA0NS4wMzU4IDIzOS41NDFDNDUuMDM1OCAyMzkuNTQxIDQ1LjEyMDUgMjM1LjQzOCA0Ny45OTE3IDIzNC41NkM1MC44NzM3IDIzMy42NzkgNTEuMjg4NiAyMzcuNTcyIDU0LjQ4OTUgMjM4Ljg4N0M1Ny42OTAzIDI0MC4yMDMgNTkuMjAyNiAyMzkuNTgyIDU5LjIwMjYgMjM5LjU4MloiIGZpbGw9IiNGRkQ0MDAiLz4KPHBhdGggZD0iTTk3LjA4OTMgMjE5LjkyMkw5OS42NiAyMjQuODE2Qzk5LjY2IDIyNC44MTYgOTguNzA2NCAyMjguMTg4IDk1LjA3MyAyMjguMDQ0QzkxLjQ0NDIgMjI3Ljg5MSA4OC43MTIxIDIyOC41NDggODguMzExNiAyMzAuOTU3Qzg4LjMxMTYgMjMwLjk1NyA4NS4wODMzIDIyOC4zOTQgODYuMTUzMyAyMjUuNjE4Qzg3LjIyNzggMjIyLjgzMiA5MC41OTY3IDIyNC44NzcgOTMuNjI0NyAyMjMuMTc5Qzk2LjY1MjcgMjIxLjQ4IDk3LjA4OTMgMjE5LjkyMiA5Ny4wODkzIDIxOS45MjJaIiBmaWxsPSIjRkRFNURFIi8+CjxwYXRoIG9wYWNpdHk9IjAuNCIgZD0iTTM2NC4zNTQgMTc0Ljc0N0wzNjEuODE1IDE3OS42ODJDMzYxLjgxNSAxNzkuNjgyIDM1OC40ODkgMTgwLjg5MyAzNTYuNTA2IDE3Ny44OUMzNTQuNTIzIDE3NC44ODYgMzUyLjQxMyAxNzMuMDc0IDM1MC4xOTkgMTc0LjE2NUMzNTAuMTk5IDE3NC4xNjUgMzUwLjQ0MSAxNzAuMDY5IDM1My4zNDQgMTY5LjMwMUMzNTYuMjU3IDE2OC41MyAzNTYuNTM0IDE3Mi40MzQgMzU5LjY3MSAxNzMuODczQzM2Mi44MTkgMTc1LjMxMSAzNjQuMzU0IDE3NC43NDcgMzY0LjM1NCAxNzQuNzQ3WiIgZmlsbD0iI0Y2RjVGMyIvPgo8cGF0aCBkPSJNMTQ2LjI1MyAxMTQuNDM3TDE0My43MTMgMTE5LjM3MUMxNDMuNzEzIDExOS4zNzEgMTQwLjM4OCAxMjAuNTgyIDEzOC40MDQgMTE3LjU3OUMxMzYuNDMyIDExNC41NzMgMTM0LjMxMiAxMTIuNzY0IDEzMi4wOTggMTEzLjg1NEMxMzIuMDk4IDExMy44NTQgMTMyLjM0IDEwOS43NTggMTM1LjI0MiAxMDguOTlDMTM4LjE1NiAxMDguMjIgMTM4LjQyMiAxMTIuMTI2IDE0MS41NyAxMTMuNTYzQzE0NC43MTggMTE1IDE0Ni4yNTMgMTE0LjQzNyAxNDYuMjUzIDExNC40MzdaIiBmaWxsPSIjRjhEQTNBIi8+CjxwYXRoIGQ9Ik0zNS4zNzY0IDU4LjYwNzhMMzcuNzgyNCA2My42MDlDMzcuNzgyNCA2My42MDkgMzYuNzQzNSA2Ni45OTI0IDMzLjE1MTcgNjYuNzYzOUMyOS41NjQ3IDY2LjUyNTQgMjYuODQyNCA2Ny4xMjYxIDI2LjM3OCA2OS41NDk5QzI2LjM3OCA2OS41NDk5IDIzLjI1NTQgNjYuODg3NiAyNC4zOTI3IDY0LjEwODdDMjUuNTM0OCA2MS4zMTk4IDI4LjgxMTEgNjMuNDYyNSAzMS44NTU3IDYxLjgxNzNDMzQuOTAwMyA2MC4xNzIgMzUuMzc2NCA1OC42MDc4IDM1LjM3NjQgNTguNjA3OFoiIGZpbGw9IiNGOERBM0EiLz4KPHBhdGggZD0iTTM1OS43MSAxMDYuNjYxTDM2My43MjQgMTAyLjgwMUMzNjMuNzI0IDEwMi44MDEgMzY3LjI2MiAxMDIuNzE0IDM2OC4xNDggMTA2LjE5NEMzNjkuMDMzIDEwOS42NzMgMzcwLjQzOSAxMTIuMDYzIDM3Mi44ODQgMTExLjczM0MzNzIuODg0IDExMS43MzMgMzcxLjMyNSAxMTUuNTQyIDM2OC4zMiAxMTUuMzQ0QzM2NS4zMTYgMTE1LjE0NSAzNjYuMzM0IDExMS4zNTQgMzYzLjg0MiAxMDguOTlDMzYxLjM1IDEwNi42MjYgMzU5LjcxIDEwNi42NjEgMzU5LjcxIDEwNi42NjFaIiBmaWxsPSIjRkZENDAwIi8+CjxlbGxpcHNlIG9wYWNpdHk9IjAuNiIgY3g9IjI1NS40NTgiIGN5PSIyNzguNTMzIiByeD0iMzAuNzU4MiIgcnk9IjMuOTg3MTgiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMTIiLz4KPHBhdGggZD0iTTI3OS4wMTYgMjc2LjQ3NUwyNzYuODY0IDIxMC43NTFMMjMxLjUzNSAyNjUuNjY1QzIzMS41MzUgMjY1LjY2NSAyNDkuMTMxIDI4Ny4yODYgMjc5LjAxNiAyNzYuNDc1WiIgZmlsbD0iIzEyMUU2QSIvPgo8cGF0aCBkPSJNMjY0LjE5IDI0Ny44NjRDMjY0LjE5IDI1MC44MDYgMjYxLjgwNCAyNTMuMTkyIDI1OC44NjEgMjUzLjE5MkMyNTUuOTE4IDI1My4xOTIgMjUzLjUzMiAyNTAuODA2IDI1My41MzIgMjQ3Ljg2NEMyNTMuNTMyIDI0NC45MjEgMjU1LjkxOCAyNDIuNTM1IDI1OC44NjEgMjQyLjUzNUMyNjEuODA0IDI0Mi41MzUgMjY0LjE5IDI0NC45MjEgMjY0LjE5IDI0Ny44NjRaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMuMzY4NTUiLz4KPHBhdGggZD0iTTI3Ny43MjUgMjM5LjExN0MyNzIuNzA0IDIzOS4zNTYgMjY4LjQ5NiAyMzUuNDMzIDI2OC4yNTcgMjMwLjQxMUMyNjguMDE4IDIyNS4zODggMjcyLjA4MiAyMjIuMzgyIDI3Ny4xMDIgMjIyLjE0M0wyNzcuNzI1IDIzOS4xMTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjU3LjgzNCAyNzIuODg4QzI2MC41MjcgMjcyLjg4OCAyNjIuNzExIDI3MC43MDMgMjYyLjcxMSAyNjguMDA4QzI2Mi43MTEgMjY1LjMxNCAyNjAuNTI3IDI2My4xMjkgMjU3LjgzNCAyNjMuMTI5QzI1NS4xNCAyNjMuMTI5IDI1Mi45NTcgMjY1LjMxNCAyNTIuOTU3IDI2OC4wMDhDMjUyLjk1NyAyNzAuNzAzIDI1NS4xNCAyNzIuODg4IDI1Ny44MzQgMjcyLjg4OFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMTU6MzI3NjEiPgo8cmVjdCB3aWR0aD0iNTUzLjY0OCIgaGVpZ2h0PSIzMTEiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMikiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8yMTU6MzI3NjEiPgo8cmVjdCB3aWR0aD0iNTUzLjY0OCIgaGVpZ2h0PSIzMTEiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMikiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMl8yMTU6MzI3NjEiPgo8cmVjdCB3aWR0aD0iMjUuODYyNCIgaGVpZ2h0PSI2OS43MTAzIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTk4LjQ5OCAxNjkuODU0KSByb3RhdGUoLTE1LjU4NjQpIi8+CjwvY2xpcFBhdGg+CjxjbGlwUGF0aCBpZD0iY2xpcDNfMjE1OjMyNzYxIj4KPHJlY3Qgd2lkdGg9IjQzLjMxNDgiIGhlaWdodD0iMTEyLjE0NCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyMC4wNjYgOTQuNTUzMSkgcm90YXRlKDMxLjAwOTEpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==`; diff --git a/src/icons/CreateChat.tsx b/src/icons/CreateChat.tsx index b5ba8da01..ef4f32f7b 100644 --- a/src/icons/CreateChat.tsx +++ b/src/icons/CreateChat.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCommentAltPlus } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const CreateChat = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCommentAltPlus })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default CreateChat; diff --git a/src/icons/Dots.tsx b/src/icons/Dots.tsx index f6b37047c..3e88d4a83 100644 --- a/src/icons/Dots.tsx +++ b/src/icons/Dots.tsx @@ -1,11 +1,11 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Dots = (props: React.SVGProps) => ( ); -export default Svg; +export default Dots; export const backgroundImage = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' viewBox='0 0 25 25'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23F3F0EA' opacity='.1'/%3E%3C/svg%3E")`; diff --git a/src/icons/EllipsisH.tsx b/src/icons/EllipsisH.tsx index 0d396245e..4724cde15 100644 --- a/src/icons/EllipsisH.tsx +++ b/src/icons/EllipsisH.tsx @@ -1,8 +1,20 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faEllipsisH } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faEllipsisH })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const EllipsisH = (props: React.SVGProps) => ( + + + +); + +export default EllipsisH; diff --git a/src/icons/EllipsisV.tsx b/src/icons/EllipsisV.tsx index 18527c9aa..c8f88bbd0 100644 --- a/src/icons/EllipsisV.tsx +++ b/src/icons/EllipsisV.tsx @@ -1,8 +1,19 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faEllipsisV } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faEllipsisV })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const EllipsisV = (props: React.SVGProps) => ( + + + +); + +export default EllipsisV; diff --git a/src/icons/EmptyFeed.tsx b/src/icons/EmptyFeed.tsx index 111c2a234..7c30b1ca3 100644 --- a/src/icons/EmptyFeed.tsx +++ b/src/icons/EmptyFeed.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => { +const EmptyFeed = ({ color = '#A5A9B5', ...props }: React.SVGProps) => { return ( ) => { > ); }; -export default Svg; +export default EmptyFeed; diff --git a/src/icons/EmptyImageGallery.tsx b/src/icons/EmptyImageGallery.tsx index 224caf896..694388856 100644 --- a/src/icons/EmptyImageGallery.tsx +++ b/src/icons/EmptyImageGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export default (props: React.SVGProps) => { +const EmptyImageGallery = (props: React.SVGProps) => { return ( ) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); }; + +export default EmptyImageGallery; diff --git a/src/icons/EmptyLivestreamGallery.tsx b/src/icons/EmptyLivestreamGallery.tsx index 5021ca786..bf1b0263d 100644 --- a/src/icons/EmptyLivestreamGallery.tsx +++ b/src/icons/EmptyLivestreamGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export default (props: React.SVGProps) => { +const EmptyLivestreamGallery = (props: React.SVGProps) => { return ( ) => { ); }; + +export default EmptyLivestreamGallery; \ No newline at end of file diff --git a/src/icons/EmptyVideoGallery.tsx b/src/icons/EmptyVideoGallery.tsx index 04bf20618..9ae086fbf 100644 --- a/src/icons/EmptyVideoGallery.tsx +++ b/src/icons/EmptyVideoGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export default (props: React.SVGProps) => { +const EmptyVideoGallery = (props: React.SVGProps) => { return ( ) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); }; + +export default EmptyVideoGallery; \ No newline at end of file diff --git a/src/icons/Error.tsx b/src/icons/Error.tsx new file mode 100644 index 000000000..2f6ff4672 --- /dev/null +++ b/src/icons/Error.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + + ); +} + +export default Icon; diff --git a/src/icons/ExclamationCircle.tsx b/src/icons/ExclamationCircle.tsx index 031e8803e..cf1bffd02 100644 --- a/src/icons/ExclamationCircle.tsx +++ b/src/icons/ExclamationCircle.tsx @@ -1,9 +1,24 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faExclamationCircle } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const ExclamationCircle = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faExclamationCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default ExclamationCircle; diff --git a/src/icons/Expand.tsx b/src/icons/Expand.tsx new file mode 100644 index 000000000..4a081a487 --- /dev/null +++ b/src/icons/Expand.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/Eye.tsx b/src/icons/Eye.tsx new file mode 100644 index 000000000..f318cc579 --- /dev/null +++ b/src/icons/Eye.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/FileAttachment.tsx b/src/icons/FileAttachment.tsx index c21ce66db..1cbd0db75 100644 --- a/src/icons/FileAttachment.tsx +++ b/src/icons/FileAttachment.tsx @@ -1,8 +1,28 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPaperclip } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPaperclip })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props : React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Globe.tsx b/src/icons/Globe.tsx index 600874f6d..ffaffa37d 100644 --- a/src/icons/Globe.tsx +++ b/src/icons/Globe.tsx @@ -1,9 +1,33 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faGlobeAfrica } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props : React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faGlobeAfrica })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/ImageAttachment.tsx b/src/icons/ImageAttachment.tsx index fe3a632dc..35f82fe14 100644 --- a/src/icons/ImageAttachment.tsx +++ b/src/icons/ImageAttachment.tsx @@ -1,8 +1,22 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faImage } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faImage })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props : React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Link.tsx b/src/icons/Link.tsx new file mode 100644 index 000000000..b926dfd7f --- /dev/null +++ b/src/icons/Link.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/Lock.tsx b/src/icons/Lock.tsx index 275bea9ae..9ac56e253 100644 --- a/src/icons/Lock.tsx +++ b/src/icons/Lock.tsx @@ -1,8 +1,21 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faLockAlt } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faLockAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props: React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Message.tsx b/src/icons/Message.tsx index 39fa0e08e..64b1803b9 100644 --- a/src/icons/Message.tsx +++ b/src/icons/Message.tsx @@ -1,9 +1,24 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCommentsAlt } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCommentsAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/MinusCircle.tsx b/src/icons/MinusCircle.tsx index 55ea7d547..c30bed62e 100644 --- a/src/icons/MinusCircle.tsx +++ b/src/icons/MinusCircle.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faMinusCircle } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faMinusCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Mute.tsx b/src/icons/Mute.tsx new file mode 100644 index 000000000..8fb8bd595 --- /dev/null +++ b/src/icons/Mute.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/Newspaper.tsx b/src/icons/Newspaper.tsx index 1f20c5a25..c1ba558a7 100644 --- a/src/icons/Newspaper.tsx +++ b/src/icons/Newspaper.tsx @@ -1,9 +1,28 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faNewspaper } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faNewspaper })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; \ No newline at end of file diff --git a/src/icons/NewspaperLight.tsx b/src/icons/NewspaperLight.tsx index a2d4c3eb9..9ee72a1f7 100644 --- a/src/icons/NewspaperLight.tsx +++ b/src/icons/NewspaperLight.tsx @@ -1,9 +1,28 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faNewspaper } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faNewspaper })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; \ No newline at end of file diff --git a/src/icons/Pause.tsx b/src/icons/Pause.tsx new file mode 100644 index 000000000..f0d32c77c --- /dev/null +++ b/src/icons/Pause.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/Pencil.tsx b/src/icons/Pencil.tsx index 60008a38b..ec5f16baf 100644 --- a/src/icons/Pencil.tsx +++ b/src/icons/Pencil.tsx @@ -1,9 +1,25 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPencil } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPencil })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Play.tsx b/src/icons/Play.tsx index f3e2d8b0c..316c11b60 100644 --- a/src/icons/Play.tsx +++ b/src/icons/Play.tsx @@ -1,19 +1,21 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( - - - - - - -); +function Icon(props: React.SVGProps) { + return ( + + + + ); +} -export default Svg; +export default Icon; diff --git a/src/icons/PlayCircle.tsx b/src/icons/PlayCircle.tsx index efe5547c2..99d1afd64 100644 --- a/src/icons/PlayCircle.tsx +++ b/src/icons/PlayCircle.tsx @@ -1,8 +1,22 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPlayCircle } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPlayCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props: React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Plus.tsx b/src/icons/Plus.tsx index c6ba93173..42e0edde2 100644 --- a/src/icons/Plus.tsx +++ b/src/icons/Plus.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPlus } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPlus })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Remove.tsx b/src/icons/Remove.tsx index e090bcc62..5be7bab12 100644 --- a/src/icons/Remove.tsx +++ b/src/icons/Remove.tsx @@ -1,11 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faTimes } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faTimes })` - && { - font-size: ${({ height = 'inherit' }) => height}; - } -`; +export default Svg; diff --git a/src/icons/Reply.tsx b/src/icons/Reply.tsx index ff14db5e9..566605c97 100644 --- a/src/icons/Reply.tsx +++ b/src/icons/Reply.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faShare } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faShare })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Save.tsx b/src/icons/Save.tsx index 97d981fda..17921717e 100644 --- a/src/icons/Save.tsx +++ b/src/icons/Save.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSave } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faSave })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Search.tsx b/src/icons/Search.tsx index 4c4019a1d..b8666acbc 100644 --- a/src/icons/Search.tsx +++ b/src/icons/Search.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faSearch } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faSearch })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/SendMessage.tsx b/src/icons/SendMessage.tsx index 3d99dd222..d7f9d2fb0 100644 --- a/src/icons/SendMessage.tsx +++ b/src/icons/SendMessage.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faArrowCircleUp } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faArrowCircleUp })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Shield.tsx b/src/icons/Shield.tsx index fee54deb1..82382cf2b 100644 --- a/src/icons/Shield.tsx +++ b/src/icons/Shield.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faShieldAlt } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faShieldAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/SolarSystem.tsx b/src/icons/SolarSystem.tsx index 051f4fe10..7c07d4473 100644 --- a/src/icons/SolarSystem.tsx +++ b/src/icons/SolarSystem.tsx @@ -1,9 +1,16 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSolarSystem } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faSolarSystem })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/SortDown.tsx b/src/icons/SortDown.tsx index e4738fdcd..5bd003bea 100644 --- a/src/icons/SortDown.tsx +++ b/src/icons/SortDown.tsx @@ -1,9 +1,19 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSortDown } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faSortDown })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/ThumbsUp.tsx b/src/icons/ThumbsUp.tsx index 63f091f6a..e49b18ecc 100644 --- a/src/icons/ThumbsUp.tsx +++ b/src/icons/ThumbsUp.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faThumbsUp } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +function Icon(props: React.SVGProps) { + return ( + + + + ); +} -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faThumbsUp })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Icon; diff --git a/src/icons/Trash.tsx b/src/icons/Trash.tsx index f7c6b68a5..87a43eb7f 100644 --- a/src/icons/Trash.tsx +++ b/src/icons/Trash.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faTrashAlt } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faTrashAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Unmute.tsx b/src/icons/Unmute.tsx new file mode 100644 index 000000000..d4a90c1fb --- /dev/null +++ b/src/icons/Unmute.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Icon(props: React.SVGProps) { + return ( + + + + ); +} + +export default Icon; diff --git a/src/icons/UserPlus.tsx b/src/icons/UserPlus.tsx index c560af456..c2a4fe925 100644 --- a/src/icons/UserPlus.tsx +++ b/src/icons/UserPlus.tsx @@ -1,9 +1,25 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUserPlus } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faUserPlus })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/UserRegular.tsx b/src/icons/UserRegular.tsx index 47ee73c47..91149d27e 100644 --- a/src/icons/UserRegular.tsx +++ b/src/icons/UserRegular.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUser } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faUser })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Verified.tsx b/src/icons/Verified.tsx index 78c97282b..d138f7385 100644 --- a/src/icons/Verified.tsx +++ b/src/icons/Verified.tsx @@ -1,9 +1,26 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faBadgeCheck })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/index.ts b/src/icons/index.ts index 2a9159b1f..0b823029d 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -21,6 +21,28 @@ export { default as CommunityCoverPicture } from './CommunityCoverPicture'; export { default as Minus } from './Minus'; export { default as Poll } from './Poll'; export { default as CircleRemove } from './CircleRemove'; +export { default as MuteCircle } from './Mute'; +export { default as UnmuteCircle } from './Unmute'; +export { default as CommentIcon } from './Comment'; +export { default as DotsIcon } from './EllipsisH'; +export { default as LikeIcon } from './ThumbsUp'; +export { default as TrashIcon } from './Trash'; +export { default as ArrowLeftIcon } from './ArrowLeft'; +export { default as ArrowRightIcon } from './ArrowRight'; +export { default as ExpandIcon } from './Expand'; +export { default as LinkIcon } from './Link'; +export { default as CloseIcon } from './Close'; +export { default as VerifiedIcon } from './Verified'; +export { default as AddIcon } from './Add'; +export { default as BarsIcon } from './Bars'; +export { default as PauseIcon } from './Pause'; +export { default as PlayIcon } from './Play'; +export { default as ErrorIcon } from './Error'; +export { default as ArrowLeftCircle } from './ArrowLeftCircle'; +export { default as ArrowLeftCircle2 } from './ArrowLeftCircle2'; +export { default as ArrowRightCircle } from './ArrowRightCircle'; +export { default as EyeIcon } from './Eye'; + // files export { default as AudioFile } from './files/Audio'; diff --git a/src/icons/ui.stories.jsx b/src/icons/ui.stories.jsx index 7fc10a956..2e4fdcccc 100644 --- a/src/icons/ui.stories.jsx +++ b/src/icons/ui.stories.jsx @@ -1,10 +1,11 @@ import React from 'react'; import * as Icons from '.'; +import { BarsIcon } from '.'; export default { title: 'Assets/Icons', }; - +export const Bars = () => ; export const Category = () => ; export const Community = () => ; export const CommunityAlt = () => ;