@idealyst/components 1.0.52 → 1.0.54

package/CLAUDE.md

@@ -5,7 +5,7 @@ This file provides comprehensive component documentation for LLMs working with t
 ## Library Overview
 
 @idealyst/components is a cross-platform React/React Native component library with:
-- 13 core components organized into 6 categories
+- 14 core components organized into 7 categories
 - Theme-based styling with Unistyles
 - Intent-based color system (primary, neutral, success, error, warning)
 - Cross-platform compatibility (React & React Native)
@@ -33,6 +33,7 @@ This file provides comprehensive component documentation for LLMs working with t
 
 ### Utility Components
 - **Icon**: Icon display (`name`, `size`, `color`, `intent`)
+- **SVGImage**: SVG rendering (`source`, `width`, `height`, `size`, `color`, `intent`)
 
 ### Overlay Components
 - **Dialog**: Modal dialog (`open`, `onOpenChange`, `title`, `size="small|medium|large"`, `variant="default"`, `showCloseButton`, `closeOnBackdropClick`, `closeOnEscapeKey`)
@@ -67,6 +68,14 @@ All components use a consistent intent-based color system:
 </View>
 ```
 
+### SVG Usage
+```tsx
+import MyIcon from './assets/icon.svg';
+
+<SVGImage source={MyIcon} size={24} intent="primary" />
+<SVGImage source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/react.svg" }} size={32} color="#61dafb" />
+```
+
 ### Card with Content
 ```tsx
 <Card variant="outlined" clickable onPress={handlePress}>

package/README.md

