@arg/gds-icons

ARG Global Design System - Icons package supporting multiple platforms.

📦 Installation

npm install @arg/gds-icons
# or
pnpm add @arg/gds-icons
# or
yarn add @arg/gds-icons

🎯 Platform-Specific Setup

This package supports multiple platforms with optional peer dependencies. You only need to install the dependencies for your platform.

For React Native Projects

Install React Native peer dependencies:

npm install react react-native react-native-svg
# or
pnpm add react react-native react-native-svg

For Stencil.js Projects

No additional dependencies needed! @stencil/core is included.

For Web Projects (HTML/Angular/React)

Use the web components or SVG icons directly. See usage examples below.

🚀 Usage

React Native Components

Import React Native components from /react-native:

import { ArrowDownIcon, HomeIcon } from '@arg/gds-icons/react-native';
// or from specific category
import { UsIcon } from '@arg/gds-icons/react-native/Country flags';

function MyComponent() {
  return (
    <View>
      <ArrowDownIcon width={24} height={24} fill="#000" />
      <HomeIcon width={32} height={32} stroke="#333" />
    </View>
  );
}

Props: All components accept standard SvgProps from react-native-svg:

• width, height (default: 24)
• fill, stroke
• style, testID, etc.

Stencil Components

Import Stencil components from /stencil:

import { ArrowDown, Home } from '@arg/gds-icons/stencil';
// or from specific category
import { Us } from '@arg/gds-icons/stencil/Country flags';

@Component({
  tag: 'my-component',
})
export class MyComponent {
  render() {
    return (
      <div>
        <ArrowDown size={24} color="blue" flipRtl={false} />
        <Home size={32} color="#333" />
      </div>
    );
  }
}

Props:

• size: number (default: 24) - Icon size in pixels
• color: string (default: 'currentColor') - Icon color
• flipRtl: boolean (default: false) - Flip icon for RTL languages

Web Components (HTML)

<script type="module" src="node_modules/@arg/gds-icons/dist/gds-icons/gds-icons.esm.js"></script>

<arrow-down-icon size="24" color="blue"></arrow-down-icon>
<home-icon size="32"></home-icon>

Raw SVG Icons

Import SVG strings directly:

import { arrowDown } from '@arg/gds-icons';

// Use in your templates or render functions

📁 Available Categories

• Country flags: 265+ country and region flags
• System icon: 700+ system and interface icons organized in subcategories:
  • Arrows
  • Interface
  • Finance
  • Shop
  • User
  • Files
  • And more...

🏗️ Development

Generate Components

After adding or modifying SVG icons:

# Generate both React Native and Stencil components
pnpm generate:components

# Build everything
pnpm build

Build Process

The build process includes:

1. build.files - Optimizes SVG icons
2. generate:components - Generates React Native & Stencil components
3. build.component - Builds Stencil web components
4. build.collection - Creates distribution collection
5. build.ui-copy - Copies UI components to distribution folders

📦 Package Structure

@arg/gds-icons/
├── dist/              # Stencil build output
├── components/        # Custom elements
├── icons/             # Raw SVG exports
├── react-native/      # React Native components
│   ├── Country flags/
│   └── System icon/
└── stencil/           # Stencil components
    ├── Country flags/
    └── System icon/

🔧 TypeScript Support

Full TypeScript support included with type definitions for all platforms.

📄 License

UNLICENSED - ARG Global Design System