npm package: @gems-group/icons
Description: Gems Group icon pack — bold, outline, linear and broken variants
Author: Ayomide Ajala, Idowu Olatunji
Latest version: 1.0.0

# @gems-group/icons

A comprehensive SVG icon pack with 993 icons across 4 variants — **bold**, **outline**, **linear**, and **broken**.

---

## Installation

```bash
npm install @gems-group/icons
```

---

## Available Variants

| Variant   | Description                    |
| --------- | ------------------------------ |
| `bold`    | Filled solid icons             |
| `outline` | Outlined icons with no fill    |
| `linear`  | Thin stroke icons              |
| `broken`  | Broken/incomplete stroke style |

---

## Usage in Laravel (Blade)

### Step 1 — Inject the sprite

Add this once in your main layout file `resources/views/layouts/app.blade.php`, right after the opening `<body>` tag:

```blade
<div style="display:none">
  {!! file_get_contents(base_path('node_modules/@gems-group/icons/dist/bold/icons-bold.svg')) !!}
  {!! file_get_contents(base_path('node_modules/@gems-group/icons/dist/outline/icons-outline.svg')) !!}
  {!! file_get_contents(base_path('node_modules/@gems-group/icons/dist/linear/icons-linear.svg')) !!}
  {!! file_get_contents(base_path('node_modules/@gems-group/icons/dist/broken/icons-broken.svg')) !!}
</div>
```

### Step 2 — Use icons directly in Blade

```blade
<svg width="24" height="24"><use href="#icon-bold-home"/></svg>
<svg width="24" height="24"><use href="#icon-outline-search-normal"/></svg>
<svg width="24" height="24"><use href="#icon-linear-arrow-right"/></svg>
<svg width="24" height="24"><use href="#icon-broken-setting"/></svg>
```

### Step 3 — Create a reusable Blade component

Create `resources/views/components/icon.blade.php`:

```blade
@props(['name', 'variant' => 'linear', 'size' => 24, 'class' => ''])

<svg
  width="{{ $size }}"
  height="{{ $size }}"
  class="{{ $class }}"
  style="fill:currentColor; stroke:currentColor;"
>
  <use href="#icon-{{ $variant }}-{{ $name }}"/>
</svg>
```

### Step 4 — Use the component

```blade
{{-- Basic usage --}}
<x-icon name="home" />

{{-- With variant --}}
<x-icon name="home" variant="bold" />

{{-- With size --}}
<x-icon name="search-normal" variant="outline" size="20" />

{{-- With Tailwind color --}}
<x-icon name="arrow-right" variant="linear" class="text-blue-500" />

{{-- With custom size and color --}}
<x-icon name="setting" variant="broken" size="32" class="text-gray-400" />
```

### Icon naming convention

Icon names are **kebab-case** versions of the Iconsax icon names:

```blade
{{-- Examples --}}
<x-icon name="home" variant="bold" />
<x-icon name="search-normal" variant="linear" />
<x-icon name="arrow-right-1" variant="outline" />
<x-icon name="profile-2user" variant="bold" />
<x-icon name="shopping-cart" variant="linear" />
<x-icon name="tick-circle" variant="bold" />
<x-icon name="close-circle" variant="outline" />
<x-icon name="notification-bing" variant="linear" />
```

---

## Usage in React

### Step 1 — Install the package

```bash
npm install @gems-group/icons
```

### Step 2 — Create the sprite loader component

Create `src/components/IconSprite.jsx`:

```jsx
import boldSprite from "@gems-group/icons/dist/bold/icons-bold.svg?raw";
import outlineSprite from "@gems-group/icons/dist/outline/icons-outline.svg?raw";
import linearSprite from "@gems-group/icons/dist/linear/icons-linear.svg?raw";
import brokenSprite from "@gems-group/icons/dist/broken/icons-broken.svg?raw";

const IconSprite = () => (
  <div
    style={{ display: "none" }}
    dangerouslySetInnerHTML={{
      __html: boldSprite + outlineSprite + linearSprite + brokenSprite,
    }}
  />
);

export default IconSprite;
```

### Step 3 — Add the sprite to your app root

In `src/main.jsx` or `src/App.jsx`:

```jsx
import IconSprite from "./components/IconSprite";

function App() {
  return (
    <>
      <IconSprite />
      {/* rest of your app */}
    </>
  );
}

export default App;
```

### Step 4 — Create a reusable Icon component

Create `src/components/Icon.jsx`:

```jsx
const Icon = ({
  name,
  variant = "linear",
  size = 24,
  color = "currentColor",
  className = "",
  style = {},
}) => (
  <svg
    width={size}
    height={size}
    className={className}
    style={{ fill: color, stroke: color, ...style }}
  >
    <use href={`#icon-${variant}-${name}`} />
  </svg>
);

export default Icon;
```

### Step 5 — Use it anywhere

```jsx
import Icon from './components/Icon';

// Basic usage
<Icon name="home" />

// With variant
<Icon name="home" variant="bold" />

// With size and color
<Icon name="search-normal" variant="outline" size={20} color="#667085" />

// With Tailwind class
<Icon name="arrow-right" variant="linear" className="text-blue-500" />

// Inside a button
<button className="flex items-center gap-2">
  <Icon name="add-circle" variant="bold" size={20} />
  Add Item
