cl-ui-icons

A lightweight, A customizable React icon library built from SVGs, used across CaratLane applications.

Installation

# with npm
npm install cl-ui-icons

# or with yarn
yarn add cl-ui-icons

## Usage
```jsx
import React from "react";
import { Delete, Edit } from "cl-ui-icons";

const App = () => (
  <div>
    <Delete size={24} color="#FF0000" />
    <Edit size={32} color="green" />
  </div>
);

Basic Usage

import { Delete } from "cl-ui-icons";

function MyComponent() {
  return (
    <button>
      <Delete size={16} color="#333333" />
      Remove Item
    </button>
  );
}

Custom Styling

The Delete accepts standard SVG attributes and the following props:

• size: Sets both width and height (in pixels)
• color: Sets the fill or stroke color

import { Delete } from "cl-ui-icons";

function StyledDelete() {
  return (
    <Delete
      size={24}
      color="#D82F7E"
      onClick={() => console.log("Icon clicked!")}
    />
  );
}

Development (for contributors)

# Clone and install
git clone ssh://git-codecommit.ap-south-1.amazonaws.com/v1/repos/caratlane-icons
cd caratlane-icons
yarn install

# Add new SVG icons to /src/icons/
# Then generate wrappers, exports, and types:
node scripts/generate-icon-export.js

Using with CSS-in-JS libraries

import styled from "styled-components";
import { Delete } from "cl-ui-icons";

const StyledIcon = styled(Delete)`
  color: ${(props) => (props.active ? "#D82F7E" : "#CCCCCC")};
  transition: color 0.2s ease;

  &:hover {
    color: #d82f7e;
  }
`;

function MyComponent({ isActive }) {
  return <StyledIcon active={isActive} size={24} />;
}

Available Icons

| Icon Name | Description | | --------- | ------------------------------------ | | Delete | Icon for delete/remove functionality |

Icon Gallery

You can preview all icons in the gallery:

import { IconGallery } from "cl-ui-icons";

const App = () => <IconGallery />;

Adding More Icons

We plan to expand this library with additional icons in future releases. If you need a specific icon, please contact the design team.

Contributing

For cl team members who want to contribute:

1. Create your SVG icon (24x24 recommended)
2. Optimize it with SVGO
3. Add it to the src/icons directory
4. Export it in src/index.js
5. Update the version in package.json
6. Publish the new version

License

Internal use only - Copyright © 2025 cl