# @arg/gds-icons

ARG Global Design System - Icons package supporting multiple platforms.

## 📦 Installation

```bash
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:

```bash
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`:

```tsx
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`:

```tsx
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)

```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:

```js
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:

```bash
# 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

[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=ncloc&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=sqale_rating&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=reliability_rating&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=security_rating&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=code_smells&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=duplicated_lines_density&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=bugs&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=sqale_index&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons) [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=arg-gds-icons&metric=vulnerabilities&token=b91daea6b81cf838c19b8f96a0d8e5c82951827e)](https://sonarcloud.io/summary/new_code?id=arg-gds-icons)