@@ -65,7 +65,7 @@ export default function App() {
 
 ## Available Components
 
-The library includes 10 core components organized by category. Each component has detailed documentation in its respective folder.
+The library includes 14 core components organized by category. Each component has detailed documentation in its respective folder.
 
 ### Layout Components
 
@@ -102,6 +102,14 @@ The library includes 10 core components organized by category. Each component ha
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
 | **[Icon](src/Icon/README.md)** | Icon library with extensive options | [Icon Docs](src/Icon/README.md) |
+| **[SVGImage](src/SVGImage/README.md)** | SVG rendering with cross-platform support | [SVGImage Docs](src/SVGImage/README.md) |
+
+### Overlay Components
+
+| Component | Description | Documentation |
+|-----------|-------------|--------------|
+| **[Dialog](src/Dialog/README.md)** | Modal dialogs with customizable content | [Dialog Docs](src/Dialog/README.md) |
+| **[Popover](src/Popover/README.md)** | Contextual overlays and tooltips | [Popover Docs](src/Popover/README.md) |
 
 ## Quick Usage Examples
 
@@ -155,6 +163,26 @@ import { View, Card, Text, Avatar, Badge } from '@idealyst/components';
 </View>
 ```
 
+### SVG Icons
+```tsx
+import { SVGImage, View, Text } from '@idealyst/components';
+import LogoIcon from './assets/logo.svg';
+
+<View spacing="md">
+  <Text size="large" weight="bold">My App</Text>
+  
+  {/* Imported SVG */}
+  <SVGImage source={LogoIcon} size={40} intent="primary" />
+  
+  {/* Remote SVG */}
+  <SVGImage 
+    source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/react.svg" }}
+    size={24}
+    color="#61dafb"
+  />
+</View>
+```
+
 ## Theme System
 
 The library includes a comprehensive theme system with light and dark mode support.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/your-username/idealyst-framework/tree/main/packages/components#readme",
   "main": "src/index.ts",
@@ -40,7 +40,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.0.52",
+    "@idealyst/theme": "^1.0.54",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@react-native-vector-icons/common": "^12.0.1",

package/src/SVGImage/README.md

@@ -0,0 +1,209 @@
+# SVGImage Component
+
+A cross-platform React/React Native component for rendering SVG images with theme support and consistent styling.
+
+## Overview
+
+The SVGImage component provides a unified way to display SVG images across web and React Native platforms. It supports both imported SVG files (as React components) and remote SVG URLs, with built-in theming and styling capabilities.
+
+## Installation
+
+The SVGImage component is part of the `@idealyst/components` package:
+
+```bash
+yarn add @idealyst/components
+```
+
+For React Native projects, you also need:
+```bash
+yarn add react-native-svg react-native-svg-transformer
+```
+
+## Basic Usage
+
+### Imported SVG Files (Recommended)
+
+```tsx
+import { SVGImage } from '@idealyst/components';
+import MyLogo from './assets/logo.svg';
+
+function MyComponent() {
+  return (
+    <SVGImage 
+      source={MyLogo}
+      width={100}
+      height={50}
+    />
+  );
+}
+```
+
+### Remote SVG URLs
+
+```tsx
+import { SVGImage } from '@idealyst/components';
+
+function MyComponent() {
+  return (
+    <SVGImage 
+      source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/react.svg" }}
+      width={60}
+      height={60}
+      color="#61dafb"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `source` | `string \| { uri: string } \| React.FC<SvgProps>` | **Required** | SVG source - can be imported component, URL string, or URI object |
+| `width` | `number \| string` | `24` | Width of the SVG |
+| `height` | `number \| string` | `24` | Height of the SVG |
+| `size` | `number \| string` | - | Sets both width and height (overrides individual width/height) |
+| `color` | `string` | - | Fill color for the SVG |
+| `intent` | `'primary' \| 'success' \| 'error' \| 'warning' \| 'neutral'` | - | Theme-based color intent |
+| `style` | `ViewStyle` | - | Additional container styles |
+| `testID` | `string` | - | Test identifier |
+
+## Theme Integration
+
+The SVGImage component integrates with the Idealyst theme system:
+
+```tsx
+<SVGImage 
+  source={MyIcon}
+  size={24}
+  intent="primary" // Uses theme's primary color
+/>
+
+<SVGImage 
+  source={MyIcon}
+  size={24}
+  intent="success" // Uses theme's success color
+/>
+```
+
+## Platform Setup
+
+### React Native Setup
+
+1. **Install dependencies:**
+   ```bash
+   yarn add react-native-svg react-native-svg-transformer
+   ```
+
+2. **Configure Metro bundler** (`metro.config.js`):
+   ```javascript
+   const config = {
+     transformer: {
+       babelTransformerPath: require.resolve('react-native-svg-transformer'),
+     },
+     resolver: {
+       sourceExts: ['js', 'jsx', 'ts', 'tsx', 'svg'],
+       assetExts: ['png', 'jpg', 'jpeg', 'gif', 'webp'],
+     },
+   };
+   ```
+
+3. **Add TypeScript declarations** (`types/svg.d.ts`):
+   ```typescript
+   declare module '*.svg' {
+     import React from 'react';
+     import { SvgProps } from 'react-native-svg';
+     const content: React.FC<SvgProps>;
+     export default content;
+   }
+   ```
+
+4. **iOS: Install pods:**
+   ```bash
+   cd ios && pod install
+   ```
+
+### Web Setup
+
+For web projects using Vite, SVG imports work out of the box. Add TypeScript declarations if needed:
+
+```typescript
+// types/svg.d.ts
+declare module '*.svg' {
+  import React from 'react';
+  const content: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default content;
+}
+```
+
+## Examples
+
+### Basic Usage
+```tsx
+import { SVGImage } from '@idealyst/components';
+import LogoIcon from './logo.svg';
+
+<SVGImage source={LogoIcon} size={40} />
+```
+
+### With Theme Colors
+```tsx
+<SVGImage 
+  source={LogoIcon} 
+  size={32}
+  intent="primary"
+/>
+```
+
+### Remote SVG
+```tsx
+<SVGImage 
+  source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/typescript.svg" }}
+  width={48}
+  height={48}
+  color="#3178c6"
+/>
+```
+
+### Custom Styling
+```tsx
+<SVGImage 
+  source={LogoIcon}
+  size={60}
+  style={{ 
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    padding: 8 
+  }}
+/>
+```
+
+## Best Practices
+
+1. **Prefer imported SVGs over URLs** - Better performance and reliability
+2. **Use theme intents** - Ensures consistency with your design system
+3. **Provide dimensions** - Always specify width/height or size
+4. **Test on both platforms** - Verify SVGs render correctly on web and mobile
+5. **Use CDN URLs** - For remote SVGs, use reliable CDNs like jsDelivr
+
+## Limitations
+
+- **React Native**: Local SVG files must be imported as components (not file paths)
+- **Remote URLs**: Some servers may block requests from mobile apps (403 errors)
+- **Coloring**: Works best with single-color SVG icons
+
+## Troubleshooting
+
+### SVGs not showing on React Native
+- Ensure `react-native-svg-transformer` is configured in Metro
+- Check that SVGs are imported as components, not file paths
+- Verify pods are installed on iOS
+
+### Remote SVGs failing
+- Use CDN URLs (e.g., jsDelivr, unpkg) instead of direct server URLs
+- Check browser console for CORS or 403 errors
+- Consider hosting SVGs on your own CDN
+
+### TypeScript errors
+- Add SVG type declarations to your project
+- Ensure `react-native-svg` types are installed

package/src/SVGImage/SVGImage.native.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+import { SVGImageProps } from './types';
+import { svgImageStyles } from './SVGImage.styles';
+
+const SVGImage: React.FC<SVGImageProps> = ({
+  source,
+  width,
+  height,
+  size,
+  color,
+  intent,
+  style,
+  testID,
+  ...props
+}) => {
+  // Apply variants using Unistyles 3.0 pattern
+  if (intent) {
+    svgImageStyles.useVariants({
+      intent: intent as 'primary' | 'success' | 'error' | 'warning' | 'neutral',
+    });
+  }
+
+  // Determine dimensions - size takes precedence over individual width/height
+  const finalWidth = size || width || 24;
+  const finalHeight = size || height || 24;
+
+  // Mode 1: Handle React components (imported SVG components)
+  if (typeof source === 'function') {
+    const SvgComponent = source;
+    return (
+      <View style={[svgImageStyles.container, style]} testID={testID} {...props}>
+        <SvgComponent
+          width={finalWidth}
+          height={finalHeight}
+          fill={color}
+          color={color}
+        />
+      </View>
+    );
+  }
+
+  // Mode 2: Handle URI-based SVG loading
+  const sourceUri = typeof source === 'string' ? source : source.uri;
+  
+  return (
+    <View style={[svgImageStyles.container, style]} testID={testID} {...props}>
+      <SvgUri
+        uri={sourceUri}
+        width={finalWidth}
+        height={finalHeight}
+        fill={color}
+        color={color}
+      />
+    </View>
+  );
+};
+
+export default SVGImage;

package/src/SVGImage/SVGImage.styles.tsx

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const svgImageStyles = StyleSheet.create((theme) => ({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    
+    variants: {
+      intent: {
+        primary: {
+          // Use CSS filter for web, tintColor for React Native
+          filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
+        },
+        success: {
+          filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
+        },
+        error: {
+          filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
+        },
+        warning: {
+          filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
+        },
+        neutral: {
+          filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
+        },
+      },
+    },
+    
+    // Web-specific styles
+    _web: {
+      userSelect: 'none',
+    },
+    
+    // Native-specific styles  
+    _native: {
+      variants: {
+        intent: {
+          primary: {
+            tintColor: theme.intents?.primary?.main || '#3b82f6',
+          },
+          success: {
+            tintColor: theme.intents?.success?.main || '#22c55e',
+          },
+          error: {
+            tintColor: theme.intents?.error?.main || '#ef4444',
+          },
+          warning: {
+            tintColor: theme.intents?.warning?.main || '#f59e0b',
+          },
+          neutral: {
+            tintColor: theme.intents?.neutral?.main || '#6b7280',
+          },
+        },
+      },
+    },
+  },
+  
+  image: {
+    // Base image styles
+    _web: {
+      display: 'block',
+      maxWidth: '100%',
+      height: 'auto',
+    },
+    
+    _native: {
+      // Native image styles will be applied via Image component
+    },
+  },
+}));

package/src/SVGImage/SVGImage.web.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { SVGImageProps } from './types';
+import { svgImageStyles } from './SVGImage.styles';
+
+const SVGImage: React.FC<SVGImageProps> = ({
+  source,
+  width,
+  height,
+  size,
+  color,
+  intent,
+  resizeMode = 'contain',
+  style,
+  testID,
+  ...props
+}) => {
+  // Apply variants using Unistyles 3.0 pattern
+  if (intent) {
+    svgImageStyles.useVariants({
+      intent: intent as 'primary' | 'success' | 'error' | 'warning' | 'neutral',
+    });
+  }
+
+  // Determine dimensions - size takes precedence over individual width/height
+  const finalWidth = size || width;
+  const finalHeight = size || height;
+
+  // Handle React components (imported SVG components)
+  if (typeof source === 'function') {
+    const SvgComponent = source;
+    return (
+      <div {...getWebProps([svgImageStyles.container, style])} {...props} data-testid={testID}>
+        <SvgComponent
+          width={finalWidth || 24}
+          height={finalHeight || 24}
+          fill={color || 'currentColor'}
+          color={color || 'currentColor'}
+        />
+      </div>
+    );
+  }
+
+  // Determine source URL
+  const sourceUrl = typeof source === 'string' ? source : source.uri;
+
+  // Create the style array
+  const containerStyleArray = [
+    svgImageStyles.container,
+    style,
+  ];
+
+  const imageStyleArray = [
+    svgImageStyles.image,
+  ];
+
+  // Use getWebProps to generate className and ref for web
+  const containerWebProps = getWebProps(containerStyleArray);
+  const imageWebProps = getWebProps(imageStyleArray);
+
+  // Apply custom color if provided
+  // Convert React Native resize modes to CSS object-fit values
+  const getObjectFit = (mode: 'contain' | 'cover' | 'stretch'): React.CSSProperties['objectFit'] => {
+    switch (mode) {
+      case 'contain': return 'contain';
+      case 'cover': return 'cover';
+      case 'stretch': return 'fill';
+      default: return 'contain';
+    }
+  };
+
+  const imageStyle: React.CSSProperties = {
+    width: finalWidth,
+    height: finalHeight,
+    objectFit: getObjectFit(resizeMode),
+    ...(color && {
+      filter: `brightness(0) saturate(100%) ${color}`,
+    }),
+  };
+
+  return (
+    <div {...containerWebProps} {...props} data-testid={testID}>
+      <img
+        {...imageWebProps}
+        src={sourceUrl}
+        alt="SVG Image"
+        style={imageStyle}
+      />
+    </div>
+  );
+};
+
+export default SVGImage;

package/src/SVGImage/index.native.ts

@@ -0,0 +1,2 @@
+export { default } from './SVGImage.native';
+export * from './types';

package/src/SVGImage/index.ts

@@ -0,0 +1,5 @@
+// Platform-agnostic SVGImage export
+// Metro will resolve to index.native.ts for React Native
+// This file serves as fallback for web environments
+export { default } from './SVGImage.web';
+export * from './types';

package/src/SVGImage/index.web.ts

@@ -0,0 +1,2 @@
+export { default } from './SVGImage.web';
+export * from './types';

package/src/SVGImage/types.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+import { IntentNames } from '../theme';
+
+export interface SVGImageProps extends Omit<ViewProps, 'children'> {
+  source: string | { uri: string } | React.FC<SvgProps>;
+  width?: number | string;
+  height?: number | string;
+  size?: number | string;
+  color?: string;
+  intent?: IntentNames;
+  resizeMode?: 'contain' | 'cover' | 'stretch';
+}

package/src/examples/AllExamples.tsx

@@ -11,6 +11,7 @@ import { DividerExamples } from './DividerExamples';
 import { BadgeExamples } from './BadgeExamples';
 import { AvatarExamples } from './AvatarExamples';
 import { ScreenExamples } from './ScreenExamples';
+import { SVGImageExamples } from './SVGImageExamples';
 import { DialogExamples } from './DialogExamples';
 import { PopoverExamples } from './PopoverExamples';
 import { ThemeExtensionExamples } from './ThemeExtensionExamples';
@@ -63,6 +64,9 @@ export const AllExamples = () => {
       <ScreenExamples />
       <Divider spacing="medium" />
       
+      <SVGImageExamples />
+      <Divider spacing="medium" />
+      
       <DialogExamples />
       <Divider spacing="medium" />
       

package/src/examples/SVGImageExamples.tsx

@@ -0,0 +1,188 @@
+import { Screen, View, SVGImage, Text } from '../index';
+import testLogo from './test-logo.svg';
+
+export const SVGImageExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+        <Text size="large" weight="bold" align="center">
+          SVG Image Examples
+        </Text>
+        
+        {/* Local SVG File Example */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Loading Local SVG File</Text>
+          <Text size="small">
+            Using the test-logo.svg file - works on web, limited support on React Native
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            {/* Original size */}
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+            />
+            
+            {/* Smaller version */}
+            <SVGImage 
+              source={testLogo}
+              width={68} 
+              height={20}
+            />
+            
+            {/* Using size prop */}
+            <SVGImage 
+              source={testLogo}
+              size={40}
+            />
+          </View>
+        </View>
+
+        {/* Intent Colors */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Intent Colors</Text>
+          <Text size="small">
+            SVG images with theme-based coloring
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+              intent="primary"
+            />
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+              intent="success"
+            />
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+              intent="error"
+            />
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+              intent="warning"
+            />
+          </View>
+        </View>
+
+        {/* Custom Colors */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Custom Colors</Text>
+          <Text size="small">
+            Direct color specification
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+              color="#ff6b6b"
+            />
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+              color="#4ecdc4"
+            />
+            <SVGImage 
+              source={testLogo}
+              width={102} 
+              height={30}
+              color="#45b7d1"
+            />
+          </View>
+        </View>
+
+        {/* Remote URL Example */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Loading from URL</Text>
+          <Text size="small">
+            SVG images loaded from remote URLs (web only for security)
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <SVGImage 
+              source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/react.svg" }}
+              width={60} 
+              height={60}
+            />
+            <SVGImage 
+              source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/javascript.svg" }}
+              width={60} 
+              height={60}
+              intent="primary"
+            />
+            <SVGImage 
+              source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/typescript.svg" }}
+              width={60} 
+              height={60}
+              intent="success"
+            />
+          </View>
+        </View>
+
+        {/* Resize Modes */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Resize Modes</Text>
+          <Text size="small">
+            Different ways to fit SVG images in containers
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <View style={{ width: 80, height: 40, backgroundColor: 'rgba(0,0,0,0.1)' }}>
+              <SVGImage 
+                source={testLogo}
+                width="100%" 
+                height="100%"
+                resizeMode="contain"
+              />
+            </View>
+            <View style={{ width: 80, height: 40, backgroundColor: 'rgba(0,0,0,0.1)' }}>
+              <SVGImage 
+                source={testLogo}
+                width="100%" 
+                height="100%"
+                resizeMode="cover"
+              />
+            </View>
+            <View style={{ width: 80, height: 40, backgroundColor: 'rgba(0,0,0,0.1)' }}>
+              <SVGImage 
+                source={testLogo}
+                width="100%" 
+                height="100%"
+                resizeMode="stretch"
+              />
+            </View>
+          </View>
+        </View>
+
+        {/* Usage Tips */}
+        <View spacing="md">
+          <Text size="medium" weight="semibold">Usage Tips</Text>
+          <View spacing="sm">
+            <Text size="small">
+              • <Text weight="semibold">Local files:</Text> Use relative paths for bundled SVG files
+            </Text>
+            <Text size="small">
+              • <Text weight="semibold">Remote URLs:</Text> Use {`{ uri: "https://..." }`} format
+            </Text>
+            <Text size="small">
+              • <Text weight="semibold">React Native:</Text> Local SVGs have limited support - use remote URLs or convert to PNG
+            </Text>
+            <Text size="small">
+              • <Text weight="semibold">Coloring:</Text> Works best with single-color SVG icons
+            </Text>
+            <Text size="small">
+              • <Text weight="semibold">Performance:</Text> Cache remote SVGs for better performance
+            </Text>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/index.ts

@@ -9,6 +9,7 @@ export { DividerExamples } from './DividerExamples';
 export { BadgeExamples } from './BadgeExamples';
 export { AvatarExamples } from './AvatarExamples';
 export { ScreenExamples } from './ScreenExamples';
+export { SVGImageExamples } from './SVGImageExamples';
 export { DialogExamples } from './DialogExamples';
 export { PopoverExamples } from './PopoverExamples';
 export { ThemeExtensionExamples } from './ThemeExtensionExamples';

package/src/examples/test-logo.svg

@@ -0,0 +1,8 @@
+<svg width="102" height="30" viewBox="0 0 102 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.01539 11.8959H2.82339C1.45806 11.8959 0.775391 11.2026 0.775391 9.81594V8.82394C0.775391 7.43728 1.45806 6.74394 2.82339 6.74394H3.23939V4.02394C3.23939 2.63728 3.93272 1.94394 5.31939 1.94394H7.59139C8.99939 1.94394 9.70339 2.63728 9.70339 4.02394V6.74394H10.8554C12.2634 6.74394 12.9674 7.43728 12.9674 8.82394V9.81594C12.9674 11.2026 12.2847 11.8959 10.9194 11.8959H9.70339V15.8639C9.70339 16.7386 10.1621 17.2399 11.0794 17.3679C11.4634 17.4319 11.7834 17.4959 12.0394 17.5599C12.2954 17.6239 12.4981 17.7306 12.6474 17.8799C12.8181 18.0079 12.9354 18.1893 12.9994 18.4239C13.0847 18.6373 13.1274 18.9253 13.1274 19.2879V21.0799C13.1274 21.8693 12.8927 22.4133 12.4234 22.7119C11.9754 23.0106 11.3034 23.1599 10.4074 23.1599C9.89539 23.1599 9.21272 23.0959 8.35939 22.9679C7.52739 22.8186 6.71672 22.5306 5.92739 22.1039C5.13806 21.6773 4.45539 21.0693 3.87939 20.2799C3.30339 19.4906 3.01539 18.4346 3.01539 17.1119V11.8959Z" fill="#0F77EE"/>
+<path d="M14.9504 8.47194C14.9504 7.08528 15.6437 6.39194 17.0304 6.39194H19.2384C20.6464 6.39194 21.3504 7.08528 21.3504 8.47194V9.11194C21.3504 9.23994 21.3397 9.35728 21.3184 9.46394C21.3184 9.57061 21.3184 9.66661 21.3184 9.75194C21.2971 9.83728 21.2864 9.93328 21.2864 10.0399H21.3504C21.4784 9.67728 21.6704 9.27194 21.9264 8.82394C22.1824 8.37594 22.4917 7.95994 22.8544 7.57594C23.2384 7.19194 23.6437 6.87194 24.0704 6.61594C24.5184 6.33861 24.9877 6.19994 25.4784 6.19994C26.1397 6.19994 26.5877 6.38128 26.8224 6.74394C27.0784 7.10661 27.2064 7.62928 27.2064 8.31194V10.4879C27.2064 11.8959 26.5237 12.5999 25.1584 12.5999C23.9637 12.5999 23.0784 12.9839 22.5024 13.7519C21.9264 14.5199 21.6384 15.5119 21.6384 16.7279V20.9199C21.6384 22.3066 20.9344 22.9999 19.5264 22.9999H17.0304C15.6437 22.9999 14.9504 22.3066 14.9504 20.9199V8.47194Z" fill="#0F77EE"/>
+<path d="M35.0096 15.7679C35.0096 16.3653 35.1376 16.7813 35.3936 17.0159C35.6496 17.2293 36.0123 17.3359 36.4816 17.3359C36.9723 17.3359 37.367 17.2293 37.6656 17.0159C37.9643 16.8026 38.199 16.5253 38.3696 16.1839C38.5403 15.8213 38.6576 15.4266 38.7216 14.9999C38.7856 14.5519 38.8176 14.1146 38.8176 13.6879V8.47194C38.8176 7.08528 39.5216 6.39194 40.9296 6.39194H43.4256C44.8123 6.39194 45.5056 7.08528 45.5056 8.47194V20.9199C45.5056 22.3066 44.8123 22.9999 43.4256 22.9999H41.2176C40.535 22.9999 40.023 22.8399 39.6816 22.5199C39.3403 22.1786 39.1696 21.7306 39.1696 21.1759V20.6639H39.1056C38.871 21.1973 38.583 21.6453 38.2416 22.0079C37.9003 22.3493 37.5163 22.6266 37.0896 22.8399C36.6843 23.0319 36.2363 23.1706 35.7456 23.2559C35.2763 23.3413 34.7963 23.3839 34.3056 23.3839C33.559 23.3839 32.823 23.2879 32.0976 23.0959C31.3723 22.9039 30.7323 22.5733 30.1776 22.1039C29.623 21.6346 29.175 21.0053 28.8336 20.2159C28.4923 19.4266 28.3216 18.4346 28.3216 17.2399V8.47194C28.3216 7.08528 29.0256 6.39194 30.4336 6.39194H32.9296C34.3163 6.39194 35.0096 7.08528 35.0096 8.47194V15.7679Z" fill="#0F77EE"/>
+<path d="M47.2784 14.6479C47.2784 13.3893 47.4491 12.2373 47.7904 11.1919C48.1531 10.1253 48.6651 9.20794 49.3264 8.43994C50.0091 7.67194 50.8304 7.07461 51.7904 6.64794C52.7717 6.22128 53.8704 6.00794 55.0864 6.00794C55.8544 6.00794 56.4731 6.08261 56.9424 6.23194C57.4331 6.38128 57.8277 6.54128 58.1264 6.71194C58.4677 6.92528 58.7237 7.15994 58.8944 7.41594H58.9584C58.9371 7.33061 58.9264 7.24528 58.9264 7.15994V2.07194C58.9264 0.685277 59.6304 -0.00805664 61.0384 -0.00805664H63.5344C64.9211 -0.00805664 65.6144 0.685277 65.6144 2.07194V20.9199C65.6144 22.3066 64.9211 22.9999 63.5344 22.9999H61.4864C60.1851 22.9999 59.4811 22.3279 59.3744 20.9839H59.3424C58.8944 21.8373 58.2544 22.4559 57.4224 22.8399C56.5904 23.2026 55.6837 23.3839 54.7024 23.3839C53.6144 23.3839 52.6117 23.1706 51.6944 22.7439C50.7984 22.3173 50.0197 21.7199 49.3584 20.9519C48.6971 20.1839 48.1851 19.2666 47.8224 18.1999C47.4597 17.1333 47.2784 15.9493 47.2784 14.6479ZM53.9664 14.7119C53.9664 15.6719 54.2011 16.4506 54.6704 17.0479C55.1611 17.6239 55.7904 17.9119 56.5584 17.9119C57.2411 17.9119 57.8384 17.6559 58.3504 17.1439C58.8624 16.6319 59.1184 15.8426 59.1184 14.7759C59.1184 13.8586 58.8944 13.1013 58.4464 12.5039C58.0197 11.8853 57.4011 11.5759 56.5904 11.5759C55.8651 11.5759 55.2464 11.8426 54.7344 12.3759C54.2224 12.9093 53.9664 13.6879 53.9664 14.7119Z" fill="#0F77EE"/>
+<path d="M67.2426 18.2639C67.2426 17.2826 67.5093 16.4613 68.0426 15.7999C68.5973 15.1173 69.3013 14.5626 70.1546 14.1359C71.0293 13.7093 72.0106 13.3999 73.0986 13.2079C74.1866 13.0159 75.2853 12.9199 76.3946 12.9199H76.7146V12.3759C76.7146 11.9706 76.5226 11.7039 76.1386 11.5759C75.7546 11.4266 75.3493 11.3519 74.9226 11.3519C74.5173 11.3519 74.08 11.4159 73.6106 11.5439C73.1413 11.6506 72.6933 11.7893 72.2666 11.9599C71.6266 12.2373 71.072 12.3013 70.6026 12.1519C70.1333 12.0026 69.7493 11.6186 69.4506 10.9999L69.0026 10.0399C68.7253 9.44261 68.6506 8.89861 68.7786 8.40794C68.9066 7.91728 69.2693 7.53328 69.8666 7.25594C70.5706 6.93594 71.4026 6.64794 72.3626 6.39194C73.3226 6.13594 74.3893 6.00794 75.5626 6.00794C76.7573 6.00794 77.8346 6.16794 78.7946 6.48794C79.7546 6.80794 80.576 7.26661 81.2586 7.86394C81.9413 8.46128 82.464 9.18661 82.8266 10.0399C83.1893 10.8933 83.3706 11.8533 83.3706 12.9199V20.9199C83.3706 22.3066 82.6773 22.9999 81.2906 22.9999H79.4026C78.1226 22.9999 77.4293 22.2639 77.3226 20.7919H77.2586C76.8106 21.4746 76.224 22.0826 75.4986 22.6159C74.7946 23.1279 73.824 23.3839 72.5866 23.3839C71.7546 23.3839 71.008 23.2453 70.3466 22.9679C69.6853 22.6906 69.12 22.3173 68.6506 21.8479C68.2026 21.3786 67.8506 20.8346 67.5946 20.2159C67.36 19.5973 67.2426 18.9466 67.2426 18.2639ZM73.2906 17.6879C73.2906 17.9226 73.3866 18.1679 73.5786 18.4239C73.7706 18.6586 74.112 18.7759 74.6026 18.7759C75.2213 18.7759 75.7333 18.5733 76.1386 18.1679C76.5653 17.7413 76.7786 17.2186 76.7786 16.5999V16.2799H76.4266C75.5093 16.2799 74.752 16.4079 74.1546 16.6639C73.5786 16.8986 73.2906 17.2399 73.2906 17.6879Z" fill="#0F77EE"/>
+<path d="M85.2286 25.4959C85.506 24.8986 85.826 24.5253 86.1886 24.3759C86.5513 24.2266 86.9246 24.1839 87.3086 24.2479C87.4153 24.2693 87.5326 24.2906 87.6606 24.3119C87.81 24.3333 87.9806 24.3439 88.1726 24.3439C88.5993 24.3439 88.994 24.1946 89.3566 23.8959C89.7406 23.6186 90.0073 23.2773 90.1566 22.8719L90.2526 22.6159L84.2046 8.82394C83.8846 8.09861 83.8633 7.51194 84.1406 7.06394C84.4393 6.61594 84.994 6.39194 85.8046 6.39194H88.9086C89.5273 6.39194 90.0393 6.53061 90.4446 6.80794C90.8713 7.08528 91.1593 7.52261 91.3086 8.11994L92.4606 12.6959C92.5246 12.9306 92.5886 13.2293 92.6526 13.5919C92.7166 13.9333 92.77 14.2746 92.8126 14.6159C92.8766 14.9999 92.93 15.4159 92.9726 15.8639H93.0366C93.1006 15.4159 93.1646 14.9999 93.2286 14.6159C93.2713 14.2746 93.3246 13.9226 93.3886 13.5599C93.4526 13.1973 93.506 12.8986 93.5486 12.6639L94.3486 8.18394C94.4553 7.56528 94.7113 7.11728 95.1166 6.83994C95.5433 6.54128 96.066 6.39194 96.6846 6.39194H99.5646C100.333 6.39194 100.866 6.61594 101.165 7.06394C101.485 7.49061 101.517 8.06661 101.261 8.79194L95.7566 24.2479C95.3726 25.3146 94.8926 26.1999 94.3166 26.9039C93.7406 27.6079 93.1113 28.1626 92.4286 28.5679C91.746 28.9946 91.0313 29.2933 90.2846 29.4639C89.538 29.6346 88.8126 29.7199 88.1086 29.7199C87.682 29.7199 87.2766 29.6879 86.8926 29.6239C86.5086 29.5599 86.1353 29.4746 85.7726 29.3679C85.154 29.1546 84.7593 28.7919 84.5886 28.2799C84.418 27.7893 84.4713 27.2346 84.7486 26.6159L85.2286 25.4959Z" fill="#0F77EE"/>
+</svg>

package/src/index.native.ts

@@ -31,6 +31,9 @@ export * from './Screen/types';
 export { default as Icon } from './Icon';
 export * from './Icon/types';
 
+export { default as SVGImage } from './SVGImage';
+export * from './SVGImage/types';
+
 export { default as Dialog } from './Dialog';
 export * from './Dialog/types';
 
@@ -48,6 +51,7 @@ export type { BadgeProps } from './Badge/types';
 export type { AvatarProps } from './Avatar/types';
 export type { ScreenProps } from './Screen/types';
 export type { IconProps } from './Icon/types';
+export type { SVGImageProps } from './SVGImage/types';
 export type { DialogProps } from './Dialog/types';
 export type { PopoverProps } from './Popover/types';
 

package/src/index.ts

@@ -35,6 +35,9 @@ export * from './Screen/types';
 export { default as Icon } from './Icon';
 export * from './Icon/types';
 
+export { default as SVGImage } from './SVGImage';
+export * from './SVGImage/types';
+
 export { default as Dialog } from './Dialog';
 export * from './Dialog/types';
 
@@ -52,6 +55,7 @@ export type { BadgeProps } from './Badge/types';
 export type { AvatarProps } from './Avatar/types';
 export type { ScreenProps } from './Screen/types';
 export type { IconProps } from './Icon/types';
+export type { SVGImageProps } from './SVGImage/types';
 export type { DialogProps } from './Dialog/types';
 export type { PopoverProps } from './Popover/types';