WIP rails

src/components/icons/BlueskyPlus.tsx

@@ -1,6 +1,13 @@
 import React from 'react'
 import {StyleSheet, TextProps} from 'react-native'
-import Svg, {Path, PathProps, SvgProps} from 'react-native-svg'
+import Svg, {
+  Defs,
+  LinearGradient,
+  Path,
+  PathProps,
+  Stop,
+  SvgProps,
+} from 'react-native-svg'
 
 import {useTheme} from '#/alf'
 
@@ -15,8 +22,9 @@ type Props = {
 export function Full(props: Props) {
   const t = useTheme()
   const {fill, ...rest} = props
+  const gradient = fill === 'nordic'
   const styles = StyleSheet.flatten(props.style)
-  const _fill = fill || styles?.color || t.palette.primary_500
+  const _fill = gradient ? 'url(#nordic)' : fill || styles?.color || t.palette.primary_500
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 100)
   const ratio = 90 / 448
@@ -27,6 +35,7 @@ export function Full(props: Props) {
       viewBox="0 0 448 90"
       {...rest}
       style={[styles, {width: size, height: size * ratio}]}>
+      {gradient && <Gradients />}
       <Path
         fill={_fill}
         fillRule="evenodd"
@@ -43,8 +52,9 @@ export function Full(props: Props) {
 export function Logotype(props: Props) {
   const t = useTheme()
   const {fill, ...rest} = props
+  const gradient = fill === 'nordic'
   const styles = StyleSheet.flatten(props.style)
-  const _fill = fill || styles?.color || t.palette.primary_500
+  const _fill = gradient ? 'url(#nordic)' : fill || styles?.color || t.palette.primary_500
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 100)
   const ratio = 78 / 330
@@ -55,6 +65,7 @@ export function Logotype(props: Props) {
       viewBox="0 0 330 78"
       {...rest}
       style={[styles, {width: size, height: size * ratio}]}>
+      {gradient && <Gradients />}
       <Path
         fill={_fill}
         fillRule="evenodd"
@@ -64,3 +75,14 @@ export function Logotype(props: Props) {
     </Svg>
   )
 }
+
+function Gradients() {
+  return (
+    <Defs>
+      <LinearGradient id="nordic" x1="0" y1="1" x2="1" y2="0">
+        <Stop offset="0" stopColor="#083367" stopOpacity="1" />
+        <Stop offset="1" stopColor="#9EE8C1" stopOpacity="1" />
+      </LinearGradient>
+    </Defs>
+  )
+}