about summary refs log tree commit diff
path: root/src/view/icons/Logo.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/icons/Logo.tsx')
-rw-r--r--src/view/icons/Logo.tsx48
1 files changed, 48 insertions, 0 deletions
diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx
new file mode 100644
index 000000000..15ab5a11c
--- /dev/null
+++ b/src/view/icons/Logo.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import Svg, {
+  Path,
+  Defs,
+  LinearGradient,
+  Stop,
+  SvgProps,
+  PathProps,
+} from 'react-native-svg'
+
+import {colors} from '#/lib/styles'
+
+const ratio = 57 / 64
+
+type Props = {
+  fill?: PathProps['fill']
+} & SvgProps
+
+export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
+  const {fill, ...rest} = props
+  const gradient = fill === 'sky'
+  const _fill = gradient ? 'url(#sky)' : fill || colors.blue3
+  // @ts-ignore it's fiiiiine
+  const size = parseInt(rest.width || 32)
+  return (
+    <Svg
+      fill="none"
+      // @ts-ignore it's fiiiiine
+      ref={ref}
+      viewBox="0 0 64 57"
+      {...rest}
+      style={{width: size, height: size * ratio}}>
+      {gradient && (
+        <Defs>
+          <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+            <Stop offset="0" stopColor="#0A7AFF" stopOpacity="1" />
+            <Stop offset="1" stopColor="#59B9FF" stopOpacity="1" />
+          </LinearGradient>
+        </Defs>
+      )}
+
+      <Path
+        fill={_fill}
+        d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
+      />
+    </Svg>
+  )
+})