</button>
```

### TypeScript support

If you're using TypeScript, create `src/components/Icon.tsx`:

```tsx
type IconVariant = "bold" | "outline" | "linear" | "broken";

interface IconProps {
  name: string;
  variant?: IconVariant;
  size?: number;
  color?: string;
  className?: string;
  style?: React.CSSProperties;
}

const Icon = ({
  name,
  variant = "linear",
  size = 24,
  color = "currentColor",
  className = "",
  style = {},
}: IconProps) => (
  <svg
    width={size}
    height={size}
    className={className}
    style={{ fill: color, stroke: color, ...style }}
  >
    <use href={`#icon-${variant}-${name}`} />
  </svg>
);

export default Icon;
```

---

## Usage in React Native

### Step 1 — Install dependencies

```bash
npm install @gems-group/icons react-native-svg
```

For Expo:

```bash
npx expo install react-native-svg
```

### Step 2 — Create the Icon component

Create `src/components/Icon.jsx`:

```jsx
import React from "react";
import { SvgXml } from "react-native-svg";
import boldIcons from "@gems-group/icons/dist/bold/icons-bold.json";
import outlineIcons from "@gems-group/icons/dist/outline/icons-outline.json";
import linearIcons from "@gems-group/icons/dist/linear/icons-linear.json";
import brokenIcons from "@gems-group/icons/dist/broken/icons-broken.json";

const iconSets = {
  bold: boldIcons,
  outline: outlineIcons,
  linear: linearIcons,
  broken: brokenIcons,
};

const Icon = ({ name, variant = "linear", size = 24, color = "#000000" }) => {
  const set = iconSets[variant];

  if (!set || !set[name]) {
    console.warn(
      `@gems-group/icons: icon "${name}" not found in variant "${variant}"`,
    );
    return null;
  }

  const svg = set[name]
    .replace(/fill="currentColor"/g, `fill="${color}"`)
    .replace(/stroke="currentColor"/g, `stroke="${color}"`);

  return <SvgXml xml={svg} width={size} height={size} />;
};

export default Icon;
```

### Step 3 — TypeScript support

Create `src/components/Icon.tsx`:

```tsx
import React from "react";
import { SvgXml } from "react-native-svg";
import boldIcons from "@gems-group/icons/dist/bold/icons-bold.json";
import outlineIcons from "@gems-group/icons/dist/outline/icons-outline.json";
import linearIcons from "@gems-group/icons/dist/linear/icons-linear.json";
import brokenIcons from "@gems-group/icons/dist/broken/icons-broken.json";

type IconVariant = "bold" | "outline" | "linear" | "broken";

interface IconProps {
  name: string;
  variant?: IconVariant;
  size?: number;
  color?: string;
}

const iconSets: Record<IconVariant, Record<string, string>> = {
  bold: boldIcons,
  outline: outlineIcons,
  linear: linearIcons,
  broken: brokenIcons,
};

const Icon: React.FC<IconProps> = ({
  name,
  variant = "linear",
  size = 24,
  color = "#000000",
}) => {
  const set = iconSets[variant];

  if (!set?.[name]) {
    console.warn(`@gems-group/icons: "${name}" not found in "${variant}"`);
    return null;
  }

  const svg = set[name]
    .replace(/fill="currentColor"/g, `fill="${color}"`)
    .replace(/stroke="currentColor"/g, `stroke="${color}"`);

  return <SvgXml xml={svg} width={size} height={size} />;
};

export default Icon;
```

### Step 4 — Use it anywhere

```jsx
import Icon from './components/Icon';

// Basic usage
<Icon name="home" />

// With variant
<Icon name="home" variant="bold" />

// With size and color
<Icon name="search-normal" variant="outline" size={20} color="#667085" />

// Inside a TouchableOpacity
<TouchableOpacity style={styles.button}>
  <Icon name="add-circle" variant="bold" size={20} color="#fff" />
  <Text>Add Item</Text>
</TouchableOpacity>

// In a tab bar
<Icon
  name="home"
  variant={focused ? 'bold' : 'linear'}
  color={focused ? '#4F46E5' : '#9CA3AF'}
  size={24}
/>
```

---

## Icon naming reference

All icon names follow **kebab-case** format. Numbers are always separated by hyphens:

```
Element4   → element-4
Grid1      → grid-1
ArrowRight2 → arrow-right-2
Home2      → home-2
Chart21    → chart-2-1
```

Here are common examples:

| Icon          | Name                |
| ------------- | ------------------- |
| Home          | `home`              |
| Search        | `search-normal`     |
| Settings      | `setting`           |
| User          | `user`              |
| Shopping cart | `shopping-cart`     |
| Notification  | `notification-bing` |
| Arrow right   | `arrow-right`       |
| Close         | `close-circle`      |
| Tick / Check  | `tick-circle`       |
| Add           | `add-circle`        |
| Delete        | `trash`             |
| Edit          | `edit`              |
| Calendar      | `calendar`          |
| Message       | `message`           |
| Profile       | `profile-2-user`    |
| Chart         | `chart`             |
| Wallet        | `wallet`            |
| Lock          | `lock`              |
| Eye           | `eye`               |
| Filter        | `filter`            |